Merge pull request #246 from codebdy/add-zoomable-editor

Add zoomable editor

Author: codebdy

examples/app-designer-example/package.json

@@ -43,6 +43,7 @@
     "@rxdrag/react-fieldy": "workspace:*",
     "@rxdrag/react-antd-shell": "workspace:*",
     "@rxdrag/react-locales": "workspace:*",
+    "@rxdrag/core": "workspace:*",
     "@rxdrag/react-core": "workspace:*",
     "@rxdrag/react-antd-materials": "workspace:*",
     "@rxdrag/locales": "workspace:*",

examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/ComponentTree.tsx

@@ -0,0 +1,79 @@
+import { Tree } from "antd";
+import { DataNode } from "antd/es/tree";
+import { memo, useCallback, useMemo } from "react"
+import { TreeContainer } from "../common/TreeContainer";
+import { useModule } from "../../hooks/useModule";
+import { useDesignerEngine, useGetNode } from "@rxdrag/react-core";
+import { ITreeNode } from "@rxdrag/core"
+import { IControllerMeta } from "@rxdrag/minions-runtime-react";
+
+const { DirectoryTree } = Tree;
+
+export type ReactionableNode = {
+  node: ITreeNode<unknown, IControllerMeta>,
+  children?: ReactionableNode[]
+}
+
+export const ComponentTree = memo(() => {
+  const module = useModule()
+  const engine = useDesignerEngine()
+  const docs = engine?.getAllDocuments()
+  const getNode = useGetNode()
+  console.log("===>ComponentTree", module, docs)
+
+  const getReactionableSchemas = useCallback((node: ITreeNode<unknown, IControllerMeta>) => {
+    const nodes: ReactionableNode[] = []
+    let activeNodes = nodes
+    if (node.meta["x-controller"]?.id) {
+      const rNode: ReactionableNode = {
+        node: node,
+        children: []
+      }
+      nodes.push(rNode)
+      activeNodes = rNode.children || []
+    }
+
+    for (const childId of node.children) {
+      const child = getNode(childId)
+      if (child) {
+        const children = getReactionableSchemas(child as ITreeNode<unknown, IControllerMeta>)
+        activeNodes.push(...children)
+      }
+    }
+    return nodes
+  }, [getNode])
+
+  const getSchemaTreeOfView = useCallback((id: string) => {
+    const doc = docs?.find(doc => doc.id === id)
+    const rootNode = doc?.getRootNode()
+    if (rootNode) {
+      return getReactionableSchemas(rootNode as ITreeNode<unknown, IControllerMeta>)
+    }
+
+  }, [docs, getReactionableSchemas])
+
+  const getOneNode = useCallback((rNode: ReactionableNode): DataNode => {
+    return {
+      key: rNode.node.id,
+      title: rNode.node.meta?.["x-controller"]?.name || rNode.node.title,
+      children: rNode.children?.map(child => getOneNode(child))
+    }
+  }, [])
+
+  const treeData: DataNode[] = useMemo(() => {
+    return module?.views?.map(view => ({
+      key: view.id,
+      title: view.title,
+      children: getSchemaTreeOfView(view.id)?.map(schema => getOneNode(schema)),
+    })) || []
+  }, [getOneNode, getSchemaTreeOfView, module?.views])
+
+  return (
+    <TreeContainer>
+      <DirectoryTree
+        selectable={false}
+        treeData={treeData}
+      />
+    </TreeContainer>
+  )
+})

examples/app-designer-example/src/FrontendDesigner/BottomConsole/FlowDesigner/index.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, memo, useCallback, useMemo, useState } from "react"
 import styled from "styled-components"
 import { Button, Space, Tooltip, theme } from "antd"
-import { FunctionOutlined, ControlOutlined, CloseOutlined, AppstoreOutlined } from "@ant-design/icons"
+import { FunctionOutlined, ControlOutlined, CloseOutlined, PartitionOutlined, NodeIndexOutlined } from "@ant-design/icons"
 import { FXes } from "./FXes"
 import { Flows } from "./Flows"
 import { LeftNav } from "../common/LeftNav"
@@ -13,6 +13,7 @@ import { activityMaterialCategories, activityMaterialLocales } from "../minion-m
 import { IActivityMaterial } from "@rxdrag/minions-schema"
 import { Toolbar } from "./Toolbar"
 import { useThemeMode } from "@rxdrag/react-core"
+import { ComponentTree } from "./ComponentTree"
 
 const Content = styled.div`
   flex: 1;
@@ -24,6 +25,7 @@ const SaveButton = styled(Button)`
 `
 
 enum NavType {
+  componentTree = "componentTree",
   toolbox = "toolbox",
   flows = "flows",
   fxes = "fxes",
@@ -43,6 +45,10 @@ export const FlowDesigner = memo(() => {
     return materials.concat(...activityMaterialCategories.map(category => category.materials))
   }, [])
 
+  const handleToggleComponents = useCallback(() => {
+    setNavType(type => type === NavType.componentTree ? null : NavType.componentTree)
+  }, [])
+
   const handleToggleToolbox = useCallback(() => {
     setNavType(type => type === NavType.toolbox ? null : NavType.toolbox)
   }, [])
@@ -73,17 +79,25 @@ export const FlowDesigner = memo(() => {
             <Tooltip title="元件箱" placement="right">
               <Button
                 type={navType === NavType.toolbox ? "link" : "text"}
-                icon={<AppstoreOutlined />}
+                icon={<NodeIndexOutlined />}
                 onClick={handleToggleToolbox}
               />
             </Tooltip>
+            <Tooltip title="组件树" placement="right">
+              <Button
+                type={navType === NavType.componentTree ? "link" : "text"}
+                icon={<PartitionOutlined />}
+                onClick={handleToggleComponents}
+              />
+            </Tooltip>
             <Tooltip title="编排" placement="right">
               <Button
                 type={navType === NavType.flows ? "link" : "text"}
                 icon={<ControlOutlined />}
                 onClick={handleToggleFlows}
               />
             </Tooltip>
+
             <Tooltip title="子编排" placement="right">
               <Button
                 type={navType === NavType.fxes ? "link" : "text"}
@@ -100,10 +114,16 @@ export const FlowDesigner = memo(() => {
             minWidth={160}
           >
             <Title>
+              {
+                NavType.componentTree === navType &&
+                <span>
+                  组件树
+                </span>
+              }
               {
                 NavType.toolbox === navType &&
                 <span>
-                  元件
+                  元件箱
                 </span>
               }
               {
@@ -125,6 +145,10 @@ export const FlowDesigner = memo(() => {
                 onClick={handleCloseLeft}
               />
             </Title>
+            {
+              navType === NavType.componentTree &&
+              <ComponentTree />
+            }
             {
               navType === NavType.toolbox &&
               <Toolbox materialCategories={activityMaterialCategories} />

examples/app-designer-example/src/FrontendDesigner/ModuleUiDesigner/ModuleUiDesignerInner.tsx

@@ -8,6 +8,7 @@ import { TabsProps } from "antd"
 import styled from "styled-components"
 import { FlowDesigner } from "../BottomConsole/FlowDesigner"
 import { ScriptDesigner } from "../BottomConsole/ScriptDesigner"
+import { ModuleContext } from "../contexts"
 
 const Label = styled.div`
   display: flex;
@@ -52,16 +53,20 @@ export const ModuleUiDesignerInner = memo(() => {
   }, [])
 
   return (
-    module
-      ? <ZoomableEditor
-        toolbox={
-          Toolbox && <Toolbox />
-        }
-        schemas={module?.views}
-        bottomConsole={{
-          items
-        }}
-      />
-      : <></>
+    <ModuleContext.Provider value={module}>
+      {
+        module
+          ? <ZoomableEditor
+            toolbox={
+              Toolbox && <Toolbox />
+            }
+            schemas={module?.views}
+            bottomConsole={{
+              items
+            }}
+          />
+          : <></>
+      }
+    </ModuleContext.Provider>
   )
 })

examples/app-designer-example/src/FrontendDesigner/contexts.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { IModule } from "../interfaces/module";
+
+export const ModuleContext = createContext<IModule | undefined>(undefined)

examples/app-designer-example/src/FrontendDesigner/hooks/useModule.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ModuleContext } from "../contexts";
+
+export function useModule() {
+  return useContext(ModuleContext)
+}

examples/app-designer-example/src/data/Mock.ts

@@ -0,0 +1,5 @@
+export class Mock {
+
+}
+
+export const globalMock = new Mock()

examples/app-designer-example/src/data/mudules.ts

@@ -6,17 +6,93 @@ const rootNodeSchema: INodeSchema = {
   componentName: "Page"
 }
 
+const userList = {
+  "componentName": "Page",
+  "slots": {},
+  "children": [
+    {
+      "componentName": "Form",
+      "props": {
+        "colon": false
+      },
+      "x-controller": {
+        "id": "LlRDj22u",
+        "name": "查询表单"
+      },
+      "slots": {},
+      "children": [
+        {
+          "componentName": "Input",
+          "x-controller": {
+            "id": "Ddl53loc",
+            "name": "字段1"
+          },
+          "slots": {},
+          "children": []
+        },
+        {
+          "componentName": "Input",
+          "x-controller": {
+            "id": "ndwJ5LwA",
+            "name": "字段2"
+          },
+          "slots": {},
+          "children": []
+        }
+      ]
+    },
+    {
+      "componentName": "Table",
+      "selfRender": true,
+      "x-controller": {
+        "id": "JClydKG7",
+        "name": "用户列表",
+        "isArray": true,
+      },
+      "slots": {},
+      "children": [
+        {
+          "componentName": "TableColumn",
+          "props": {
+            "title": "Column1"
+          },
+          "slots": {},
+          "children": []
+        },
+        {
+          "componentName": "TableColumn",
+          "props": {
+            "title": "Column2"
+          },
+          "slots": {},
+          "children": []
+        },
+        {
+          "componentName": "TableColumn",
+          "props": {
+            "title": "Column3"
+          },
+          "slots": {},
+          "children": []
+        }
+      ]
+    }
+  ]
+}
+
 export const defaultModules: { [device: string]: IModule[] | undefined } = {
   [DeviceType.admin]: [
     {
       id: "users",
       title: "用户管理",
       views: [
         {
+          id: "user-index",
           title: "入口页",
-          schema: rootNodeSchema,
+          schema: userList,
         },
         {
+          id: "user-edit",
           title: "编辑对话框",
           schema: rootNodeSchema,
         }
@@ -37,10 +113,12 @@ export const defaultModules: { [device: string]: IModule[] | undefined } = {
       title: "用户管理(h5)",
       views: [
         {
+          id: "h5-user-index",
           title: "入口页(h5)",
           schema: rootNodeSchema,
         },
         {
+          id: "h5-user-eidit",
           title: "编辑对话框",
           schema: rootNodeSchema,
         }
@@ -61,10 +139,12 @@ export const defaultModules: { [device: string]: IModule[] | undefined } = {
       title: "用户管理(门户)",
       views: [
         {
+          id: "website-user-index",
           title: "入口页(门户)",
           schema: rootNodeSchema,
         },
         {
+          id: "weibsite-user-edit",
           title: "编辑对话框",
           schema: rootNodeSchema,
         }
@@ -85,10 +165,12 @@ export const defaultModules: { [device: string]: IModule[] | undefined } = {
       title: "用户管理(大屏)",
       views: [
         {
+          id: "lg-user-index",
           title: "入口页(大屏)",
           schema: rootNodeSchema,
         },
         {
+          id: "lg-user-edit",
           title: "编辑对话框",
           schema: rootNodeSchema,
         }

examples/example-common/src/controller/shortcuts/IShortcutControllerMeta.ts

@@ -1,4 +1,4 @@
-import { IControllerMeta } from "@rxdrag/minions-runtime-react";
+import { IOldControllerMeta } from "@rxdrag/minions-runtime-react";
 
 export enum ActionType {
   list = "list",
@@ -7,7 +7,7 @@ export enum ActionType {
   search = "search"
 }
 
-export interface IShortcutControllerMeta extends IControllerMeta {
+export interface IShortcutControllerMeta extends IOldControllerMeta {
   actionType?: ActionType,
   url?: string,
   entityName?: string,