@tmagic/editor 1.0.4 → 1.1.0-beta.1

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import { MoveableOptions } from '@tmagic/stage';
 import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
@@ -72,6 +72,18 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
     };
+    isContainer: {
+        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
+    };
+    containerHighlightClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    containerHighlightDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -149,6 +161,18 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
     };
+    isContainer: {
+        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
+    };
+    containerHighlightClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    containerHighlightDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -174,5 +198,8 @@ declare const _default: DefineComponent<{
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
 }>;
 export default _default;

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -10,5 +10,7 @@ declare const _default: DefineComponent<{}, {
     }[] | undefined>;
     appendComponent({ text, type, data }: ComponentItem): void;
     dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
+    dragendHandler(): void;
+    dragHandler(e: DragEvent): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/editor.d.ts

@@ -111,6 +111,12 @@ declare class Editor extends BaseService {
      * @param offset 偏移量
      */
     moveLayer(offset: number | LayerOffset): Promise<void>;
+    /**
+     * 移动到指定容器中
+     * @param config 需要移动的节点
+     * @param targetId 容器ID
+     */
+    moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined>;
     /**
      * 撤销当前操作
      * @returns 上一次数据

package/dist/types/src/type.d.ts

@@ -25,9 +25,12 @@ export interface Services {
 export interface StageOptions {
     runtimeUrl: string;
     autoScrollIntoView: boolean;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
     render: () => HTMLDivElement;
     moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     updateDragEl: (el: HTMLDivElement) => void;
 }
 export interface StoreState {

package/dist/types/src/utils/editor.d.ts

@@ -32,9 +32,13 @@ export declare const generatePageNameByApp: (app: MApp) => string;
  */
 export declare const isFixed: (node: MNode) => boolean;
 export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
-export declare const toRelative: (node: MNode) => MNode;
-export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
+export declare const getRelativeStyle: (style?: Record<string, any>) => Record<string, any>;
+export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout, parentNode: MNode, stage: StageCore) => Record<string, any>;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
-export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
-export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;
+export declare const change2Fixed: (node: MNode, root: MApp) => {
+    left: number;
+    top: number;
+};
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<Record<string, any>>;
 export declare const getGuideLineFromCache: (key: string) => number[];
+export declare const fixNodeLeft: (config: MNode, parent: MContainer, doc?: Document | undefined) => any;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.4",
+  "version": "1.1.0-beta.1",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -42,12 +42,12 @@
   ],
   "dependencies": {
     "@babel/core": "^7.18.0",
-    "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.4",
-    "@tmagic/form": "1.0.4",
-    "@tmagic/schema": "1.0.4",
-    "@tmagic/stage": "1.0.4",
-    "@tmagic/utils": "1.0.4",
+    "@element-plus/icons-vue": "^2.0.6",
+    "@tmagic/core": "1.1.0-beta.1",
+    "@tmagic/form": "1.1.0-beta.1",
+    "@tmagic/schema": "1.1.0-beta.1",
+    "@tmagic/stage": "1.1.0-beta.1",
+    "@tmagic/utils": "1.1.0-beta.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -60,7 +60,7 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.4",
+    "@tmagic/form": "1.1.0-beta.1",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

package/src/Editor.vue

@@ -7,12 +7,12 @@
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
         <sidebar :data="sidebar">
-          <template #layer-panel>
-            <slot name="layer-panel"></slot>
+          <template #layer-panel-header>
+            <slot name="layer-panel-header"></slot>
           </template>
 
-          <template #component-list-panel>
-            <slot name="component-list-panel"></slot>
+          <template #component-list-panel-header>
+            <slot name="component-list-panel-header"></slot>
           </template>
         </sidebar>
       </slot>
@@ -30,7 +30,11 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+          <template #props-panel-header>
+            <slot name="props-panel-header"></slot>
+          </template>
+        </props-panel>
       </slot>
     </template>
 
@@ -45,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 type { MoveableOptions } from '@tmagic/stage';
+import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
 
 import Framework from '@editor/layouts/Framework.vue';
 import NavMenu from '@editor/layouts/NavMenu.vue';
@@ -150,6 +154,21 @@ export default defineComponent({
       default: (el: HTMLElement) => Boolean(el.id),
     },
 
+    isContainer: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+    },
+
+    containerHighlightClassName: {
+      type: String,
+      default: CONTAINER_HIGHLIGHT_CLASS,
+    },
+
+    containerHighlightDuration: {
+      type: Number,
+      default: 800,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -265,6 +284,9 @@ export default defineComponent({
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
         updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration,
       }),
     );
 

package/src/components/Icon.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { Component, defineComponent, PropType, toRaw } from 'vue';
-import { Edit } from '@element-plus/icons';
+import { Edit } from '@element-plus/icons-vue';
 
 export default defineComponent({
   name: 'm-icon',

package/src/components/ToolButton.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
-import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons';
+import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 

package/src/fields/UISelect.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons';
+import { Close, Delete, Pointer } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 

package/src/layouts/AddPageBox.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { defineComponent, inject, toRaw } from 'vue';
-import { Plus } from '@element-plus/icons';
+import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 

package/src/layouts/PropsPanel.vue

@@ -1,13 +1,16 @@
 <template>
-  <m-form
-    :class="`m-editor-props-panel ${propsPanelSize}`"
-    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-    ref="configForm"
-    :size="propsPanelSize"
-    :init-values="values"
-    :config="curFormConfig"
-    @change="submit"
-  ></m-form>
+  <div class="`m-editor-props-panel">
+    <slot name="props-panel-header"></slot>
+    <m-form
+      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      ref="configForm"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      @change="submit"
+    ></m-form>
+  </div>
 </template>
 
 <script lang="ts">

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,6 +1,7 @@
 <template>
   <el-scrollbar>
-    <slot name="component-list-panel"></slot>
+    <slot name="component-list-panel-header"></slot>
+
     <el-collapse class="ui-component-panel" :model-value="collapseValue">
       <el-input
         prefix-icon="el-icon-search"
@@ -20,6 +21,8 @@
             :key="item.type"
             @click="appendComponent(item)"
             @dragstart="dragstartHandler(item, $event)"
+            @dragend="dragendHandler"
+            @drag="dragHandler"
           >
             <m-icon :icon="item.icon"></m-icon>
 
@@ -37,8 +40,12 @@
 import { computed, defineComponent, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
+import type StageCore from '@tmagic/stage';
+import { GHOST_EL_ID_PREFIX } from '@tmagic/stage';
+import { addClassName, removeClassNameByClassName } from '@tmagic/utils';
+
 import MIcon from '@editor/components/Icon.vue';
-import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
+import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
 export default defineComponent({
   name: 'ui-component-panel',
@@ -48,6 +55,9 @@ export default defineComponent({
   setup() {
     const searchText = ref('');
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
+
+    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
     const list = computed(() =>
       services?.componentListService.getList().map((group: ComponentGroup) => ({
         ...group,
@@ -60,6 +70,10 @@ export default defineComponent({
         .map((x, i) => i),
     );
 
+    let timeout: NodeJS.Timeout | undefined;
+    let clientX: number;
+    let clientY: number;
+
     return {
       searchText,
       collapseValue,
@@ -86,6 +100,45 @@ export default defineComponent({
           );
         }
       },
+
+      dragendHandler() {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+        }
+        clientX = 0;
+        clientY = 0;
+      },
+
+      dragHandler(e: DragEvent) {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = undefined;
+          }
+          return;
+        }
+
+        if (timeout) return;
+
+        timeout = globalThis.setTimeout(async () => {
+          if (!stageOptions || !stage.value) return;
+          const doc = stage.value.renderer.contentWindow?.document;
+          const els = stage.value.getElementsFromPoint(e);
+          for (const el of els) {
+            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && (await stageOptions.isContainer(el))) {
+              addClassName(el, doc, stageOptions?.containerHighlightClassName);
+              break;
+            }
+          }
+        }, stageOptions?.containerHighlightDuration);
+      },
     };
   },
 });

package/src/layouts/sidebar/LayerMenu.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons';
+import { Delete, DocumentCopy, Files, Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <el-scrollbar class="magic-editor-layer-panel">
-    <slot name="layer-panel"></slot>
+    <slot name="layer-panel-header"></slot>
 
     <el-input
       class="filterInput"

package/src/layouts/sidebar/Sidebar.vue

@@ -7,12 +7,12 @@
     tab-position="left"
   >
     <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
-      <template #layer-panel v-if="item === 'layer'">
-        <slot name="layer-panel"></slot>
+      <template #layer-panel-header v-if="item === 'layer'">
+        <slot name="layer-panel-header"></slot>
       </template>
 
-      <template #component-list-panel v-if="item === 'component-list'">
-        <slot name="component-list-panel"></slot>
+      <template #component-list-panel-header v-if="item === 'component-list'">
+        <slot name="component-list-panel-header"></slot>
       </template>
     </tab-pane>
   </el-tabs>

package/src/layouts/sidebar/TabPane.vue

@@ -8,12 +8,14 @@
     </template>
 
     <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
-      <template #layer-panel v-if="data === 'layer'">
-        <slot name="layer-panel"></slot>
+      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
+        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
+        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
-      <template #component-list-panel v-if="data === 'component-list'">
-        <slot name="component-list-panel"></slot>
+      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
+        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
+        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
       </template>
 
       <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
@@ -25,7 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { Coin, Files } from '@element-plus/icons-vue';
 
 import MIcon from '@editor/components/Icon.vue';
 import { SideComponent, SideItem } from '@editor/type';

package/src/layouts/workspace/PageBar.vue

@@ -70,7 +70,7 @@ import {
   toRaw,
   watch,
 } from 'vue';
-import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons';
+import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';
 
 import type { MApp, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';

package/src/layouts/workspace/Stage.vue

@@ -35,8 +35,15 @@ import {
 } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp, MNode, MPage } from '@tmagic/schema';
-import StageCore, { GuidesType, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import StageCore, {
+  calcValueByFontsize,
+  getOffset,
+  GuidesType,
+  Runtime,
+  SortEventData,
+  UpdateEventData,
+} from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import {
@@ -90,6 +97,9 @@ export default defineComponent({
         runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
         autoScrollIntoView: stageOptions.autoScrollIntoView,
+        isContainer: stageOptions.isContainer,
+        containerHighlightClassName: stageOptions.containerHighlightClassName,
+        containerHighlightDuration: stageOptions.containerHighlightDuration,
         canSelect: (el, event, stop) => {
           const elCanSelect = stageOptions.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
@@ -122,6 +132,10 @@ export default defineComponent({
       });
 
       stage?.on('update', (ev: UpdateEventData) => {
+        if (ev.parentEl) {
+          services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+          return;
+        }
         services?.editorService.update({ id: ev.el.id, style: ev.style });
       });
 
@@ -207,23 +221,50 @@ export default defineComponent({
 
       async dropHandler(e: DragEvent) {
         e.preventDefault();
-        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+
+        const doc = stage?.renderer.contentWindow?.document;
+        const parentEl: HTMLElement | null | undefined = doc?.querySelector(
+          `.${stageOptions?.containerHighlightClassName}`,
+        );
+
+        let parent: MContainer | undefined = page.value;
+        if (parentEl) {
+          parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+        }
+
+        if (e.dataTransfer && parent && stageContainer.value && stage) {
           // eslint-disable-next-line no-eval
           const config = eval(`(${e.dataTransfer.getData('data')})`);
-          const layout = await services?.editorService.getLayout(page.value);
+          const layout = await services?.editorService.getLayout(parent);
 
           const containerRect = stageContainer.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
+          const { style = {} } = config;
+
+          let top = 0;
+          let left = 0;
+          let position = 'relative';
+
           if (layout === Layout.ABSOLUTE) {
-            config.style = {
-              ...(config.style || {}),
-              position: 'absolute',
-              top: e.clientY - containerRect.top + scrollTop,
-              left: e.clientX - containerRect.left + scrollLeft,
-            };
+            position = 'absolute';
+            top = e.clientY - containerRect.top + scrollTop;
+            left = e.clientX - containerRect.left + scrollLeft;
+
+            if (parentEl && doc) {
+              const { left: parentLeft, top: parentTop } = getOffset(parentEl);
+              left = left - calcValueByFontsize(doc, parentLeft);
+              top = top - calcValueByFontsize(doc, parentTop);
+            }
           }
 
-          services?.editorService.add(config, page.value);
+          config.style = {
+            ...style,
+            position,
+            top,
+            left,
+          };
+
+          services?.editorService.add(config, parent);
         }
       },
     };

package/src/layouts/workspace/ViewerMenu.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
-import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
+import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';