@tmagic/editor 1.1.0-beta.9 → 1.1.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.9",
+  "version": "1.1.2",
   "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.9",
-    "@tmagic/form": "1.1.0-beta.9",
-    "@tmagic/schema": "1.1.0-beta.9",
-    "@tmagic/stage": "1.1.0-beta.9",
-    "@tmagic/utils": "1.1.0-beta.9",
+    "@element-plus/icons-vue": "^2.0.9",
+    "@tmagic/core": "1.1.2",
+    "@tmagic/form": "1.1.2",
+    "@tmagic/schema": "1.1.2",
+    "@tmagic/stage": "1.1.2",
+    "@tmagic/utils": "1.1.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -57,14 +57,14 @@
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.1.0-beta.9",
+    "@tmagic/form": "1.1.2",
     "element-plus": "^2.2.6",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {

package/src/Editor.vue

@@ -14,6 +14,10 @@
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
+
+          <template #component-list-item="{ component }">
+            <slot name="component-list-item" :component="component"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>
@@ -21,6 +25,7 @@
     <template #workspace>
       <slot name="workspace" :editorService="editorService">
         <workspace>
+          <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
           <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
           <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
@@ -30,7 +35,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
+        <props-panel @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
@@ -63,7 +68,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',
@@ -96,12 +101,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: () => [],
     },
 
@@ -192,9 +197,15 @@ export default defineComponent({
   emits: ['props-panel-mounted', 'update:modelValue'],
 
   setup(props, { emit }) {
-    editorService.on('root-change', () => {
-      const node = editorService.get<MNode | null>('node') || props.defaultSelected;
-      node && editorService.select(node);
+    editorService.on('root-change', (value) => {
+      const node = editorService.get<MNode | null>('node');
+      const nodeId = node?.id || props.defaultSelected;
+      if (nodeId && node !== value) {
+        editorService.select(nodeId);
+      } else {
+        editorService.set('nodes', [value]);
+      }
+
       emit('update:modelValue', toRaw(editorService.get('root')));
     });
 
@@ -266,7 +277,16 @@ export default defineComponent({
       },
     );
 
-    onUnmounted(() => editorService.destroy());
+    uiService.initColumnWidth();
+
+    onUnmounted(() => {
+      editorService.destroy();
+      historyService.destroy();
+      propsService.destroy();
+      uiService.destroy();
+      componentListService.destroy();
+      storageService.destroy();
+    });
 
     const services: Services = {
       componentListService,

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,17 @@
 <template>
-  <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>
+  <el-icon v-if="!icon" class="magic-editor-icon"><Edit></Edit></el-icon>
+  <el-icon v-else-if="typeof icon === 'string' && icon.startsWith('http')" class="magic-editor-icon"
+    ><img :src="icon"
+  /></el-icon>
+  <i v-else-if="typeof icon === 'string'" class="magic-editor-icon" :class="icon"></i>
+  <el-icon v-else class="magic-editor-icon"><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>