@tmagic/editor 1.1.0-beta.6 → 1.1.0-beta.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.6",
+  "version": "1.1.0-beta.9",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.6",
-    "@tmagic/core": "1.1.0-beta.6",
-    "@tmagic/form": "1.1.0-beta.6",
-    "@tmagic/schema": "1.1.0-beta.6",
-    "@tmagic/stage": "1.1.0-beta.6",
-    "@tmagic/utils": "1.1.0-beta.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",
     "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.6",
+    "@tmagic/form": "1.1.0-beta.9",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.37"

package/src/Editor.vue

@@ -30,7 +30,7 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+        <props-panel ref="propsPanel" @mounted="(instance: any) => $emit('props-panel-mounted', instance)">
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
           </template>
@@ -49,7 +49,7 @@ import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
+import { CONTAINER_HIGHLIGHT_CLASS, ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
 
 import Framework from './layouts/Framework.vue';
 import NavMenu from './layouts/NavMenu.vue';
@@ -170,6 +170,11 @@ export default defineComponent({
       default: 800,
     },
 
+    containerHighlightType: {
+      type: String as PropType<ContainerHighlightType>,
+      default: ContainerHighlightType.DEFAULT,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -289,6 +294,7 @@ export default defineComponent({
         isContainer: props.isContainer,
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
+        containerHighlightType: props.containerHighlightType,
       }),
     );
 

package/src/components/Icon.vue

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

package/src/fields/UISelect.vue

@@ -21,7 +21,6 @@ import { FormState } from '@tmagic/form';
 import { Services } from '../type';
 
 const props = defineProps<{
-  labelWidth: string;
   config: any;
   model: any;
   prop: string;

package/src/index.ts

@@ -58,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/workspace/PageBar.vue

@@ -1,191 +1,73 @@
 <template>
-  <div class="m-editor-page-bar" ref="pageBar">
-    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
-      <el-icon><plus></plus></el-icon>
-    </div>
+  <PageBarScrollContainer>
     <div
-      v-if="scrollState.canScroll"
-      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-      @click="scrollState.scroll('left')"
+      v-for="item in (root && root.items) || []"
+      class="m-editor-page-bar-item"
+      :key="item.key"
+      :class="{ active: page?.id === item.id }"
+      @click="switchPage(item)"
     >
-      <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
-    </div>
-    <div
-      v-if="root"
-      class="m-editor-page-bar-items"
-      ref="itemsContainer"
-      :style="`width: ${scrollState.itemsContainerWidth}px`"
-    >
-      <div
-        v-for="item in root.items"
-        :key="item.key"
-        class="m-editor-page-bar-item"
-        :class="{ active: page?.id === item.id }"
-        @click="switchPage(item)"
-      >
-        <div class="m-editor-page-bar-title">
-          <slot name="page-bar-title" :page="item">
-            <el-tooltip effect="dark" placement="top-start" :content="item.name">
-              <span>{{ item.name }}</span>
-            </el-tooltip>
+      <div class="m-editor-page-bar-title">
+        <slot name="page-bar-title" :page="item">
+          <el-tooltip effect="dark" placement="top-start" :content="item.name">
+            <span>{{ item.name }}</span>
+          </el-tooltip>
+        </slot>
+      </div>
+
+      <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <div>
+          <slot name="page-bar-popover" :page="item">
+            <tool-button
+              :data="{
+                type: 'button',
+                text: '复制',
+                icon: DocumentCopy,
+                handler: () => copy(item),
+              }"
+            ></tool-button>
+            <tool-button
+              :data="{
+                type: 'button',
+                text: '删除',
+                icon: Delete,
+                handler: () => remove(item),
+              }"
+            ></tool-button>
           </slot>
         </div>
-
-        <el-popover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
-          <div>
-            <slot name="page-bar-popover" :page="item">
-              <tool-button
-                :data="{
-                  type: 'button',
-                  text: '复制',
-                  icon: DocumentCopy,
-                  handler: () => copy(item),
-                }"
-              ></tool-button>
-              <tool-button
-                :data="{
-                  type: 'button',
-                  text: '删除',
-                  icon: Delete,
-                  handler: () => remove(item),
-                }"
-              ></tool-button>
-            </slot>
-          </div>
-          <template #reference>
-            <el-icon class="m-editor-page-bar-menu-icon">
-              <caret-bottom></caret-bottom>
-            </el-icon>
-          </template>
-        </el-popover>
-      </div>
+        <template #reference>
+          <el-icon class="m-editor-page-bar-menu-icon">
+            <caret-bottom></caret-bottom>
+          </el-icon>
+        </template>
+      </el-popover>
     </div>
-    <div
-      v-if="scrollState.canScroll"
-      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-      @click="scrollState.scroll('right')"
-    >
-      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
-    </div>
-  </div>
+  </PageBarScrollContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
+import { computed, inject } from 'vue';
+import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
 
 import ToolButton from '../../components/ToolButton.vue';
 import type { Services } from '../../type';
-import { generatePageNameByApp } from '../../utils/editor';
-
-const useScroll = (root: ComputedRef<MApp | undefined>) => {
-  const pageBar = ref<HTMLDivElement>();
-  const itemsContainer = ref<HTMLDivElement>();
-
-  const pageBarWidth = ref(0);
-  const canScroll = ref(false);
-
-  const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
-
-  let translateLeft = 0;
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width } = contentRect;
-      pageBarWidth.value = width || 0;
-
-      setCanScroll();
-    }
-  });
 
-  const setCanScroll = () => {
-    if (itemsContainer.value) {
-      canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
-    }
-  };
-
-  const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
-    if (!itemsContainer.value) return;
-
-    const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-
-    if (type === 'left') {
-      translateLeft += 100;
-
-      if (translateLeft > 0) {
-        translateLeft = 0;
-      }
-    } else if (type === 'right') {
-      translateLeft -= 100;
-
-      if (-translateLeft > maxScrollLeft) {
-        translateLeft = -maxScrollLeft;
-      }
-    } else if (type === 'start') {
-      translateLeft = 0;
-    } else if (type === 'end') {
-      translateLeft = -maxScrollLeft;
-    }
-
-    itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-  };
-
-  onMounted(() => {
-    pageBar.value && resizeObserver.observe(pageBar.value);
-  });
-
-  onUnmounted(() => {
-    resizeObserver.disconnect();
-  });
-
-  watch(
-    () => root.value?.items.length,
-    (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
-          scroll('start');
-        } else {
-          scroll('end');
-        }
-      });
-    },
-  );
-
-  return {
-    pageBar,
-    itemsContainer,
-    canScroll,
-
-    itemsContainerWidth,
-
-    scroll,
-  };
-};
+import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 
 const root = computed(() => editorService?.get<MApp>('root'));
 
-const scrollState = useScroll(root);
 const page = computed(() => editorService?.get('page'));
 
 const switchPage = (page: MPage) => {
   editorService?.select(page);
 };
 
-const addPage = () => {
-  if (!editorService) return;
-  const pageConfig = {
-    type: NodeType.PAGE,
-    name: generatePageNameByApp(toRaw(editorService.get('root'))),
-  };
-  editorService.add(pageConfig);
-};
-
 const copy = (node: MPage) => {
   node && editorService?.copy(node);
   editorService?.paste({

package/src/layouts/workspace/PageBarScrollContainer.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="m-editor-page-bar" ref="pageBar">
+    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
+      <el-icon><plus></plus></el-icon>
+    </div>
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+      <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
+    </div>
+    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+      <slot></slot>
+    </div>
+    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
+
+import { MApp, NodeType } from '@tmagic/schema';
+
+import type { Services } from '../../type';
+import { generatePageNameByApp } from '../../utils/editor';
+
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+
+const pageBar = ref<HTMLDivElement>();
+const itemsContainer = ref<HTMLDivElement>();
+const pageBarWidth = ref(0);
+const canScroll = ref(false);
+
+const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+
+let translateLeft = 0;
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const { contentRect } of entries) {
+    const { width } = contentRect;
+    pageBarWidth.value = width || 0;
+
+    setCanScroll();
+  }
+});
+
+const setCanScroll = () => {
+  if (itemsContainer.value) {
+    canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+  }
+};
+
+const scroll = (type: 'left' | 'right' | 'start' | 'end') => {
+  if (!itemsContainer.value) return;
+
+  const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+
+  if (type === 'left') {
+    translateLeft += 100;
+
+    if (translateLeft > 0) {
+      translateLeft = 0;
+    }
+  } else if (type === 'right') {
+    translateLeft -= 100;
+
+    if (-translateLeft > maxScrollLeft) {
+      translateLeft = -maxScrollLeft;
+    }
+  } else if (type === 'start') {
+    translateLeft = 0;
+  } else if (type === 'end') {
+    translateLeft = -maxScrollLeft;
+  }
+
+  itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+};
+
+onMounted(() => {
+  pageBar.value && resizeObserver.observe(pageBar.value);
+});
+
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
+
+const root = computed(() => editorService?.get<MApp>('root'));
+
+watch(
+  () => root.value?.items.length,
+  (length = 0, preLength = 0) => {
+    setTimeout(() => {
+      setCanScroll();
+      if (length < preLength) {
+        scroll('start');
+      } else {
+        scroll('end');
+      }
+    });
+  },
+);
+
+const addPage = () => {
+  if (!editorService) return;
+  const pageConfig = {
+    type: NodeType.PAGE,
+    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+  };
+  editorService.add(pageConfig);
+};
+</script>

package/src/layouts/workspace/Stage.vue

@@ -81,6 +81,7 @@ watchEffect(() => {
     isContainer: stageOptions.isContainer,
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
@@ -118,10 +119,13 @@ watchEffect(() => {
 
   stage?.on('update', (ev: UpdateEventData) => {
     if (ev.parentEl) {
-      services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+      for (const data of ev.data) {
+        services?.editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
       return;
     }
-    services?.editorService.update({ id: ev.el.id, style: ev.style });
+
+    services?.editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
   });
 
   stage?.on('sort', (ev: SortEventData) => {

package/src/layouts/workspace/ViewerMenu.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+import { computed, inject, markRaw, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { MNode, NodeType } from '@tmagic/schema';
@@ -34,10 +34,10 @@ const menuData = reactive<MenuItem[]>([
   {
     type: 'button',
     text: '水平居中',
-    display: () => canCenter.value && !props.isMultiSelect,
+    display: () => canCenter.value,
     handler: () => {
-      if (!node.value) return;
-      editorService?.alignCenter(node.value);
+      if (!nodes.value) return;
+      editorService?.alignCenter(nodes.value);
     },
   },
   {
@@ -133,11 +133,6 @@ const menuData = reactive<MenuItem[]>([
   ...stageContentMenu,
 ]);
 
-onMounted(async () => {
-  const data = await storageService.getItem(COPY_STORAGE_KEY);
-  canPaste.value = data !== 'undefined' && !!data;
-});
-
 watch(
   parent,
   async () => {
@@ -152,8 +147,10 @@ watch(
   { immediate: true },
 );
 
-const show = (e: MouseEvent) => {
+const show = async (e: MouseEvent) => {
   menu.value?.show(e);
+  const data = await storageService.getItem(COPY_STORAGE_KEY);
+  canPaste.value = data !== 'undefined' && !!data;
 };
 
 defineExpose({ show });

package/src/layouts/workspace/Workspace.vue

@@ -72,7 +72,7 @@ export default defineComponent({
         })
         .keydown([ctrl, 'v'], (e) => {
           e.inputEvent.preventDefault();
-          nodes.value && services?.editorService.paste();
+          nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
         })
         .keydown([ctrl, 'x'], (e) => {
           e.inputEvent.preventDefault();