@tmagic/editor 1.3.9 → 1.3.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.9",
+  "version": "1.3.11",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.9",
-    "@tmagic/dep": "1.3.9",
-    "@tmagic/design": "1.3.9",
-    "@tmagic/form": "1.3.9",
-    "@tmagic/schema": "1.3.9",
-    "@tmagic/stage": "1.3.9",
-    "@tmagic/table": "1.3.9",
-    "@tmagic/utils": "1.3.9",
+    "@tmagic/core": "1.3.11",
+    "@tmagic/dep": "1.3.11",
+    "@tmagic/design": "1.3.11",
+    "@tmagic/form": "1.3.11",
+    "@tmagic/schema": "1.3.11",
+    "@tmagic/stage": "1.3.11",
+    "@tmagic/table": "1.3.11",
+    "@tmagic/utils": "1.3.11",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.3.8"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.9",
-    "@tmagic/form": "1.3.9",
+    "@tmagic/design": "1.3.11",
+    "@tmagic/form": "1.3.11",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

package/src/components/CodeBlockEditor.vue

@@ -18,7 +18,7 @@
     @closed="closedHandler"
   >
     <template #left>
-      <TMagicButton type="primary" text @click="difVisible = true">查看修改</TMagicButton>
+      <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
     </template>
   </component>
 

package/src/components/FloatingBox.vue

@@ -6,7 +6,7 @@
           <span>{{ title }}</span>
         </slot>
         <div>
-          <TMagicButton text size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+          <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
         </div>
       </div>
       <div class="m-editor-float-box-body">

package/src/components/ScrollViewer.vue

@@ -4,11 +4,13 @@
       <slot></slot>
     </div>
 
+    <slot name="content"></slot>
+
     <ScrollBar
       v-if="scrollHeight > wrapHeight"
       :scroll-size="scrollHeight"
-      :size="wrapHeight"
       :pos="vOffset"
+      :size="wrapHeight"
       @scroll="vScrollHandler"
     ></ScrollBar>
     <ScrollBar

package/src/components/ToolButton.vue

@@ -12,11 +12,11 @@
 
     <template v-else-if="data.type === 'button'">
       <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <TMagicButton size="small" text :disabled="disabled"
+        <TMagicButton size="small" link :disabled="disabled"
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>

package/src/fields/EventSelect.vue

@@ -36,7 +36,7 @@
           ></m-form-container>
           <TMagicButton
             style="color: #f56c6c"
-            text
+            link
             :icon="Delete"
             :disabled="disabled"
             :size="size"

package/src/fields/KeyValue.vue

@@ -51,7 +51,7 @@
       v-if="config.advanced"
       size="default"
       :disabled="disabled"
-      text
+      link
       :icon="CodeIcon"
       @click="showCode = !showCode"
     ></TMagicButton>

package/src/fields/UISelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" link style="padding: 0"
       >取消</TMagicButton
     >
   </div>
@@ -13,14 +13,14 @@
           :icon="Close"
           :disabled="disabled"
           :size="size"
-          text
+          link
           @click.stop="deleteHandler"
         ></TMagicButton>
       </TMagicTooltip>
 
       <TMagicTooltip content="点击选中组件" placement="top">
         <TMagicButton
-          text
+          link
           style="padding: 0; margin: 0"
           :disabled="disabled"
           :size="size"
@@ -33,7 +33,7 @@
     </template>
 
     <TMagicTooltip v-else content="点击此处选择" placement="top">
-      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+      <TMagicButton link style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
         >点击此处选择</TMagicButton
       >
     </TMagicTooltip>

package/src/hooks/use-node-status.ts

@@ -5,14 +5,14 @@ import type { Id, MNode } from '@tmagic/schema';
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
 import { traverseNode } from '@editor/utils';
 
-const createPageNodeStatus = (nodeData: TreeNodeData[], initalLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
+const createPageNodeStatus = (nodeData: TreeNodeData[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
   nodeData.forEach((node: MNode) =>
     traverseNode(node, (node) => {
       map.set(
         node.id,
-        initalLayerNodeStatus?.get(node.id) || {
+        initialLayerNodeStatus?.get(node.id) || {
           visible: true,
           expand: false,
           selected: false,

package/src/hooks/use-stage-overlay.ts

@@ -0,0 +1,158 @@
+import { computed, inject, nextTick, ref, watch } from 'vue';
+
+import type StageCore from '@tmagic/stage';
+
+import type { Services, StageOptions } from '@editor/type';
+
+import { useStage } from './use-stage';
+
+export const useStageOverlay = () => {
+  const services = inject<Services>('services');
+  const stageOptions = inject<StageOptions>('stageOptions');
+
+  const wrapWidth = ref(0);
+  const wrapHeight = ref(0);
+  const stageOverlayVisible = ref(false);
+  const stageOverlay = ref<HTMLDivElement>();
+
+  const stage = computed(() => services?.editorService.get('stage'));
+
+  let subStage: StageCore | null = null;
+
+  const div = document.createElement('div');
+  let selectEl: HTMLElement | null = null;
+
+  const render = () => {
+    if (!selectEl) return;
+
+    const content = selectEl.cloneNode(true) as HTMLElement;
+    content.style.position = 'static';
+    Array.from(div.children).forEach((element) => {
+      element.remove();
+    });
+    div.appendChild(content);
+
+    subStage?.renderer.contentWindow?.magic.onPageElUpdate(div);
+
+    subStage?.select(content);
+  };
+
+  const copyDocumentElement = () => {
+    const doc = subStage?.renderer.getDocument();
+    const documentElement = stage.value?.renderer.getDocument()?.documentElement;
+
+    if (doc && documentElement) {
+      doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
+    }
+  };
+
+  const updateOverlay = () => {
+    if (!selectEl) return;
+
+    const { scrollWidth, scrollHeight } = selectEl;
+
+    stageOverlay.value!.style.width = `${scrollWidth}px`;
+    stageOverlay.value!.style.height = `${scrollHeight}px`;
+
+    wrapWidth.value = scrollWidth;
+    wrapHeight.value = scrollHeight;
+  };
+
+  const updateHandler = () => {
+    render();
+    updateOverlay();
+  };
+
+  const addHandler = () => {
+    render();
+    updateOverlay();
+  };
+
+  const removeHandler = () => {
+    render();
+    updateOverlay();
+  };
+
+  const openOverlay = async (el: HTMLElement) => {
+    selectEl = el;
+
+    stageOverlayVisible.value = true;
+
+    if (!stageOverlay.value) {
+      await nextTick();
+    }
+
+    if (!stageOptions) {
+      return;
+    }
+
+    subStage = useStage({
+      ...stageOptions,
+      runtimeUrl: '',
+      autoScrollIntoView: false,
+      render(stage: StageCore) {
+        copyDocumentElement();
+
+        const rootEl = stage.renderer.getDocument()?.getElementById('app');
+        if (rootEl) {
+          rootEl.remove();
+        }
+
+        div.style.cssText = `
+          width: ${el.scrollWidth}px;
+          height: ${el.scrollHeight}px;
+          background-color: #fff;
+        `;
+
+        render();
+
+        return div;
+      },
+    });
+    subStage.mount(stageOverlay.value!);
+
+    const { mask, renderer } = subStage;
+
+    const { contentWindow } = renderer;
+    mask.showRule(false);
+
+    updateOverlay();
+
+    contentWindow?.magic.onRuntimeReady({});
+
+    services?.editorService.on('update', updateHandler);
+    services?.editorService.on('add', addHandler);
+    services?.editorService.on('remove', removeHandler);
+  };
+
+  const closeOverlay = () => {
+    stageOverlayVisible.value = false;
+    subStage?.destroy();
+    subStage = null;
+
+    services?.editorService.off('update', updateHandler);
+    services?.editorService.off('add', addHandler);
+    services?.editorService.off('remove', removeHandler);
+  };
+
+  watch(stage, (stage) => {
+    if (stage) {
+      stage.on('dblclick', async (event: MouseEvent) => {
+        const el = await stage.actionManager.getElementFromPoint(event);
+        if (el) {
+          openOverlay(el);
+        }
+      });
+    } else if (subStage) {
+      closeOverlay();
+    }
+  });
+
+  return {
+    wrapWidth,
+    wrapHeight,
+    stageOverlayVisible,
+    stageOverlay,
+    closeOverlay,
+  };
+};

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -4,7 +4,7 @@
     class="m-editor-page-bar-switch-type-button"
     size="small"
     :key="item.type"
-    text
+    link
     :class="{ active: modelValue === item.type }"
     :type="modelValue === item.type ? 'primary' : ''"
     @click="clickHandler(item.type)"

package/src/layouts/workspace/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="nodes.length === 1" class="m-editor-breadcrumb">
     <template v-for="(item, index) in path" :key="item.id">
-      <TMagicButton text :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
+      <TMagicButton link :disabled="item.id === node?.id" @click="select(item)">{{ item.name }}</TMagicButton
       ><span v-if="index < path.length - 1">/</span>
     </template>
   </div>

package/src/layouts/workspace/viewer/Stage.vue

@@ -22,16 +22,21 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
+
     <NodeListMenu></NodeListMenu>
 
-    <Teleport to="body">
-      <ViewerMenu
-        ref="menu"
-        :is-multi-select="isMultiSelect"
-        :stage-content-menu="stageContentMenu"
-        :custom-content-menu="customContentMenu"
-      ></ViewerMenu>
-    </Teleport>
+    <template #content>
+      <StageOverlay></StageOverlay>
+
+      <Teleport to="body">
+        <ViewerMenu
+          ref="menu"
+          :is-multi-select="isMultiSelect"
+          :stage-content-menu="stageContentMenu"
+          :custom-content-menu="customContentMenu"
+        ></ViewerMenu>
+      </Teleport>
+    </template>
   </ScrollViewer>
 </template>
 
@@ -49,6 +54,7 @@ import { getConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
 import NodeListMenu from './NodeListMenu.vue';
+import StageOverlay from './StageOverlay.vue';
 import ViewerMenu from './ViewerMenu.vue';
 
 defineOptions({
@@ -93,10 +99,13 @@ watchEffect(() => {
 
   services?.editorService.set('stage', markRaw(stage));
 
-  stage?.mount(stageContainer.value);
+  stage.mount(stageContainer.value);
+
+  if (!node.value?.id) {
+    return;
+  }
 
-  if (!node.value?.id) return;
-  stage?.on('runtime-ready', (rt) => {
+  stage.on('runtime-ready', (rt) => {
     runtime = rt;
     // toRaw返回的值是一个引用而非快照，需要cloneDeep
     root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
@@ -210,8 +219,8 @@ const dropHandler = async (e: DragEvent) => {
 
       if (parentEl && doc) {
         const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-        left = left - calcValueByFontsize(doc, parentLeft);
-        top = top - calcValueByFontsize(doc, parentTop);
+        left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
+        top = top - calcValueByFontsize(doc, parentTop) * zoom.value;
       }
     }
 

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlay">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlay"><CloseBold /></TMagicIcon>
+    <div ref="stageOverlay" class="m-editor-stage-overlay-container" @click.stop></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CloseBold } from '@element-plus/icons-vue';
+
+import { TMagicIcon } from '@tmagic/design';
+
+import { useStageOverlay } from '@editor/hooks/use-stage-overlay';
+
+const { stageOverlayVisible, stageOverlay, closeOverlay } = useStageOverlay();
+</script>

package/src/theme/stage.scss

@@ -26,6 +26,30 @@
   }
 }
 
+.m-editor-stage-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  z-index: 20;
+  overflow: auto;
+}
+
+.m-editor-stage-overlay-container {
+  position: relative;
+  flex-shrink: 0;
+  margin: auto;
+}
+
+.m-editor-stage-overlay-close.tmagic-design-icon {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+}
+
 .m-editor-stage-float-button {
   cursor: pointer;
   transform: translateY(-50%);

package/types/components/ScrollViewer.vue.d.ts

@@ -52,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
 }, {}>, {
     default?(_: {}): any;
+    content?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/hooks/use-stage-overlay.d.ts

@@ -0,0 +1,7 @@
+export declare const useStageOverlay: () => {
+    wrapWidth: import("vue").Ref<number>;
+    wrapHeight: import("vue").Ref<number>;
+    stageOverlayVisible: import("vue").Ref<boolean>;
+    stageOverlay: import("vue").Ref<HTMLDivElement | undefined>;
+    closeOverlay: () => void;
+};

package/types/layouts/workspace/viewer/StageOverlay.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;