feat(core): support workspace drag source

Author: janryWang

packages/core/src/models/DragSource.ts

@@ -12,6 +12,10 @@ export class DragSource {
     this.prefix = uid()
   }
 
+  get size() {
+    return this.getAllSources().length
+  }
+
   setSources(sources: Record<string, ITreeNode[]>) {
     each(sources, (data, group) => {
       this.setSourcesByGroup(group, data)

packages/core/src/models/Workspace.ts

@@ -5,12 +5,16 @@ import { History } from './History'
 import { uid, ICustomEvent, EventContainer } from '@designable/shared'
 import { HistoryGotoEvent, HistoryRedoEvent, HistoryUndoEvent } from '../events'
 import { IEngineContext } from '../types'
+import { DragSource } from './DragSource'
 export interface IViewportMatcher {
   contentWindow?: Window
   viewportElement?: HTMLElement
 }
 
 export interface IWorkspace {
+  id?: string
+  title?: string
+  description?: string
   operation: IOperation
 }
 
@@ -34,6 +38,8 @@ export class Workspace {
 
   viewport: Viewport
 
+  source: DragSource
+
   outline: Viewport
 
   operation: Operation
@@ -48,6 +54,7 @@ export class Workspace {
     this.id = props.id || uid()
     this.title = props.title
     this.description = props.description
+    this.source = new DragSource()
     this.viewport = new Viewport({
       engine: this.engine,
       workspace: this,
@@ -102,13 +109,26 @@ export class Workspace {
 
   serialize(): IWorkspace {
     return {
+      id: this.id,
+      title: this.title,
+      description: this.description,
       operation: this.operation.serialize(),
     }
   }
 
   from(workspace?: IWorkspace) {
-    if (workspace?.operation) {
+    if (!workspace) return
+    if (workspace.operation) {
       this.operation.from(workspace.operation)
     }
+    if (workspace.id) {
+      this.id = workspace.id
+    }
+    if (workspace.title) {
+      this.title = workspace.title
+    }
+    if (workspace.description) {
+      this.description = workspace.description
+    }
   }
 }

packages/playground/src/main.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import {
   Designer,
@@ -237,31 +237,23 @@ const Actions = observer(() => (
 const engine = createDesigner()
 
 const App = () => {
-  const [view, setView] = useState('design')
-
   return (
     <Designer engine={engine}>
-      <MainPanel logo={<Logo />} actions={<Actions />}>
-        <CompositePanel>
-          <CompositePanel.Item
-            title="panels.Component"
-            icon={<IconWidget infer="Component" />}
-          >
-            <DragSourceWidget title="sources.Inputs" name="form" />
-            <DragSourceWidget title="sources.Displays" name="form" />
-            <DragSourceWidget title="sources.Feedbacks" name="form" />
-          </CompositePanel.Item>
-          <CompositePanel.Item
-            title="panels.OutlinedTree"
-            icon={<IconWidget infer="Outline" />}
-          >
-            <OutlineTreeWidget />
-          </CompositePanel.Item>
-          <CompositePanel.Item title="历史记录" icon="History">
-            <HistoryWidget />
-          </CompositePanel.Item>
-        </CompositePanel>
-        <Workbench>
+      <Workbench>
+        <MainPanel logo={<Logo />} actions={<Actions />}>
+          <CompositePanel>
+            <CompositePanel.Item title="panels.Component" icon="Component">
+              <DragSourceWidget title="sources.Inputs" name="form" />
+              <DragSourceWidget title="sources.Displays" name="form" />
+              <DragSourceWidget title="sources.Feedbacks" name="form" />
+            </CompositePanel.Item>
+            <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
+              <OutlineTreeWidget />
+            </CompositePanel.Item>
+            <CompositePanel.Item title="panels.History" icon="History">
+              <HistoryWidget />
+            </CompositePanel.Item>
+          </CompositePanel>
           <WorkspacePanel>
             <ToolbarPanel>
               <DesignerToolsWidget />
@@ -284,11 +276,11 @@ const App = () => {
               </ViewPanel>
             </ViewportPanel>
           </WorkspacePanel>
-        </Workbench>
-        <SettingsPanel title="panels.PropertySettings">
-          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
-        </SettingsPanel>
-      </MainPanel>
+          <SettingsPanel title="panels.PropertySettings">
+            <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
+          </SettingsPanel>
+        </MainPanel>
+      </Workbench>
     </Designer>
   )
 }

packages/react/src/widgets/DragSourceWidget/index.tsx

@@ -3,7 +3,7 @@ import { TreeNode } from '@designable/core'
 import { isFn } from '@designable/shared'
 import { observer } from '@formily/reactive-react'
 import cls from 'classnames'
-import { useDesigner, usePrefix } from '../../hooks'
+import { useDesigner, usePrefix, useWorkspace } from '../../hooks'
 import { IconWidget } from '../IconWidget'
 import { TextWidget } from '../TextWidget'
 import './styles.less'
@@ -22,6 +22,7 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
   (props) => {
     const prefix = usePrefix('drag-source')
     const designer = useDesigner()
+    const workspace = useWorkspace()
     const [expand, setExpand] = useState(props.defaultExpand)
     const renderNode = (node: TreeNode) => {
       return (
@@ -42,6 +43,9 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
       )
     }
 
+    const source =
+      workspace.source.size > 0 ? workspace.source : designer.source
+
     return (
       <div
         className={cls(prefix, props.className, {
@@ -65,7 +69,7 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
         </div>
         <div className={prefix + '-content-wrapper'}>
           <div className={prefix + '-content'}>
-            {designer.source.mapSourcesByGroup(
+            {source.mapSourcesByGroup(
               props.name,
               isFn(props.children) ? props.children : renderNode
             )}