From 6061cffa34df205eb3f84a6e01e4d5f8920a815b Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Sat, 3 Jun 2023 16:07:38 +0800 Subject: [PATCH] feat: update sketch logic --- packages/design/src/context.ts | 33 +++++---- packages/design/src/css/index.less | 1 + packages/design/src/css/modules/sketch.less | 7 ++ .../design/src/modules/dashboard/index.tsx | 43 +----------- packages/design/src/modules/sketch/index.tsx | 68 +++++++++++++++++++ packages/design/src/types/context.ts | 4 +- 6 files changed, 101 insertions(+), 55 deletions(-) create mode 100644 packages/design/src/css/modules/sketch.less create mode 100644 packages/design/src/modules/sketch/index.tsx diff --git a/packages/design/src/context.ts b/packages/design/src/context.ts index 1b22cc6..a5be539 100644 --- a/packages/design/src/context.ts +++ b/packages/design/src/context.ts @@ -1,5 +1,6 @@ import { createContext } from 'react'; -import { DesignData, DesignState, DesignAction, DesignContext } from './types'; +import type { Data } from '@idraw/types'; +import { DesignData, DesignState, DesignAction, DesignContext, DesignDrawDataType } from './types'; import { parseComponentsToDrawData } from './util/view-data'; export function createDesignData(): DesignData { @@ -10,12 +11,24 @@ export function createDesignData(): DesignData { }; } +function parseDrawData(drawDataType: DesignDrawDataType, designData: DesignData | null): Data { + let drawData: Data = { elements: [] }; + if (drawDataType === 'component') { + drawData = parseComponentsToDrawData(designData?.components || []); + } + return drawData; +} + export function createDesignContextState(opts?: Partial): DesignState { + const activeDrawDataType: DesignDrawDataType = 'component'; + const designData: DesignData = opts?.designData || createDesignData(); + const viewDrawData = parseDrawData(activeDrawDataType, designData); + return { - designData: opts?.designData || createDesignData(), - activeDrawDataType: 'component', // TODO + designData: designData, + activeDrawDataType: activeDrawDataType, themeMode: opts?.themeMode || 'light', - viewDrawData: null, + viewDrawData: viewDrawData, viewDrawUUID: null }; } @@ -48,19 +61,13 @@ export function createDesignReducer(state: DesignState, action: DesignAction): D if (!action?.payload?.activeDrawDataType) { return state; } - let newState = { + const newState = { ...state, ...{ - activeDrawDataType: action?.payload.activeDrawDataType + activeDrawDataType: action?.payload.activeDrawDataType, + viewDrawData: parseDrawData(action?.payload?.activeDrawDataType, state.designData) } }; - if (action.payload.activeDrawDataType === 'component') { - newState = { - ...newState, - viewDrawData: parseComponentsToDrawData(state.designData?.components || []) - }; - } - return newState; } diff --git a/packages/design/src/css/index.less b/packages/design/src/css/index.less index 376c0ee..df57789 100644 --- a/packages/design/src/css/index.less +++ b/packages/design/src/css/index.less @@ -5,6 +5,7 @@ @import './modules/header.less'; @import './modules/dashboard.less'; +@import './modules/sketch.less'; @import './modules/toolbar.less'; @import './modules/panel-layer.less'; @import './modules/split-pane.less'; diff --git a/packages/design/src/css/modules/sketch.less b/packages/design/src/css/modules/sketch.less new file mode 100644 index 0000000..e32d6df --- /dev/null +++ b/packages/design/src/css/modules/sketch.less @@ -0,0 +1,7 @@ +@import '../variable.less'; + +@mod-xxx: ~'@{prefix}-mod-sketch'; + +.@{mod-xxx} { + border: 1px solid #f0f0f0; +} diff --git a/packages/design/src/modules/dashboard/index.tsx b/packages/design/src/modules/dashboard/index.tsx index a5936e0..5fe95bd 100644 --- a/packages/design/src/modules/dashboard/index.tsx +++ b/packages/design/src/modules/dashboard/index.tsx @@ -1,11 +1,9 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import classnames from 'classnames'; -import { Core, MiddlewareScroller, MiddlewareSelector } from '@idraw/core'; -import { calcElementsContextSize } from '@idraw/util'; -import { getData } from '../../data'; import { Toolbar } from '../toolbar'; import { PanelLayer } from '../panel-layer'; import { Header } from '../header'; +import { Sketch } from '../sketch'; import type { CSSProperties } from 'react'; import { createPrefixName } from '../../css'; import { HEADER_HEIGHT } from './layout'; @@ -25,11 +23,7 @@ export interface DashboardProps { } export const Dashboard = (props: DashboardProps) => { - const ref = useRef(null); - const refCore = useRef(null); const { className, style, width, height } = props; - const data = getData(); - const devicePixelRatio = window.devicePixelRatio; const [openLeftSider, setOpenLeftSider] = useState(true); const [openRightSider, setOpenRightSider] = useState(false); @@ -38,23 +32,6 @@ export const Dashboard = (props: DashboardProps) => { const [rightWidth, setRightWidth] = useState(openRightSider ? rightSiderDefaultWidth : 0); const [centerWidth, setCenterWidth] = useState(width - leftWidth - rightWidth); - useEffect(() => { - if (ref?.current) { - if (!refCore?.current) { - const options = { - width: centerWidth, - height: height - HEADER_HEIGHT, - devicePixelRatio - }; - const core = new Core(ref.current, options); - core.use(MiddlewareScroller); - core.use(MiddlewareSelector); - core.setData(data); - refCore.current = core; - } - } - }, []); - useEffect(() => { const prevWidth = leftWidth + centerWidth + rightWidth; let newLeftWidth = Math.floor(width * (leftWidth / prevWidth)); @@ -69,20 +46,6 @@ export const Dashboard = (props: DashboardProps) => { setCenterWidth(newCenterWidth); }, [height, width]); - useEffect(() => { - if (!refCore?.current) { - return; - } - const core = refCore.current; - const contextSize = calcElementsContextSize(data.elements, { viewWidth: width, viewHeight: height }); - core.resize({ - width: centerWidth, - height: height - HEADER_HEIGHT, - devicePixelRatio, - ...contextSize - }); - }, [height, centerWidth]); - return (
@@ -108,7 +71,7 @@ export const Dashboard = (props: DashboardProps) => {
-
+
Right
diff --git a/packages/design/src/modules/sketch/index.tsx b/packages/design/src/modules/sketch/index.tsx new file mode 100644 index 0000000..530d4f2 --- /dev/null +++ b/packages/design/src/modules/sketch/index.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useRef, useContext } from 'react'; +import classnames from 'classnames'; +import { Core, MiddlewareScroller, MiddlewareSelector } from '@idraw/core'; +import { calcElementsContextSize } from '@idraw/util'; +import { createPrefixName } from '../../css'; +import { Context } from '../../context'; +import type { CSSProperties } from 'react'; + +const modName = 'mod-sketch'; + +const prefixName = createPrefixName(modName); + +export interface DashboardProps { + className?: string; + style?: CSSProperties; + width: number; + height: number; +} + +export const Sketch = (props: DashboardProps) => { + const ref = useRef(null); + const refCore = useRef(null); + const { className, style, width, height } = props; + const devicePixelRatio = window.devicePixelRatio; + + const { state } = useContext(Context); + + useEffect(() => { + if (ref?.current) { + if (!refCore?.current) { + const options = { + width, + height, + devicePixelRatio + }; + const core = new Core(ref.current, options); + core.use(MiddlewareScroller); + core.use(MiddlewareSelector); + core.setData(state.viewDrawData); + refCore.current = core; + } + } + }, []); + + useEffect(() => { + if (!refCore?.current) { + return; + } + const core = refCore.current; + const contextSize = calcElementsContextSize(state.viewDrawData.elements, { viewWidth: width, viewHeight: height }); + core.resize({ + width, + height, + devicePixelRatio, + ...contextSize + }); + }, [height, width]); + + useEffect(() => { + if (!refCore?.current || !state.viewDrawData) { + return; + } + const core = refCore.current; + core.setData(state.viewDrawData); + }, [state.viewDrawData]); + + return
; +}; diff --git a/packages/design/src/types/context.ts b/packages/design/src/types/context.ts index 4d1c7f2..2d46987 100644 --- a/packages/design/src/types/context.ts +++ b/packages/design/src/types/context.ts @@ -4,8 +4,8 @@ import { DesignData, DesignDrawDataType } from './data'; export interface DesignState { activeDrawDataType: DesignDrawDataType; - designData: DesignData | null; - viewDrawData: Data | null; + designData: DesignData; + viewDrawData: Data; viewDrawUUID: string | null; themeMode: 'light' | 'dark'; }