amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/src/plugin/Others/BasicToolbar.tsx

@@ -1,585 +0,0 @@
-import {
-  BasePlugin,
-  BaseEventContext,
-  BasicToolbarItem,
-  ContextMenuItem,
-  ContextMenuEventContext,
-  BasicPanelItem,
-  BuildPanelEventContext,
-  PluginEvent,
-  InsertEventContext
-} from '../../plugin';
-import {registerEditorPlugin} from '../../manager';
-import {EditorNodeType} from '../../store/node';
-import type {MenuItem} from 'amis-ui/lib/components/ContextMenu';
-
-/**
- * 用来给当前选中的元素添加一些基本的工具栏按钮。
- */
-export class BasicToolbarPlugin extends BasePlugin {
-  order = -9999;
-
-  buildEditorToolbar(
-    {id, schema}: BaseEventContext,
-    toolbars: Array<BasicToolbarItem>
-  ) {
-    const store = this.manager.store;
-    const node = store.getNodeById(id)!;
-    const parent = store.getSchemaParentById(id);
-    // let vertical = true;
-    const regionNode = node.parent as EditorNodeType; // 父级节点
-    if (Array.isArray(parent) && regionNode?.isRegion) {
-      const host = node.host as EditorNodeType;
-
-      if (node.draggable) {
-        toolbars.push({
-          iconSvg: 'drag-btn',
-          icon: 'fa fa-arrows',
-          tooltip: '按住拖动调整位置',
-          placement: 'bottom',
-          draggable: true,
-          order: -1000,
-          onDragStart: this.manager.startDrag.bind(this.manager, id)
-        });
-      }
-
-      const idx = parent.indexOf(schema);
-
-      // if (idx > 0 && node.moveable) {
-      //   let icon = 'fa fa-arrow-up';
-      //   let tooltip = '向上移动';
-
-      //   const dom = this.manager.store
-      //     .getDoc()
-      //     .querySelector(`[data-editor-id="${id}"]`);
-      //   const prevDom = this.manager.store
-      //     .getDoc()
-      //     .querySelector(`[data-editor-id="${parent[idx - 1]?.$$id}"]`);
-
-      //   if (dom && prevDom) {
-      //     const prevRect = prevDom.getBoundingClientRect();
-      //     const rect = dom.getBoundingClientRect();
-
-      //     if (Math.abs(rect.x - prevRect.x) > Math.abs(rect.y - prevRect.y)) {
-      //       vertical = false;
-      //       icon = 'fa fa-arrow-left';
-      //       tooltip = '向前移动';
-      //     }
-
-      //     toolbars.push({
-      //       icon: icon,
-      //       // tooltip: '向前移动（⌘ + ←）',
-      //       tooltip: tooltip,
-      //       onClick: () => this.manager.moveUp()
-      //     });
-      //   }
-      // }
-
-      // if (idx < parent.length - 1 && node.moveable) {
-      //   let icon = 'fa fa-arrow-down';
-      //   let tooltip = '向下移动';
-
-      //   const dom = this.manager.store
-      //     .getDoc()
-      //     .querySelector(`[data-editor-id="${id}"]`);
-      //   const nextDom = this.manager.store
-      //     .getDoc()
-      //     .querySelector(`[data-editor-id="${parent[idx + 1]?.$$id}"]`);
-
-      //   if (dom && nextDom) {
-      //     const nextRect = nextDom.getBoundingClientRect();
-      //     const rect = dom.getBoundingClientRect();
-
-      //     if (Math.abs(rect.x - nextRect.x) > Math.abs(rect.y - nextRect.y)) {
-      //       vertical = false;
-      //       icon = 'fa fa-arrow-right';
-      //       tooltip = '向后移动';
-      //     }
-
-      //     toolbars.push({
-      //       icon: icon,
-      //       // tooltip: '向后移动（⌘ + →）',
-      //       tooltip: tooltip,
-      //       onClick: () => this.manager.moveDown()
-      //     });
-      //   }
-      // }
-
-      // if (node.removable) {
-      //   toolbars.push({
-      //     icon: 'fa fa-trash-o',
-      //     // tooltip: '删除（Del）',
-      //     tooltip: '删除',
-      //     onClick: () => this.manager.del(id)
-      //   });
-      // }
-
-      if (
-        !host?.memberImmutable(regionNode.region) &&
-        store.panels.some(Panel => Panel.key === 'renderers')
-      ) {
-        const nextId = parent[idx + 1]?.$$id;
-
-        toolbars.push(
-          {
-            iconSvg: 'left-arrow-to-left',
-            tooltip: '向前插入组件',
-            // level: 'special',
-            placement: 'bottom',
-            // placement: vertical ? 'bottom' : 'right',
-            // className: vertical
-            //   ? 'ae-InsertBefore is-vertical'
-            //   : 'ae-InsertBefore',
-            onClick: () =>
-              this.manager.showInsertPanel(
-                regionNode.region,
-                regionNode.id,
-                regionNode.preferTag,
-                'insert',
-                undefined,
-                id
-              )
-          },
-          {
-            iconSvg: 'arrow-to-right',
-            tooltip: '向后插入组件',
-            // level: 'special',
-            placement: 'bottom',
-            // placement: vertical ? 'top' : 'left',
-            // className: vertical
-            //   ? 'ae-InsertAfter is-vertical'
-            //   : 'ae-InsertAfter',
-            onClick: () =>
-              this.manager.showInsertPanel(
-                regionNode.region,
-                regionNode.id,
-                regionNode.preferTag,
-                'insert',
-                undefined,
-                nextId
-              )
-          }
-        );
-      }
-    }
-
-    if (
-      !node.isVitualRenderer &&
-      (node.info.plugin.popOverBody || node.info.plugin.popOverBodyCreator)
-    ) {
-      toolbars.push({
-        icon: 'fa fa-pencil',
-        tooltip: '编辑',
-        placement: 'bottom',
-        onClick: e => this.manager.openNodePopOverForm(node.id)
-      });
-    }
-
-    // if (node.duplicatable || node.duplicatable === undefined) {
-    //   toolbars.push({
-    //     iconSvg: 'copy-btn',
-    //     icon: 'fa',
-    //     tooltip: '复制',
-    //     placement: 'bottom',
-    //     order: 999,
-    //     onClick: this.manager.duplicate.bind(this.manager, id)
-    //   });
-    // }
-
-    if (node.removable || node.removable === undefined) {
-      toolbars.push({
-        iconSvg: 'delete-btn',
-        icon: 'fa',
-        tooltip: '删除',
-        placement: 'bottom',
-        order: 999,
-        onClick: this.manager.del.bind(this.manager, id)
-      });
-    }
-
-    toolbars.push({
-      iconSvg: 'more-btn',
-      icon: 'fa fa-cog',
-      tooltip: '更多',
-      placement: 'bottom',
-      order: 1000,
-      onClick: e => {
-        if (!e.defaultPrevented) {
-          const info = (e.target as HTMLElement).parentElement!.getBoundingClientRect();
-          this.manager.openContextMenu(id, '', {
-            x: window.scrollX + info.left + info.width - 155,
-            y: window.scrollY + info.top + info.height + 8
-          });
-        }
-      }
-    });
-  }
-
-  buildEditorContextMenu(
-    {id, schema, region, selections}: ContextMenuEventContext,
-    menus: Array<ContextMenuItem>
-  ) {
-    const manager = this.manager;
-    const store = manager.store;
-    const parent = store.getSchemaParentById(id);
-    const node = store.getNodeById(id)!;
-    const paths = store.getNodePathById(id);
-    const first = paths.pop()!;
-    const host = node.host as EditorNodeType;
-    const regionNode = node.parent as EditorNodeType;
-
-    if (selections.length) {
-      // 多选时的右键菜单
-      menus.push({
-        label: '重复一份',
-        icon: 'copy-icon',
-        disabled: selections.some(item => !item.node.duplicatable),
-        onSelect: () => manager.duplicate(selections.map(item => item.id))
-      });
-
-      menus.push({
-        label: '取消多选',
-        icon: 'cancel-icon',
-        onSelect: () => store.setActiveId(id)
-      });
-
-      menus.push({
-        label: '删除',
-        icon: 'delete-icon',
-        disabled: selections.some(item => !item.node.removable),
-        className: 'text-danger',
-        onSelect: () => manager.del(selections.map(item => item.id))
-      });
-    } else if (region) {
-      const renderersPanel = store.panels.find(
-        item => item.key === 'renderers'
-      );
-
-      if (renderersPanel) {
-        // region增加点选后就不需要'插入组件'了
-        /*
-        menus.push({
-          label: '插入组件',
-          onHighlight: (isOn: boolean) => isOn && store.setHoverId(id, region),
-          onSelect: () => manager.showInsertPanel(region, id)
-        });
-        */
-        menus.push({
-          label: '插入组件',
-          onHighlight: (isOn: boolean) => isOn && store.setHoverId(id, region),
-          onSelect: () => store.showInsertRendererPanel()
-        });
-
-        menus.push({
-          label: '清空',
-          onSelect: () => manager.emptyRegion(id, region)
-        });
-
-        menus.push({
-          label: '粘贴',
-          onSelect: () => manager.paste(id, region)
-        });
-      }
-    } else {
-      menus.push({
-        label: `选中${first.label}`,
-        disabled: store.activeId === first.id,
-        data: id,
-        onSelect: (id: string) => store.setActiveId(id),
-        onHighlight: (isHiglight: boolean, id: string) =>
-          isHiglight && store.setHoverId(id)
-      });
-
-      if (paths.length) {
-        const children = paths
-          .filter(node => !node.isRegion && node.info?.editable !== false)
-          .reverse()
-          .map(node => ({
-            label: node.label,
-            data: node.id,
-            onSelect: (id: string) => store.setActiveId(id),
-            onHighlight: (isHiglight: boolean, currentId: string) =>
-              isHiglight && store.setHoverId(currentId)
-          }));
-
-        children.length &&
-          menus.push({
-            label: '选中层级',
-            children: children
-          });
-      }
-
-      menus.push({
-        label: '取消选中',
-        disabled: !store.activeId || store.activeId !== id,
-        onSelect: () => store.setActiveId('')
-      });
-
-      menus.push('|');
-
-      menus.push({
-        label: '重复一份',
-        disabled: !node.duplicatable,
-        onSelect: () => manager.duplicate(id)
-      });
-
-      menus.push({
-        label: '复制配置',
-        onSelect: () => manager.copy(id)
-      });
-
-      menus.push({
-        label: '剪切配置',
-        disabled: !node.removable,
-        onSelect: () => manager.cut(id)
-      });
-
-      menus.push({
-        label: '粘贴配置',
-        disabled:
-          !Array.isArray(parent) ||
-          !node.parent ||
-          node.info?.typeMutable === false ||
-          !node.replaceable,
-        onSelect: () => manager.paste(id)
-      });
-
-      menus.push({
-        label: '删除',
-        disabled: !node.removable,
-        className: 'text-danger',
-        onSelect: () => manager.del(id)
-      });
-
-      menus.push('|');
-
-      const idx = Array.isArray(parent) ? parent.indexOf(schema) : -1;
-
-      menus.push({
-        label: '向前移动',
-        disabled:
-          !(Array.isArray(parent) && idx > 0) ||
-          !node.moveable ||
-          !node.prevSibling,
-        onSelect: () => manager.moveUp()
-      });
-
-      menus.push({
-        label: '向后移动',
-        disabled:
-          !(Array.isArray(parent) && idx < parent.length - 1) ||
-          !node.moveable ||
-          !node.nextSibling,
-        onSelect: () => manager.moveDown()
-      });
-
-      /** 「点选（默认向后插入）」+ 「向前移动」可以替换 「前面插入节点」 */
-      /*
-      menus.push({
-        label: '前面插入节点',
-        disabled:
-          !Array.isArray(parent) ||
-          !regionNode ||
-          !regionNode.isRegion ||
-          !host ||
-          host.memberImmutable(regionNode.region) ||
-          !store.panels.some(Panel => Panel.key === 'renderers'),
-        onSelect: () =>
-          this.manager.showInsertPanel(
-            regionNode.region,
-            regionNode.id,
-            regionNode.preferTag,
-            'insert',
-            undefined,
-            id
-          )
-      });
-      */
-
-      /** 「点选（默认向后插入）」可以替换 「后面插入节点」 */
-      /*
-      menus.push({
-        label: '后面插入节点',
-        disabled:
-          !Array.isArray(parent) ||
-          !regionNode ||
-          !regionNode.isRegion ||
-          !host ||
-          host.memberImmutable(regionNode.region) ||
-          !store.panels.some(Panel => Panel.key === 'renderers'),
-        onSelect: () =>
-          this.manager.showInsertPanel(
-            regionNode.region,
-            regionNode.id,
-            regionNode.preferTag,
-            'insert',
-            undefined,
-            parent[idx + 1]?.$$id
-          )
-      });
-      */
-
-      menus.push('|');
-
-      // const configPanel = store.panels.find(item => item.key === 'config');
-      // menus.push({
-      //   label: '设置',
-      //   onSelect: () => manager.openConfigPanel(id),
-      //   disabled: !configPanel
-      // });
-
-      // const codePanel = store.panels.find(item => item.key === 'code');
-      // menus.push({
-      //   label: '编辑代码',
-      //   onSelect: () => manager.openCodePanel(id),
-      //   disabled:
-      //     !codePanel || (store.activeId === id && store.getPanelKey() === 'code')
-      // });
-
-      menus.push({
-        label: '撤销（Undo）',
-        disabled: !store.canUndo,
-        onSelect: () => store.undo()
-      });
-
-      menus.push({
-        label: '重做（Redo）',
-        disabled: !store.canRedo,
-        onSelect: () => store.redo()
-      });
-
-      // menus.push('|');
-
-      /** 可使用「点选（默认向后插入）」替代 */
-      /*
-      const renderersPanel = store.panels.find(
-        item => item.key === 'renderers'
-      );
-      if (first.childRegions.length && renderersPanel) {
-        if (first.childRegions.length > 1) {
-          menus.push({
-            label: '插入组件',
-            children: first.childRegions.map(region => ({
-              label: `${region.label}`,
-              data: region.region,
-              onHighlight: (isOn: boolean, region: string) =>
-                isOn ? store.setHoverId(id, region) : store.setHoverId(''),
-              onSelect: (region: string) => manager.showInsertPanel(region, id)
-            }))
-          });
-        } else {
-          menus.push({
-            label: '插入组件',
-            data: first.childRegions[0].region,
-            onHighlight: (isOn: boolean, region: string) =>
-              isOn ? store.setHoverId(id, region) : store.setHoverId(''),
-            onSelect: (region: string) => manager.showInsertPanel(region, id)
-          });
-        }
-      }
-      */
-
-      // 使用新版插入组件面板（抽屉弹出式）
-      const renderersPanel = store.panels.find(
-        item => item.key === 'renderers'
-      );
-      if (first.childRegions.length && renderersPanel) {
-        if (first.childRegions.length > 1) {
-          menus.push({
-            label: '插入组件',
-            children: first.childRegions.map(region => ({
-              label: `${region.label}`,
-              data: region.region,
-              onHighlight: (isOn: boolean, region: string) =>
-                isOn ? store.setHoverId(id, region) : store.setHoverId(''),
-              onSelect: () => store.showInsertRendererPanel()
-            }))
-          });
-        } else {
-          menus.push({
-            label: '插入组件',
-            data: first.childRegions[0].region,
-            onHighlight: (isOn: boolean, region: string) =>
-              isOn ? store.setHoverId(id, region) : store.setHoverId(''),
-            onSelect: () => store.showInsertRendererPanel()
-          });
-        }
-      }
-
-      /** 「点选（默认向后插入）」+ 「删除」可以替换 「更改类型」 */
-      /*
-      menus.push({
-        label: '更改类型',
-        disabled:
-          !node.host ||
-          node.info?.typeMutable === false ||
-          !node.parent.isRegion ||
-          !store.panels.some(Panel => Panel.key === 'renderers') ||
-          !node.replaceable,
-        onSelect: () => manager.showReplacePanel(id)
-      });
-      */
-    }
-  }
-
-  buildEditorPanel(
-    context: BuildPanelEventContext,
-    panels: Array<BasicPanelItem>
-  ) {
-    if (!context.selections.length) {
-      return;
-    }
-
-    let menus: Array<ContextMenuItem> = [];
-    const contextMenuContext: ContextMenuEventContext = {
-      ...context,
-      data: menus,
-      region: ''
-    };
-
-    menus = this.manager.buildContextMenus(contextMenuContext);
-
-    if (menus.length) {
-      panels.push({
-        key: 'contextmenu',
-        icon: 'fa fa-cog',
-        title: '操作',
-        menus: menus,
-        render: this.manager.makeSchemaFormRender({
-          body: [
-            {
-              type: 'button-group',
-              block: true,
-              buttons: menus
-                .filter(item => item !== '|')
-                .map(menu => ({
-                  ...(menu as MenuItem),
-                  type: 'button',
-                  onClick: (menu as MenuItem).onSelect
-                }))
-            }
-          ]
-        })
-      });
-    }
-  }
-
-  afterInsert(event: PluginEvent<InsertEventContext>) {
-    const context = event.context;
-
-    if (context.node && context.subRenderer?.plugin?.popOverBody) {
-      const id = context.data.$$id;
-
-      if (id) {
-        setTimeout(() => {
-          this.manager.setActiveId(id);
-          requestAnimationFrame(() => {
-            this.manager.openNodePopOverForm(id);
-          });
-        }, 200);
-      }
-    }
-  }
-}
-
-registerEditorPlugin(BasicToolbarPlugin);

package/src/plugin/Others/DataDebug.tsx

@@ -1,134 +0,0 @@
-import {registerEditorPlugin} from '../../manager';
-import {BaseEventContext, BasePlugin, BasicToolbarItem} from '../../plugin';
-import React from 'react';
-import JsonView, {InteractionProps} from 'react-json-view';
-
-/**
- * 添加调试功能
- */
-export class DataDebugPlugin extends BasePlugin {
-  buildEditorToolbar(
-    {id, schema, node}: BaseEventContext,
-    toolbars: Array<BasicToolbarItem>
-  ) {
-    const comp = node.getComponent();
-    if (!comp || !comp.props.data || !comp.props.store) {
-      return;
-    }
-
-    // const renderers = getRenderers();
-    // const renderInfo = find(
-    //   renderers,
-    //   renderer => renderer.Renderer && comp instanceof renderer.Renderer
-    // ) as RendererConfig;
-
-    // if (!renderInfo || !renderInfo.storeType) {
-    //   return;
-    // }
-    const store = comp.props.store;
-
-    toolbars.push({
-      icon: 'fa fa-bug',
-      order: -1000,
-      placement: 'bottom',
-      tooltip: '上下文数据',
-      onClick: () =>
-        this.openDebugForm(
-          comp.props.data,
-          store.updateData && store.data === comp.props.data
-            ? values => store.updateData(values)
-            : undefined
-        )
-    });
-  }
-
-  dataViewer = {
-    type: 'json',
-    name: 'ctx',
-    asFormItem: true,
-    className: 'm-b-none',
-    component: ({
-      value,
-      onChange,
-      readOnly
-    }: {
-      value: any;
-      onChange: (value: any) => void;
-      readOnly?: boolean;
-    }) => {
-      const [index, setIndex] = React.useState(0);
-      let start = value || {};
-      const stacks = [start];
-
-      while (Object.getPrototypeOf(start) !== Object.prototype) {
-        const superData = Object.getPrototypeOf(start);
-
-        if (Object.prototype.toString.call(superData) !== '[object Object]') {
-          break;
-        }
-
-        stacks.push(superData);
-        start = superData;
-      }
-
-      function emitChange(e: InteractionProps) {
-        const obj = Object.create(stacks[1] || Object.prototype);
-        Object.keys(e.updated_src).forEach(
-          key => (obj[key] = (e.updated_src as any)[key])
-        );
-        onChange(obj);
-      }
-
-      return (
-        <div className="aeDataChain">
-          <div className="aeDataChain-aside">
-            <ul>
-              {stacks.map((_, i) => (
-                <li
-                  className={i === index ? 'is-active' : ''}
-                  key={i}
-                  onClick={() => setIndex(i)}
-                >
-                  {i === 0 ? '当前' : i === 1 ? '上层' : `上${i}层`}
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="aeDataChain-main">
-            <JsonView
-              name={false}
-              src={stacks[index]}
-              enableClipboard={false}
-              iconStyle="square"
-              onAdd={index === 0 && !readOnly ? emitChange : false}
-              onEdit={index === 0 && !readOnly ? emitChange : false}
-              onDelete={index === 0 && !readOnly ? emitChange : false}
-              collapsed={2}
-            />
-          </div>
-        </div>
-      );
-    }
-  };
-
-  async openDebugForm(data: any, callback?: (values: any) => void) {
-    const result = await this.manager.scaffold(
-      {
-        title: '上下文数据',
-        body: [
-          {
-            ...this.dataViewer,
-            readOnly: callback ? false : true
-          }
-        ]
-      },
-      {
-        ctx: data
-      }
-    );
-
-    callback?.((result as any).ctx);
-  }
-}
-
-registerEditorPlugin(DataDebugPlugin);