@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.10

package/src/layouts/CodeEditor.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
@@ -36,14 +37,19 @@ export default defineComponent({
     },
 
     type: {
-      type: [String],
+      type: String,
       default: () => '',
     },
 
     language: {
-      type: [String],
+      type: String,
       default: () => 'javascript',
     },
+
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   emits: ['initd', 'save'],
@@ -51,10 +57,18 @@ export default defineComponent({
   setup(props, { emit }) {
     let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
     let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+
     const values = ref('');
     const loading = ref(false);
     const codeEditor = ref<HTMLDivElement>();
 
+    const resizeObserver = new globalThis.ResizeObserver(
+      throttle((): void => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300),
+    );
+
     const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
@@ -71,11 +85,6 @@ export default defineComponent({
       return vsEditor?.setValue(values.value);
     };
 
-    const resizeHandler = () => {
-      vsEditor?.layout();
-      vsDiffEditor?.layout();
-    };
-
     const getEditorValue = () =>
       props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
@@ -85,11 +94,8 @@ export default defineComponent({
       const options = {
         value: values.value,
         language: props.language,
-        tabSize: 2,
         theme: 'vs-dark',
-        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-        fontSize: 15,
-        formatOnPaste: true,
+        ...props.options,
       };
 
       if (props.type === 'diff') {
@@ -107,6 +113,7 @@ export default defineComponent({
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
+          e.stopPropagation();
           emit('save', getEditorValue());
         }
       });
@@ -117,7 +124,7 @@ export default defineComponent({
         });
       }
 
-      globalThis.addEventListener('resize', resizeHandler);
+      resizeObserver.observe(codeEditor.value);
     };
 
     watch(
@@ -140,7 +147,7 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      globalThis.removeEventListener('resize', resizeHandler);
+      resizeObserver.disconnect();
     });
 
     return {

package/src/layouts/Framework.vue

@@ -2,7 +2,13 @@
   <div class="m-editor">
     <slot name="nav" class="m-editor-nav-menu"></slot>
 
-    <magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor>
+    <magic-code-editor
+      v-if="showSrc"
+      class="m-editor-content"
+      :init-values="root"
+      :options="codeOptions"
+      @save="saveCode"
+    ></magic-code-editor>
 
     <div class="m-editor-content" v-else>
       <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
@@ -48,21 +54,28 @@ export default defineComponent({
     Resizer,
   },
 
+  props: {
+    codeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
   setup() {
-    const services = inject<Services>('services');
+    const { editorService, uiService } = inject<Services>('services') || {};
 
-    const root = computed(() => services?.editorService.get<MApp>('root'));
+    const root = computed(() => editorService?.get<MApp>('root'));
 
     return {
       root,
-      pageLength: computed(() => root.value?.items?.length || 0),
-      showSrc: computed(() => services?.uiService.get<boolean>('showSrc')),
-      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
+      pageLength: computed(() => editorService?.get<number>('pageLength') || 0),
+      showSrc: computed(() => uiService?.get<boolean>('showSrc')),
+      columnWidth: computed(() => uiService?.get<GetColumnWidth>('columnWidth')),
 
       saveCode(value: string) {
         try {
           // eslint-disable-next-line no-eval
-          services?.editorService.set('root', eval(value));
+          editorService?.set('root', eval(value));
         } catch (e: any) {
           console.error(e);
         }

package/src/layouts/PropsPanel.vue

@@ -1,9 +1,9 @@
 <template>
   <m-form
-    class="m-editor-props-panel"
-    popper-class="m-editor-props-panel-popper"
+    :class="`m-editor-props-panel ${propsPanelSize}`"
+    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
     ref="configForm"
-    size="small"
+    :size="propsPanelSize"
     :init-values="values"
     :config="curFormConfig"
     @change="submit"
@@ -39,9 +39,9 @@ export default defineComponent({
         return;
       }
 
-      values.value = node.value;
       const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+      values.value = node.value;
     };
 
     watchEffect(init);
@@ -55,6 +55,7 @@ export default defineComponent({
       values,
       configForm,
       curFormConfig,
+      propsPanelSize: computed(() => services?.uiService.get('propsPanelSize') || 'small'),
 
       async submit() {
         try {

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -12,7 +12,14 @@
       <template v-for="(group, index) in list">
         <el-collapse-item v-if="group.items && group.items.length" :key="index" :name="index">
           <template #title><i class="el-icon-s-grid"></i>{{ group.title }}</template>
-          <div class="component-item" v-for="item in group.items" :key="item.type" @click="appendComponent(item)">
+          <div
+            class="component-item"
+            v-for="item in group.items"
+            draggable="true"
+            :key="item.type"
+            @click="appendComponent(item)"
+            @dragstart="dragstartHandler(item, $event)"
+          >
             <m-icon :icon="item.icon"></m-icon>
 
             <el-tooltip effect="dark" placement="bottom" :content="item.text">
@@ -27,6 +34,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, ref } from 'vue';
+import serialize from 'serialize-javascript';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
@@ -56,13 +64,27 @@ export default defineComponent({
       collapseValue,
       list,
 
-      appendComponent({ text, type, ...config }: ComponentItem): void {
+      appendComponent({ text, type, data = {} }: ComponentItem): void {
         services?.editorService.add({
           name: text,
           type,
-          ...config,
+          ...data,
         });
       },
+
+      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
+        if (e.dataTransfer) {
+          e.dataTransfer.effectAllowed = 'move';
+          e.dataTransfer.setData(
+            'data',
+            serialize({
+              name: text,
+              type,
+              ...data,
+            }).replace(/"(\w+)":\s/g, '$1: '),
+          );
+        }
+      },
     };
   },
 });

package/src/layouts/sidebar/LayerMenu.vue

@@ -1,115 +1,113 @@
 <template>
-  <div v-if="node" class="magic-editor-content-menu">
-    <div
-      v-if="node.items"
-      class="magic-editor-content-menu-item"
-      @mouseenter="setSubVisiable(true)"
-      @mouseleave="setSubVisiable(false)"
-    >
-      新增
-    </div>
-    <div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() => copy(node)">复制</div>
-    <div
-      v-if="node.type !== 'app' && node.type !== 'page'"
-      class="magic-editor-content-menu-item"
-      @click="() => remove()"
-    >
-      删除
-    </div>
-    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisiable(true)" @mouseleave="setSubVisiable(false)">
-      <el-scrollbar>
-        <template v-if="node.type === 'tabs'">
-          <div
-            class="magic-editor-content-menu-item"
-            @click="
-              () =>
-                append({
-                  type: 'tab-pane',
-                })
-            "
-          >
-            标签
-          </div>
-        </template>
-
-        <template v-else-if="node.type === 'app'">
-          <div
-            class="magic-editor-content-menu-item"
-            v-for="item in menu.app"
-            :key="item.type"
-            @click="() => append(item)"
-          >
-            {{ item.text }}
-          </div>
-        </template>
-
-        <template v-else-if="node.items">
-          <div v-for="list in menu.component" :key="list.title">
-            <template v-for="item in list.items">
-              <div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() => append(item)">
-                {{ item.text }}
-              </div>
-            </template>
-            <div class="separation"></div>
-          </div>
-        </template>
-      </el-scrollbar>
-    </div>
-  </div>
+  <content-menu :menu-data="menuData" ref="menu" style="overflow: initial"></content-menu>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
 
-import type { ComponentGroup, Services } from '@editor/type';
+import { NodeType } from '@tmagic/schema';
 
-export default defineComponent({
-  name: 'magic-editor-content-menu',
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuItem, Services } from '@editor/type';
 
-  props: {
-    componentGroupList: {
-      type: Array as PropType<ComponentGroup[]>,
-      default: () => [],
-    },
-  },
+export default defineComponent({
+  components: { ContentMenu },
 
-  setup(props) {
+  setup() {
     const services = inject<Services>('services');
-    const subVisible = ref(false);
+    const menu = ref<InstanceType<typeof ContentMenu>>();
     const node = computed(() => services?.editorService.get('node'));
+    const isRoot = computed(() => node.value?.type === NodeType.ROOT);
+    const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const componentList = computed(() => services?.componentListService.getList() || []);
 
-    return {
-      subVisible,
+    const layerContentMenu = inject<MenuItem[]>('layerContentMenu', []);
 
-      node,
+    const createMenuItems = (group: ComponentGroup): MenuButton[] =>
+      group.items.map((component) => ({
+        text: component.text,
+        type: 'button',
+        icon: component.icon,
+        handler: () => {
+          services?.editorService.add({
+            name: component.text,
+            type: component.type,
+            ...(component.data || {}),
+          });
+        },
+      }));
 
-      menu: computed(() => ({
-        app: [
+    const getSubMenuData = computed<MenuButton[]>(() => {
+      if (node.value?.type === 'tabs') {
+        return [
           {
-            type: 'page',
-            text: '页面',
+            text: '标签页',
+            type: 'button',
+            icon: Files,
+            handler: () => {
+              services?.editorService.add({
+                type: 'tab-pane',
+              });
+            },
           },
-        ],
-        component: props.componentGroupList,
-      })),
-
-      append(config: any) {
-        services?.editorService.add({
-          name: config.text,
-          type: config.type,
-        });
-      },
-
-      remove() {
-        node.value && services?.editorService.remove(node.value);
-      },
+        ];
+      }
+      if (node.value?.items) {
+        return (
+          componentList.value.reduce(
+            (subMenuData: MenuButton[], group: ComponentGroup, index) =>
+              subMenuData.concat(
+                createMenuItems(group),
+                index < componentList.value.length - 1
+                  ? [
+                      {
+                        type: 'divider',
+                        direction: 'horizontal',
+                      },
+                    ]
+                  : [],
+              ),
+            [],
+          ) || []
+        );
+      }
+      return [];
+    });
 
-      copy(node: any) {
-        services?.editorService.copy(node);
-      },
+    return {
+      menu,
+      menuData: computed<MenuItem[]>(() => [
+        {
+          type: 'button',
+          text: '新增',
+          icon: markRaw(Plus),
+          display: () => node.value?.items,
+          items: getSubMenuData.value,
+        },
+        {
+          type: 'button',
+          text: '复制',
+          icon: markRaw(DocumentCopy),
+          display: () => !isRoot.value,
+          handler: () => {
+            node.value && services?.editorService.copy(node.value);
+          },
+        },
+        {
+          type: 'button',
+          text: '删除',
+          icon: markRaw(Delete),
+          display: () => !isRoot.value && !isPage.value,
+          handler: () => {
+            node.value && services?.editorService.remove(node.value);
+          },
+        },
+        ...layerContentMenu,
+      ]),
 
-      setSubVisiable(v: any) {
-        subVisible.value = v;
+      show(e: MouseEvent) {
+        menu.value?.show(e);
       },
     };
   },

package/src/layouts/sidebar/LayerPanel.vue

@@ -14,6 +14,7 @@
       ref="tree"
       node-key="id"
       draggable
+      :default-expanded-keys="expandedKeys"
       :load="loadItems"
       :data="values"
       :expand-on-click-node="false"
@@ -29,37 +30,60 @@
       empty-text="页面空荡荡的"
     >
       <template #default="{ node, data }">
-        <slot name="layer-node-content" :node="node" :data="data">
-          <span>
-            {{ `${data.name} (${data.id})` }}
-          </span>
-        </slot>
+        <div
+          :id="data.id"
+          class="cus-tree-node"
+          @mousedown="toggleClickFlag"
+          @mouseup="toggleClickFlag"
+          @mouseenter="highlightHandler(data)"
+          :class="{ 'cus-tree-node-hover': canHighlight && data.id === highlightNode?.id }"
+        >
+          <slot name="layer-node-content" :node="node" :data="data">
+            <span>
+              {{ `${data.name} (${data.id})` }}
+            </span>
+          </slot>
+        </div>
       </template>
     </el-tree>
 
     <teleport to="body">
-      <layer-menu :style="menuStyle"></layer-menu>
+      <layer-menu ref="menu"></layer-menu>
     </teleport>
   </el-scrollbar>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, Ref, ref, watchEffect } from 'vue';
+import { computed, defineComponent, inject, Ref, ref, watchEffect } from 'vue';
 import type { ElTree } from 'element-plus';
+import { throttle } from 'lodash-es';
 
 import type { MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import StageCore from '@tmagic/stage';
 
 import type { EditorService } from '@editor/services/editor';
 import type { Services } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
-const select = (data: MNode, editorService?: EditorService) => {
+const throttleTime = 150;
+
+const select = async (data: MNode, editorService?: EditorService) => {
   if (!data.id) {
     throw new Error('没有id');
   }
 
-  editorService?.select(data);
+  await editorService?.select(data);
+  editorService?.get<StageCore>('stage')?.select(data.id);
+};
+
+const highlight = (data: MNode, editorService?: EditorService) => {
+  if (!data?.id) {
+    throw new Error('没有id');
+  }
+  editorService?.highlight(data);
+  editorService?.get<StageCore>('stage')?.highlight(data.id);
 };
 
 const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => ({
@@ -69,8 +93,8 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 
     const { type: ingType } = ingData;
 
-    if (ingType !== 'page' && data.type === 'page') return false;
-    if (ingType === 'page' && data.type !== 'page') return false;
+    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE) return false;
+    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE) return false;
     if (!data || !data.type) return false;
     if (['prev', 'next'].includes(type)) return true;
     if (data.items || data.type === 'container') return true;
@@ -87,19 +111,22 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
 });
 
 const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorService?: EditorService) => {
+  const highlightNode = ref<MNode>();
+  const node = ref<MNode>();
   const page = computed(() => editorService?.get('page'));
 
   watchEffect(() => {
     if (!tree.value) return;
-
-    const node = editorService?.get('node');
-    node && tree.value.setCurrentKey(node.id, true);
+    node.value = editorService?.get('node');
+    node.value && tree.value.setCurrentKey(node.value.id, true);
 
     const parent = editorService?.get('parent');
     if (!parent?.id) return;
 
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
+
+    highlightNode.value = editorService?.get('highlightNode');
   });
 
   return {
@@ -114,6 +141,10 @@ const useStatus = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorSer
       }
       resolve([]);
     },
+
+    highlightNode,
+    clickNode: node,
+    expandedKeys: computed(() => (node.value ? [node.value.id] : [])),
   };
 };
 
@@ -127,12 +158,10 @@ const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
     let name = '';
     if (data.name) {
       name = data.name;
-    } else if (data.type) {
-      name = data.type;
     } else if (data.items) {
       name = 'container';
     }
-    return name.indexOf(value) !== -1;
+    return `${data.id}${name}${data.type}`.indexOf(value) !== -1;
   },
 
   filterTextChangeHandler(val: string) {
@@ -140,46 +169,6 @@ const useFilter = (tree: Ref<InstanceType<typeof ElTree> | undefined>) => ({
   },
 });
 
-const useContentMenu = (editorService?: EditorService) => {
-  const menuStyle = ref({
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    display: 'none',
-  });
-
-  onMounted(() => {
-    document.addEventListener(
-      'click',
-      () => {
-        menuStyle.value.display = 'none';
-      },
-      true,
-    );
-  });
-
-  return {
-    menuStyle,
-
-    contextmenu(event: MouseEvent, data: MNode) {
-      const bodyHeight = globalThis.document.body.clientHeight;
-
-      const left = `${event.clientX + 20}px`;
-      let top = `${event.clientY - 10}px`;
-
-      if (event.clientY + 300 > bodyHeight) {
-        top = `${bodyHeight - 300}px`;
-      }
-
-      menuStyle.value.left = left;
-      menuStyle.value.top = top;
-      menuStyle.value.display = '';
-
-      select(data, editorService);
-    },
-  };
-};
-
 export default defineComponent({
   name: 'magic-editor-layer-panel',
 
@@ -188,21 +177,53 @@ export default defineComponent({
   setup() {
     const services = inject<Services>('services');
     const tree = ref<InstanceType<typeof ElTree>>();
+    const menu = ref<InstanceType<typeof LayerMenu>>();
+    const clicked = ref(false);
     const editorService = services?.editorService;
+    const highlightHandler = throttle((data: MNode) => {
+      highlight(data, editorService);
+    }, throttleTime);
+
+    const toggleClickFlag = () => {
+      clicked.value = !clicked.value;
+    };
+
+    const statusData = useStatus(tree, editorService);
+    const canHighlight = computed(
+      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value,
+    );
+
+    editorService?.on('remove', () => {
+      setTimeout(() => {
+        tree.value?.getNode(editorService.get('node').id)?.updateChildren();
+      }, 0);
+    });
+
     return {
       tree,
+      menu,
+      ...statusData,
       ...useDrop(tree, editorService),
-      ...useStatus(tree, editorService),
       ...useFilter(tree),
-      ...useContentMenu(editorService),
+
+      highlightHandler,
+      toggleClickFlag,
+      canHighlight,
 
       clickHandler(data: MNode): void {
         if (services?.uiService.get<boolean>('uiSelectMode')) {
           document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
           return;
         }
+        tree.value?.setCurrentKey(data.id);
         select(data, editorService);
       },
+
+      async contextmenu(event: MouseEvent, data: MNode) {
+        event.preventDefault();
+        await select(data, editorService);
+        menu.value?.show(event);
+      },
     };
   },
 });