backup

Author: codebdy

package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.1.4",
     "@reduxjs/toolkit": "^1.9.5",
+    "@rxdrag/locales": "^0.2.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.39",
     "@types/react": "^18.2.18",

package.json

@@ -0,0 +1,65 @@
+import { memo, useEffect, useMemo, useState } from "react"
+import { ThemeProvider } from "styled-components"
+import { IThemeToken } from "../theme"
+import { useToken } from "antd/es/theme/internal"
+import { EditorStore } from "../classes"
+import { WorkflowEditorStoreContext } from "../contexts"
+import { ConfigRoot } from "./ConfigRoot"
+import { ILocales, LocalesManager } from "@rxdrag/locales"
+import { LocalesContext } from "../react-locales"
+import { defalutLocales } from "../locales"
+
+const WorkFlowScopeInner = memo((props: {
+  mode?: 'dark' | 'light',
+  themeToken?: IThemeToken,
+  children?: React.ReactNode,
+}) => {
+  const { mode, children, themeToken } = props;
+  const [, token] = useToken();
+
+  const theme: { token: IThemeToken, mode?: 'dark' | 'light' } = useMemo(() => {
+    return {
+      token: themeToken || token,
+      mode
+    }
+  }, [mode, themeToken, token])
+  const store: EditorStore = useMemo(() => {
+    return new EditorStore()
+  }, [])
+
+
+  return (
+    <WorkflowEditorStoreContext.Provider value={store}>
+      <ThemeProvider theme={theme}>
+        {
+          children
+        }
+      </ThemeProvider>
+    </WorkflowEditorStoreContext.Provider>
+  )
+})
+
+export const WorkFlowScope = memo((props: {
+  mode?: 'dark' | 'light',
+  themeToken?: IThemeToken,
+  children?: React.ReactNode,
+  lang?: string,
+  locales?: ILocales
+}) => {
+  const { children, lang, locales, ...other } = props
+  const [localesManager] = useState(new LocalesManager(lang, defalutLocales))
+
+  useEffect(() => {
+    locales && localesManager.registerLocales(locales)
+  }, [localesManager, locales])
+
+  return (
+    <LocalesContext.Provider value={localesManager}>
+      <ConfigRoot themeMode={other.mode}>
+        <WorkFlowScopeInner {...other}>
+          {children}
+        </WorkFlowScopeInner>
+      </ConfigRoot>
+    </LocalesContext.Provider>
+  )
+})

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

@@ -0,0 +1,23 @@
+import { memo } from "react"
+import { styled } from "styled-components"
+import { ZoomBar } from "../ZoomBar"
+import { EndNode } from "../nodes/EndNode"
+import { StartNode } from "../nodes/StartNode"
+
+const Canvas = styled.div`
+  flex: 1;
+  background-color: ${props => props.theme.mode === "light" ? "#f5f5f7" : undefined} ;
+  padding: 56px 16px;
+  position: relative;
+  cursor: grab;//grabbing
+`
+
+export const WorkflowDiagram = memo(() => {
+  return (
+    <Canvas style={{ transform: `scale(1)` }}>
+      <StartNode />
+      <EndNode />
+      <ZoomBar />
+    </Canvas>
+  )
+})

src/workflow-editor/WorkflowDiagram/WorkFlowScope.tsx

@@ -2,8 +2,7 @@ import { LeftOutlined, RocketOutlined } from "@ant-design/icons"
 import { Avatar, Button, Space } from "antd"
 import { memo } from "react"
 import { styled } from "styled-components"
-import { ZoomBar } from "../ZoomBar"
-import { StartNode } from "../nodes/StartNode"
+import { WorkflowDiagram } from "../WorkflowDiagram"
 
 const Container = styled.div`
   flex:1;
@@ -52,16 +51,7 @@ const NavIcon = styled.span`
   }
 `
 
-const Canvas = styled.div`
-  flex: 1;
-  background-color: ${props => props.theme.mode === "light" ? "#f5f5f7" : undefined} ;
-  padding: 56px 16px;
-  position: relative;
-  cursor: grab;//grabbing
-`
-
-export const WorkFlowEditorInner = memo((props: {
-}) => {
+export const WorkFlowEditorInner = memo((props: {}) => {
   return (
     <Container className="workflow-editor">
       <Toolbar>
@@ -82,10 +72,7 @@ export const WorkFlowEditorInner = memo((props: {
           <Button type="primary">发布</Button>
         </Space>
       </Toolbar>
-      <Canvas style={{ transform: `scale(1)` }}>
-        <StartNode />
-        <ZoomBar />
-      </Canvas>
+      <WorkflowDiagram />
     </Container>
   )
 })

src/workflow-editor/WorkflowDiagram/index.tsx

@@ -1,20 +1,21 @@
 import { memo } from "react"
 import { WorkFlowEditorInner } from "./WorkFlowEditorInner"
-import { ConfigRoot } from "./ConfigRoot"
-import { WorkFlowShell } from "./WorkFlowShell"
+import { WorkFlowScope } from "../WorkflowDiagram/WorkFlowScope"
 import { IThemeToken } from "../theme"
+import { ILocales } from "@rxdrag/locales"
 
-
-export const WorkflowEditor = memo((props: {
-  themeMode?: "dark" | "light",
+export type WorkflowEditorProps = {
+  themeMode?: 'dark' | 'light',
   themeToken?: IThemeToken,
-}) => {
+  lang?: string,
+  locales?: ILocales
+}
+
+export const WorkflowEditor = memo((props: WorkflowEditorProps) => {
   const { themeMode, themeToken } = props;
   return (
-    <ConfigRoot themeMode={themeMode}>
-      <WorkFlowShell mode={themeMode} themeToken={themeToken}>
-        <WorkFlowEditorInner />
-      </WorkFlowShell>
-    </ConfigRoot>
+    <WorkFlowScope mode={themeMode} themeToken={themeToken}>
+      <WorkFlowEditorInner />
+    </WorkFlowScope>
   )
 })

src/workflow-editor/WorkflowEditor/WorkFlowEditorInner.tsx

@@ -0,0 +1,12 @@
+import { ILocales } from "@rxdrag/locales";
+
+export const defalutLocales: ILocales = {
+  "zh-CN": {
+    baseSettings: "基础设置",
+    publish: "发布",
+  },
+  'en-US': {
+    baseSettings: "Base Settings",
+    publish: "Publish",
+  }
+}

src/workflow-editor/WorkflowEditor/WorkFlowShell.tsx

@@ -1,4 +1,5 @@
 import { PlusOutlined } from "@ant-design/icons"
+import { Popover } from "antd"
 import { memo } from "react"
 import { styled } from "styled-components"
 
@@ -23,11 +24,11 @@ const AddButtonBox = styled.div`
         margin: auto;
         width: 2px;
         height: 100%;
-        background-color: #cacaca
+        background-color: ${props => props.theme.mode === "light" ? "#cacaca" : "rgba(255,255,255,0.35)"};
     }
 `
 
-const Button = styled.div`
+const ButtonShell = styled.div`
   user-select: none;
   width: 240px;
   padding: 20px 0 32px;
@@ -70,11 +71,13 @@ const Button = styled.div`
 export const AddButton = memo(() => {
   return (
     <AddButtonBox className="add-node-button-box">
-      <Button>
-        <div className="btn">
-          <PlusOutlined />
-        </div>
-      </Button>
+      <ButtonShell>
+        <Popover placement="rightTop" title={"text"} content={"content"} trigger="click">
+          <div className="btn">
+            <PlusOutlined />
+          </div>
+        </Popover>
+      </ButtonShell>
     </AddButtonBox>
   )
 })