重构目录

Author: codebdy

src/example/WorkflowEditor/WorkFlowEditorInner.tsx

@@ -3,7 +3,7 @@ import { Avatar, Button, Dropdown, MenuProps, Space } from "antd"
 import { memo, useCallback, useMemo, useState } from "react"
 import { styled } from "styled-components"
 import classNames from "classnames"
-import { NavTabs, Toolbar, WorkflowDiagram, useImport } from "../../workflow-editor"
+import { NavTabs, Toolbar, FlowEditorCanvas, useImport } from "../../workflow-editor"
 import { useTranslate } from "../../workflow-editor/react-locales"
 import { useExport } from "../../workflow-editor"
 import { PublishButton } from "./PublishButton"
@@ -101,7 +101,7 @@ export const WorkFlowEditorInner = memo((props: {
       </Toolbar>
       {
         selectedTab === TabType.flowDesign &&
-        <WorkflowDiagram />
+        <FlowEditorCanvas />
       }
     </Container>
   )

src/example/WorkflowEditor/index.tsx

@@ -2,7 +2,7 @@ import { memo } from "react"
 import { WorkFlowEditorInner } from "./WorkFlowEditorInner"
 import { ILocales } from "@rxdrag/locales"
 import { IThemeToken } from "../../workflow-editor"
-import { IMaterialUIs, WorkFlowScope } from "../../workflow-editor/"
+import { IMaterialUIs, FlowEditorScope } from "../../workflow-editor/"
 
 export type WorkflowEditorProps = {
   themeMode?: 'dark' | 'light',
@@ -15,14 +15,14 @@ export type WorkflowEditorProps = {
 export const WorkflowEditor = memo((props: WorkflowEditorProps) => {
   const { themeMode, themeToken, lang, locales, materialUis, ...other } = props;
   return (
-    <WorkFlowScope
+    <FlowEditorScope
       mode={themeMode}
       themeToken={themeToken}
       lang={lang}
       locales={locales}
       materialUis = {materialUis}
     >
       <WorkFlowEditorInner {...other} />
-    </WorkFlowScope>
+    </FlowEditorScope>
   )
 })

src/workflow-editor/WorkflowDiagram/ConfigRoot.tsx renamed to src/workflow-editor/FlowEditor/ConfigRoot.tsx

@@ -6,7 +6,7 @@ import { ZoomBar } from "./ZoomBar"
 import { SettingsPanel } from "./SettingsPanel"
 import { OperationBar } from "./OperationBar"
 
-const DiagramContainer = styled.div`
+const CanvasContainer = styled.div`
   flex: 1;
   display: flex;
   flex-flow: column;
@@ -40,7 +40,7 @@ export interface IPosition {
   scrollTop: number
 }
 
-export const WorkflowDiagram = memo((
+export const FlowEditorCanvas = memo((
   props: {
     className?: string,
     style?: CSSProperties,
@@ -99,7 +99,7 @@ export const WorkflowDiagram = memo((
   }, [])
 
   return (
-    <DiagramContainer {...props}>
+    <CanvasContainer {...props}>
       <Canvas
         ref={canvasRef}
         className={"flow-canvas"}
@@ -126,6 +126,6 @@ export const WorkflowDiagram = memo((
         onZoomOut={haneldZoomOut}
       />
       <SettingsPanel />
-    </DiagramContainer >
+    </CanvasContainer >
   )
 })

src/workflow-editor/WorkflowDiagram/WorkflowDiagram.tsx renamed to src/workflow-editor/FlowEditor/FlowEditorCanvas.tsx

@@ -0,0 +1,56 @@
+import { useToken } from "antd/es/theme/internal";
+import { memo, useMemo, useEffect } from "react";
+import { ThemeProvider } from "styled-components";
+import { EditorEngine } from "../../classes";
+import { WorkflowEditorStoreContext } from "../../contexts";
+import { INodeMaterial, IMaterialUIs } from "../../interfaces";
+import { useTranslate } from "../../react-locales";
+import { IThemeToken } from "../../theme";
+import { defaultMaterials } from "../defaultMaterials";
+
+export const FlowEditorScopeInner = memo((props: {
+  mode?: 'dark' | 'light',
+  themeToken?: IThemeToken,
+  children?: React.ReactNode,
+  materials?: INodeMaterial[],
+  materialUis?: IMaterialUIs,
+}) => {
+  const { mode, children, themeToken, materials, materialUis } = props;
+  const [, token] = useToken();
+  const t = useTranslate()
+
+  const theme: { token: IThemeToken, mode?: 'dark' | 'light' } = useMemo(() => {
+    return {
+      token: themeToken || token,
+      mode
+    }
+  }, [mode, themeToken, token])
+  const store: EditorEngine = useMemo(() => {
+    return new EditorEngine()
+  }, [])
+
+  useEffect(() => {
+    store.t = t
+  }, [store, t])
+
+  useEffect(() => {
+    const oldMaterials = store.materials
+    const oldMaterialUis = store.materialUis
+    store.materials = [...oldMaterials, ...defaultMaterials, ...materials || []]
+    store.materialUis = { ...oldMaterialUis, ...materialUis }
+    return () => {
+      store.materials = oldMaterials;
+      store.materialUis = oldMaterialUis;
+    }
+  }, [materialUis, materials, store])
+
+  return (
+    <WorkflowEditorStoreContext.Provider value={store}>
+      <ThemeProvider theme={theme}>
+        {
+          store && children
+        }
+      </ThemeProvider>
+    </WorkflowEditorStoreContext.Provider>
+  )
+})

src/workflow-editor/FlowEditor/FlowEditorScope/FlowEditorScopeInner.tsx

@@ -0,0 +1,40 @@
+import { memo, useEffect, useState } from "react"
+import { IThemeToken } from "../../theme"
+import { ConfigRoot } from "../ConfigRoot"
+import { ILocales, LocalesManager } from "@rxdrag/locales"
+import { LocalesContext } from "../../react-locales"
+import { defalutLocales } from "../../locales"
+import { IMaterialUIs, INodeMaterial } from "../../interfaces/material"
+import { FlowEditorScopeInner } from "./FlowEditorScopeInner"
+
+export const FlowEditorScope = memo((props: {
+  mode?: 'dark' | 'light',
+  themeToken?: IThemeToken,
+  children?: React.ReactNode,
+  lang?: string,
+  locales?: ILocales,
+  materials?: INodeMaterial[],
+  materialUis?: IMaterialUIs,
+}) => {
+  const { children, lang, locales, ...other } = props
+  const [localesManager, setLocalesManager] = useState(new LocalesManager(lang, defalutLocales))
+
+  useEffect(() => {
+    locales && localesManager.registerLocales(locales)
+  }, [localesManager, locales])
+
+  useEffect(() => {
+    //暂时这么处理，后面把语言切换移动到locales-react
+    setLocalesManager(new LocalesManager(lang, defalutLocales))
+  }, [lang])
+
+  return (
+    <LocalesContext.Provider value={localesManager}>
+      <ConfigRoot themeMode={other.mode}>
+        <FlowEditorScopeInner {...other}>
+          {children}
+        </FlowEditorScopeInner>
+      </ConfigRoot>
+    </LocalesContext.Provider>
+  )
+})