@tmagic/editor 1.0.4 → 1.1.0-beta.1

package/src/services/editor.ts

@@ -33,9 +33,10 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  fixNodeLeft,
   generatePageNameByApp,
+  getInitPositionStyle,
   getNodeIndex,
-  initPosition,
   isFixed,
   setLayout,
 } from '@editor/utils/editor';
@@ -70,6 +71,7 @@ class Editor extends BaseService {
         'paste',
         'alignCenter',
         'moveLayer',
+        'moveToContainer',
         'move',
         'undo',
         'redo',
@@ -274,7 +276,7 @@ class Editor extends BaseService {
     const { type, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
-    let parentNode: MNode | undefined;
+    let parentNode: MContainer | undefined;
     const isPage = type === NodeType.PAGE;
 
     if (isPage) {
@@ -291,12 +293,8 @@ class Editor extends BaseService {
     if (!parentNode) throw new Error('未找到父元素');
 
     const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
-    const newNode = initPosition(
-      { ...toRaw(await propsService.getPropsValue(type, config)) },
-      layout,
-      parentNode,
-      this.get<StageCore>('stage'),
-    );
+    const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get<StageCore>('stage'));
 
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
@@ -305,8 +303,17 @@ class Editor extends BaseService {
     parentNode?.items?.push(newNode);
 
     const stage = this.get<StageCore | null>('stage');
+    const root = this.get<MApp>('root');
+
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(root) });
 
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+    if (layout === Layout.ABSOLUTE) {
+      const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
+      if (typeof fixedLeft !== 'undefined') {
+        newNode.style.left = fixedLeft;
+        await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
+      }
+    }
 
     await this.select(newNode);
 
@@ -348,7 +355,7 @@ class Editor extends BaseService {
 
     parent.items?.splice(index, 1);
     const stage = this.get<StageCore | null>('stage');
-    stage?.remove({ id: node.id, root: this.get('root') });
+    stage?.remove({ id: node.id, root: cloneDeep(this.get('root')) });
 
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
@@ -431,7 +438,7 @@ class Editor extends BaseService {
       this.set('node', newConfig);
     }
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get('root')) });
 
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
@@ -464,7 +471,7 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: cloneDeep(this.get('root')) });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -544,7 +551,10 @@ class Editor extends BaseService {
     }
 
     await this.update(node);
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(toRaw(node)),
+      root: cloneDeep(this.get<MApp>('root')),
+    });
     this.addModifiedNodeId(config.id);
     this.pushHistoryState();
 
@@ -569,7 +579,54 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(toRaw(parent)),
+      root: cloneDeep(this.get<MApp>('root')),
+    });
+  }
+
+  /**
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
+   */
+  public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false) as MContainer;
+
+    const stage = this.get<StageCore | null>('stage');
+
+    if (node && parent && stage) {
+      const root = cloneDeep(this.get<MApp>('root'));
+      const index = getNodeIndex(node, parent);
+      parent.items?.splice(index, 1);
+
+      await stage.remove({ id: node.id, root });
+
+      const layout = await this.getLayout(target);
+
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+
+      target.items.push(newConfig);
+
+      await stage.select(targetId);
+
+      await stage.update({ config: cloneDeep(target), root });
+
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+
+      return newConfig;
+    }
   }
 
   /**
@@ -656,13 +713,13 @@ class Editor extends BaseService {
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
-    let newConfig = cloneDeep(dist);
+    const newConfig = cloneDeep(dist);
 
     if (!isPop(src) && newConfig.style?.position) {
       if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig = change2Fixed(newConfig, root);
+        newConfig.style = change2Fixed(newConfig, root);
       } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
 

package/src/type.ts

@@ -49,9 +49,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;
 }
 

package/src/utils/editor.ts

@@ -81,21 +81,17 @@ export const getNodeIndex = (node: MNode, parent: MContainer | MApp): number =>
   return items.findIndex((item: MNode) => `${item.id}` === `${node.id}`);
 };
 
-export const toRelative = (node: MNode) => {
-  node.style = {
-    ...(node.style || {}),
-    position: 'relative',
-    top: 0,
-    left: 0,
-  };
-  return node;
-};
-
-const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
-  const style = node.style || {};
+export const getRelativeStyle = (style: Record<string, any> = {}): Record<string, any> => ({
+  ...style,
+  position: 'relative',
+  top: 0,
+  left: 0,
+});
+
+const getMiddleTop = (style: Record<string, any> = {}, parentNode: MNode, stage: StageCore) => {
   let height = style.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style.top;
 
   if (!isNumber(height)) {
     height = 0;
@@ -105,43 +101,45 @@ const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
 
   if (isPage(parentNode)) {
     const { scrollTop = 0, wrapperHeight } = stage.mask;
-    style.top = (wrapperHeight - height) / 2 + scrollTop;
-  } else {
-    style.top = (parentHeight - height) / 2;
+    return (wrapperHeight - height) / 2 + scrollTop;
   }
-
-  return style;
+  return (parentHeight - height) / 2;
 };
 
-export const initPosition = (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => {
+export const getInitPositionStyle = (
+  style: Record<string, any> = {},
+  layout: Layout,
+  parentNode: MNode,
+  stage: StageCore,
+) => {
   if (layout === Layout.ABSOLUTE) {
-    node.style = {
+    return {
+      ...style,
       position: 'absolute',
-      ...setTop2Middle(node, parentNode, stage),
+      top: getMiddleTop(style, parentNode, stage),
     };
-    return node;
   }
 
   if (layout === Layout.RELATIVE) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
 
-  return node;
+  return style;
 };
 
 export const setLayout = (node: MNode, layout: Layout) => {
   node.items?.forEach((child: MNode) => {
     if (isPop(child)) return;
 
-    child.style = child.style || {};
+    const style = child.style || {};
 
     // 是 fixed 不做处理
-    if (child.style.position === 'fixed') return;
+    if (style.position === 'fixed') return;
 
     if (layout !== Layout.RELATIVE) {
-      child.style.position = 'absolute';
+      style.position = 'absolute';
     } else {
-      toRelative(child);
+      child.style = getRelativeStyle(style);
       child.style.right = 'auto';
       child.style.bottom = 'auto';
     }
@@ -161,11 +159,10 @@ export const change2Fixed = (node: MNode, root: MApp) => {
     offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
   });
 
-  node.style = {
+  return {
     ...(node.style || {}),
     ...offset,
   };
-  return node;
 };
 
 export const Fixed2Other = async (
@@ -186,23 +183,23 @@ export const Fixed2Other = async (
     offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
     offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
   });
+  const style = node.style || {};
 
   const parent = path.pop();
   if (!parent) {
-    return toRelative(node);
+    return getRelativeStyle(style);
   }
 
   const layout = await getLayout(parent);
   if (layout !== Layout.RELATIVE) {
-    node.style = {
-      ...(node.style || {}),
+    return {
+      ...style,
       ...offset,
       position: 'absolute',
     };
-    return node;
   }
 
-  return toRelative(node);
+  return getRelativeStyle(style);
 };
 
 export const getGuideLineFromCache = (key: string): number[] => {
@@ -219,3 +216,16 @@ export const getGuideLineFromCache = (key: string): number[] => {
 
   return [];
 };
+
+export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
+  if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
+
+  const el = doc.getElementById(`${config.id}`);
+  const parentEl = doc.getElementById(`${parent.id}`);
+
+  if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+    return parentEl.offsetWidth - el.offsetWidth;
+  }
+
+  return config.style.left;
+};