修复打组的功能

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

@@ -29,7 +29,7 @@ export const Component = defineComponent({
         comp.setW(W);
         comp.setH(W / ratio);
         actions.onCompLayoutUpdated(comp);
-        helper.extendStreamCard(store.currStreamCardId);
+        helper.extendStreamCard(controls.pageCtrl.currStreamCardId);
       };
     }
 

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

@@ -58,7 +58,7 @@ export const TextToolForm = defineComponent({
             const size :any = store.currComp.layout.size.slice(0);
             size[1] = h;
             store.currComp.layout.setSize(size);
-            helper.extendStreamCard(store.currStreamCardId);
+            helper.extendStreamCard(controls.pageCtrl.currStreamCardId);
           });
         }
       }

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

@@ -148,6 +148,7 @@ const EditorComp = defineComponent({
     let editorInstance = ref<InlineEditor>();
     const comp = useCompData<any>(props.compId);
     const { store, actions, helper, controls } = useEditor();
+    const page = controls.pageCtrl;
 
     let blurCanceler: any = null;
     onMounted(() => {
@@ -165,7 +166,7 @@ const EditorComp = defineComponent({
       const isChange = Math.abs(preHeight.value - h) > 1;
       preHeight.value = h;
       actions.updateCompData(comp, "layout.size.1", preHeight.value);
-      helper.extendStreamCard(store.currStreamCardId);
+      helper.extendStreamCard(page.currStreamCardId);
     };
     function isInCkBodyWrapper(dom: HTMLElement) {
       if (editorInstance.value) {
@@ -220,7 +221,7 @@ const EditorComp = defineComponent({
                 ["value", "layout.size.1"],
                 [value, preHeight.value]
               );
-              helper.extendStreamCard(store.currStreamCardId);
+              helper.extendStreamCard(page.currStreamCardId);
               if (isChange) {
                 console.log("changing=>", isChange);
                

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

@@ -72,6 +72,7 @@ const EditorComp = defineComponent({
     let editorDomRef = ref<HTMLElement>();
     const comp = useCompData<CompTextObj>(props.compId);
     const { store, actions, helper, controls } = useEditor();
+    const page = controls.pageCtrl;
 
     let blurCanceler: any = null;
 
@@ -93,7 +94,7 @@ const EditorComp = defineComponent({
         const size :any = comp.layout.size.slice(0);
         size[1] = h;
         comp.layout.size = size;
-        helper.extendStreamCard(store.currStreamCardId);
+        helper.extendStreamCard(page.currStreamCardId);
       }
     };
     function isInCkBodyWrapper(dom: HTMLElement) {
@@ -193,7 +194,7 @@ const EditorComp = defineComponent({
               const size: any =  comp.layout.size.slice(0);
               size[1] = h;
               comp.layout.size = size;
-              helper.extendStreamCard(store.currStreamCardId);
+              helper.extendStreamCard(page.currStreamCardId);
             }
           });
         }

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

@@ -33,7 +33,7 @@ export const Component = defineComponent({
       const t = value.ratio || videoWidth * 1.0 / videoHeight;
       comp.setH(comp.getW() / t);
       actions.onCompLayoutUpdated(comp);
-      helper.extendStreamCard( store.currStreamCardId );
+      helper.extendStreamCard( controls.pageCtrl.currStreamCardId );
     }
 
     watch(

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

@@ -59,16 +59,14 @@ export const View = defineComponent({
       const obj = new CompObject(pageCtrl.compMap[props.compId]);
       const m = obj.worldTransform.clone();
       m.invert();
+      const gizmo = controls.selectCtrl.gizmo;
+      const page = controls.pageCtrl;
 
       let isFocus =
-        store.isEditMode &&
-        controls.selectCtrl.gizmo.state.transform.selected.length > 1 &&
-        store.lastSelected == props.compId;
-      isFocus = isFocus || store.currCompId == props.compId;
+        store.isEditMode && gizmo.state.transform.selected.length > 1 &&
+        gizmo.state.lastId == props.compId;
 
       const style = helper.createStyle(comp.layout, comp);
-      const page = helper.findRootComp() as DesignComp;
-
 
       if (isStreamCard) {
         style.overflow = "unset";
@@ -86,7 +84,7 @@ export const View = defineComponent({
 
       function RenderPre() {
         if (
-          store.currStreamCardId != props.compId ||
+          page.state.currStreamCardId != props.compId ||
           !isStreamCard ||
           !store.isEditMode
         )
@@ -122,7 +120,7 @@ export const View = defineComponent({
 
       function RenderAfter() {
         if (
-          store.currStreamCardId != props.compId ||
+          page.state.currStreamCardId != props.compId ||
           !isStreamCard ||
           !store.isEditMode
         )
@@ -156,11 +154,9 @@ export const View = defineComponent({
             comp.compKey,
 
             viewStyle,
-            store.isEditMode &&
-              controls.selectCtrl._state != 0 &&
-              editCompStyle,
-            store.currStreamCardId == props.compId && CurrCompStyle,
-            isFocus && AnchorCompStyle,
+              page.state.currStreamCardId == props.compId && CurrCompStyle,
+              isFocus && AnchorCompStyle,
+              isFocus && groupCompCls,
           ]}
           style={style}
           onClick={(e) => {
@@ -362,7 +358,7 @@ const AnchorCompStyle = css`
 `;
 
 const groupCompCls = css`
-  outline: 2px solid @inf-primary-color !important;
+  outline: 2px dashed @inf-primary-color !important;
 `;
 
 const editAreaStyle = css`

src/modules/editor/components/CompUI/defines/alignMulti.tsx

@@ -23,7 +23,6 @@ export default defineComponent({
                 </div>
 
                 <div class="flex py-12px px-0px items-center">
-                    <span class="pr-32px">对齐</span>
                     <div class="row flex-1 flex">
                         {SelItemsAlignTools.Left.map((item) => {
                         return item.getVisible.call(editor, null as any) ? (
@@ -49,7 +48,6 @@ export default defineComponent({
                     <span class="text-white">布局</span>
                 </div>
                 <div class="flex py-12px px-0px items-center">
-                    <span class="pr-32px">对齐</span>
                     <div class="row flex-1 flex">
                         {CompAlignTools.Left.map((item) => {
                         return item.getVisible.call(editor, null as any) ? (

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -368,6 +368,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
 const formStyle = css`
   .item_label {
     color: #a9abaf !important;
+    margin-right: 0 !important;
   }
   & > div {
     padding: 0 !important;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -87,7 +87,7 @@ export default defineUI({
                         key={item + controls.screenCtrl.currScreenId}
                         class={cx(
                           "card-item relative transition-opacity hover:opacity-80",
-                          store.currStreamCardId == item && "active"
+                          page.currStreamCardId == item && "active"
                         )}
                         style={style}
                         onClick={() => {

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

@@ -22,7 +22,13 @@ export class PageCtrl extends ModuleControl<EditorModule> {
         designId: "",
         title: ''
     }, history)
-
+    get currStreamCardId() {
+      return this.state.currStreamCardId;
+    }
+    get currCompId() {
+      return this.state.currCompId;
+    }
+    
     initEvent() {
 
         const updatePid = (pid:string)=>{

src/modules/editor/controllers/SelectCtrl/compObj.ts

@@ -68,7 +68,7 @@ export class CompObject extends DisplayObject {
         this.x = this.x + x;
         this.y = this.y + y;
         this.updateTransform();
-        this.comp.layout.transformMatrix = this.worldTransform.getMatrixStr();
+        this.comp.layout.setTransformMatrix(this.worldTransform.getMatrixStr());
     }
     
     getRect(){
@@ -150,6 +150,7 @@ export class CompObject extends DisplayObject {
         this.worldTransform.apply(p,p);
         return p;
     }
+
     updateSize() {
         const c = this.comp;
         if (c.layout.size ) {

src/modules/editor/controllers/SelectCtrl/gizemo.ts

@@ -118,7 +118,6 @@ export class Gizemo extends Events {
                     }
                     this.updateSize();
                 })
-                this.childSubs.push(s);
             });
 
             this.selected = objs;
@@ -183,9 +182,9 @@ export class Gizemo extends Events {
         })
     }
     
-    selectObjs(ids: string[]) {
+    selectObjs(ids: string[], force=false) {
         let noChange = false;
-        if (this.selected.length == ids.length ) {
+        if (!force && this.selected.length == ids.length ) {
             if (ids.length == 0) {
                 noChange = true;
             } else if (ids.length == 1) {
@@ -200,6 +199,7 @@ export class Gizemo extends Events {
                 }
             }
         }
+        
         this.lastSelChanged = !noChange;
         console.log("changing....", this.lastSelChanged);
         if (noChange) {
@@ -471,6 +471,12 @@ export class Gizemo extends Events {
         }
     }
 
+    reSelectCurrElemnts() {
+        let t = {...this.state.transform}
+        t.selected = this.state.transform.selected.slice(0)
+        this.state.setTransform(t);
+    }
+
     updateSize() {
 
         let selected = this.selected;

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

@@ -169,7 +169,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     
     this.gizmo.on("change", ()=>{
        this.upgateGizmoStyle();
-       this.helper.extendStreamCard(this.store.currStreamCardId);
+       this.helper.extendStreamCard(this.controls.pageCtrl.currStreamCardId);
     })
   }
 
@@ -501,7 +501,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._moveSelectUpdated = false;
 
     this.upgateGizmoStyle();
-    this.helper.extendStreamCard(this.store.currStreamCardId);
+    this.helper.extendStreamCard(page.currStreamCardId);
     this.assistRuler?.draw();
     this.assistMagnet?.onMouseUp();
   }
@@ -564,9 +564,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (lastId) {
         this.controls.propsCtrl.showProp(lastId); 
         this.controls.pageCtrl.setCurrComp(lastId);
+        gizemo.state.setLastId(lastId);
     }
     if (selected.length < 1) {
-      this.controls.propsCtrl.showProp(this.store.currStreamCardId);
+      this.controls.propsCtrl.showProp( this.controls.pageCtrl.currStreamCardId);
     }
 
     this.gizmo.selectObjs(selected);

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

@@ -10,7 +10,7 @@ import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
 import CompSave from "../../components/CompSave";
 import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
-import { createObj, history } from "../../objects/DesignTemp/factory";
+import { cloneObj, createObj, history } from "../../objects/DesignTemp/factory";
 
 const ctrlState = {
   selected: [] as string[],
@@ -47,13 +47,13 @@ export const editActions = EditorModule.action({
 
   // 通过点击添加组件到画布
   async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
-    if (!this.store.currStreamCardId) {
+    const page = this.controls.pageCtrl;
+
+    if (!page.currStreamCardId) {
       queenApi.messageError("请先选中一个卡片");
       return;
     }
-    
-    const page = this.controls.pageCtrl;
-
+  
     let yOffset = 0;
     if (
       page.state.currCompId != page.state.currStreamCardId &&
@@ -106,7 +106,7 @@ export const editActions = EditorModule.action({
 
     const page = this.controls.pageCtrl;
 
-    if (!this.store.currStreamCardId) {
+    if (!page.currStreamCardId) {
       queenApi.messageError("请先选中一个卡片");
       return;
     }
@@ -132,7 +132,7 @@ export const editActions = EditorModule.action({
 
   initAddedCompPos(currId: string, addedId: string, cardId: string) {
     let yOffset = 0;
-    if (currId != this.store.currStreamCardId && currId != "root") {
+    if (currId != this.controls.pageCtrl.currStreamCardId && currId != "root") {
       const paths = this.helper.getCompTrees(currId);
       const bound = this.helper.getCardCompBound(paths[2].id);
       yOffset = bound.y + bound.h;
@@ -291,7 +291,7 @@ export const editActions = EditorModule.action({
       }
     });
     ctrlState.screenId = this.controls.screenCtrl.currScreenId;
-    ctrlState.cardId = this.store.currStreamCardId;
+    ctrlState.cardId = page.currStreamCardId;
     ctrlState.type = 1;
     const objc = this.controls.selectCtrl.objContainer;
     ctrlState.selWidth = this.helper.pxToDesignSize(objc.width);
@@ -306,14 +306,14 @@ export const editActions = EditorModule.action({
   copyLastSelected() {
     if (this.store.currCompId && this.store.currCompId != "root") {
       ctrlState.selected = [this.store.currCompId];
-      ctrlState.cardId = this.store.currStreamCardId;
+      ctrlState.cardId = this.controls.pageCtrl.currStreamCardId;
       ctrlState.type = 1;
     }
   },
 
   setSameSize(isWidth: boolean) {
     const selectCtrl = this.controls.selectCtrl;
-    const objc = selectCtrl.objContainer;
+    const gizmo = selectCtrl.objContainer;
     const layout = this.store.currComp.layout;
 
     const w = this.controls.screenCtrl.getCurrScreenWidth();
@@ -334,20 +334,21 @@ export const editActions = EditorModule.action({
       }
       return;
     }
-
-    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    
+    const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
-    objc.parent.children.forEach((c) => {
+    gizmo.parent.children.forEach((c) => {
       const child = c as CompObject;
       const r = child.getBox();
       if (isWidth) child.comp.layout.size[0] = anchorBox.layout.size[0];
       else child.comp.layout.size[1] = anchorBox.layout.size[1];
     });
 
-    objc.updateSize();
+    gizmo.updateSize();
 
     selectCtrl.upgateGizmoStyle();
+    history.submit();
   },
 
   toogleGroup() {
@@ -404,12 +405,10 @@ export const editActions = EditorModule.action({
       if (childs.length > 0) {
         childs.forEach((id, index) => {
           const cp = this.helper.findComp(id) as DesignComp;
-          const cp1 = cloneDeep(cp);
-          cp1.id = nanoid();
+          const cp1 = cloneObj(cp);
           ctrl.compMap[cp1.id] = cp1;
           ctrl.setCompPid(cp1.id, c.id);
           childs[index] = cp1.id;
-
           deepCopy(cp);
         });
       }
@@ -417,19 +416,18 @@ export const editActions = EditorModule.action({
 
     ctrlState.selected.forEach((c) => {
       const cp = this.helper.findComp(c) as DesignComp;
-      const cp1 = cloneDeep(cp);
-      cp1.id = nanoid();
+      const cp1 = cloneObj(cp);
       news.push(cp1.id);
       ctrl.compMap[cp1.id] = cp1;
-      ctrl.setCompPid(cp1.id, this.store.currStreamCardId);
-
+      ctrl.setCompPid(cp1.id, ctrl.currStreamCardId);
       deepCopy(cp);
     });
     this.actions.addComps(news);
 
     this.controls.selectCtrl.gizmo.selectObjs(news);
 
-    setTimeout(() => {
+    //剪辑
+ 
       if (ctrlState.type == 2) {
         //剪辑删除原来的组件
         const card = this.helper.findComp(ctrlState.cardId) as DesignComp;
@@ -446,10 +444,10 @@ export const editActions = EditorModule.action({
       }
 
       //获取当前选中的内容
-      if (ctrlState.cardId != this.store.currStreamCardId) {
+      if (ctrlState.cardId != ctrl.currStreamCardId) {
         //跨卡片拷贝
         let pox = this.helper.getCardNextPosY(
-          this.store.currStreamCardId,
+          ctrl.currStreamCardId,
           ctrlState.selWidth
         );
         this.controls.selectCtrl.translate(0, pox.y - ctrlState.selY);
@@ -459,14 +457,16 @@ export const editActions = EditorModule.action({
       if (ctrlState.screenId == this.controls.screenCtrl.currScreenId) {
         this.controls.selectCtrl.translate(20, 20);
       }
-    }, 100);
+
+      history.submit();
   },
 
   addComps(ids: string[]) {
-    const childs = this.store.currStreamCard.children.default?.slice(0) || [];
+    const childs = this.store.currStreamCard.children.default.slice(0);
     childs.push(...ids);
-    this.store.currStreamCard.children.default = childs;
+    this.controls.pageCtrl.currStreamCard.children.setDefault(childs);
   },
+  
   ctrlAndA() {
     const childrens = (this.store.currStreamCard.children.default || []).slice(
       0
@@ -504,9 +504,9 @@ export const editActions = EditorModule.action({
         this.actions.removeStreamCard(compId);
         return;
       }
-      const cardid = this.store.currStreamCardId;
-      if (compId === this.store.currCompId) {
-        ctrl.setCurrComp(this.store.currStreamCardId);
+      const cardid = ctrl.currStreamCardId;
+      if (compId === ctrl.currCompId) {
+        ctrl.setCurrComp(ctrl.currStreamCardId);
       }
       ctrl.deleteComp(compId);
 
@@ -525,8 +525,8 @@ export const editActions = EditorModule.action({
 
     await queenApi.showConfirm({ title: "删除", content: "确认删除当前页面?" });
 
-    let nextCard = ctrl.state.currStreamCardId;
-    if (compId == ctrl.state.currStreamCardId) {
+    let nextCard = ctrl.currStreamCardId;
+    if (compId == ctrl.currStreamCardId) {
       const i = ctrl.streamCardIds.indexOf(compId);
       nextCard =ctrl.streamCardIds[i + 1];
       if (!nextCard) {
@@ -743,7 +743,9 @@ export const editActions = EditorModule.action({
   },
   //横向对齐
   setAlignX(flag: 0 | 1 | 2 | 3, isGroup = false) {
+    
     console.log("alignX");
+
     const selectCtrl = this.controls.selectCtrl;
     const w = this.helper.designSizeToPx(
       this.controls.screenCtrl.getCurrScreenWidth()
@@ -751,8 +753,8 @@ export const editActions = EditorModule.action({
     const gizmo = selectCtrl.gizmo;
 
     if (gizmo.selected.length == 1 || isGroup) {
-      const objc = selectCtrl.objContainer;
-      const box = objc.getBound();
+    
+      const box = gizmo.getBound();
 
       switch (flag) {
         case 0:
@@ -770,32 +772,31 @@ export const editActions = EditorModule.action({
     }
 
     //多选元素对齐模式
-    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
     const anchor = new CompObject(anchorBox);
     const anchorRect = anchor.getBox();
 
-    const objc = selectCtrl.objContainer;
     let min = 10000,
       max = -10000;
     let step = 0;
     if (flag == 3) {
       //Y轴均匀排布
-      objc.parent.children.forEach((c) => {
+      gizmo.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const x = r.x + r.w / 2.0;
         if (x < min) min = x;
         if (x > max) max = x;
       });
-      const stepCount = objc.parent.children.length;
+      const stepCount = gizmo.parent.children.length;
 
       step = (max - min) / (stepCount - 1);
 
       const stepIndexMap: any = {};
 
-      objc.parent.children.forEach((c) => {
+      gizmo.parent.children.forEach((c) => {
         const child = c as CompObject;
         const r = child.getBox();
         const x = r.x + r.w / 2.0;
@@ -812,15 +813,19 @@ export const editActions = EditorModule.action({
         stepIndexMap[minIndex] = true;
         child.translate(minIndex * step + min - x, 0);
       });
-      objc.updateSize();
-      selectCtrl.upgateGizmoStyle();
+
+      const selects = gizmo.selectedIds.slice(0)
+      //重新选择当前的元素
+      // gizmo.reSelectCurrElemnts();
+      gizmo.selectObjs(selects, true)
+
       history.submit();
       return;
     }
 
-    objc.parent.children.forEach((c) => {
+    gizmo.parent.children.forEach((c) => {
       const child = c as CompObject;
-      if (child.comp.id == this.store.lastSelected) return;
+      if (child.comp.id == gizmo.state.lastId) return;
       const r = child.getBox();
       switch (flag) {
         case 0:
@@ -837,7 +842,7 @@ export const editActions = EditorModule.action({
           break;
       }
     });
-    objc.updateSize();
+    gizmo.updateSize();
     selectCtrl.upgateGizmoStyle();
     history.submit();
   },
@@ -867,7 +872,7 @@ export const editActions = EditorModule.action({
       return;
     }
 
-    const anchorBox = this.helper.findComp(this.store.lastSelected);
+    const anchorBox = this.helper.findComp(gizmo.state.lastId);
     if (!anchorBox) return;
 
     const anchor = new CompObject(anchorBox);
@@ -919,7 +924,7 @@ export const editActions = EditorModule.action({
 
     objc.parent.children.forEach((c) => {
       const child = c as CompObject;
-      if (child.comp.id == this.store.lastSelected) return;
+      if (child.comp.id == gizmo.state.lastId) return;
       const r = child.getBox();
       switch (flag) {
         case 0:

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

@@ -248,7 +248,7 @@ export const helpers = EditorModule.helper({
 
   getCardNextPosY(cardId:string, itemWidth:number) {
       let yOffset = 0;
-      if (cardId != this.store.currStreamCardId) {
+      if (cardId != this.controls.pageCtrl.state.currStreamCardId) {
         //const paths = this.helper.getCompTrees(cardId);
         const bound = this.helper.getCardCompBound(cardId);
         yOffset = bound.y + bound.h;

src/modules/editor/module/index.ts

@@ -95,7 +95,7 @@ export class EditorModule extends ModuleRoot {
     location.href = link;
   }
   get selected () {
-    return this.controls.selectCtrl.gizmo.selected;
+    return this.controls.selectCtrl.gizmo.state.transform.selected;
   }
   get gizmo() {
     return this.controls.selectCtrl.gizmo;

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

@@ -16,8 +16,6 @@ export const store = EditorModule.store({
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
     compEditReslut: 0, // -1 取消， 1 确定
-    lastSelected: "", //最后上传
-
     // shortPage: {
     //   index: 0,
     //   offset: 0,
@@ -29,9 +27,6 @@ export const store = EditorModule.store({
     currCompId() {
       return this.controls.pageCtrl.state.currCompId;
     },
-    currStreamCardId() {
-      return this.controls.pageCtrl.state.currStreamCardId;
-    },
 
     isEditMode(): boolean {
       return !this.store.isPreview && !this.store.isDisplay;

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -54,7 +54,6 @@ export class DesignCompObj<T extends {[key:string]: any}> extends Events {
     this.layout.fromJson(data.layout);
   }
 
-
   toJson()  {
     const out:any= {};
     out.id = this.id;

src/modules/editor/objects/DesignTemp/factory.ts

@@ -1,3 +1,4 @@
+import { nanoid } from "nanoid";
 import { CompArcObj } from "../../components/CompUI/basicUI/Arc";
 import { CompCardObj } from "../../components/CompUI/basicUI/Container";
 import { CompCurveObj } from "../../components/CompUI/basicUI/Curve";
@@ -16,7 +17,7 @@ import { CompVideoObj } from "../../components/CompUI/basicUI/Video";
 import { CompWeb3DObj } from "../../components/CompUI/basicUI/Web3D";
 import { HistoryController } from "../../controllers/ReactCtrl/history";
 import { ICompKeys } from "../../typings";
-import { DesignComp } from "./DesignComp";
+import { DesignComp, DesignCompObj } from "./DesignComp";
 
 
 const history = new HistoryController();
@@ -88,4 +89,12 @@ export function createObj( data:any, init = true)  {
     return obj;
 }
 
+export function cloneObj(o: DesignComp ) {
+    const data = o.toJson();
+    data.id = nanoid();
+    const obj = createObj({compKey: o.compKey}, false)
+    obj.fromJson(data);
+    return obj;
+}   
+
 export {history};

src/modules/editor/objects/Toolbars/layout.ts

@@ -5,14 +5,14 @@ import { createToolbars } from "./default";
 export const LayoutToolbars = createToolbars({
     xLeft: {
         component: TipIcons.AlignXLeft,
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id) },
+        getVisible(comp) { return  this.selected.length > 0 },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(0, isGroup);
         },
     },
     xCenter: {
         component: TipIcons.AlignXCenter,
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
+        getVisible(comp) { return  this.selected.length > 0  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(1, isGroup);
         },
@@ -20,7 +20,7 @@ export const LayoutToolbars = createToolbars({
     xRight: {
         component: TipIcons.AlignXRight,
 
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
+        getVisible(comp) { return  this.selected.length > 0   },
         onClick(comp, isGroup= false) {
             this.actions.setAlignX(2, isGroup);
         },
@@ -45,7 +45,7 @@ export const LayoutToolbars = createToolbars({
     YTop: {
         component: TipIcons.AlignYTop,
 
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
+        getVisible(comp) { return this.selected.length > 0  },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(0, isGroup);
         },
@@ -53,14 +53,14 @@ export const LayoutToolbars = createToolbars({
     YCenter: {
         component: TipIcons.AlignYCenter,
 
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
+        getVisible(comp) { return  this.selected.length > 0 },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(1, isGroup);
         },
     },
     YBottom: {
         component: TipIcons.AlignYBottom,
-        getVisible(comp) { return comp && this.selected.length > 0 && comp.compKey != "Page" && !this.helper.isStreamCard(comp.id)  },
+        getVisible(comp) { return this.selected.length > 0 },
         onClick(comp, isGroup= false) {
             this.actions.setAlignY(2, isGroup);
         },