@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.10

package/src/components/ScrollViewer.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="m-editor-scroll-viewer-container" ref="container">
+    <div ref="el" :style="style">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { ScrollViewer } from '@editor/utils/scroll-viewer';
+
+export default defineComponent({
+  name: 'm-editor-scroll-viewer',
+
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  setup(props) {
+    const container = ref<HTMLDivElement>();
+    const el = ref<HTMLDivElement>();
+    let scrollViewer: ScrollViewer;
+
+    onMounted(() => {
+      if (!container.value || !el.value) return;
+      scrollViewer = new ScrollViewer({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom,
+      });
+    });
+
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+
+    watch(
+      () => props.zoom,
+      () => {
+        scrollViewer.setZoom(props.zoom);
+      },
+    );
+
+    return {
+      container,
+      el,
+
+      style: computed(
+        () => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+        margin-top: 30px;
+      `,
+      ),
+    };
+  },
+});
+</script>

package/src/components/ToolButton.vue

@@ -4,9 +4,9 @@
     <div v-else-if="item.type === 'text'" class="menu-item-text">{{ item.text }}</div>
 
     <template v-else-if="item.type === 'zoom'">
-      <m-icon :icon="ZoomIn" @click="zoomInHandler"></m-icon>
+      <el-button size="small" type="text"><m-icon :icon="ZoomIn" @click="zoomInHandler"></m-icon></el-button>
       <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
-      <m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon>
+      <el-button size="small" type="text"><m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon></el-button>
     </template>
 
     <el-tooltip
@@ -41,6 +41,8 @@
 import { computed, defineComponent, inject, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
 
+import { NodeType } from '@tmagic/schema';
+
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
@@ -87,7 +89,7 @@ export default defineComponent({
             type: 'button',
             icon: Delete,
             tooltip: '刪除',
-            disabled: () => services?.editorService.get('node')?.type === 'page',
+            disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get('node')),
           };
         case 'undo':

package/src/layouts/AddPageBox.vue

@@ -15,6 +15,8 @@
 import { defineComponent, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons';
 
+import { NodeType } from '@tmagic/schema';
+
 import { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
@@ -31,7 +33,7 @@ export default defineComponent({
         if (!editorService) return;
 
         editorService.add({
-          type: 'page',
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get('root'))),
         });
       },

package/src/layouts/CodeEditor.vue

@@ -4,28 +4,10 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
-import { asyncLoadJs } from '@tmagic/utils';
-
-const initEditor = () => {
-  if ((globalThis as any).monaco) {
-    Promise.resolve((globalThis as any).monaco);
-  }
-
-  return asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
-    (globalThis as any).require.config({
-      paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` },
-    });
-    return new Promise((resolve) => {
-      (globalThis as any).require(['vs/editor/editor.main'], () => {
-        resolve((globalThis as any).monaco);
-      });
-    });
-  });
-};
-
-const toString = (v: any, language: string): string => {
+const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
     value = serialize(v, {
@@ -64,60 +46,63 @@ export default defineComponent({
     },
   },
 
-  emits: ['inited', 'save'],
+  emits: ['initd', 'save'],
 
   setup(props, { emit }) {
-    let vsEditor: any = null;
+    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 setEditorValue = (v: any, m: any) => {
+    const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
       if (props.type === 'diff') {
-        const originalModel = (globalThis as any).monaco.editor.createModel(values.value, 'text/javascript');
-        const modifiedModel = (globalThis as any).monaco.editor.createModel(
-          toString(m, props.language),
-          'text/javascript',
-        );
+        const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
+        const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
 
-        return vsEditor.setModel({
+        return vsDiffEditor?.setModel({
           original: originalModel,
           modified: modifiedModel,
         });
       }
 
-      return vsEditor.setValue?.(values.value);
+      return vsEditor?.setValue(values.value);
     };
 
     const resizeHandler = () => {
       vsEditor?.layout();
+      vsDiffEditor?.layout();
     };
 
-    const getEditorValue = () => vsEditor.getValue?.() || '';
+    const getEditorValue = () =>
+      props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
     const init = async () => {
       if (!codeEditor.value) return;
 
-      vsEditor = (globalThis as any).monaco.editor[props.type === 'diff' ? 'createDiffEditor' : 'create'](
-        codeEditor.value,
-        {
-          value: values.value,
-          language: props.language,
-          tabSize: 2,
-          theme: 'vs-dark',
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true,
-        },
-      );
+      const options = {
+        value: values.value,
+        language: props.language,
+        tabSize: 2,
+        theme: 'vs-dark',
+        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+        fontSize: 15,
+        formatOnPaste: true,
+      };
+
+      if (props.type === 'diff') {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.editor.create(codeEditor.value, options);
+      }
 
       setEditorValue(props.initValues, props.modifiedValues);
 
       loading.value = false;
 
-      emit('inited', vsEditor);
+      emit('initd', vsEditor);
 
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
@@ -127,7 +112,7 @@ export default defineComponent({
       });
 
       if (props.type !== 'diff') {
-        vsEditor.onDidBlurEditorWidget(() => {
+        vsEditor?.onDidBlurEditorWidget(() => {
           emit('save', getEditorValue());
         });
       }
@@ -138,7 +123,7 @@ export default defineComponent({
     watch(
       () => props.initValues,
       (v, preV) => {
-        if (vsEditor && v !== preV) {
+        if (v !== preV) {
           setEditorValue(props.initValues, props.modifiedValues);
         }
       },
@@ -151,17 +136,7 @@ export default defineComponent({
     onMounted(async () => {
       loading.value = true;
 
-      await initEditor();
-      if (!(globalThis as any).monaco) {
-        const interval = setInterval(() => {
-          if ((globalThis as any).monaco) {
-            clearInterval(interval);
-            init();
-          }
-        }, 300);
-      } else {
-        init();
-      }
+      init();
     });
 
     onUnmounted(() => {
@@ -174,13 +149,14 @@ export default defineComponent({
       codeEditor,
 
       getEditor() {
-        return vsEditor;
+        return vsEditor || vsDiffEditor;
       },
 
       setEditorValue,
 
       focus() {
-        vsEditor.focus();
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
       },
     };
   },

package/src/layouts/NavMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });

package/src/layouts/PropsPanel.vue

@@ -1,6 +1,7 @@
 <template>
   <m-form
     class="m-editor-props-panel"
+    popper-class="m-editor-props-panel-popper"
     ref="configForm"
     size="small"
     :init-values="values"
@@ -10,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +31,16 @@ export default defineComponent({
     // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
     const curFormConfig = ref<any>([]);
     const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
     const init = async () => {
-      const node = services?.editorService.get<MNode | null>('node');
-
-      if (!node) {
+      if (!node.value) {
         curFormConfig.value = [];
         return;
       }
 
-      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-        node.devconfig.ratio = node.style.height / node.style.width || 1;
-      }
-
-      values.value = node;
-      const type = node.type || (node.items ? 'container' : 'text');
+      values.value = node.value;
+      const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
     };
 

package/src/layouts/sidebar/LayerMenu.vue

@@ -3,8 +3,8 @@
     <div
       v-if="node.items"
       class="magic-editor-content-menu-item"
-      @mouseenter="setSubVisiable(true)"
-      @mouseleave="setSubVisiable(false)"
+      @mouseenter="setSubVisitable(true)"
+      @mouseleave="setSubVisitable(false)"
     >
       新增
     </div>
@@ -16,7 +16,7 @@
     >
       删除
     </div>
-    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisiable(true)" @mouseleave="setSubVisiable(false)">
+    <div class="subMenu" v-show="subVisible" @mouseenter="setSubVisitable(true)" @mouseleave="setSubVisitable(false)">
       <el-scrollbar>
         <template v-if="node.type === 'tabs'">
           <div
@@ -31,20 +31,8 @@
             标签
           </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">
+          <div v-for="list in componentGroupList" :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 }}
@@ -59,21 +47,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, ref } from 'vue';
+
+import type { MNode } from '@tmagic/schema';
 
-import type { ComponentGroup, Services } from '@editor/type';
+import type { AddMNode, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'magic-editor-content-menu',
 
-  props: {
-    componentGroupList: {
-      type: Array as PropType<ComponentGroup[]>,
-      default: () => [],
-    },
-  },
-
-  setup(props) {
+  setup() {
     const services = inject<Services>('services');
     const subVisible = ref(false);
     const node = computed(() => services?.editorService.get('node'));
@@ -83,17 +66,9 @@ export default defineComponent({
 
       node,
 
-      menu: computed(() => ({
-        app: [
-          {
-            type: 'page',
-            text: '页面',
-          },
-        ],
-        component: props.componentGroupList,
-      })),
+      componentGroupList: computed(() => services?.componentListService.getList()),
 
-      append(config: any) {
+      append(config: AddMNode) {
         services?.editorService.add({
           name: config.text,
           type: config.type,
@@ -104,11 +79,11 @@ export default defineComponent({
         node.value && services?.editorService.remove(node.value);
       },
 
-      copy(node: any) {
-        services?.editorService.copy(node);
+      copy(node?: MNode) {
+        node && services?.editorService.copy(node);
       },
 
-      setSubVisiable(v: any) {
+      setSubVisitable(v: boolean) {
         subVisible.value = v;
       },
     };

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,11 +30,20 @@
       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="toogleClickFlag"
+          @mouseup="toogleClickFlag"
+          @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>
 
@@ -46,20 +56,34 @@
 <script lang="ts">
 import { computed, defineComponent, inject, onMounted, 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) {
@@ -188,11 +217,25 @@ export default defineComponent({
   setup() {
     const services = inject<Services>('services');
     const tree = ref<InstanceType<typeof ElTree>>();
+    const clicked = ref(false);
     const editorService = services?.editorService;
+    const highlightHandler = throttle((data: MNode) => {
+      highlight(data, editorService);
+    }, throttleTime);
+
+    const toogleClickFlag = () => {
+      clicked.value = !clicked.value;
+    };
+
+    const statusData = useStatus(tree, editorService);
+    const canHighlight = computed(
+      () => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value,
+    );
+
     return {
       tree,
+      ...statusData,
       ...useDrop(tree, editorService),
-      ...useStatus(tree, editorService),
       ...useFilter(tree),
       ...useContentMenu(editorService),
 
@@ -201,8 +244,12 @@ export default defineComponent({
           document.dispatchEvent(new CustomEvent('ui-select', { detail: data }));
           return;
         }
+        tree.value?.setCurrentKey(data.id);
         select(data, editorService);
       },
+      highlightHandler,
+      toogleClickFlag,
+      canHighlight,
     };
   },
 });