@tmagic/editor 1.5.0-beta.1 → 1.5.0-beta.11

package/src/services/codeBlock.ts

@@ -20,15 +20,15 @@ import { reactive } from 'vue';
 import { cloneDeep, get, keys, pick } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
-import type { ColumnConfig } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
+import type { TableColumnConfig } from '@tmagic/form';
 
 import editorService from '@editor/services/editor';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { AsyncHookPlugin, CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 import { COPY_CODE_STORAGE_KEY } from '@editor/utils/editor';
 
 import BaseService from './BaseService';
@@ -117,7 +117,7 @@ class CodeBlock extends BaseService {
     const codeConfigProcessed = cloneDeep(codeConfig);
     if (codeConfigProcessed.content) {
       // 在保存的时候转换代码内容
-      const parseDSL = getConfig('parseDSL');
+      const parseDSL = getEditorConfig('parseDSL');
       if (typeof codeConfigProcessed.content === 'string') {
         codeConfigProcessed.content = parseDSL<(...args: any[]) => any>(codeConfigProcessed.content);
       }
@@ -231,11 +231,11 @@ class CodeBlock extends BaseService {
     });
   }
 
-  public setParamsColConfig(config: ColumnConfig): void {
+  public setParamsColConfig(config: TableColumnConfig): void {
     this.state.paramsColConfig = config;
   }
 
-  public getParamsColConfig(): ColumnConfig | undefined {
+  public getParamsColConfig(): TableColumnConfig | undefined {
     return this.state.paramsColConfig;
   }
 

package/src/services/dataSource.ts

@@ -1,11 +1,10 @@
 import { reactive } from 'vue';
 import { cloneDeep, get } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import type { EventOption } from '@tmagic/core';
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
+import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
-import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';

package/src/services/dep.ts

@@ -17,8 +17,8 @@
  */
 import { reactive } from 'vue';
 
-import { type DepExtendedData, DepTargetType, type Target, type TargetNode, Watcher } from '@tmagic/dep';
-import type { Id, MNode } from '@tmagic/schema';
+import type { DepExtendedData, Id, MNode, Target, TargetNode } from '@tmagic/core';
+import { DepTargetType, Watcher } from '@tmagic/core';
 import { isPage } from '@tmagic/utils';
 
 import { IdleTask } from '@editor/utils/idle-task';

package/src/services/editor.ts

@@ -18,11 +18,11 @@
 
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
-import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
+import { NodeType, Target, Watcher } from '@tmagic/core';
+import { isFixed } from '@tmagic/stage';
 import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
@@ -48,7 +48,6 @@ import {
   getNodeIndex,
   getPageFragmentList,
   getPageList,
-  isFixed,
   moveItemsInContainer,
   setChildrenLayout,
   setLayout,
@@ -234,7 +233,7 @@ class Editor extends BaseService {
    * 只有容器拥有布局
    */
   public async getLayout(parent: MNode, node?: MNode | null): Promise<Layout> {
-    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+    if (node && typeof node !== 'function' && isFixed(node.style || {})) return Layout.FIXED;
 
     if (parent.layout) {
       return parent.layout;
@@ -267,7 +266,7 @@ class Editor extends BaseService {
 
     if (node?.id) {
       this.get('stage')
-        ?.renderer.runtime?.getApp?.()
+        ?.renderer?.runtime?.getApp?.()
         ?.page?.emit(
           'editor:select',
           {
@@ -737,7 +736,7 @@ class Editor extends BaseService {
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const doc = this.get('stage')?.renderer.contentWindow?.document;
+    const doc = this.get('stage')?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -756,7 +755,7 @@ class Editor extends BaseService {
     if (!node.style) return config;
 
     const stage = this.get('stage');
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
 
     if (doc) {
       const el = getElById()(doc, node.id);
@@ -1106,9 +1105,9 @@ class Editor extends BaseService {
     const newConfig = cloneDeep(dist);
 
     if (!isPop(src) && newConfig.style?.position) {
-      if (isFixed(newConfig) && !isFixed(src)) {
+      if (isFixed(newConfig.style) && !isFixed(src.style || {})) {
         newConfig.style = change2Fixed(newConfig, root);
-      } else if (!isFixed(newConfig) && isFixed(src)) {
+      } else if (!isFixed(newConfig.style) && isFixed(src.style || {})) {
         newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }

package/src/services/history.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import type { MPage, MPageFragment } from '@tmagic/schema';
+import type { MPage, MPageFragment } from '@tmagic/core';
 
 import type { HistoryState, StepValue } from '@editor/type';
 import { UndoRedo } from '@editor/utils/undo-redo';

package/src/services/props.ts

@@ -18,11 +18,11 @@
 
 import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
-import { Writable } from 'type-fest';
+import type { Writable } from 'type-fest';
 
-import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
+import type { Id, MComponent, MNode, TargetOptions } from '@tmagic/core';
+import { Target, Watcher } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MComponent, MNode } from '@tmagic/schema';
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';

package/src/services/stageOverlay.ts

@@ -64,6 +64,12 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const wrapDiv = this.get('wrapDiv');
     subStage?.destroy();
+
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.remove();
 
     this.set('stage', null);
@@ -97,7 +103,7 @@ class StageOverlay extends BaseService {
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (['SCRIPT', 'STYLE'].includes(element.tagName)) {
@@ -135,8 +141,8 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const stage = editorService.get('stage');
 
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
 
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
@@ -160,13 +166,15 @@ class StageOverlay extends BaseService {
       background-color: #fff;
     `;
 
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.appendChild(contentEl);
 
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {

package/src/services/storage.ts

@@ -2,7 +2,7 @@ import serialize from 'serialize-javascript';
 import type { Writable } from 'type-fest';
 
 import type { SyncHookPlugin } from '@editor/type';
-import { getConfig } from '@editor/utils/config';
+import { getEditorConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
@@ -76,7 +76,7 @@ export class WebStorage extends BaseService {
 
     switch (protocol) {
       case Protocol.OBJECT:
-        return getConfig('parseDSL')(`(${item})`);
+        return getEditorConfig('parseDSL')(`(${item})`);
       case Protocol.JSON:
         return JSON.parse(item);
       case Protocol.NUMBER:

package/src/theme/index.scss

@@ -1,3 +1,6 @@
+@import "@tmagic/design/src/theme/index.scss";
+@import "@tmagic/table/src/theme/index.scss";
+@import "@tmagic/form/src/theme/index.scss";
 @import "./common/var.scss";
 @import "./theme.scss";
 

package/src/theme/page-bar.scss

@@ -5,12 +5,13 @@
   width: 100%;
 
   .tmagic-design-button.m-editor-page-bar-switch-type-button {
-    margin-left: 7px;
+    margin-left: 10px;
     position: relative;
     top: 1px;
     border-radius: 3px 3px 0 0;
     border: 1px solid $--border-color;
     border-bottom: 1px solid transparent;
+    padding: 5px 10px;
 
     &.active {
       background-color: #f3f3f3;

package/src/type.ts

@@ -18,10 +18,9 @@
 
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
-import Sortable, { Options, SortableEvent } from 'sortablejs';
+import Sortable, { type Options, type SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
-import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, FormState, Input } from '@tmagic/form';
 import type {
   CodeBlockContent,
   CodeBlockDSL,
@@ -33,7 +32,16 @@ import type {
   MNode,
   MPage,
   MPageFragment,
-} from '@tmagic/schema';
+} from '@tmagic/core';
+import type {
+  ChildConfig,
+  FilterFunction,
+  FormConfig,
+  FormItem,
+  FormState,
+  Input,
+  TableColumnConfig,
+} from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -118,7 +126,7 @@ export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & Component
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
-export interface InstallOptions {
+export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
@@ -145,7 +153,7 @@ export interface StageOptions {
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
   disabledDragStart?: boolean;
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
@@ -445,11 +453,6 @@ export interface ComponentGroup {
   items: ComponentItem[];
 }
 
-export interface UpdateData {
-  id: Id;
-  [key: string]: any;
-}
-
 export enum LayerOffset {
   TOP = 'top',
   BOTTOM = 'bottom',
@@ -486,7 +489,7 @@ export type CodeState = {
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
-  paramsColConfig?: ColumnConfig;
+  paramsColConfig?: TableColumnConfig;
 };
 
 export type CodeRelation = {

package/src/utils/config.ts

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { InstallOptions } from '@editor/type';
+import { EditorInstallOptions } from '@editor/type';
 
-let $TMAGIC_EDITOR: InstallOptions = {} as any;
+let $TMAGIC_EDITOR: EditorInstallOptions = {} as any;
 
-const setConfig = (option: InstallOptions): void => {
+const setEditorConfig = (option: EditorInstallOptions): void => {
   $TMAGIC_EDITOR = option;
 };
 
-const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
+const getEditorConfig = <K extends keyof EditorInstallOptions>(key: K): EditorInstallOptions[K] => $TMAGIC_EDITOR[key];
 
-export { getConfig, setConfig };
+export { getEditorConfig, setEditorConfig };

package/src/utils/content-menu.ts

@@ -1,7 +1,7 @@
 import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
-import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { Id, MContainer, NodeType } from '@tmagic/core';
 import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
@@ -47,10 +47,10 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
       const initialLeft =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
         services.uiService.get('zoom');
       const initialTop =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
         services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {

package/src/utils/data-source/index.ts

@@ -1,5 +1,5 @@
+import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/core';
 import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
-import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   dataSourceTemplateRegExp,

package/src/utils/editor.ts

@@ -18,8 +18,8 @@
 
 import serialize from 'serialize-javascript';
 
-import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 import type StageCore from '@tmagic/stage';
 import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
@@ -81,12 +81,6 @@ export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | N
 export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
   generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
 
-/**
- * @param {Object} node
- * @returns {boolean}
- */
-export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
-
 export const getNodeIndex = (id: Id, parent: MContainer | MApp): number => {
   const items = parent?.items || [];
   return items.findIndex((item: MNode) => `${item.id}` === `${id}`);
@@ -109,12 +103,16 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
   }
 
   const { height: parentHeight } = parentNode.style;
-  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
 
   // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
@@ -263,7 +261,7 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
   return {
     ...(config.style || {}),
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document),
   };
 };
 
@@ -274,26 +272,6 @@ export const serializeConfig = (config: any) =>
     unsafe: true,
   }).replace(/"(\w+)":\s/g, '$1: ');
 
-export interface NodeItem {
-  items?: NodeItem[];
-  [key: string]: any;
-}
-
-export const traverseNode = <T extends NodeItem = NodeItem>(
-  node: T,
-  cb: (node: T, parents: T[]) => void,
-  parents: T[] = [],
-) => {
-  cb(node, parents);
-
-  if (Array.isArray(node.items) && node.items.length) {
-    parents.push(node);
-    node.items.forEach((item) => {
-      traverseNode(item as T, cb, [...parents]);
-    });
-  }
-};
-
 export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
   sourceIndices.sort((a, b) => a - b);
   for (let i = sourceIndices.length - 1; i >= 0; i--) {

package/src/utils/operator.ts

@@ -1,7 +1,8 @@
 import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
-import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
+import type { Id, MContainer, MNode } from '@tmagic/core';
+import { NodeType } from '@tmagic/core';
 import { calcValueByFontsize, getElById, isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';

package/src/utils/props.ts

@@ -17,8 +17,8 @@
  * limitations under the License.
  */
 
+import { NODE_CONDS_KEY } from '@tmagic/core';
 import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
-import { NODE_CONDS_KEY } from '@tmagic/schema';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },

package/src/utils/tree.ts

@@ -1,4 +1,4 @@
-import type { Id } from '@tmagic/schema';
+import type { Id } from '@tmagic/core';
 import { getKeys } from '@tmagic/utils';
 
 import type { LayerNodeStatus } from '@editor/type';