@tmagic/editor 1.0.0-beta.9 → 1.0.0-rc.3

package/src/components/ContentMenu.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+    <div>
+      <tool-button
+        v-for="(item, index) in menuData"
+        event-type="mouseup"
+        :data="item"
+        :key="index"
+        @mouseup="hide"
+        @mouseenter="showSubMenu(item)"
+      ></tool-button>
+    </div>
+    <teleport to="body">
+      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+
+import { MenuButton, MenuItem } from '@editor/type';
+
+import ToolButton from './ToolButton.vue';
+
+export default defineComponent({
+  components: { ToolButton },
+
+  props: {
+    menuData: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+  },
+
+  setup() {
+    const menu = ref<HTMLDivElement>();
+    const subMenu = ref<any>();
+    const visible = ref(false);
+    const subMenuData = ref<MenuItem[]>([]);
+    const menuStyle = ref({
+      left: '0',
+      top: '0',
+    });
+
+    const hide = () => {
+      visible.value = false;
+    };
+
+    onMounted(() => {
+      globalThis.addEventListener(
+        'mousedown',
+        (e: MouseEvent) => {
+          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
+            return;
+          }
+          hide();
+        },
+        true,
+      );
+    });
+
+    return {
+      menu,
+      subMenu,
+      visible,
+      menuStyle,
+      subMenuData,
+
+      hide,
+
+      show(e: MouseEvent) {
+        visible.value = true;
+
+        nextTick(() => {
+          const menuHeight = menu.value?.clientHeight || 0;
+
+          let top = e.clientY;
+          if (menuHeight + e.clientY > document.body.clientHeight) {
+            top = document.body.clientHeight - menuHeight;
+          }
+
+          menuStyle.value = {
+            top: `${top}px`,
+            left: `${e.clientX}px`,
+          };
+        });
+      },
+
+      showSubMenu(item: MenuItem) {
+        const menuItem = item as MenuButton;
+        if (typeof item !== 'object' || !menuItem.items?.length) {
+          return;
+        }
+
+        subMenuData.value = menuItem.items;
+        if (menu.value) {
+          subMenu.value.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop,
+          });
+        }
+      },
+    };
+  },
+});
+</script>

package/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `,

package/src/components/ToolButton.vue

@@ -1,24 +1,37 @@
 <template>
-  <div v-if="display" class="menu-item">
-    <el-divider v-if="item.type === 'divider'" direction="vertical"></el-divider>
+  <div
+    v-if="display"
+    class="menu-item"
+    :class="item.type"
+    @click="clickHandler(item, $event)"
+    @mousedown="mousedownHandler(item, $event)"
+    @mouseup="mouseupHandler(item, $event)"
+  >
+    <el-divider v-if="item.type === 'divider'" :direction="item.direction || 'vertical'"></el-divider>
     <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>
+      <tool-button
+        :data="{ type: 'button', icon: ZoomOut, handler: zoomOutHandler, tooltip: '缩小' }"
+        :event-type="eventType"
+      ></tool-button>
       <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
-      <m-icon :icon="ZoomOut" @click="zoomOutHandler"></m-icon>
+      <tool-button
+        :data="{ type: 'button', icon: ZoomIn, handler: zoomInHandler, tooltip: '放大' }"
+        :event-type="eventType"
+      ></tool-button>
     </template>
 
-    <el-tooltip
-      v-else-if="item.type === 'button'"
-      effect="dark"
-      placement="bottom-start"
-      :content="item.tooltip || item.text"
-    >
-      <el-button size="small" type="text" :disabled="disabled" @click="buttonHandler(item)"
-        ><m-icon :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+    <template v-else-if="item.type === 'button'">
+      <el-tooltip v-if="item.tooltip" effect="dark" placement="bottom-start" :content="item.tooltip">
+        <el-button size="small" text :disabled="disabled"
+          ><m-icon v-if="item.icon" :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
+        >
+      </el-tooltip>
+      <el-button v-else size="small" text :disabled="disabled"
+        ><m-icon v-if="item.icon" :icon="item.icon"></m-icon><span>{{ item.text }}</span></el-button
       >
-    </el-tooltip>
+    </template>
 
     <el-dropdown v-else-if="item.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
       <span class="el-dropdown-link menubar-menu-button">
@@ -38,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
@@ -58,19 +71,24 @@ export default defineComponent({
         display: false,
       }),
     },
+
+    eventType: {
+      type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
+      default: 'click',
+    },
   },
 
   setup(props) {
     const services = inject<Services>('services');
     const uiService = services?.uiService;
 
-    const zoomInHandler = () => uiService?.set('zoom', zoom.value + 0.1);
-    const zoomOutHandler = () => uiService?.set('zoom', zoom.value - 0.1);
-
     const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
     const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
     const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
 
+    const zoomInHandler = () => uiService?.zoom(0.1);
+    const zoomOutHandler = () => uiService?.zoom(-0.1);
+
     const item = computed((): MenuButton | MenuComponent => {
       if (typeof props.data !== 'string') {
         return props.data;
@@ -87,7 +105,7 @@ export default defineComponent({
         case 'delete':
           return {
             type: 'button',
-            icon: Delete,
+            icon: markRaw(Delete),
             tooltip: '刪除',
             disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get('node')),
@@ -95,7 +113,7 @@ export default defineComponent({
         case 'undo':
           return {
             type: 'button',
-            icon: Back,
+            icon: markRaw(Back),
             tooltip: '后退',
             disabled: () => !services?.historyService.state.canUndo,
             handler: () => services?.editorService.undo(),
@@ -103,7 +121,7 @@ export default defineComponent({
         case 'redo':
           return {
             type: 'button',
-            icon: Right,
+            icon: markRaw(Right),
             tooltip: '前进',
             disabled: () => !services?.historyService.state.canRedo,
             handler: () => services?.editorService.redo(),
@@ -111,28 +129,28 @@ export default defineComponent({
         case 'zoom-in':
           return {
             type: 'button',
-            icon: ZoomIn,
+            icon: markRaw(ZoomIn),
             tooltip: '放大',
             handler: zoomInHandler,
           };
         case 'zoom-out':
           return {
             type: 'button',
-            icon: ZoomOut,
+            icon: markRaw(ZoomOut),
             tooltip: '縮小',
             handler: zoomOutHandler,
           };
         case 'rule':
           return {
             type: 'button',
-            icon: ScaleToOriginal,
+            icon: markRaw(ScaleToOriginal),
             tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
             handler: () => uiService?.set('showRule', !showRule.value),
           };
         case 'guides':
           return {
             type: 'button',
-            icon: Grid,
+            icon: markRaw(Grid),
             tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
             handler: () => uiService?.set('showGuides', !showGuides.value),
           };
@@ -153,9 +171,16 @@ export default defineComponent({
       return item.value.disabled;
     });
 
+    const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+      if (disabled.value) return;
+      if (typeof (item as MenuButton).handler === 'function' && services) {
+        (item as MenuButton).handler?.(services, event);
+      }
+    };
+
     return {
-      ZoomIn,
-      ZoomOut,
+      ZoomIn: markRaw(ZoomIn),
+      ZoomOut: markRaw(ZoomOut),
 
       item,
       zoom,
@@ -178,10 +203,24 @@ export default defineComponent({
         }
       },
 
-      buttonHandler(item: MenuButton | MenuComponent) {
-        if (disabled.value) return;
-        if (typeof (item as MenuButton).handler === 'function') {
-          (item as MenuButton).handler?.(services);
+      clickHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'click') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
+        }
+      },
+
+      mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'mousedown') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
+        }
+      },
+
+      mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+        if (props.eventType !== 'mouseup') return;
+        if (item.type === 'button') {
+          buttonHandler(item, event);
         }
       },
     };

package/src/fields/UISelect.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect">
-    <i class="el-icon-thumb"></i>
-    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
-    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
+    <el-tooltip content="清除">
+      <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
+    </el-tooltip>
+    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
+    </el-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Close, Delete, Pointer } from '@element-plus/icons';
 
 import { FormState } from '@tmagic/form';
 
@@ -60,6 +64,10 @@ export default defineComponent({
     };
 
     return {
+      Delete: markRaw(Delete),
+      Pointer: markRaw(Pointer),
+      Close: markRaw(Close),
+
       val,
       uiSelectMode,
       toName: computed(() => {

package/src/index.ts

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import './utils/polyfills';
 
 import { App } from 'vue';
 
@@ -41,6 +42,7 @@ export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as ToolButton } from './components/ToolButton.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项

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: '),
+          );
+        }
+      },
     };
   },
 });