@tmagic/editor 1.1.0-beta.4 → 1.1.0-beta.7

package/package.json

@@ -1,17 +1,17 @@
 {
-  "version": "1.1.0-beta.4",
+  "version": "1.1.0-beta.7",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.js",
-  "module": "dist/tmagic-editor.es.js",
+  "module": "dist/tmagic-editor.mjs",
   "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/tmagic-editor.es.js",
+      "import": "./dist/tmagic-editor.mjs",
       "require": "./dist/tmagic-editor.umd.js"
     },
     "./dist/style.css": {
@@ -22,7 +22,9 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
   },
   "engines": {
     "node": ">=14"
@@ -43,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/core": "1.1.0-beta.4",
-    "@tmagic/form": "1.1.0-beta.4",
-    "@tmagic/schema": "1.1.0-beta.4",
-    "@tmagic/stage": "1.1.0-beta.4",
-    "@tmagic/utils": "1.1.0-beta.4",
+    "@tmagic/core": "1.1.0-beta.7",
+    "@tmagic/form": "1.1.0-beta.7",
+    "@tmagic/schema": "1.1.0-beta.7",
+    "@tmagic/stage": "1.1.0-beta.7",
+    "@tmagic/utils": "1.1.0-beta.7",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -57,26 +59,26 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.4",
+    "@tmagic/form": "1.1.0-beta.7",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
-    "vue": "^3.2.0"
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.0",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^4.3.4",
-    "vite": "^2.9.13",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.4",
+    "vue-tsc": "^0.39.4"
   }
 }

package/src/Editor.vue

@@ -51,18 +51,19 @@ import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
 
-import Framework from '@editor/layouts/Framework.vue';
-import NavMenu from '@editor/layouts/NavMenu.vue';
-import PropsPanel from '@editor/layouts/PropsPanel.vue';
-import Sidebar from '@editor/layouts/sidebar/Sidebar.vue';
-import Workspace from '@editor/layouts/workspace/Workspace.vue';
-import componentListService from '@editor/services/componentList';
-import editorService from '@editor/services/editor';
-import eventsService from '@editor/services/events';
-import historyService from '@editor/services/history';
-import propsService from '@editor/services/props';
-import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from '@editor/type';
+import Framework from './layouts/Framework.vue';
+import NavMenu from './layouts/NavMenu.vue';
+import PropsPanel from './layouts/PropsPanel.vue';
+import Sidebar from './layouts/sidebar/Sidebar.vue';
+import Workspace from './layouts/workspace/Workspace.vue';
+import componentListService from './services/componentList';
+import editorService from './services/editor';
+import eventsService from './services/events';
+import historyService from './services/history';
+import propsService from './services/props';
+import storageService from './services/storage';
+import uiService from './services/ui';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -269,6 +270,7 @@ export default defineComponent({
       propsService,
       editorService,
       uiService,
+      storageService,
     };
 
     provide('services', services);

package/src/components/ContentMenu.vue

@@ -22,119 +22,107 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
-import { MenuButton, MenuItem } from '@editor/type';
+import { MenuButton, MenuItem } from '../type';
 
 import ToolButton from './ToolButton.vue';
 
-export default defineComponent({
-  components: { ToolButton },
-
-  props: {
-    menuData: {
-      type: Array as PropType<MenuItem[]>,
-      default: () => [],
-    },
-
-    isSubMenu: {
-      type: Boolean,
-      default: false,
-    },
+const props = withDefaults(
+  defineProps<{
+    menuData?: MenuItem[];
+    isSubMenu?: boolean;
+  }>(),
+  {
+    menuData: () => [],
+    isSubMenu: false,
   },
+);
 
-  emits: ['hide', 'show'],
-
-  setup(props, { emit }) {
-    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 = () => {
-      if (!visible.value) return;
-
-      visible.value = false;
-      subMenu.value?.hide();
+const emit = defineEmits(['hide', 'show']);
 
-      emit('hide');
-    };
+const menu = ref<HTMLDivElement>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<MenuItem[]>([]);
+const menuStyle = ref({
+  left: '0',
+  top: '0',
+});
 
-    const hideHandler = (e: MouseEvent) => {
-      const target = e.target as HTMLElement | undefined;
-      if (!visible.value || !target) {
-        return;
-      }
-      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
-        return;
+const hide = () => {
+  if (!visible.value) return;
+
+  visible.value = false;
+  subMenu.value?.hide();
+
+  emit('hide');
+};
+
+const hideHandler = (e: MouseEvent) => {
+  const target = e.target as HTMLElement | undefined;
+  if (!visible.value || !target) {
+    return;
+  }
+  if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+    return;
+  }
+  hide();
+};
+
+const show = (e: MouseEvent) => {
+  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+  setTimeout(() => {
+    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;
       }
-      hide();
-    };
 
-    onMounted(() => {
-      if (props.isSubMenu) return;
+      menuStyle.value = {
+        top: `${top}px`,
+        left: `${e.clientX}px`,
+      };
 
-      globalThis.addEventListener('mousedown', hideHandler, true);
+      emit('show');
     });
+  }, 300);
+};
+
+const 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,
+    });
+  }
+};
 
-    onUnmounted(() => {
-      if (props.isSubMenu) return;
+onMounted(() => {
+  if (props.isSubMenu) return;
 
-      globalThis.removeEventListener('mousedown', hideHandler, true);
-    });
+  globalThis.addEventListener('mousedown', hideHandler, true);
+});
 
-    return {
-      menu,
-      subMenu,
-      visible,
-      menuStyle,
-      subMenuData,
-
-      hide,
-
-      show(e: MouseEvent) {
-        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
-        setTimeout(() => {
-          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`,
-            };
-
-            emit('show');
-          });
-        }, 300);
-      },
-
-      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,
-          });
-        }
-      },
-    };
-  },
+onUnmounted(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.removeEventListener('mousedown', hideHandler, true);
+});
+
+defineExpose({
+  hide,
+  show,
 });
 </script>

package/src/components/ScrollViewer.vue

@@ -9,7 +9,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { ScrollViewer } from '@editor/utils/scroll-viewer';
+import { ScrollViewer } from '../utils/scroll-viewer';
 
 export default defineComponent({
   name: 'm-editor-scroll-viewer',

package/src/components/ToolButton.vue

@@ -50,180 +50,163 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
+<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>