init: the first public commit for AFFiNE

2026-07-16 17:46:18 +08:00 · 2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
@@ -0,0 +1,83 @@
+import React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { BasePlugin } from '../base-plugin';
+import { BlockDomInfo, HookType } from '@toeverything/framework/virgo';
+
+import View from './view';
+const PLUGIN_NAME = 'block-property';
+
+export class BlockPropertyPlugin extends BasePlugin {
+    public static override get pluginName(): string {
+        return PLUGIN_NAME;
+    }
+
+    private root: Root | undefined;
+    private root_dom: HTMLElement;
+    // record mouse moving block id
+    private current_sliding_block_info: BlockDomInfo;
+    private is_render = false;
+    private is_hover = false;
+
+    private set_is_hover = (isHover: boolean) => {
+        this.is_hover = isHover;
+    };
+    private insert_root_to_block = async () => {
+        this.root_dom = document.createElement('div');
+        this.root_dom.style.position = 'relative';
+        this.root_dom.style.zIndex = '1000';
+        this.root_dom.classList.add(`id-${PLUGIN_NAME}`);
+        this.current_sliding_block_info.dom.appendChild(this.root_dom);
+        this.root = createRoot(this.root_dom);
+    };
+
+    private on_sliding_block_change = async (blockDomInfo: BlockDomInfo) => {
+        this.current_sliding_block_info = blockDomInfo;
+        await this.insert_root_to_block();
+        this.render_view();
+        this.is_render = true;
+    };
+
+    private on_mouse_move = async (
+        event: React.MouseEvent,
+        blockDomInfo: BlockDomInfo
+    ) => {
+        if (
+            blockDomInfo.blockId !== this.current_sliding_block_info?.blockId &&
+            !this.is_hover
+        ) {
+            await this.dispose();
+
+            await this.on_sliding_block_change(blockDomInfo);
+        }
+    };
+
+    private render_view = () => {
+        this.root.render(
+            <View
+                blockDomInfo={this.current_sliding_block_info}
+                setIsHover={this.set_is_hover}
+            />
+        );
+    };
+
+    protected override on_render(): void {
+        this.hooks.addHook(
+            HookType.AFTER_ON_NODE_MOUSE_MOVE,
+            this.on_mouse_move,
+            this
+        );
+    }
+
+    override async dispose() {
+        if (this.current_sliding_block_info) {
+            this.current_sliding_block_info.dom.removeChild(this.root_dom);
+            this.current_sliding_block_info = undefined;
+        }
+
+        this.root_dom = undefined;
+        this.is_render = false;
+        if (this.root) {
+            this.root.unmount();
+        }
+    }
+}
@@ -0,0 +1,67 @@
+import React, { StrictMode, useState } from 'react';
+import { BlockDomInfo } from '@toeverything/framework/virgo';
+import style9 from 'style9';
+import { styled } from '@toeverything/components/ui';
+import { Add } from '@mui/icons-material';
+
+export default (props: {
+    blockDomInfo: BlockDomInfo;
+    setIsHover: (isHover: boolean) => void;
+}) => {
+    const { blockDomInfo, setIsHover } = props;
+
+    const [showPopover, setShowPopover] = useState(false);
+    return (
+        <StrictMode>
+            <div
+                onMouseOver={() => {
+                    setShowPopover(true);
+                    setIsHover(true);
+                }}
+                onMouseLeave={() => {
+                    setShowPopover(false);
+                    setIsHover(false);
+                }}
+            >
+                <div className={styles('triggerLine')} />
+                <div
+                    className={styles('popover', {
+                        popoverShow: showPopover,
+                    })}
+                >
+                    <Add />
+                </div>
+            </div>
+        </StrictMode>
+    );
+};
+const Container = styled('div')({
+    background: 'blue',
+    '&:hover .popover': {
+        background: 'red',
+        display: 'flex',
+    },
+});
+
+const styles = style9.create({
+    popover: {
+        backgroundColor: '#fff',
+        display: 'none',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        padding: '8px',
+        borderRadius: '0 8px 8px 8px',
+        position: 'absolute',
+    },
+    popoverShow: {
+        display: 'flex',
+    },
+    triggerLine: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        height: '4px',
+        width: '20px',
+        backgroundColor: '#aaa',
+        cursor: 'pointer',
+    },
+});