init: the first public commit for AFFiNE

libs/components/board-shapes/src/frame-util/components/draw-frame.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+import type { ShapeStyles } from '@toeverything/components/board-types';
+import { getShapeStyle } from '../../shared';
+
+interface RectangleSvgProps {
+    id: string;
+    style: ShapeStyles;
+    isSelected: boolean;
+    size: number[];
+    isDarkMode: boolean;
+}
+
+export const DrawFrame = React.memo(function DashedRectangle({
+    id,
+    style,
+    size,
+    isSelected,
+    isDarkMode,
+}: RectangleSvgProps) {
+    const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
+
+    const sw = 1 + strokeWidth * 1.618;
+
+    const w = Math.max(0, size[0] - sw / 2);
+    const h = Math.max(0, size[1] - sw / 2);
+
+    return (
+        <rect
+            className={
+                isSelected || style.isFilled
+                    ? 'tl-fill-hitarea'
+                    : 'tl-stroke-hitarea'
+            }
+            x={sw / 2}
+            y={sw / 2}
+            width={w}
+            height={h}
+            strokeWidth={BINDING_DISTANCE}
+        />
+    );
+});

libs/components/board-shapes/src/frame-util/components/frame-binding-indicator.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { BINDING_DISTANCE } from '@toeverything/components/board-types';
+
+interface BindingIndicatorProps {
+    strokeWidth: number;
+    size: number[];
+}
+export function BindingIndicator({ strokeWidth, size }: BindingIndicatorProps) {
+    return (
+        <rect
+            className="tl-binding-indicator"
+            x={strokeWidth}
+            y={strokeWidth}
+            width={Math.max(0, size[0] - strokeWidth / 2)}
+            height={Math.max(0, size[1] - strokeWidth / 2)}
+            strokeWidth={BINDING_DISTANCE * 2}
+        />
+    );
+}

libs/components/board-shapes/src/frame-util/frame-util.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { Utils, SVGContainer } from '@tldraw/core';
+import {
+    FrameShape,
+    DashStyle,
+    TDShapeType,
+    TDMeta,
+    GHOSTED_OPACITY,
+    LABEL_POINT,
+} from '@toeverything/components/board-types';
+import { TDShapeUtil } from '../TDShapeUtil';
+import {
+    defaultStyle,
+    getShapeStyle,
+    getBoundsRectangle,
+    transformRectangle,
+    getFontStyle,
+    transformSingleRectangle,
+} from '../shared';
+import { DrawFrame } from './components/draw-frame';
+import { styled } from '@toeverything/components/ui';
+
+type T = FrameShape;
+type E = HTMLDivElement;
+
+export class FrameUtil extends TDShapeUtil<T, E> {
+    type = TDShapeType.Frame as const;
+
+    override canBind = true;
+
+    override canClone = true;
+
+    override canEdit = true;
+
+    getShape = (props: Partial<T>): T => {
+        return Utils.deepMerge<T>(
+            {
+                id: 'id',
+                type: TDShapeType.Frame,
+                name: 'Frame',
+                parentId: 'page',
+                childIndex: 0,
+                point: [0, 0],
+                size: [1, 1],
+                rotation: 0,
+                style: defaultStyle,
+                label: '',
+                labelPoint: [0.5, 0.5],
+                workspace: props.workspace,
+            },
+            props
+        );
+    };
+
+    Component = TDShapeUtil.Component<T, E, TDMeta>(
+        (
+            {
+                shape,
+                isEditing,
+                isBinding,
+                isSelected,
+                isGhost,
+                meta,
+                bounds,
+                events,
+                onShapeBlur,
+                onShapeChange,
+            },
+            ref
+        ) => {
+            const { id, size, style } = shape;
+            return (
+                <FullWrapper ref={ref} {...events}>
+                    <SVGContainer
+                        id={shape.id + '_svg'}
+                        opacity={1}
+                        fill={'#fff'}
+                    >
+                        <DrawFrame
+                            id={id}
+                            style={style}
+                            size={size}
+                            isSelected={isSelected}
+                            isDarkMode={meta.isDarkMode}
+                        />
+                    </SVGContainer>
+                </FullWrapper>
+            );
+        }
+    );
+
+    Indicator = TDShapeUtil.Indicator<T>(({ shape }) => {
+        const { id, style, size } = shape;
+
+        const styles = getShapeStyle(style, false);
+        const sw = styles.strokeWidth;
+        return (
+            <rect
+                x={sw}
+                y={sw}
+                rx={1}
+                ry={1}
+                width={Math.max(1, size[0] - sw * 2)}
+                height={Math.max(1, size[1] - sw * 2)}
+            />
+        );
+    });
+
+    getBounds = (shape: T) => {
+        return getBoundsRectangle(shape, this.boundsCache);
+    };
+
+    override shouldRender = (prev: T, next: T) => {
+        return (
+            next.size !== prev.size ||
+            next.style !== prev.style ||
+            next.label !== prev.label
+        );
+    };
+
+    override transform = transformRectangle;
+
+    override transformSingle = transformSingleRectangle;
+
+    override hitTestPoint = (shape: T, point: number[]): boolean => {
+        return false;
+    };
+
+    override hitTestLineSegment = (
+        shape: T,
+        A: number[],
+        B: number[]
+    ): boolean => {
+        return false;
+    };
+}
+
+const FullWrapper = styled('div')({
+    width: '100%',
+    height: '100%',
+    '.tl-fill-hitarea': {
+        fill: '#F7F9FF',
+    },
+    '.tl-stroke-hitarea': {
+        fill: '#F7F9FF',
+    },
+});

libs/components/board-shapes/src/frame-util/index.ts

@@ -0,0 +1 @@
+export * from './frame-util';