@tmagic/editor 1.3.10 → 1.3.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.10",
+  "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.10",
-    "@tmagic/dep": "1.3.10",
-    "@tmagic/design": "1.3.10",
-    "@tmagic/form": "1.3.10",
-    "@tmagic/schema": "1.3.10",
-    "@tmagic/stage": "1.3.10",
-    "@tmagic/table": "1.3.10",
-    "@tmagic/utils": "1.3.10",
+    "@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.10",
-    "@tmagic/form": "1.3.10",
+    "@tmagic/design": "1.3.11",
+    "@tmagic/form": "1.3.11",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.8"
   },

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/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/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;