@tmagic/editor 1.1.0-beta.9 → 1.1.0

package/src/components/ToolButton.vue

@@ -2,169 +2,80 @@
   <div
     v-if="display"
     class="menu-item"
-    :class="item.type"
-    @click="clickHandler(item, $event)"
-    @mousedown="mousedownHandler(item, $event)"
-    @mouseup="mouseupHandler(item, $event)"
+    :class="`${data.type} ${data.className || ''}`"
+    @click="clickHandler(data, $event)"
+    @mousedown="mousedownHandler(data, $event)"
+    @mouseup="mouseupHandler(data, $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>
+    <el-divider v-if="data.type === 'divider'" :direction="data.direction || 'vertical'"></el-divider>
+    <div v-else-if="data.type === 'text'" class="menu-item-text">{{ data.text }}</div>
 
-    <template v-else-if="item.type === 'zoom'">
-      <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>
-      <tool-button
-        :data="{ type: 'button', icon: ZoomIn, handler: zoomInHandler, tooltip: '放大' }"
-        :event-type="eventType"
-      ></tool-button>
-    </template>
-
-    <template v-else-if="item.type === 'button'">
-      <el-tooltip v-if="item.tooltip" effect="dark" placement="bottom-start" :content="item.tooltip">
+    <template v-else-if="data.type === 'button'">
+      <el-tooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.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
+          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.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
+        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></el-button
       >
     </template>
 
-    <el-dropdown v-else-if="item.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
+    <el-dropdown v-else-if="data.type === 'dropdown'" trigger="click" :disabled="disabled" @command="dropdownHandler">
       <span class="el-dropdown-link menubar-menu-button">
-        {{ item.text }}<el-icon class="el-icon--right"><arrow-down></arrow-down></el-icon>
+        {{ data.text }}<el-icon class="el-icon--right"><ArrowDown></ArrowDown></el-icon>
       </span>
       <template #dropdown>
-        <el-dropdown-menu v-if="item.items && item.items.length">
-          <el-dropdown-item v-for="(subItem, index) in item.items" :key="index" :command="{ item, subItem }">{{
+        <el-dropdown-menu v-if="data.items && data.items.length">
+          <el-dropdown-item v-for="(subItem, index) in data.items" :key="index" :command="{ data, subItem }">{{
             subItem.text
           }}</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
 
-    <component v-else-if="item.type === 'component'" v-bind="item.props || {}" :is="item.component"></component>
+    <component v-else-if="data.type === 'component'" v-bind="data.props || {}" :is="data.component"></component>
   </div>
 </template>
 
 <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 { computed, inject } from 'vue';
+import { ArrowDown } from '@element-plus/icons-vue';
 
 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: () => ({
+import type { MenuButton, MenuComponent, Services } from '../type';
+
+const props = withDefaults(
+  defineProps<{
+    data?: MenuButton | MenuComponent;
+    eventType?: 'mousedown' | 'mouseup' | 'click';
+  }>(),
+  {
+    data: () => ({
       type: 'text',
       display: false,
     }),
+    eventType: 'click',
   },
-
-  eventType: {
-    type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
-    default: 'click',
-  },
-});
-
+);
 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 props.data === 'string') return false;
+  if (props.data.type === 'component') return false;
+  if (typeof props.data.disabled === 'function') {
+    return props.data.disabled(services);
   }
+  return props.data.disabled;
 });
 
-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);
+const display = computed(() => {
+  if (!props.data) return false;
+  if (typeof props.data === 'string') return true;
+  if (typeof props.data.display === 'function') {
+    return props.data.display(services);
   }
-  return item.value.disabled;
+  return props.data.display ?? true;
 });
 
 const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
@@ -174,15 +85,6 @@ const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
   }
 };
 
-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);

package/src/fields/UISelect.vue

@@ -3,8 +3,8 @@
     <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
   <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 v-if="val" content="清除">
+      <el-button 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>

package/src/index.ts

@@ -44,6 +44,8 @@ export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPa
 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';
+export { default as ContentMenu } from './components/ContentMenu.vue';
+export { default as Icon } from './components/Icon.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项

package/src/layouts/NavMenu.vue

@@ -1,41 +1,174 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
     <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>
+      <tool-button :data="item" v-for="(item, index) in buttons[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw } from 'vue';
+import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
+
+import { NodeType } from '@tmagic/schema';
 
 import ToolButton from '../components/ToolButton.vue';
-import { GetColumnWidth, MenuBarData, Services } from '../type';
+import { ColumnLayout, GetColumnWidth, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
 
-export default defineComponent({
-  name: 'nav-menu',
+const props = withDefaults(
+  defineProps<{
+    data?: MenuBarData;
+    height?: number;
+  }>(),
+  {
+    data: () => ({}),
+    height: 35,
+  },
+);
 
-  components: { ToolButton },
+const services = inject<Services>('services');
+const uiService = services?.uiService;
 
-  props: {
-    data: {
-      type: Object as PropType<MenuBarData>,
-      default: () => ({}),
-    },
+const columnWidth = computed(() => services?.uiService.get<GetColumnWidth>('columnWidth'));
+const keys = Object.values(ColumnLayout);
 
-    height: {
-      type: Number,
-    },
-  },
+const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
 
-  setup(props) {
-    const services = inject<Services>('services');
+const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+const ctrl = isMac ? 'Command' : 'Ctrl';
 
-    return {
-      keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
+  if (typeof item !== 'string') {
+    return [item];
+  }
+  const config: (MenuButton | MenuComponent)[] = [];
+  switch (item) {
+    case '/':
+      config.push({
+        type: 'divider',
+        className: 'divider',
+      });
+      break;
+    case 'zoom':
+      config.push(
+        ...getConfig('zoom-out'),
+        ...getConfig(`${parseInt(`${zoom.value * 100}`, 10)}%`),
+        ...getConfig('zoom-in'),
+        ...getConfig('scale-to-original'),
+        ...getConfig('scale-to-fit'),
+      );
+      break;
+    case 'delete':
+      config.push({
+        type: 'button',
+        className: 'delete',
+        icon: markRaw(Delete),
+        tooltip: `刪除(Delete)`,
+        disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
+        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+      });
+      break;
+    case 'undo':
+      config.push({
+        type: 'button',
+        className: 'undo',
+        icon: markRaw(Back),
+        tooltip: `后退(${ctrl}+z)`,
+        disabled: () => !services?.historyService.state.canUndo,
+        handler: () => services?.editorService.undo(),
+      });
+      break;
+    case 'redo':
+      config.push({
+        type: 'button',
+        className: 'redo',
+        icon: markRaw(Right),
+        tooltip: `前进(${ctrl}+Shift+z)`,
+        disabled: () => !services?.historyService.state.canRedo,
+        handler: () => services?.editorService.redo(),
+      });
+      break;
+    case 'zoom-in':
+      config.push({
+        type: 'button',
+        className: 'zoom-in',
+        icon: markRaw(ZoomIn),
+        tooltip: `放大(${ctrl}+=)`,
+        handler: () => uiService?.zoom(0.1),
+      });
+      break;
+    case 'zoom-out':
+      config.push({
+        type: 'button',
+        className: 'zoom-out',
+        icon: markRaw(ZoomOut),
+        tooltip: `縮小(${ctrl}+-)`,
+        handler: () => uiService?.zoom(-0.1),
+      });
+      break;
+    case 'scale-to-original':
+      config.push({
+        type: 'button',
+        className: 'scale-to-original',
+        icon: markRaw(ScaleToOriginal),
+        tooltip: `缩放到实际大小(${ctrl}+1)`,
+        handler: () => uiService?.set('zoom', 1),
+      });
+      break;
+    case 'scale-to-fit':
+      config.push({
+        type: 'button',
+        className: 'scale-to-fit',
+        icon: markRaw(FullScreen),
+        tooltip: `缩放以适应(${ctrl}+0)`,
+        handler: () => uiService?.set('zoom', uiService.calcZoom()),
+      });
+      break;
+    case 'rule':
+      config.push({
+        type: 'button',
+        className: 'rule',
+        icon: markRaw(Memo),
+        tooltip: showRule.value ? '隐藏标尺' : '显示标尺',
+        handler: () => uiService?.set('showRule', !showRule.value),
+      });
+      break;
+    case 'guides':
+      config.push({
+        type: 'button',
+        className: 'guides',
+        icon: markRaw(Grid),
+        tooltip: showGuides.value ? '隐藏参考线' : '显示参考线',
+        handler: () => uiService?.set('showGuides', !showGuides.value),
+      });
+      break;
+    default:
+      config.push({
+        type: 'text',
+        text: item,
+      });
+  }
+  return config;
+};
 
-      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
-    };
-  },
+const buttons = computed(() => {
+  const data: {
+    [ColumnLayout.LEFT]: (MenuButton | MenuComponent)[];
+    [ColumnLayout.CENTER]: (MenuButton | MenuComponent)[];
+    [ColumnLayout.RIGHT]: (MenuButton | MenuComponent)[];
+  } = {
+    [ColumnLayout.LEFT]: [],
+    [ColumnLayout.CENTER]: [],
+    [ColumnLayout.RIGHT]: [],
+  };
+  keys.forEach((key) => {
+    const items = props.data[key] || [];
+    items.forEach((item) => {
+      data[key].push(...getConfig(item));
+    });
+  });
+  return data;
 });
 </script>

package/src/layouts/PropsPanel.vue

@@ -2,9 +2,9 @@
   <div class="`m-editor-props-panel">
     <slot name="props-panel-header"></slot>
     <m-form
+      ref="configForm"
       :class="`m-editor-props-panel ${propsPanelSize}`"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-      ref="configForm"
       :size="propsPanelSize"
       :init-values="values"
       :config="curFormConfig"
@@ -13,69 +13,67 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 
 import type { Services } from '../type';
 
-export default defineComponent({
-  name: 'm-editor-props-panel',
+const emit = defineEmits(['mounted']);
 
-  emits: ['mounted'],
+const internalInstance = getCurrentInstance();
+const values = ref<FormValue>({});
+const configForm = ref<InstanceType<typeof MForm>>();
+// ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
+const curFormConfig = ref<any>([]);
+const services = inject<Services>('services');
+const node = computed(() => services?.editorService.get<MNode | null>('node'));
+const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
 
-  setup(props, { emit }) {
-    const internalInstance = getCurrentInstance();
-    const values = ref<FormValue>({});
-    const configForm = ref<InstanceType<typeof MForm>>();
-    // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
-    const curFormConfig = ref<any>([]);
-    const services = inject<Services>('services');
-    const node = computed(() => services?.editorService.get<MNode | null>('node'));
+const init = async () => {
+  if (!node.value) {
+    curFormConfig.value = [];
+    return;
+  }
 
-    const init = async () => {
-      if (!node.value) {
-        curFormConfig.value = [];
-        return;
-      }
+  const type = node.value.type || (node.value.items ? 'container' : 'text');
+  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
+  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);
+services?.propsService.on('props-configs-change', init);
 
-    watchEffect(init);
-    services?.propsService.on('props-configs-change', init);
+onMounted(() => {
+  emit('mounted', internalInstance);
+});
 
-    onMounted(() => {
-      emit('mounted', internalInstance);
-    });
+watchEffect(() => {
+  if (configForm.value && stage.value) {
+    configForm.value.formState.stage = stage.value;
+  }
+});
 
-    return {
-      values,
-      configForm,
-      curFormConfig,
-      propsPanelSize: computed(() => services?.uiService.get('propsPanelSize') || 'small'),
+const submit = async () => {
+  try {
+    const values = await configForm.value?.submitForm();
+    services?.editorService.update(values);
+  } catch (e: any) {
+    console.error(e);
+    ElMessage.closeAll();
+    ElMessage.error({
+      duration: 10000,
+      showClose: true,
+      message: e.message,
+      dangerouslyUseHTMLString: true,
+    });
+  }
+};
 
-      async submit() {
-        try {
-          const values = await configForm.value?.submitForm();
-          services?.editorService.update(values);
-        } catch (e: any) {
-          console.error(e);
-          ElMessage.closeAll();
-          ElMessage.error({
-            duration: 10000,
-            showClose: true,
-            message: e.message,
-            dangerouslyUseHTMLString: true,
-          });
-        }
-      },
-    };
-  },
-});
+defineExpose({ submit });
 </script>

package/src/layouts/sidebar/LayerMenu.vue

@@ -9,7 +9,7 @@ import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 import { NodeType } from '@tmagic/schema';
 
 import ContentMenu from '../../components/ContentMenu.vue';
-import type { ComponentGroup, MenuButton, MenuItem, Services } from '../../type';
+import type { ComponentGroup, MenuButton, MenuComponent, Services } from '../../type';
 
 export default defineComponent({
   components: { ContentMenu },
@@ -22,7 +22,7 @@ export default defineComponent({
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
 
-    const layerContentMenu = inject<MenuItem[]>('layerContentMenu', []);
+    const layerContentMenu = inject<(MenuComponent | MenuButton)[]>('layerContentMenu', []);
 
     const createMenuItems = (group: ComponentGroup): MenuButton[] =>
       group.items.map((component) => ({
@@ -77,7 +77,7 @@ export default defineComponent({
 
     return {
       menu,
-      menuData: computed<MenuItem[]>(() => [
+      menuData: computed<(MenuButton | MenuComponent)[]>(() => [
         {
           type: 'button',
           text: '新增',