@tmagic/editor 1.1.0-beta.12 → 1.1.0-beta.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.12",
+  "version": "1.1.0-beta.13",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -44,12 +44,12 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/core": "1.1.0-beta.12",
-    "@tmagic/form": "1.1.0-beta.12",
-    "@tmagic/schema": "1.1.0-beta.12",
-    "@tmagic/stage": "1.1.0-beta.12",
-    "@tmagic/utils": "1.1.0-beta.12",
+    "@element-plus/icons-vue": "^2.0.9",
+    "@tmagic/core": "1.1.0-beta.13",
+    "@tmagic/form": "1.1.0-beta.13",
+    "@tmagic/schema": "1.1.0-beta.13",
+    "@tmagic/stage": "1.1.0-beta.13",
+    "@tmagic/utils": "1.1.0-beta.13",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -62,7 +62,7 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.12",
+    "@tmagic/form": "1.1.0-beta.13",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"

package/src/Editor.vue

@@ -64,7 +64,7 @@ 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';
+import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -97,12 +97,12 @@ export default defineComponent({
     },
 
     layerContentMenu: {
-      type: Array as PropType<MenuItem[]>,
+      type: Array as PropType<(MenuButton | MenuComponent)[]>,
       default: () => [],
     },
 
     stageContentMenu: {
-      type: Array as PropType<MenuItem[]>,
+      type: Array as PropType<(MenuButton | MenuComponent)[]>,
       default: () => [],
     },
 

package/src/components/ContentMenu.vue

@@ -25,13 +25,13 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
-import { MenuButton, MenuItem } from '../type';
+import { MenuButton, MenuComponent } from '../type';
 
 import ToolButton from './ToolButton.vue';
 
 const props = withDefaults(
   defineProps<{
-    menuData?: MenuItem[];
+    menuData?: (MenuButton | MenuComponent)[];
     isSubMenu?: boolean;
   }>(),
   {
@@ -45,7 +45,7 @@ const emit = defineEmits(['hide', 'show']);
 const menu = ref<HTMLDivElement>();
 const subMenu = ref<any>();
 const visible = ref(false);
-const subMenuData = ref<MenuItem[]>([]);
+const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const menuStyle = ref({
   left: '0',
   top: '0',
@@ -94,7 +94,7 @@ const show = (e: MouseEvent) => {
   }, 300);
 };
 
-const showSubMenu = (item: MenuItem) => {
+const showSubMenu = (item: MenuButton | MenuComponent) => {
   const menuItem = item as MenuButton;
   if (typeof item !== 'object' || !menuItem.items?.length) {
     return;

package/src/components/Icon.vue

@@ -1,29 +1,15 @@
 <template>
-  <el-icon v-if="!icon"><edit></edit></el-icon>
+  <el-icon v-if="!icon"><Edit></Edit></el-icon>
   <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')"><img :src="icon" /></el-icon>
   <i v-else-if="typeof icon === 'string'" :class="icon"></i>
   <el-icon v-else><component :is="toRaw(icon)"></component></el-icon>
 </template>
 
-<script lang="ts">
-import { Component, defineComponent, PropType, toRaw } from 'vue';
+<script lang="ts" setup>
+import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
-export default defineComponent({
-  name: 'm-icon',
-
-  components: { Edit },
-
-  props: {
-    icon: {
-      type: [String, Object] as PropType<string | Component>,
-    },
-  },
-
-  setup() {
-    return {
-      toRaw,
-    };
-  },
-});
+defineProps<{
+  icon?: any;
+}>();
 </script>

package/src/components/ScrollBar.vue

@@ -0,0 +1,147 @@
+<template>
+  <div ref="bar" class="m-editor-scroll-bar" :class="isHorizontal ? 'horizontal' : 'vertical'">
+    <div ref="thumb" class="m-editor-scroll-bar-thumb" :style="thumbStyle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import Gesto from 'gesto';
+
+const props = defineProps<{
+  size: number;
+  scrollSize: number;
+  isHorizontal?: boolean;
+  pos: number;
+}>();
+
+const emit = defineEmits(['scroll']);
+
+const bar = ref<HTMLDivElement>();
+const thumb = ref<HTMLDivElement>();
+
+const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
+const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
+
+const thumbStyle = computed(() => ({
+  [props.isHorizontal ? 'width' : 'height']: `${thumbSize.value}px`,
+  transform: `translate${props.isHorizontal ? 'X' : 'Y'}(${thumbPos.value}px)`,
+}));
+
+let gesto: Gesto;
+
+onMounted(() => {
+  if (!thumb.value) return;
+  const thumbEl = thumb.value;
+  gesto = new Gesto(thumbEl, {
+    container: window,
+  });
+
+  gesto
+    .on('dragStart', (e) => {
+      e.inputEvent.stopPropagation();
+      e.inputEvent.preventDefault();
+    })
+    .on('drag', (e) => {
+      scrollBy(getDelta(e));
+    });
+
+  bar.value?.addEventListener('wheel', wheelHandler, false);
+});
+
+onUnmounted(() => {
+  if (gesto) gesto.off();
+  bar.value?.removeEventListener('wheel', wheelHandler, false);
+});
+
+const wheelHandler = (e: WheelEvent) => {
+  const delta = props.isHorizontal ? e.deltaX : e.deltaY;
+  if (delta) {
+    e.preventDefault();
+  }
+  scrollBy(delta);
+};
+
+const getDelta = (e: any) => {
+  const ratio = (props.isHorizontal ? e.deltaX : e.deltaY) / props.size;
+  return props.scrollSize * ratio;
+};
+
+const scrollBy = (delta: number) => {
+  if (delta < 0) {
+    if (props.pos <= 0) {
+      emit('scroll', 0);
+    } else {
+      emit('scroll', -Math.min(-delta, props.pos));
+    }
+  } else {
+    const leftPos = props.size - (thumbSize.value + thumbPos.value);
+    if (leftPos <= 0) {
+      emit('scroll', 0);
+    } else {
+      emit('scroll', Math.min(delta, leftPos));
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.m-editor-scroll-bar {
+  position: absolute;
+  background-color: transparent;
+  opacity: 0.3;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+
+  .m-editor-scroll-bar-thumb {
+    background-color: #aaa;
+    border-radius: 6px;
+    position: absolute;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: 15px;
+    bottom: 0;
+
+    .m-editor-scroll-bar-thumb {
+      height: 6px;
+      transition: background-color 0.2s linear, height 0.2s ease-in-out;
+      bottom: 2px;
+    }
+  }
+
+  &.vertical {
+    height: 100%;
+    width: 15px;
+    right: 5px;
+
+    .m-editor-scroll-bar-thumb {
+      width: 6px;
+      transition: background-color 0.2s linear, width 0.2s ease-in-out;
+      right: 2px;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: #eee;
+    opacity: 0.9;
+
+    .m-editor-scroll-bar-thumb {
+      background-color: #999;
+    }
+
+    &.horizontal {
+      .m-editor-scroll-bar-thumb {
+        height: 11px;
+      }
+    }
+
+    &.vertical {
+      .m-editor-scroll-bar-thumb {
+        width: 11px;
+      }
+    }
+  }
+}
+</style>

package/src/components/ScrollViewer.vue

@@ -3,64 +3,109 @@
     <div ref="el" :style="style">
       <slot></slot>
     </div>
+
+    <ScrollBar
+      v-if="scrollHeight > wrapHeight"
+      :scroll-size="scrollHeight"
+      :size="wrapHeight"
+      :pos="vOffset"
+      @scroll="vScrollHandler"
+    ></ScrollBar>
+    <ScrollBar
+      v-if="scrollWidth > wrapWidth"
+      :is-horizontal="true"
+      :scroll-size="scrollWidth"
+      :pos="hOffset"
+      :size="wrapWidth"
+      @scroll="hScrollHandler"
+    ></ScrollBar>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
+import { ScrollViewerEvent } from '../type';
 import { ScrollViewer } from '../utils/scroll-viewer';
 
-export default defineComponent({
-  name: 'm-editor-scroll-viewer',
+import ScrollBar from './ScrollBar.vue';
 
-  props: {
-    width: Number,
-    height: Number,
-    zoom: {
-      type: Number,
-      default: 1,
-    },
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+    wrapWidth?: number;
+    wrapHeight?: number;
+    zoom?: number;
+  }>(),
+  {
+    width: 0,
+    height: 0,
+    wrapWidth: 0,
+    wrapHeight: 0,
+    zoom: 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(
-        () => `
+const container = ref<HTMLDivElement>();
+const el = ref<HTMLDivElement>();
+const style = computed(
+  () => `
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `,
-      ),
-    };
+);
+
+const scrollWidth = ref(0);
+const scrollHeight = ref(0);
+
+let scrollViewer: ScrollViewer;
+
+onMounted(() => {
+  if (!container.value || !el.value) return;
+  scrollViewer = new ScrollViewer({
+    container: container.value,
+    target: el.value,
+    zoom: props.zoom,
+  });
+
+  scrollViewer.on('scroll', (data: ScrollViewerEvent) => {
+    hOffset.value = data.scrollLeft;
+    vOffset.value = data.scrollTop;
+    scrollWidth.value = data.scrollWidth;
+    scrollHeight.value = data.scrollHeight;
+  });
+});
+
+onUnmounted(() => {
+  scrollViewer.destroy();
+});
+
+watch(
+  () => props.zoom,
+  () => {
+    scrollViewer.setZoom(props.zoom);
   },
+);
+
+const vOffset = ref(0);
+const vScrollHandler = (delta: number) => {
+  vOffset.value += delta;
+  scrollViewer.scrollTo({
+    top: vOffset.value,
+  });
+};
+const hOffset = ref(0);
+const hScrollHandler = (delta: number) => {
+  hOffset.value += delta;
+  scrollViewer.scrollTo({
+    left: hOffset.value,
+  });
+};
+
+defineExpose({
+  container,
 });
 </script>

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/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, 自定义图片上传方法等编辑器依赖的外部选项