Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): remove rootRect and modify layout

Browse Source
This commit is contained in:
austaras
2022-07-26 17:28:19 +08:00
parent 8b5e47ed73
commit b9f46028a8
21 changed files with 138 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/editor-plugins/src/base-plugin.ts
View File

@@ -41,8 +41,8 @@ export abstract class BasePlugin implements Plugin {
return hooks.removeHook(...args);
},
};
this.on_render = this.on_render.bind(this);
hooks.addHook(HookType.RENDER, this.on_render, this);
this._onRender = this._onRender.bind(this);
hooks.addHook(HookType.RENDER, this._onRender, this);
}
/**
@@ -55,7 +55,7 @@ export abstract class BasePlugin implements Plugin {
/**
* will trigger multiple times
*/
protected on_render(): void {
protected _onRender(): void {
// implement in subclass
}

2
libs/components/editor-plugins/src/block-property/index.tsx
View File

@@ -60,7 +60,7 @@ export class BlockPropertyPlugin extends BasePlugin {
);
};
protected override on_render(): void {
protected override _onRender(): void {
this.hooks.addHook(
HookType.AFTER_ON_NODE_MOUSE_MOVE,
this.on_mouse_move,

2
libs/components/editor-plugins/src/comment/Plugin.tsx
View File

@@ -12,7 +12,7 @@ export class AddCommentPlugin extends BasePlugin {
private root: PluginRenderRoot;
protected override on_render(): void {
protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: AddCommentPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,

3
libs/components/editor-plugins/src/menu/command-menu/CommandMenu.tsx
View File

@@ -14,8 +14,7 @@ export class CommandMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
protected override on_render(): void {
if (this.editor.isWhiteboard) return;
protected override _onRender(): void {
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);

8
libs/components/editor-plugins/src/menu/group-menu/GropuMenu.tsx
View File

@@ -4,7 +4,7 @@ import {
PluginHooks,
Virgo,
} from '@toeverything/components/editor-core';
import { domToRect, Point } from '@toeverything/utils';
import { Point } from '@toeverything/utils';
import { GroupDirection } from '@toeverything/framework/virgo';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { DragItem } from './DragItem';
@@ -46,7 +46,7 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
setShowMenu(false);
}
},
[setShowMenu]
[]
);
const handleRootDragOver = useCallback(
@@ -128,8 +128,8 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
if (editor.container) {
setPosition(
new Point(
groupBlock.dom.offsetLeft - editor.container.offsetLeft,
groupBlock.dom.offsetTop - editor.container.offsetTop
groupBlock.dom.offsetLeft,
groupBlock.dom.offsetTop
)
);
}

4
libs/components/editor-plugins/src/menu/group-menu/Line.tsx
View File

@@ -22,9 +22,9 @@ export const Line = function ({ direction, editor, groupBlock }: LineProps) {
if (groupBlock && groupBlock.dom && editor.container) {
setRect(
Rect.fromLWTH(
groupBlock.dom.offsetLeft - editor.container.offsetLeft,
groupBlock.dom.offsetLeft,
groupBlock.dom.offsetWidth,
groupBlock.dom.offsetTop - editor.container.offsetTop,
groupBlock.dom.offsetTop,
groupBlock.dom.offsetHeight
)
);

2
libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx
View File

@@ -13,7 +13,7 @@ export class GroupMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
protected override on_render(): void {
protected override _onRender(): void {
if (this.editor.isWhiteboard) return;
this.root = new PluginRenderRoot({
name: PLUGIN_NAME,

2
libs/components/editor-plugins/src/menu/inline-menu/Plugin.tsx
View File

@@ -12,7 +12,7 @@ export class InlineMenuPlugin extends BasePlugin {
private root: PluginRenderRoot;
protected override on_render(): void {
protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: InlineMenuPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,

26
libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
View File

@@ -39,8 +39,8 @@ type LineInfo = {
blockInfo: BlockDomInfo;
};
function Line(props: { lineInfo: LineInfo }) {
const { lineInfo } = props;
function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
const { lineInfo, rootRect } = props;
if (!lineInfo || lineInfo.direction === BlockDropPlacement.none) {
return null;
}
@@ -58,7 +58,7 @@ function Line(props: { lineInfo: LineInfo }) {
...lineStyle,
width: intersectionRect.width,
height: 2,
left: intersectionRect.x - blockInfo.rootRect.x,
left: intersectionRect.x - rootRect.x,
};
const topLineStyle = {
...horizontalLineStyle,
@@ -66,22 +66,22 @@ function Line(props: { lineInfo: LineInfo }) {
};
const bottomLineStyle = {
...horizontalLineStyle,
top: intersectionRect.bottom + 1 - blockInfo.rootRect.y,
top: intersectionRect.bottom + 1 - rootRect.y,
};
const verticalLineStyle = {
...lineStyle,
width: 2,
height: intersectionRect.height,
top: intersectionRect.y - blockInfo.rootRect.y,
top: intersectionRect.y - rootRect.y,
};
const leftLineStyle = {
...verticalLineStyle,
left: intersectionRect.x - 10 - blockInfo.rootRect.x,
left: intersectionRect.x - 10 - rootRect.x,
};
const rightLineStyle = {
...verticalLineStyle,
left: intersectionRect.right + 10 - blockInfo.rootRect.x,
left: intersectionRect.right + 10 - rootRect.x,
};
const styleMap = {
left: leftLineStyle,
@@ -120,6 +120,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
const [visible, setVisible] = useState(defaultVisible);
const [anchorEl, setAnchorEl] = useState<Element>();
const [rootRect, setRootRect] = useState(() => new DOMRect());
const [block, setBlock] = useState<BlockDomInfo | undefined>();
const [line, setLine] = useState<LineInfo | undefined>(undefined);
@@ -135,6 +136,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
const onDragStart = async (event: React.DragEvent<Element>) => {
editor.dragDropManager.isOnDrag = true;
if (block == null) return;
setRootRect(editor.container.getBoundingClientRect());
const dragImage = await editor.blockHelper.getBlockDragImg(
block.blockId
);
@@ -182,6 +184,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
const sub = blockInfo.subscribe(block => {
setBlock(block);
if (block != null) {
setRootRect(editor.container.getBoundingClientRect());
setVisible(true);
}
});
@@ -194,6 +197,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
setLine(undefined);
} else {
const { direction, blockInfo } = data;
setRootRect(editor.container.getBoundingClientRect());
setLine(prev => {
if (
prev?.blockInfo.blockId !== blockInfo.blockId ||
@@ -210,7 +214,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
}
});
return () => sub.unsubscribe();
}, [editor.dragDropManager, lineInfo]);
}, [editor, lineInfo]);
return (
<>
@@ -223,8 +227,8 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
block.rect.left -
MENU_WIDTH -
MENU_BUTTON_OFFSET
) - block.rootRect.left,
top: block.rect.top - block.rootRect.top,
) - rootRect.left,
top: block.rect.top - rootRect.top,
opacity: visible ? 1 : 0,
zIndex: 1,
}}
@@ -246,7 +250,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
}
</DragComponent>
)}
<Line lineInfo={line} />
<Line lineInfo={line} rootRect={rootRect} />
</>
);
};

2
libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx
View File

@@ -147,7 +147,7 @@ export class LeftMenuPlugin extends BasePlugin {
this._blockInfo.next(blockInfo);
};
protected override on_render(): void {
protected override _onRender(): void {
this.root = new PluginRenderRoot({
name: LeftMenuPlugin.pluginName,
render: (...args) => {

2
libs/components/editor-plugins/src/menu/reference-menu/index.tsx
View File

@@ -13,7 +13,7 @@ export class ReferenceMenuPlugin extends BasePlugin {
return PLUGIN_NAME;
}
protected override on_render(): void {
protected override _onRender(): void {
const container = document.createElement('div');
// TODO: remove
container.classList.add(`id-${PLUGIN_NAME}`);

2
libs/components/editor-plugins/src/menu/selection-group-menu/SelectionGroupPlugin.tsx
View File

@@ -12,7 +12,7 @@ export class SelectionGroupPlugin extends BasePlugin {
private root: PluginRenderRoot | undefined;
protected override on_render() {
protected override _onRender() {
this.root = new PluginRenderRoot({
name: SelectionGroupPlugin.pluginName,
render: this.editor.reactRenderRoot?.render,

2
libs/components/editor-plugins/src/placeholder/Placeholder.tsx
View File

@@ -12,7 +12,7 @@ export class PlaceholderPlugin extends BasePlugin {
return PLUGIN_NAME;
}
protected override on_render(): void {
protected override _onRender(): void {
const container = document.createElement('div');
// TODO remove
container.classList.add(`id-${PLUGIN_NAME}`);