fix: support add components with popover (#155)

* feat: add drag panel & popover component * feat: update web ide version to 1.3.11 * feat: add components-popover * fix: update sidebar default width * feat: add global components popover * fix: _menuData default value * feat: add addComponent event * revert: remove isCollapsed prop * fix: update local icon font url
NetEase · May 20, 2024 · f17ccbb · f17ccbb
1 parent f854f75
commit f17ccbb
Show file tree

Hide file tree

Showing 21 changed files with 798 additions and 292 deletions.
diff --git a/apps/playground/src/helpers/mock-files.ts b/apps/playground/src/helpers/mock-files.ts
@@ -165,6 +165,7 @@ class App extends React.Component {
   render() {
     return (
       <Page title={tango.stores.app.title} subTitle={111}>
+        <Section tid="section0" />
         <Section tid="section1" title="Section Title">
           your input: <Input tid="input1" defaultValue="hello" />
           copy input: <Input value={tango.page.input1?.value} />
@@ -191,7 +192,7 @@ class App extends React.Component {
         </Section>
         <Section title="原生 DOM" tid="section4">
           <h1 style={{ ...{ color: "red" }, fontSize: 64 }}>
-          hello world
+            hello world
           </h1>
           <div
             style={{

diff --git a/apps/playground/src/helpers/prototypes.ts b/apps/playground/src/helpers/prototypes.ts
@@ -45,14 +45,18 @@ const Snippet2ColumnLayout: IComponentPrototype = {
 const Snippet3ColumnLayout: IComponentPrototype = {
   name: 'Snippet3ColumnLayout',
   title: '三列布局',
-  icon: 'icon-column3',
+  icon: 'icon-column-3',
   type: 'snippet',
   package: '@music163/antd',
+  // FIXME: Column 组件 需要更新为 defineComponent
   initChildren: `
   <Columns columns={12}>
-    <Column colSpan={4}></Column>
-    <Column colSpan={4}></Column>
-    <Column colSpan={4}></Column>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+    </Column>
+    <Column colSpan={4}>
+  </Column>
   </Columns>
   `,
   relatedImports: ['Columns', 'Column'],
@@ -76,13 +80,9 @@ const SnippetButtonGroup: IComponentPrototype = {
 // hack some prototypes
 basePrototypes['Section'].siblingNames = [
   'SnippetButtonGroup',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
-  'Section',
+  'Snippet2ColumnLayout',
+  'Snippet3ColumnLayout',
+  'SnippetSuccessResult',
 ];
 
 export const nativeDomPrototypes = () => {

diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
@@ -28,35 +28,6 @@ import {
 import { Action } from '@music163/tango-ui';
 import { useState } from 'react';
 
-// 1. 实例化工作区
-const workspace = new Workspace({
-  entry: '/src/index.js',
-  files: sampleFiles,
-  prototypes,
-});
-
-// inject workspace to window for debug
-(window as any).__workspace__ = workspace;
-
-// 2. 引擎初始化
-const engine = createEngine({
-  workspace,
-  defaultActiveView: 'design', // dual code design
-});
-
-// @ts-ignore
-window.__workspace__ = workspace;
-
-// 3. 沙箱初始化
-const sandboxQuery = new DndQuery({
-  context: 'iframe',
-});
-
-// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
-createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_6d4hj5u0bjx.js',
-});
-
 const menuData = {
   common: [
     {
@@ -91,6 +62,36 @@ const menuData = {
   ],
 };
 
+// 1. 实例化工作区
+const workspace = new Workspace({
+  entry: '/src/index.js',
+  files: sampleFiles,
+  prototypes,
+});
+
+// inject workspace to window for debug
+(window as any).__workspace__ = workspace;
+
+// 2. 引擎初始化
+const engine = createEngine({
+  workspace,
+  menuData,
+  defaultActiveView: 'design', // dual code design
+});
+
+// @ts-ignore
+window.__workspace__ = workspace;
+
+// 3. 沙箱初始化
+const sandboxQuery = new DndQuery({
+  context: 'iframe',
+});
+
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js',
+});
+
 /**
  * 5. 平台初始化，访问 https://local.netease.com:6006/
  */

diff --git a/apps/playground/src/pages/mail.tsx b/apps/playground/src/pages/mail.tsx
@@ -45,7 +45,7 @@ const sandboxQuery = new DndQuery({
 
 // 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js',
 });
 
 /**
@@ -112,6 +112,7 @@ export default function App() {
                   if (sandboxWindow.TangoMail) {
                     if (sandboxWindow.TangoMail.menuData) {
                       setMenuData(sandboxWindow.TangoMail.menuData);
+                      engine.designer.setMenuData(sandboxWindow.TangoMail.menuData);
                     }
                     if (sandboxWindow.TangoMail.prototypes) {
                       workspace.setComponentPrototypes(sandboxWindow.TangoMail.prototypes);

diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
@@ -14,7 +14,7 @@ const BLACK_LIST = ['codeSetter', 'eventSetter', 'modelSetter', 'routerSetter'];
 BUILT_IN_SETTERS.filter((setter) => !BLACK_LIST.includes(setter.name)).forEach(register);
 
 createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cou9i7556tl.js',
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js',
 });
 
 export default {

diff --git a/packages/core/src/factory.ts b/packages/core/src/factory.ts
@@ -1,3 +1,4 @@
+import { MenuDataType } from '@music163/tango-helpers';
 import { Designer, DesignerViewType, Engine, SimulatorNameType } from './models';
 import { IWorkspace } from './models/interfaces';
 
@@ -6,6 +7,10 @@ interface ICreateEngineOptions {
    * 自定义工作区
    */
   workspace?: IWorkspace;
+  /**
+   * 菜单信息
+   */
+  menuData?: MenuDataType;
   /**
    * 默认的模拟器模式
    */
@@ -30,6 +35,7 @@ export function createEngine({
   defaultActiveView = 'design',
   defaultSimulatorMode = 'desktop',
   defaultActiveSidebarPanel = '',
+  menuData,
 }: ICreateEngineOptions) {
   const engine = new Engine({
     workspace,
@@ -38,6 +44,7 @@ export function createEngine({
       simulator: defaultSimulatorMode,
       activeView: defaultActiveView,
       activeSidebarPanel: defaultActiveSidebarPanel,
+      menuData,
     }),
   });
 

diff --git a/packages/core/src/models/designer.ts b/packages/core/src/models/designer.ts
@@ -1,5 +1,6 @@
 import { action, computed, makeObservable, observable, toJS } from 'mobx';
 import { IWorkspace } from './interfaces';
+import { MenuDataType } from '@music163/tango-helpers';
 
 export type SimulatorNameType = 'desktop' | 'phone';
 
@@ -19,6 +20,10 @@ interface IViewportBounding {
 interface IDesignerOptions {
   workspace: IWorkspace;
   simulator?: SimulatorNameType | ISimulatorType;
+  /**
+   * 菜单配置
+   */
+  menuData: MenuDataType;
   activeSidebarPanel?: string;
   /**
    * 默认激活的视图模式
@@ -68,6 +73,16 @@ export class Designer {
    */
   _showSmartWizard = false;
 
+  /**
+   * 是否显示添加组件面板
+   */
+  _showAddComponentPopover = false;
+
+  /**
+   * 添加组件面板的位置
+   */
+  _addComponentPopoverPosition = { clientX: 0, clientY: 0 };
+
   /**
    * 是否显示右侧面板
    */
@@ -79,9 +94,9 @@ export class Designer {
   _isPreview = false;
 
   /**
-   * 默认展开的侧边栏
+   * 菜单列表
    */
-  defaultActiveSidebarPanel?: string;
+  _menuData?: MenuDataType = null;
 
   private readonly workspace: IWorkspace;
 
@@ -113,15 +128,32 @@ export class Designer {
     return this._showRightPanel;
   }
 
+  get showAddComponentPopover() {
+    return this._showAddComponentPopover;
+  }
+
+  get addComponentPopoverPosition() {
+    return this._addComponentPopoverPosition;
+  }
+
+  get menuData() {
+    return this._menuData ?? ([] as MenuDataType);
+  }
+
   constructor(options: IDesignerOptions) {
     this.workspace = options.workspace;
 
     const {
       simulator,
+      menuData,
       activeSidebarPanel: defaultActiveSidebarPanel,
       activeView: defaultActiveView,
     } = options;
 
+    if (menuData) {
+      this.setMenuData(menuData);
+    }
+
     // 默认设计器模式
     if (simulator) {
       this.setSimulator(simulator);
@@ -144,6 +176,9 @@ export class Designer {
       _activeSidebarPanel: observable,
       _showSmartWizard: observable,
       _showRightPanel: observable,
+      _showAddComponentPopover: observable,
+      _addComponentPopoverPosition: observable,
+      _menuData: observable,
       _isPreview: observable,
       simulator: computed,
       viewport: computed,
@@ -152,6 +187,9 @@ export class Designer {
       isPreview: computed,
       showRightPanel: computed,
       showSmartWizard: computed,
+      showAddComponentPopover: computed,
+      addComponentPopoverPosition: computed,
+      menuData: computed,
       setSimulator: action,
       setViewport: action,
       setActiveView: action,
@@ -160,6 +198,7 @@ export class Designer {
       toggleRightPanel: action,
       toggleSmartWizard: action,
       toggleIsPreview: action,
+      toggleAddComponentPopover: action,
     });
   }
 
@@ -186,6 +225,11 @@ export class Designer {
       this._activeSidebarPanel = '';
     }
   }
+
+  setMenuData(menuData: MenuDataType) {
+    this._menuData = menuData;
+  }
+
   closeSidebarPanel() {
     this._activeSidebarPanel = '';
   }
@@ -198,6 +242,22 @@ export class Designer {
     this._showRightPanel = value ?? !this._showRightPanel;
   }
 
+  /**
+   * 显示添加组件面板
+   * @param value 是否显示
+   * @param position 坐标
+   */
+  toggleAddComponentPopover(
+    value: boolean,
+    position: {
+      clientX: number;
+      clientY: number;
+    } = this.addComponentPopoverPosition,
+  ) {
+    this._showAddComponentPopover = value;
+    this._addComponentPopoverPosition = position;
+  }
+
   toggleIsPreview(value: boolean) {
     this._isPreview = value ?? !this._isPreview;
     if (value) {