update

src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -7,7 +7,7 @@ import { css } from "@linaria/core";
 
 export const Component = defineComponent({
   props: {
-    compId: string(),
+    compId: string().isRequired,
     value: object<{ url: string; x: number; y: number; s: number }>(),
   },
   emits: ["update:value"],

src/modules/editor/components/CompUI/basicUI/Page/component.tsx

@@ -33,7 +33,7 @@ export const Component = defineComponent({
     });
 
     return () => (
-      <div style={helper.parseLayoutToStyle(layout)}>
+      <div style={helper.createStyle(layout)}>
         <div class="relative z-10">
           {compsGroup.value.posArr.map((d) => {
             const Comp: any = CompUI[d.compKey]?.Component;

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -14,7 +14,7 @@ import { View } from "../View";
 
 export const Component = defineComponent({
   props: {
-    compId: string(),
+    compId: string().def(""),
     value: string().def(""),
   },
   emits: ["update:value"],

src/modules/editor/components/CompUI/basicUI/Transfer/RingBtns.tsx

@@ -1,63 +0,0 @@
-import { css } from "@linaria/core";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {
-    const btns = ["up", "right", "bottom", "left"];
-    return () => (
-      <div class={rootStyle}>
-        {btns.map((_, i) => {
-          return (
-            <div
-              class="fanBtn"
-              style={{ transform: `rotate(${(360 / btns.length) * i}deg)` }}
-            >
-              ↑
-            </div>
-          );
-        })}
-        <div class="resetBtn">复位</div>
-      </div>
-    );
-  },
-});
-
-const rootStyle = css`
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: #eee;
-  overflow: hidden;
-
-  @apply shadow;
-
-  .fanBtn {
-    position: absolute;
-    width: 48px;
-    height: 48px;
-
-    background-color: #fff;
-    font-size: 12px;
-    text-align: center;
-    clip-path: polygon(1% 0, 50% 49%, 99% 0);
-    &:hover {
-      background: @inf-primary-color;
-    }
-  }
-
-  .resetBtn {
-    position: absolute;
-    width: 28px;
-    height: 28px;
-    text-align: center;
-    line-height: 28px;
-    border-radius: 50%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: #fff;
-    font-size: 12px;
-    @apply shadow;
-  }
-`;

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -1,101 +1,87 @@
+import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
 import { css } from "@linaria/core";
 import { defineComponent, onMounted, ref } from "vue";
-import { string } from "vue-types";
 import { useEditor } from "../../../..";
-import RingBtns from "./RingBtns";
+import { string } from "vue-types";
+import { CompToolbars } from "@/modules/editor/objects/EditingCompTools";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
+const btnStyles = {
+  top: {
+    top: 0,
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+  },
+  bottom: {
+    bottom: 0,
+    left: "50%",
+    transform: "rotate(180deg) translate(50%, -50%)",
+  },
+  left: {
+    top: "50%",
+    left: 0,
+    transform: "rotate(-90deg) translate(50%, -50%)",
+  },
+  right: {
+    top: "50%",
+    right: 0,
+    transform: "rotate(90deg) translate(-50%, -50%)",
+  },
+};
 
 export const Transfer = defineComponent({
   props: {
     compId: string().isRequired,
   },
   setup(props) {
-    const { store, helper } = useEditor();
-    const resizeRef = ref<HTMLElement>();
-    const moveRef = ref<HTMLElement>();
-    const start = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      offsetX: 0,
-      offsetY: 0,
-    };
-
-    const comp = store.designData.compMap[props.compId];
-    let compEl: HTMLElement;
+    const transferRef = ref();
+    const editor = useEditor();
+    const transferCtrl = new TransferCtrl(editor);
 
     onMounted(() => {
-      if (!resizeRef.value || !moveRef.value) return;
-      resizeRef.value.addEventListener("mousedown", startDrag);
-      moveRef.value.addEventListener("mousedown", startMove);
-      compEl = moveRef.value.parentElement as HTMLElement;
-    });
-
-    function startMove(e: MouseEvent) {
-      start.x = e.clientX;
-      start.y = e.clientY;
-
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", stopMove);
-    }
-    function move(e: MouseEvent) {
-      const viewEl = compEl.parentElement;
-      if (!viewEl) return;
-      start.offsetX = e.clientX - start.x;
-      start.offsetY = e.clientY - start.y;
-
-      viewEl.style.left = helper.designToNaturalSize(
-        comp.value.position[0] + start.offsetX * 2
-      );
-      viewEl.style.top = helper.designToNaturalSize(
-        comp.value.position[1] + start.offsetY * 2
+      transferCtrl.init(
+        transferRef.value.parentElement as HTMLElement,
+        props.compId
       );
-    }
-    function stopMove(e: MouseEvent) {
-      comp.value.position[0] += start.offsetX * 2;
-      comp.value.position[1] += start.offsetY * 2;
-      document.removeEventListener("mousemove", move);
-      document.removeEventListener("mouseup", stopMove);
-    }
-
-    function startDrag(e: MouseEvent) {
-      start.x = e.clientX;
-      start.y = e.clientY;
-      start.width = comp.layout.size?.[0] || compEl.clientWidth * 2;
-      start.height = comp.layout.size?.[1] || compEl.clientHeight * 2;
-
-      document.addEventListener("mousemove", drag);
-      document.addEventListener("mouseup", stopDrag);
-    }
+    });
 
-    function drag(e: MouseEvent) {
-      console.log(e.clientX, e.clientY);
-      start.offsetX = e.clientX - start.x;
-      start.offsetY = e.clientY - start.y;
-      compEl.style.width = helper.designToNaturalSize(
-        start.width + start.offsetX * 2
-      );
-      compEl.style.height = helper.designToNaturalSize(
-        start.height + start.offsetY * 2
+    return () => {
+      const comp = editor.helper.findComp(props.compId) as DesignComp;
+      return (
+        <div ref={transferRef}>
+          <div class={toolbarStyle}>
+            {CompToolbars.default.map((item, i) => {
+              return (
+                <item.component
+                  class="p-4px"
+                  value={item.value?.(comp)}
+                  onClick={() => item.onClick.call(editor, comp)}
+                />
+              );
+            })}
+          </div>
+          <div class={borderStyle}></div>
+          <div
+            class={[resizeStyle, "drag-disable"]}
+            onMousedown={(e) => transferCtrl.mousedown(e, "resize")}
+          ></div>
+          {Object.entries(btnStyles).map(([name, style]) => (
+            <div
+              class={[fanBtnStyle, "drag-disable"]}
+              style={style}
+              onMousedown={(e) =>
+                transferCtrl.mousedown(
+                  e,
+                  `offset_${name as keyof typeof btnStyles}`
+                )
+              }
+            >
+              ↑
+            </div>
+          ))}
+        </div>
       );
-    }
-
-    function stopDrag() {
-      comp.layout.size || (comp.layout.size = [0, 0]);
-      comp.layout.size[0] = start.width + start.offsetX * 2;
-      comp.layout.size[1] = start.height + start.offsetY * 2;
-      document.removeEventListener("mousemove", drag);
-      document.removeEventListener("mouseup", stopDrag);
-    }
-
-    return () => (
-      <>
-        <div class={borderStyle}></div>
-        <div ref={resizeRef} class={[resizeStyle, "drag-disable"]}></div>
-        <div ref={moveRef} class={[moveStyle, "drag-disable"]}></div>
-        <RingBtns class={offsetStyle} />
-      </>
-    );
+    };
   },
 });
 
@@ -127,24 +113,27 @@ const resizeStyle = css`
   }
 `;
 
-const moveStyle = css`
+const fanBtnStyle = css`
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 40px;
-  height: 8px;
-  transform: translate(-50%, 5px);
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
-  z-index: 9;
-  cursor: all-scroll;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  font-size: 12px;
+  text-align: center;
+  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
+  cursor: grab;
+  z-index: 99;
+
+  &:hover {
+    background: @inf-primary-color;
+  }
 `;
 
-const offsetStyle = css`
+const toolbarStyle = css`
+  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
   position: absolute;
-  bottom: 0;
+  top: 0;
   left: 50%;
-  transform: translate(-50%, 60px);
-  z-index: 9;
+  transform: translate(-50%, -60px);
 `;

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,91 +1,30 @@
 import { css } from "@linaria/core";
-import { upperFirst } from "lodash";
 import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
-import { DesignComp } from "../../../objects/DesignTemp/DesignComp";
 import { Transfer } from "./Transfer";
 
 export const View = defineComponent({
   props: {
-    compId: string(),
+    compId: string().isRequired,
   },
   emits: ["dblclick"],
   setup(props, { slots, emit }) {
     const { store, actions, helper } = useEditor();
-    const comp =
-      (props.compId && store.designData.compMap[props.compId]) ||
-      new DesignComp();
-
-    function createStyle(): any {
-      const style: any = {};
-      const {
-        alignSelf,
-        margin,
-        zIndex,
-        visible,
-        size = [],
-      } = comp.layout || {};
-      const [w, h] = size;
-      if (alignSelf) {
-        style.alignSelf = alignSelf;
-      }
-      if (visible === false) {
-        style.display = "none";
-      }
-      // if (offsetY) {
-      //   style[`margin` + ((offsetY as number) > 0 ? "Top" : "Bottom")] =
-      //     helper.designToNaturalSize(Math.abs(offsetY as number) * -1);
-      // }
-      if (zIndex) {
-        style["zIndex"] = zIndex;
-      }
-
-      if (margin) {
-        style.margin = margin;
-      }
-
-      if (comp.layout?.padding) {
-        style.padding = comp.layout.padding;
-      }
-
-      if (w) style["width"] = helper.designToNaturalSize(w);
-      if (h) style["height"] = helper.designToNaturalSize(h);
-      return style;
-    }
-
-    function createContentStyle() {
-      const style: any = {};
-      const { background, layout } = comp;
-      const [w, h] = (layout?.size as number[]) || [];
-      if (background) {
-        Object.entries(background).forEach(([key, value]) => {
-          if (key === "image") {
-            value = `url(${value})`;
-          }
-          style["background" + upperFirst(key)] = value;
-        });
-      }
-      if (layout?.padding) {
-        style.padding = layout.padding;
-      }
-
-      // if (layout?.offsetX) {
-      //   style["marginLeft"] = helper.designToNaturalSize(
-      //     layout.offsetX as number
-      //   );
-      // }
-
-      return style;
-    }
 
     return () => {
-      const isSelected = store.currCompId === props.compId;
+      const comp = helper.findComp(props.compId);
+      if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
 
+      const isSelected = store.currCompId === props.compId;
       return (
         <div
-          class={[viewStyle, store.isEditMode && viewEditStyle]}
-          style={createStyle()}
+          class={[
+            viewStyle,
+            store.isEditMode && viewEditStyle,
+            isSelected && viewSelectedStyle,
+          ]}
+          style={helper.createStyle(comp.layout)}
           onClick={(e) => {
             e.stopPropagation();
             if (!isSelected) {
@@ -105,6 +44,7 @@ export const View = defineComponent({
 const viewStyle = css`
   position: relative;
   font-size: 0;
+  z-index: 1;
 
   > :first-child {
     width: 100%;
@@ -117,3 +57,7 @@ const viewEditStyle = css`
     outline: 2px dashed @inf-primary-color;
   }
 `;
+
+const viewSelectedStyle = css`
+  z-index: 2;
+`;

src/modules/editor/components/TipIcons/index.ts

@@ -13,9 +13,9 @@ import {
 import { createTipIcon } from "./create";
 
 export const TipIcons = {
-  Shadow: createTipIcon({
-    icons: [IconShadow, IconShadowOff],
-    tips: ["阴影-开", "阴影-关"],
+  Position: createTipIcon({
+    icons: [IconShadowOff, IconShadow],
+    tips: ["开启浮动", "关闭浮动"],
   }),
   Visible: createTipIcon({
     icons: [IconEyeOn, IconEyeOff],
@@ -29,9 +29,9 @@ export const TipIcons = {
     icons: [IconDelete],
     tips: ["删除"],
   }),
-  Clear: createTipIcon({
+  ClearOffset: createTipIcon({
     icons: [IconClear],
-    tips: ["清除材质"],
+    tips: ["清除偏移"],
   }),
   undo: createTipIcon({
     icons: [IconUndo],

src/modules/editor/controllers/TransferCtrl/index.ts

@@ -0,0 +1,59 @@
+import { ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import * as transforms from "./transforms";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+
+type TransHandle = (this: TransferCtrl, e: MouseEvent) => void;
+
+export type TransCreateFn = (...args: any[]) => {
+  mousedown?: TransHandle;
+  mousemove: TransHandle;
+  mouseup: TransHandle;
+};
+
+export type TransEvent = {
+  startX: number;
+  startY: number;
+  offsetX: number;
+  offsetY: number;
+  width: number;
+  height: number;
+};
+
+export class TransferCtrl extends ModuleControl<EditorModule> {
+  compEl!: HTMLElement;
+  currComp!: DesignComp;
+  transEvent!: TransEvent;
+  transforms = transforms;
+  currTransfer!: ReturnType<TransCreateFn>;
+  init(el: HTMLElement, compId: string) {
+    this.compEl = el;
+    this.currComp = this.helper.findComp(compId) as DesignComp;
+  }
+  mousedown(e: MouseEvent, type: keyof typeof transforms) {
+    const { currComp } = this.store;
+    this.transEvent = {
+      startX: e.clientX,
+      startY: e.clientY,
+      offsetX: 0,
+      offsetY: 0,
+      width: currComp.layout.size?.[0] || this.compEl.clientWidth * 2,
+      height: currComp.layout.size?.[1] || this.compEl.clientHeight * 2,
+    };
+    this.currTransfer = this.transforms[type]();
+    document.addEventListener("mousemove", this.mousemove);
+    document.addEventListener("mouseup", this.mouseup);
+    this.currTransfer.mousedown?.call(this, e);
+  }
+  private mousemove = (e: MouseEvent) => {
+    const { transEvent } = this;
+    transEvent.offsetX = e.clientX - transEvent.startX;
+    transEvent.offsetY = e.clientY - transEvent.startY;
+    this.currTransfer.mousemove.call(this, e);
+  };
+  private mouseup = (e: MouseEvent) => {
+    document.removeEventListener("mousemove", this.mousemove);
+    document.removeEventListener("mouseup", this.mouseup);
+    this.currTransfer.mouseup.call(this, e);
+  };
+}

src/modules/editor/controllers/TransferCtrl/transforms/index.ts

@@ -0,0 +1,2 @@
+export * from "./resize";
+export * from "./offset";

src/modules/editor/controllers/TransferCtrl/transforms/move.ts

@@ -0,0 +1,20 @@
+import { TransCreateFn } from "..";
+
+export const move: TransCreateFn = () => ({
+  mousemove(e) {
+    const { compEl, module, transEvent, currComp } = this;
+    const { helper } = module;
+
+    compEl.style.left = helper.designToNaturalSize(
+      currComp.value.position[0] + transEvent.offsetX * 2
+    );
+    compEl.style.top = helper.designToNaturalSize(
+      currComp.value.position[1] + transEvent.offsetY * 2
+    );
+  },
+  mouseup() {
+    const { transEvent, currComp } = this;
+    currComp.value.position[0] += transEvent.offsetX * 2;
+    currComp.value.position[1] += transEvent.offsetY * 2;
+  },
+});

src/modules/editor/controllers/TransferCtrl/transforms/offset.ts

@@ -0,0 +1,50 @@
+import { TransCreateFn, TransferCtrl } from "..";
+
+type Direction = "top" | "bottom" | "x";
+
+const offset: TransCreateFn = (direction: Direction) => ({
+  mousemove() {
+    if (this.currComp.layout.margin) return;
+
+    const style = this.module.helper.createStyle({
+      offset: {
+        [direction[0] as "x"]: getOffset.call(this, direction),
+      },
+    });
+    Object.entries(style).forEach(([key, value]: any[]) => {
+      this.compEl.style[key] = value;
+    });
+  },
+  mouseup() {
+    if (this.currComp.layout.margin) return;
+    const { layout } = this.currComp;
+
+    const offset: any = layout.offset || (layout.offset = {});
+
+    offset[direction[0]] = getOffset.call(this, direction);
+  },
+});
+
+function getOffset(this: TransferCtrl, direction: Direction) {
+  const { transEvent } = this;
+  const { layout } = this.currComp;
+  let offset = (layout.offset as any)?.[direction[0]] || 0;
+
+  switch (direction) {
+    case "top":
+      offset += transEvent.offsetY * 2;
+      break;
+    case "bottom":
+      offset += transEvent.offsetY * 2;
+      break;
+    case "x":
+      offset += transEvent.offsetX * 2;
+      break;
+  }
+  return offset;
+}
+
+export const offset_top = offset.bind(null, "top");
+export const offset_bottom = offset.bind(null, "bottom");
+export const offset_left = offset.bind(null, "x");
+export const offset_right = offset_left;

src/modules/editor/controllers/TransferCtrl/transforms/resize.ts

@@ -0,0 +1,20 @@
+import { TransCreateFn } from "..";
+
+export const resize: TransCreateFn = () => ({
+  mousemove() {
+    const { transEvent, compEl } = this;
+    compEl.style.width = this.module.helper.designToNaturalSize(
+      transEvent.width + transEvent.offsetX * 2
+    );
+    compEl.style.height = this.module.helper.designToNaturalSize(
+      transEvent.height + transEvent.offsetY * 2
+    );
+  },
+  mouseup() {
+    const { transEvent } = this;
+    const { currComp } = this.module.store;
+    currComp.layout.size || (currComp.layout.size = [0, 0]);
+    currComp.layout.size[0] = transEvent.width + transEvent.offsetX * 2;
+    currComp.layout.size[1] = transEvent.height + transEvent.offsetY * 2;
+  },
+});

src/modules/editor/module/actions/edit.ts

@@ -35,10 +35,6 @@ export const editActions = EditorModule.action({
     if (selIndex === targetIndex) return;
     this.store.moveComp(selIndex, targetIndex);
   },
-  //
-  switchCompVisible(comp: DesignComp) {
-    comp.layout.visible = comp.layout.visible === false ? true : false;
-  },
   // 保存项目
   async saveDesign() {
     try {
@@ -52,4 +48,19 @@ export const editActions = EditorModule.action({
       queenApi.hideLoading();
     }
   },
+
+  // 设置组件显示隐藏
+  setCompPosition(comp: DesignComp) {
+    comp.layout.position =
+      comp.layout.position === "absolute" ? undefined : "absolute";
+  },
+  // 设置组件显示隐藏
+  setCompVisible(comp: DesignComp) {
+    comp.layout.visible = comp.layout.visible === false ? true : false;
+  },
+  // 清除组件偏移
+  clearCompOffset(comp: DesignComp) {
+    comp.layout.margin = "";
+    comp.layout.offset = {};
+  },
 });

src/modules/editor/module/helpers/index.ts

@@ -1,6 +1,7 @@
 import { mapValuesDeep } from "@/utils";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
@@ -38,7 +39,7 @@ export const helpers = EditorModule.helper({
       (v: string) => v
     );
   },
-  parseLayoutToStyle(layout: Layout): any {
-    return layout;
+  createStyle(layout: Partial<Layout>) {
+    return createCompStyle(this, layout);
   },
 });

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -0,0 +1,63 @@
+import { EditorModule } from "@/modules/editor/module";
+import { Layout } from "@/modules/editor/typings";
+
+export function createCompStyle(module: EditorModule, layout: Layout) {
+  const { designToNaturalSize } = module.helper;
+  const style: any = {};
+  const transform: any = {};
+
+  if (layout.alignSelf) {
+    style.alignSelf = layout.alignSelf;
+  }
+  if (layout.visible === false) {
+    style.display = "none";
+  }
+
+  if (layout.zIndex) {
+    style["zIndex"] = layout.zIndex;
+  }
+
+  if (layout.margin) {
+    style.margin = layout.margin;
+  } else if (layout.offset) {
+    if (layout.offset.t) {
+      style.marginTop = designToNaturalSize(layout.offset.t);
+    }
+    if (layout.offset.b) {
+      style.marginBottom = designToNaturalSize(layout.offset.b);
+    }
+    if (layout.offset.x) {
+      transform.translateX = designToNaturalSize(layout.offset.x);
+    }
+  }
+
+  if (layout.padding) {
+    style.padding = layout.padding;
+  }
+
+  if (layout.size) {
+    const [w, h] = layout.size;
+    if (w) style.width = designToNaturalSize(w);
+    if (h) style.height = designToNaturalSize(h);
+  }
+
+  if (layout.position) {
+    style.position = layout.position;
+  }
+
+  const styleTransform = parseTransform(transform);
+
+  if (styleTransform) {
+    style.transform = styleTransform;
+  }
+
+  return style;
+}
+
+function parseTransform(trans: any) {
+  const transforms: string[] = [];
+  Object.entries(trans).forEach(([key, value]) => {
+    transforms.push(`${key}(${value})`);
+  });
+  return transforms.join(" ");
+}

src/modules/editor/objects/EditingCompTools/index.ts

@@ -0,0 +1,46 @@
+import { TipIcons } from "../../components/TipIcons";
+import { EditorModule } from "../../module";
+import { ICompKeys } from "../../typings";
+import { DesignComp } from "../DesignTemp/DesignComp";
+
+type CompToolbarItem = {
+  component: any;
+  value?: (comp: DesignComp) => number;
+  onClick: (this: EditorModule, comp: DesignComp) => void;
+};
+
+function createToolbars<T extends Record<string, CompToolbarItem>>(obj: T) {
+  return obj;
+}
+
+const default_toolbars = createToolbars({
+  position: {
+    component: TipIcons.Position,
+    value: (comp) => (comp.layout.position === "absolute" ? 1 : 0),
+    onClick(comp) {
+      this.actions.setCompPosition(comp);
+    },
+  },
+  delete: {
+    component: TipIcons.Delete,
+    onClick(comp) {
+      this.actions.removeComp(comp.id);
+    },
+  },
+  clearOffset: {
+    component: TipIcons.ClearOffset,
+    onClick(comp) {
+      this.actions.clearCompOffset(comp);
+    },
+  },
+});
+
+export const CompToolbars: Partial<Record<ICompKeys, CompToolbarItem[]>> & {
+  default: CompToolbarItem[];
+} = {
+  default: [
+    default_toolbars.position,
+    default_toolbars.clearOffset,
+    default_toolbars.delete,
+  ],
+};

src/modules/editor/objects/TreeNode/treeNodeActions.ts

@@ -16,9 +16,9 @@ export const treeNodeActions: { [name in ICompKeys]?: Action[] } & {
   default: [
     {
       component: TipIcons.Visible,
-      getValue: (comp) => (comp.layout.visible !== false ? 0 : 1),
+      getValue: (comp) => (comp.layout.visible !== false ? 1 : 0),
       onClick(comp) {
-        this.actions.switchCompVisible(comp);
+        this.actions.setCompVisible(comp);
       },
     },
     {

src/modules/editor/typings.ts

@@ -5,11 +5,15 @@ export type ICompKeys = keyof typeof CompUI;
 export type EditorMode = "edit" | "preview";
 
 export type Layout = {
+  position?: "absolute";
   visible?: boolean;
   size?: number[]; // width height
   alignSelf?: string;
-  offsetX?: number;
-  offsetY?: number;
+  offset?: {
+    x?: number; // marginLeft | marginRight
+    t?: number; // marginTop
+    b?: number; // marginBottom
+  };
   zIndex?: number;
   margin?: string;
   padding?: string;