@tmagic/editor 1.0.6 → 1.1.0-beta.10

package/src/components/ToolButton.vue

@@ -50,180 +50,163 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
-import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
+<script lang="ts" setup>
+import { computed, inject, markRaw, PropType } from 'vue';
+import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import MIcon from '@editor/components/Icon.vue';
-import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
+import MIcon from '../components/Icon.vue';
+import type { MenuButton, MenuComponent, MenuItem, Services } from '../type';
+
+const props = defineProps({
+  data: {
+    type: [Object, String] as PropType<MenuItem | string>,
+    require: true,
+    default: () => ({
+      type: 'text',
+      display: false,
+    }),
+  },
 
-export default defineComponent({
-  components: { MIcon, ArrowDown },
+  eventType: {
+    type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
+    default: 'click',
+  },
+});
 
-  props: {
-    data: {
-      type: [Object, String] as PropType<MenuItem | string>,
-      require: true,
-      default: () => ({
+const services = inject<Services>('services');
+const uiService = services?.uiService;
+
+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;
+  }
+  switch (props.data) {
+    case '/':
+      return {
+        type: 'divider',
+      };
+    case 'zoom':
+      return {
+        type: 'zoom',
+      };
+    case 'delete':
+      return {
+        type: 'button',
+        icon: markRaw(Delete),
+        tooltip: '刪除',
+        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
+        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+      };
+    case 'undo':
+      return {
+        type: 'button',
+        icon: markRaw(Back),
+        tooltip: '后退',
+        disabled: () => !services?.historyService.state.canUndo,
+        handler: () => services?.editorService.undo(),
+      };
+    case 'redo':
+      return {
+        type: 'button',
+        icon: markRaw(Right),
+        tooltip: '前进',
+        disabled: () => !services?.historyService.state.canRedo,
+        handler: () => services?.editorService.redo(),
+      };
+    case 'zoom-in':
+      return {
+        type: 'button',
+        icon: markRaw(ZoomIn),
+        tooltip: '放大',
+        handler: zoomInHandler,
+      };
+    case 'zoom-out':
+      return {
+        type: 'button',
+        icon: markRaw(ZoomOut),
+        tooltip: '縮小',
+        handler: zoomOutHandler,
+      };
+    case 'rule':
+      return {
+        type: 'button',
+        icon: markRaw(ScaleToOriginal),
+        tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+        handler: () => uiService?.set('showRule', !showRule.value),
+      };
+    case 'guides':
+      return {
+        type: 'button',
+        icon: markRaw(Grid),
+        tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+        handler: () => uiService?.set('showGuides', !showGuides.value),
+      };
+    default:
+      return {
         type: 'text',
-        display: false,
-      }),
-    },
-
-    eventType: {
-      type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
-      default: 'click',
-    },
-  },
+        text: props.data,
+      };
+  }
+});
 
-  setup(props) {
-    const services = inject<Services>('services');
-    const uiService = services?.uiService;
-
-    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;
-      }
-      switch (props.data) {
-        case '/':
-          return {
-            type: 'divider',
-          };
-        case 'zoom':
-          return {
-            type: 'zoom',
-          };
-        case 'delete':
-          return {
-            type: 'button',
-            icon: markRaw(Delete),
-            tooltip: '刪除',
-            disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
-            handler: () => services?.editorService.remove(services?.editorService.get('node')),
-          };
-        case 'undo':
-          return {
-            type: 'button',
-            icon: markRaw(Back),
-            tooltip: '后退',
-            disabled: () => !services?.historyService.state.canUndo,
-            handler: () => services?.editorService.undo(),
-          };
-        case 'redo':
-          return {
-            type: 'button',
-            icon: markRaw(Right),
-            tooltip: '前进',
-            disabled: () => !services?.historyService.state.canRedo,
-            handler: () => services?.editorService.redo(),
-          };
-        case 'zoom-in':
-          return {
-            type: 'button',
-            icon: markRaw(ZoomIn),
-            tooltip: '放大',
-            handler: zoomInHandler,
-          };
-        case 'zoom-out':
-          return {
-            type: 'button',
-            icon: markRaw(ZoomOut),
-            tooltip: '縮小',
-            handler: zoomOutHandler,
-          };
-        case 'rule':
-          return {
-            type: 'button',
-            icon: markRaw(ScaleToOriginal),
-            tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
-            handler: () => uiService?.set('showRule', !showRule.value),
-          };
-        case 'guides':
-          return {
-            type: 'button',
-            icon: markRaw(Grid),
-            tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
-            handler: () => uiService?.set('showGuides', !showGuides.value),
-          };
-        default:
-          return {
-            type: 'text',
-            text: props.data,
-          };
-      }
-    });
-
-    const disabled = computed(() => {
-      if (typeof item.value === 'string') return false;
-      if (item.value.type === 'component') return false;
-      if (typeof item.value.disabled === 'function') {
-        return item.value.disabled(services);
-      }
-      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: markRaw(ZoomIn),
-      ZoomOut: markRaw(ZoomOut),
-
-      item,
-      zoom,
-      disabled,
-      display: computed(() => {
-        if (!item.value) return false;
-        if (typeof item.value === 'string') return true;
-        if (typeof item.value.display === 'function') {
-          return item.value.display(services);
-        }
-        return item.value.display ?? true;
-      }),
-
-      zoomInHandler,
-      zoomOutHandler,
-
-      dropdownHandler(command: any) {
-        if (command.item.handler) {
-          command.item.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);
-        }
-      },
-    };
-  },
+const disabled = computed(() => {
+  if (typeof item.value === 'string') return false;
+  if (item.value.type === 'component') return false;
+  if (typeof item.value.disabled === 'function') {
+    return item.value.disabled(services);
+  }
+  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);
+  }
+};
+
+const display = computed(() => {
+  if (!item.value) return false;
+  if (typeof item.value === 'string') return true;
+  if (typeof item.value.display === 'function') {
+    return item.value.display(services);
+  }
+  return item.value.display ?? true;
 });
+
+const dropdownHandler = (command: any) => {
+  if (command.item.handler) {
+    command.item.handler(services);
+  }
+};
+
+const clickHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'click') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mousedown') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
+
+const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+  if (props.eventType !== 'mouseup') return;
+  if (item.type === 'button') {
+    buttonHandler(item, event);
+  }
+};
 </script>

package/src/fields/UISelect.vue

@@ -12,89 +12,68 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Close, Delete } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 
-import { Services } from '@editor/type';
+import { Services } from '../type';
 
-export default defineComponent({
-  name: 'm-fields-ui-select',
+const props = defineProps<{
+  config: any;
+  model: any;
+  prop: string;
+  name: string;
+}>();
 
-  props: {
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return '';
-      },
-    },
-    name: String,
-  },
+const emit = defineEmits(['change']);
 
-  emits: ['change'],
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const val = computed(() => props.model[props.name]);
+const uiSelectMode = ref(false);
 
-  setup(props: any, { emit }) {
-    const services = inject<Services>('services');
-    const mForm = inject<FormState>('mForm');
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
+const cancelHandler = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', false);
+  uiSelectMode.value = false;
+  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+};
 
-    const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set<boolean>('uiSelectMode', false);
-      uiSelectMode.value = false;
-      globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
-    };
-
-    const clickHandler = ({ detail }: Event & { detail: any }) => {
-      if (detail.id) {
-        props.model[props.name] = detail.id;
-        emit('change', detail.id);
-        mForm?.$emit('field-change', props.prop, detail.id);
-      }
-
-      if (cancelHandler) {
-        cancelHandler();
-      }
-    };
-
-    return {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
+const clickHandler = ({ detail }: Event & { detail: any }) => {
+  if (detail.id) {
+    props.model[props.name] = detail.id;
+    emit('change', detail.id);
+    mForm?.$emit('field-change', props.prop, detail.id);
+  }
 
-      val,
-      uiSelectMode,
-      toName: computed(() => {
-        const config = services?.editorService.getNodeById(val.value);
-        return config?.name || '';
-      }),
+  if (cancelHandler) {
+    cancelHandler();
+  }
+};
 
-      startSelect() {
-        if (!services?.uiService) return;
-        services.uiService.set<boolean>('uiSelectMode', true);
-        uiSelectMode.value = true;
-        globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
-      },
+const toName = computed(() => {
+  const config = services?.editorService.getNodeById(val.value);
+  return config?.name || '';
+});
 
-      cancelHandler,
+const startSelect = () => {
+  if (!services?.uiService) return;
+  services.uiService.set<boolean>('uiSelectMode', true);
+  uiSelectMode.value = true;
+  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+};
 
-      deleteHandler() {
-        if (props.model) {
-          props.model[props.name] = '';
-          emit('change', '');
-          mForm?.$emit('field-change', props.prop, '');
-        }
-      },
-    };
-  },
-});
+const deleteHandler = () => {
+  if (props.model) {
+    props.model[props.name] = '';
+    emit('change', '');
+    mForm?.$emit('field-change', props.prop, '');
+  }
+};
 </script>
+
 <style lang="scss">
 .m-fields-ui-select {
   cursor: pointer;

package/src/index.ts

@@ -37,6 +37,7 @@ export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
 export { default as editorService } from './services/editor';
 export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
+export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
@@ -57,7 +58,7 @@ export default {
     setConfig(option);
 
     app.component(Editor.name, Editor);
-    app.component(uiSelect.name, uiSelect);
+    app.component('m-fields-ui-select', uiSelect);
     app.component(CodeLink.name, CodeLink);
     app.component(Code.name, Code);
     app.component(CodeEditor.name, CodeEditor);

package/src/layouts/AddPageBox.vue

@@ -13,12 +13,12 @@
 
 <script lang="ts">
 import { defineComponent, inject, toRaw } from 'vue';
-import { Plus } from '@element-plus/icons';
+import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
-import { generatePageNameByApp } from '@editor/utils';
+import type { Services } from '../type';
+import { generatePageNameByApp } from '../utils';
 
 export default defineComponent({
   components: { Plus },

package/src/layouts/Framework.vue

@@ -43,7 +43,7 @@ import { computed, defineComponent, inject } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
 
-import { GetColumnWidth, Services } from '@editor/type';
+import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
 import Resizer from './Resizer.vue';

package/src/layouts/NavMenu.vue

@@ -9,8 +9,8 @@
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
 
-import ToolButton from '@editor/components/ToolButton.vue';
-import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
+import ToolButton from '../components/ToolButton.vue';
+import { GetColumnWidth, MenuBarData, Services } from '../type';
 
 export default defineComponent({
   name: 'nav-menu',

package/src/layouts/PropsPanel.vue

@@ -20,7 +20,7 @@ import { ElMessage } from 'element-plus';
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
+import type { Services } from '../type';
 
 export default defineComponent({
   name: 'm-editor-props-panel',

package/src/layouts/Resizer.vue

@@ -8,7 +8,7 @@
 import { defineComponent, inject, onMounted, onUnmounted, ref, toRaw } from 'vue';
 import Gesto from 'gesto';
 
-import { Services } from '@editor/type';
+import { Services } from '../type';
 
 export default defineComponent({
   name: 'm-editor-resize',

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -21,6 +21,8 @@
             :key="item.type"
             @click="appendComponent(item)"
             @dragstart="dragstartHandler(item, $event)"
+            @dragend="dragendHandler"
+            @drag="dragHandler"
           >
             <m-icon :icon="item.icon"></m-icon>
 
@@ -38,8 +40,11 @@
 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';
+import type StageCore from '@tmagic/stage';
+import { removeClassNameByClassName } from '@tmagic/utils';
+
+import MIcon from '../../components/Icon.vue';
+import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
 export default defineComponent({
   name: 'ui-component-panel',
@@ -49,6 +54,9 @@ export default defineComponent({
   setup() {
     const searchText = ref('');
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
+
+    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
     const list = computed(() =>
       services?.componentListService.getList().map((group: ComponentGroup) => ({
         ...group,
@@ -61,6 +69,10 @@ export default defineComponent({
         .map((x, i) => i),
     );
 
+    let timeout: NodeJS.Timeout | undefined;
+    let clientX: number;
+    let clientY: number;
+
     return {
       searchText,
       collapseValue,
@@ -87,6 +99,35 @@ export default defineComponent({
           );
         }
       },
+
+      dragendHandler() {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+        }
+        clientX = 0;
+        clientY = 0;
+      },
+
+      dragHandler(e: DragEvent) {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = undefined;
+          }
+          return;
+        }
+
+        if (timeout || !stage.value) return;
+
+        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+      },
     };
   },
 });

package/src/layouts/sidebar/LayerMenu.vue

@@ -4,12 +4,12 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
-import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { ComponentGroup, MenuButton, MenuItem, Services } from '@editor/type';
+import ContentMenu from '../../components/ContentMenu.vue';
+import type { ComponentGroup, MenuButton, MenuItem, Services } from '../../type';
 
 export default defineComponent({
   components: { ContentMenu },

package/src/layouts/sidebar/LayerPanel.vue

@@ -61,11 +61,12 @@ import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
-import type { EditorService } from '@editor/services/editor';
-import type { Services } from '@editor/type';
+import type { EditorService } from '../../services/editor';
+import type { Services } from '../../type';
+import { Layout } from '../../type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -104,8 +105,16 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
     return false;
   },
 
-  handleDragEnd() {
+  async handleDragEnd(e: any) {
     if (!tree.value) return;
+    const { data: node } = e;
+    const parent = editorService?.getParentById(node.id, false) as MContainer;
+    const layout = await editorService?.getLayout(parent);
+    node.style.position = layout;
+    if (layout === Layout.RELATIVE) {
+      node.style.top = 0;
+      node.style.left = 0;
+    }
     const { data } = tree.value;
     const [page] = data as [MPage];
     editorService?.update(page);