udpate

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

@@ -0,0 +1,316 @@
+import { IconRotate, IconMove } from "@/assets/icons";
+import { css } from "@linaria/core";
+import { defineComponent, ref, nextTick, reactive } from "vue";
+import { string } from "vue-types";
+import { useCompData } from "../../defines/createCompHooks";
+import { NodeTransfer } from "@/modules/editor/objects/Elements/transfer";
+import { View } from "../View";
+import { useEditor } from "@/modules/editor";
+import { CompUI } from "../..";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+
+  setup(props) {
+    const toolbarRef = ref<HTMLElement>();
+    const state = reactive({
+      toolbarW: 0,
+    });
+    const comp = useCompData<NodeTransfer>(props.compId);
+    comp.value.onToolbarsChanged(() => {
+      nextTick(() => {
+        if (!toolbarRef.value) {
+          return;
+        }
+        const r = toolbarRef.value.getBoundingClientRect();
+        state.toolbarW = r.width;
+      });
+    });
+
+    const controls = useEditor().controls.compUICtrl;
+
+    return () => {
+      const bound = comp.getLocalBounds();
+
+      return (
+        <View class="pointer-events-none" compId={props.compId}>
+            { 
+                comp.state.children.map((id) => {
+                const compItem = comp.getObj(id)
+                const Comp = controls.state.components.get(compItem.compKey)?.Component;
+
+                return <Comp key={compItem.id} compId={compItem.id} class="pointer-events-auto" />;
+            })}
+
+          <div
+            id="toolbar"
+            class={toolbarStyle}
+            style={{
+              top: "-50px",
+              left: bound.x + bound.width / 2.0 - state.toolbarW / 2.0 + "px",
+            }}
+            ref={toolbarRef}
+          >
+            {/* {
+              comp.value.toolbars.map((name) => {
+                const ToolBarComp = ctrl.toolbars[name];
+                return <span key={name} data-toolname={name} ><ToolBarComp class="p-4px" /></span> 
+              })
+            } */}
+          </div>
+
+          <div
+            class={["absolute", selctRectStyle]}
+            id="movecenter"
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          >
+            <div
+              class={borderStyle}
+              style={{
+                transform: comp.value.matrixInvert,
+                transformOrigin: `0 0`,
+              }}
+            >
+              <div
+                class={borderContentStyle}
+                style={{
+                  width: comp.value.relWidth + "px",
+                  height: comp.value.relHeight + "px",
+                }}
+              ></div>
+            </div>
+            <>
+              {
+                <div
+                  class={[resizeStyle, scaleBottomRightStyle]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleBottomright"
+                />
+              }
+
+              {
+                <div
+                  class={[resizeStyle, scaleBottomLeftStyle]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleBottomleft"
+                />
+              }
+
+              {
+                <div
+                  class={[resizeStyle, scaleTopLeftStyle]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleTopleft"
+                />
+              }
+              {
+                <div
+                  class={[resizeStyle, scaleTopRightStyle]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleTopright"
+                />
+              }
+
+              <div
+                class={transformBtnsStyle}
+                style={{ transform: comp.value.matrixInvert }}
+              >
+                <div class={transBtnStyle} id="moveicon">
+                  <IconMove />
+                </div>
+
+                <div class={transBtnStyle} id="rotate">
+                  <IconRotate />
+                </div>
+              </div>
+              {comp.value.showScaleBridge && comp.value.showScaletop && (
+                <div
+                  class={[resizeHeightBtnCls, scaleTopCls]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaletop"
+                />
+              )}
+              {comp.value.showScaleBridge && comp.value.showScalebottom && (
+                <div
+                  class={[resizeHeightBtnCls, scaleBottomCls]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scalebottom"
+                />
+              )}
+              {comp.value.showScaleBridge && (
+                <div
+                  class={[resizeWidthBtnCls, scaleRightCls]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleright"
+                />
+              )}
+              {comp.value.showScaleBridge && (
+                <div
+                  class={[resizeWidthBtnCls, scaleLeftCls]}
+                  style={{ transform: comp.value.matrixInvert }}
+                  id="scaleleft"
+                />
+              )}
+            </>
+          </div>
+        </View>
+      );
+    };
+  },
+});
+
+const selctRectStyle = css`
+  /* pointer-events: none; */
+`;
+
+const borderStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 999;
+`;
+const borderContentStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid @inf-primary-color;
+`;
+
+const resizeStyle = css`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  z-index: 999;
+  transform: translate(50%, 50%);
+  pointer-events: auto;
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
+  cursor: nwse-resize;
+  &:hover {
+    border-color: @inf-primary-color;
+  }
+`;
+
+const scaleBottomRightStyle = css`
+  bottom: -8px;
+  right: -8px;
+`;
+const scaleBottomLeftStyle = css`
+  bottom: -8px;
+  left: -8px;
+`;
+
+const scaleTopLeftStyle = css`
+  top: -8px;
+  left: -8px;
+`;
+
+const scaleTopRightStyle = css`
+  top: -8px;
+  right: -8px;
+`;
+
+const transformBtnsStyle = css`
+  @apply space-x-10px whitespace-nowrap;
+  position: absolute;
+  bottom: 0px;
+  left: calc(50% - 32px);
+  font-size: 16px;
+  z-index: 999;
+  pointer-events: auto;
+  transform-origin: 50% 100%;
+  pointer-events: none;
+`;
+
+const transBtnStyle = css`
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: #fff;
+  text-align: center;
+  line-height: 28px;
+  font-size: 16px;
+  color: #333;
+  position: relative;
+  top: 50px;
+  @apply shadow cursor-move;
+  pointer-events: auto;
+
+  &:hover {
+    color: #fff;
+    background-color: @inf-primary-color;
+  }
+`;
+
+const toolbarStyle = css`
+  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(0%, -60px);
+  z-index: 999;
+`;
+
+const resizeHeightBtnCls = css`
+  position: absolute;
+  width: 30px;
+  height: 8px;
+  border-radius: 4px;
+  left: 50%;
+  transform: translate(-50%, -4px);
+  pointer-events: auto;
+  cursor: ns-resize;
+  background: rgba(255, 255, 255, 0.3);
+  &:hover {
+    background: @inf-primary-color;
+  }
+  @apply shadow;
+  z-index: 999;
+`;
+
+const scaleTopCls = css`
+  top: -4px;
+  left: calc(50% - 15px);
+`;
+
+const scaleBottomCls = css`
+  bottom: -4px;
+  left: calc(50% - 15px);
+`;
+
+const resizeWidthBtnCls = css`
+  position: absolute;
+  width: 8px;
+  height: 30px;
+  border-radius: 4px;
+  pointer-events: auto;
+  cursor: ew-resize;
+  background: rgba(255, 255, 255, 0.3);
+  &:hover {
+    background: @inf-primary-color;
+  }
+  @apply shadow;
+  z-index: 999;
+`;
+
+const scaleRightCls = css`
+  right: -4px;
+  top: calc(50% - 15px);
+`;
+
+const scaleLeftCls = css`
+  left: -4px;
+  top: calc(50% - 15px);
+`;

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

@@ -0,0 +1,10 @@
+import { createAttrsForm } from "../../defines/createAttrsForm";
+
+export { Component } from "./component";
+
+export const options = {
+  name: "转换器",
+  thumbnail: require("@/modules/editor/assets/icons/group.svg"),
+};
+
+export const Form = createAttrsForm([]);

src/modules/editor/components/CompUI/basicUI/index.ts

@@ -5,4 +5,4 @@ export * as Page from "./Page";
 export * as Text from "./Text";
 export * as Video from "./Video";
 export * as Web3D from "./Web3D";
-
+export * as Transfer from "./Transfer";

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

@@ -3,14 +3,13 @@ import { EditorModule } from "../../module";
 
 import { CompBase } from "../../objects/Elements/base";
 import { RxValue } from "../../objects/Elements/RxValue";
-import { CompCard, CompPage, PageValue, createCard, createPage } from "../../objects/Elements/page";
+import { CompCard, CompPage, createPage } from "../../objects/Elements/page";
 import { HistoryController } from "../../objects/Elements/history";
 import { createElementFactory } from "../../objects/Elements/factory";
 
 export class CompCtrl extends ModuleControl<EditorModule> {
-  objsMap = new Map<string, CompBase<any>>();
-  history = new HistoryController();
 
+  history = new HistoryController();
   root = createPage({}, this.history);
   state = RxValue.create({
     rootPage: this.root.id,
@@ -103,20 +102,22 @@ export class CompCtrl extends ModuleControl<EditorModule> {
     page.state.setChildren( children );
   }
 
-  async addComponent(compKey: string, values:any) {
-    const control = this.controls.compCtrl;
-    if (!control.getRootPage() ) {
-        queenApi.messageError("请先选中一个卡片");
-        return;
-    }
-  
+  async createNode(compKey: string, values:any) {
     const creator  = this.getCompKeyFactory(compKey);
     if ( !creator ) {
       queenApi.messageError("不支持的组件");
       return;
     }
+    return await creator(values);
+  }
 
-    let addedObj:CompBase<any> = await creator(values);
+  async addComponent(compKey: string, values:any) {
+    const control = this.controls.compCtrl;
+    if (!control.getRootPage() ) {
+        queenApi.messageError("请先选中一个卡片");
+        return;
+    }
+    const addedObj = await this.createNode(compKey, values);
     if (!addedObj) return;
 
     let yOffset = 0;

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

@@ -1,4 +1,6 @@
 import { SelectCtrl } from ".";
+import { CompBase } from "../../objects/Elements/base";
+import { NodeTransfer } from "../../objects/Elements/transfer";
 import { ObjsContainer } from "./ObjsContainer";
 import { CompObject } from "./compObj";
 
@@ -21,7 +23,7 @@ export class AssistMagnetCtrl {
     clientY = 0;
     currRefYs:number[] = [];
     currRefXs:number[] = []
-    otherSlides : CompObject[] = [];
+    otherSlides : CompBase<any>[] = [];
 
     getMinValues(srcYs:number[], refYs: number[]) {
         //找出最近的参考线
@@ -67,8 +69,8 @@ export class AssistMagnetCtrl {
         if ( !this.enable ) return;
 
         const eps = 4;
-        const Objc = this.ctrl.objContainer as ObjsContainer
-        const bund = Objc.getBound();
+        const Objc = this.ctrl._objTransfor as NodeTransfer
+        const bund = Objc.getBounds(false)
         const box = this.ctrl.getCurrCardBox();
 
         //包围盒的上 中 下 三条横线
@@ -90,16 +92,16 @@ export class AssistMagnetCtrl {
             this.otherSlides = this.ctrl.getUnSelectChilds();
 
             this.otherSlides.forEach(item=>{
-                const b = item.getBox();
+                const b = item.getBounds(false);
                 const y = (b.y + box.top) *2.0
                 if (this.rulerYs.indexOf(y) == -1) {
                     this.rulerYs.push(y)
                 }
-                const y1 = y + b.h
+                const y1 = y + b.height
                 if (this.rulerYs.indexOf(y1) == -1) {
                     this.rulerYs.push(y1)
                 }
-                const y2 = y + b.h *2
+                const y2 = y + b.height *2
                 if (this.rulerYs.indexOf(y2) == -1) {
                     this.rulerYs.push(y2)
                 }
@@ -133,16 +135,16 @@ export class AssistMagnetCtrl {
 
             //添加card内的其他对象
             this.otherSlides.forEach(item=>{
-                const b = item.getBox();
+                const b = item.getBounds(true);
                 const x = (b.x + box.left) *2.0
                 if (this.rulerXs.indexOf(x) == -1) {
                     this.rulerXs.push(x)
                 }
-                const x1 = x + b.w
+                const x1 = x + b.width
                 if (this.rulerXs.indexOf(x1) == -1) {
                     this.rulerXs.push(x1)
                 }
-                const x2  = x + b.w *2
+                const x2  = x + b.width *2
                 if (this.rulerXs.indexOf(x2) == -1) {
                     this.rulerXs.push(x2)
                 }
@@ -169,7 +171,7 @@ export class AssistMagnetCtrl {
         if (!this.enable || !(this.currRefXs.length > 0 || this.currRefYs.length > 0) ) {
             return;
         }
-
+        
         const ctx = this.ctrl._selCtx;
         let n = this.currRefXs.length;
         ctx.lineWidth = 2;

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

@@ -11,6 +11,9 @@ import { indexOf } from "lodash";
 import { AssistCtrl } from "./assistCtrl";
 import { AssistRulerCtrl } from "./assistRulerCtrl";
 import { AssistMagnetCtrl } from "./assistMagnetCtrl";
+import { RxValue } from "../../objects/Elements/RxValue";
+import { NodeTransfer } from "../../objects/Elements/transfer";
+import { CompBase } from "../../objects/Elements/base";
 
 /**
  *  页面画布空间进行选择
@@ -49,7 +52,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     mode: MODE_NONE,
   });
 
-  selected: any[] = []; //选中的所有组件ids
 
   pageEl?: HTMLElement;
   selCanvas = {} as HTMLCanvasElement;
@@ -77,7 +79,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
   
   getCurrCardBox() {
-    return this.store.currStreamCard.$el.getBoundingClientRect();
+    return this.controls.compCtrl.currCardObj.$el.getBoundingClientRect();
   } 
   getViewPortBox() {
     //@ts-ignore
@@ -85,7 +87,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   } 
   
   getCurrCard() {
-    return this.store.currStreamCard;
+    return this.controls.compCtrl.currCardObj;
   }
 
   getProjectId() {
@@ -93,17 +95,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   getUnSelectChilds() {
-    const childs = this.store.currStreamCard.children.default || [];
+    const childs = this.controls.compCtrl.currCardObj.getChildIds();
     let n = childs.length;
     let out = [];
     while(n--) {
-      if (this.store.selected.indexOf(childs[n]) == -1) {
-        out.push(new CompObject( this.store.compMap[childs[n]]));
+      if (this._objTransfor?.value.selected.indexOf(childs[n]) == -1) {
+        out.push( this._objTransfor.getObj(childs[n]) );
       }
     }
     return out;
   }
 
+
+
+
   initEvents(
     pageEl: HTMLElement,
     selCanvas: HTMLCanvasElement,
@@ -128,22 +133,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
     window.addEventListener("resize", this.onResize.bind(this));
 
-    this.initEffects();
-  }
-
-  initEffects() {
-    //相应相应的事件
-    Effect.array(() => this.store.selected)
-      .list({
-        remove: () => {
-          console.log("xxx");
-        },
-        change: (added: string[], removed: string[]) => {
-          console.log("changeMap=>", added, removed);
-          this._updateSelects();
-        },
-      })
-      .run();
   }
 
   _mouseDownFlag = "";
@@ -151,22 +140,33 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   _containers: Map<string, ObjsContainer> = new Map();
 
-  _updateSelects() {
-    const selecteds = this.store.selected;
-    const ObjC = this._containers.get(this.store.selectId);
-    let objs = [];
-    for (let item of selecteds) {
-      objs.push(new CompObject(this.compMap[item]));
-    }
-    this.selecteObjs(objs, ObjC);
-    if (this.store.selectId) {
-      this._containers.set(
-        this.store.selectId,
-        this.objContainer as ObjsContainer
-      );
+  _objTransfor?: NodeTransfer;
+
+  getMovableNode(compId:string, parent:CompBase<any>) {
+    let obj = this.controls.compCtrl.getObj(compId)
+    do {
+        if (obj.parent.id == parent.id) return obj;
+        obj = obj.parent;
+    } while(obj)
+
+    return obj;
+  }
+
+
+  async selectObj(compId:string, e:MouseEvent) {
+    const compCtrl = this.controls.compCtrl;
+    let obj = compCtrl.currCardObj;
+    const currNode = this.getMovableNode(compId, obj);
+
+    let transfer  = this._objTransfor as NodeTransfer;
+    if (!transfer) {
+      this._objTransfor = await this.controls.compCtrl.createNode("Transfer", {selected: [currNode.id]}) as NodeTransfer;
+      transfer = this._objTransfor;
+      obj.addChildNodes([transfer.id], false);
     }
   }
 
+  selected = [] as any[];
   _downClickedCompId = "";
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
@@ -211,12 +211,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       if (!this._mouseDownFlag) {
         //选框点击判断
         let isClickSelRect = false;
-        if (this.selected.length > 0) {
-          const card = this.store.currStreamCard.$el;
+        if ( this._objTransfor ) {
+          const card = this.getCurrCard().$el;
           box = card.getBoundingClientRect();
-          const cardX = pageX;
-          const cardY = e.clientY - box.top;
-          isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
+          const cardX = this.helper.pxToDesignSize(pageX);
+          const cardY = this.helper.pxToDesignSize(e.clientY - box.top);
+          isClickSelRect = this._objTransfor.testWorldClick(cardX, cardY);
           if (isClickSelRect) {
             this._state = MODE_MOVING;
           }
@@ -273,7 +273,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._initMovePos.y = -1;
   }
   _initMovePos = { x: -1, y: -1 };
-
+  
   getDivFlag(div: HTMLElement, flag = "editable") {
     let c: any = div;
     if (!c) return "";
@@ -399,22 +399,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   movingMousemove(e: MouseEvent) {
-    const objContainer = this.objContainer as ObjsContainer;
+    const objContainer = this._objTransfor as NodeTransfer;
     const magnet = this.assistMagnet as AssistMagnetCtrl;
 
+    console.log("movinging")
     if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
-      const obj = this.objContainer as ObjsContainer;
-      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
+        this._initMovePos = { x: objContainer.x, y: objContainer.y };
     }
     magnet.test(e);
 
     objContainer.setPivot(0);
     objContainer.translate(
-      magnet.clientX - this._movePreClientX,
-      magnet.clientY - this._movePreClientY
+      this.helper.pxToDesignSize( magnet.clientX - this._movePreClientX),
+      this.helper.pxToDesignSize(magnet.clientY - this._movePreClientY),
     );
-
-    this.upgateGizmoStyle();
   }
 
   _movePreClientX = 0;
@@ -475,8 +473,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
 
     if (isClick) {
-      this._state = MODE_NONE;
-      this.actions.pickComp(this._downClickedCompId);
+        this._state = MODE_NONE;
+        this.selectObj(this._downClickedCompId, e);
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -509,53 +507,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._downed = false;
     this._moveSelectUpdated = false;
 
-    this.upgateGizmoStyle();
+    // this.upgateGizmoStyle();
     this.assistRuler?.draw();
     this.assistMagnet?.onMouseUp();
+
   }
 
+
   moveMouseUp(e: MouseEvent, clicked: boolean) {
     const history = this.controls.historyCtrl.history;
 
-    const obj = this.objContainer as ObjsContainer;
-    const lastX = obj.parent.x,
-      lastY = obj.parent.y;
-
-    const initX = this._initMovePos.x,
-      initY = this._initMovePos.y;
-
-    this._initMovePos.x = -1;
-    this._initMovePos.y = -1;
-
-    if (initX == -1 && initY == -1) return;
-
-    obj.setPivot(0);
-
-    history.record({
-      undo: () => {
-        console.log("undo ");
-        const currObj = this.objContainer as ObjsContainer;
-        currObj.setPivot(0);
-        currObj.parent.x = initX;
-        currObj.parent.y = initY;
-        currObj.parent.updateTransform();
-        currObj.updateCompState();
-
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-      redo: () => {
-        const currObj = this.objContainer as ObjsContainer;
-        currObj.setPivot(0);
-        currObj.parent.x = lastX;
-        currObj.parent.y = lastY;
-        currObj.parent.updateTransform();
-        currObj.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-    } as any);
-    history.submit();
   }
 
   rectSelect(x: number, y: number, width: number, height: number) {
@@ -578,10 +539,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
-    if (this.selected.length < 1) {
-      this.transferStyle.showGizmo = false;
-      return;
-    }
+    // if (this.selected.length < 1) {
+    //   this.transferStyle.showGizmo = false;
+    //   return;
+    // }
 
     this.assistCtrl?.flashDrawCardDists();
     this.transferStyle.showGizmo = false;
@@ -615,7 +576,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     this.transferStyle.matrix = matrix;
     this.transferStyle.matrixInvert = matrixInvert;
-    this.transferStyle.showOrthScale = this.selected.length == 1;
+
+    // this.transferStyle.showOrthScale = this.selected.length == 1;
   }
 
   selectId(id: string) {
@@ -684,51 +646,38 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   objContainer?: ObjsContainer;
 
   selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
-    if (this.selected.length == 0 && objs.length == 0) return;
-
-    if (
-      this.selected.length == 1 &&
-      objs.length == 1 &&
-      this.selected[0] == objs[0]
-    )
-      return;
-
-    if (this.objContainer) {
-      this.objContainer.destroy();
-      this.objContainer = undefined;
-    }
-
-    let newObjContainer = undefined;
-
-    if (objs.length > 0 && objs[0]) {
-      newObjContainer = ContainerBox ? ContainerBox : new ObjsContainer(objs);
-      if (ContainerBox) {
-        objs.forEach((obj) => {
-          ContainerBox.parent.addChildWorldNoChange(obj);
-        });
-        ContainerBox.selected = objs;
-        ContainerBox.parent.updateTransform();
-      }
-    }
-    this.objContainer = newObjContainer;
-    this.selected = objs;
-
-    this.emitChange();
-
-    this.upgateGizmoStyle();
-
-    return this.selected;
+    // if (this.selected.length == 0 && objs.length == 0) return;
+    // if (
+    //   this.selected.length == 1 &&
+    //   objs.length == 1 &&
+    //   this.selected[0] == objs[0]
+    // )
+    //   return;
+
+    // if (this.objContainer) {
+    //   this.objContainer.destroy();
+    //   this.objContainer = undefined;
+    // }
+
+    // let newObjContainer = undefined;
+
+    // if (objs.length > 0 && objs[0]) {
+    //   newObjContainer = ContainerBox ? ContainerBox : new ObjsContainer(objs);
+    //   if (ContainerBox) {
+    //     objs.forEach((obj) => {
+    //       ContainerBox.parent.addChildWorldNoChange(obj);
+    //     });
+    //     ContainerBox.selected = objs;
+    //     ContainerBox.parent.updateTransform();
+    //   }
+    // }
+    // this.objContainer = newObjContainer;
+    // this.emitChange();
+    // this.upgateGizmoStyle();
+    // return this.selected;
+    console.log("select objs");
   }
 
-  emitChange() {
-    const selected = this.selected;
-    if (selected.length && selected[0]) {
-      this.bus.emit("showProps", selected[0].from);
-    } else {
-      this.bus.emit("showProps");
-    }
-    this.bus.emit("selectedChange");
-  }
 
   rotateCenter?: { x: number; y: number };
   ratatePre = 0;
@@ -737,13 +686,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   lastRad = 0;
 
   rotateMousemove(e: MouseEvent) {
-    const card = this.store.currStreamCard;
 
+    const card = this.getCurrCard();
     const rect = card.$el.getBoundingClientRect();
-    let StartX = e.clientX - rect.left;
-    let StartY = e.clientY - rect.top;
+    let StartX = this.helper.pxToDesignSize(e.clientX - rect.left);
+    let StartY = this.helper.pxToDesignSize(e.clientY - rect.top);
 
-    const objContainer = this.objContainer as ObjsContainer;
+    const objContainer = this._objTransfor as NodeTransfer;
 
     //获取当前屏幕坐标和选框中心点坐标，计算旋转值
     if (!this.rotateCenter) {
@@ -795,45 +744,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     console.log("rotate=>", dta);
 
     objContainer.rotate(dta);
-
-    //   this.emit("translateChange", this.objContainer)
-    this.upgateGizmoStyle();
   }
 
   rotateMouseUp(e: MouseEvent) {
     this.rotateCenter = undefined;
     if (!this.rotateCmd) return;
-    let scope = this;
-    let last = this.lastRad;
-    let initrad = scope.objinitAngleRad;
-
-    const history = this.controls.historyCtrl.history;
-    this.objContainer?.setPivot(0);
-
-    history.record({
-      undo: () => {
-        const objContainer = this.objContainer as ObjsContainer;
-
-        this.objContainer?.setPivot(4);
-        this.objContainer?.rotate(initrad);
-        this.objContainer?.setPivot(0);
-        this.objContainer?.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-
-      redo: () => {
-        console.log("redo ");
-        const objContainer = this.objContainer as ObjsContainer;
-        this.objContainer?.setPivot(4);
-        this.objContainer?.rotate(last);
-        this.objContainer?.setPivot(0);
-        this.objContainer?.updateCompState();
-        this.upgateGizmoStyle();
-        this.helper.extendStreamCard(this.store.currStreamCardId);
-      },
-    } as any);
-    history.submit();
+    // this._objTransfor?.setPivot(0);
     this.rotateCmd = false;
   }
 

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

@@ -68,7 +68,8 @@ export class Matrix {
   }
 
   getMatrixStr(calcSize:(v:number)=>number = (v)=>v) {
-    return `matrix(${this.a},${this.b},${this.c},${this.d},${calcSize(this.tx)},${calcSize(this.ty)})`;
+      return `matrix(${this.a},${this.b},${this.c},${this.d},${ calcSize(this.tx) },${calcSize(this.ty)})`;
+      // return `matrix(${this.a},${this.b},${this.c},${this.d},${ 0 },${0})`;
   }
 
   fromArray(array: number[]) {

src/modules/editor/objects/Elements/base.ts

@@ -4,6 +4,8 @@ import { nanoid } from "nanoid";
 import { ICompKeys } from "../../typings";
 import { utils } from "./utils";
 import { HistoryController } from "./history";
+import { Transform } from "../../controllers/SelectCtrl/objects/transform";
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
 
 class CompBase<T extends object> extends Container {
     id = nanoid();
@@ -38,6 +40,32 @@ class CompBase<T extends object> extends Container {
         CompBase.objsMap.set(this.id, this);
     }
 
+    changingChildWordNoChange?:boolean = undefined;
+
+    addChildNodes(id:string[], WordNoChange = false) {
+        this.changingChildWordNoChange = WordNoChange;
+        let child = this.state.children.slice(0);
+        child.push(...id);
+        this.state.setChildren(child);
+    }
+
+    copyTransform(target:CompBase<any>) {
+        this.state.size[0] = target.state.size[0];
+        this.state.size[1] = target.state.size[1];
+        this.state.pos[0] = target.state.pos[0];
+        this.state.pos[1] = target.state.pos[1];
+        this.state.scale[0] = target.state.scale[0];
+        this.state.scale[1] = target.state.scale[1];
+        this.state.pivots[0] = target.state.pivots[0];
+        this.state.pivots[1] = target.state.pivots[1];
+        this.state.rotation = target.state.rotation;
+    }
+
+    changeChildNodes(ids: string[], WordNoChange = false) {
+        this.changingChildWordNoChange = WordNoChange;
+        this.state.setChildren(ids);
+    }
+
     getObj(id:string) {
         return CompBase.objsMap.get(id) as CompBase<any>;
     }
@@ -79,6 +107,7 @@ class CompBase<T extends object> extends Container {
         const style :any = {opacity: state.opacity}
         const size = state.size;
         const pos = state.pos;
+        const scale = state.scale;
 
         if (!state.visible) {
             style.display = "none";
@@ -110,9 +139,12 @@ class CompBase<T extends object> extends Container {
             style.top = utils.designToNaturalSize(pos[1]);
 
             const pivot = state.pivots;
-            style.transformOrigin = `${utils.designToNaturalSize(pivot[0])} ${utils.designToNaturalSize(pivot[1])}`
-            style.transform = this.localTransform.getMatrixStr(utils.designSizeToPx);
+            style.transformOrigin = `0 0`;
+            const transform = new Matrix();
+            transform.setTransform(0, 0, pivot[0], pivot[1], scale[0], scale[1], state.rotation, 0, 0);
+            style.transform = transform.getMatrixStr(utils.designSizeToPx);
         }
+
         return style;
     }
 
@@ -164,18 +196,72 @@ class CompBase<T extends object> extends Container {
 
         this.state.onRotationChanged((r)=>{
             this.rotation = r;
+            this.updateTransform();
+
+            console.log("rr==>", r);
             this.emit("transformChange");
         })
     }
 
+
+
     _updateChildObjs() {
         const childrens = this.state.children;
         this.removeChildren(0, this.children.length);
+        const worldNoChange = this.changingChildWordNoChange === true;
         childrens.forEach(c=>{
-            this.addChild(CompBase.objsMap.get(c) as any)
+            const obj = CompBase.objsMap.get(c) as any;
+            worldNoChange ? this.addChildWorldNoChange(obj) :  this.addChild(obj);
         })
         this.updateTransform();
+        this.changingChildWordNoChange=undefined;
     }
+
+    testWorldClick(sx:number,sy:number)
+    {
+        let w = this.width;
+        let h = this.height;
+        let local = {x:0,y:0} as any;
+        this.transform.worldTransform.applyInverse({x:sx,y:sy} as any, local);
+
+        if(  local.x < 0 || local.x > w ) return false;
+        if(  local.y < 0 || local.y > h ) return false;
+
+        return true;
+    }
+
+    //index
+    // 0 ---- 1
+    // |  4   |
+    // 3 -----2
+    pivotIndex = 0;
+    setPivot(index:number) {
+        const w = this.width;
+        const h = this.height;
+
+        let pivots = [{ x: 0, y: 0 }, { x: this.width, y: 0 }, { x: w, y: h }, { x: 0, y: h }, { x: w / 2.0, y: h / 2.0 }];
+        let targetPivot = pivots[index];
+
+        let point = { x: targetPivot.x, y: targetPivot.y } as any;
+        this.transform.localTransform.apply(point, point);
+
+        this.transform.pivot = targetPivot as any;
+        this.transform.position.x = point.x;
+        this.transform.position.y = point.y;
+
+        this.state.pivots[0] = targetPivot.x;
+        this.state.pivots[1] = targetPivot.y;
+
+        this.state.pos[0] = point.x;
+        this.state.pos[1] = point.y;
+
+        this.updateTransform();
+
+        this.pivotIndex = index;
+
+        return { x: point.x, y: point.y};
+    }
+
 }
 
 export {CompBase};

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

@@ -5,11 +5,11 @@ import { HistoryController } from "./history";
 import { ImageValue, createImageComp } from "./image";
 import { CardValue, PageValue, createCard, createPage } from "./page";
 import { TextValue, createTextComp } from "./text";
+import { TransferValue, createNodeTransfer } from "./transfer";
 import { VideoValue, createVideoComp } from "./video";
 import { Web3DValue, createWeb3DComp } from "./web3d";
 
 export function createElementFactory(h:HistoryController) {
-
     return {
         Image: (value: Partial<ImageValue>)=>createImageComp(value, h),
         Video: (value: Partial<VideoValue>)=>createVideoComp(value, h),
@@ -17,5 +17,6 @@ export function createElementFactory(h:HistoryController) {
         Web3D: (value: Partial<Web3DValue>)=>createWeb3DComp(value, h),
         Page: (value: Partial<PageValue>)=>createPage(value, h),
         StreamCard: (value: Partial<CardValue>)=>createCard(h),
+        Transfer: (value: Partial<TransferValue>)=>createNodeTransfer(value, h),
     };
 }

src/modules/editor/objects/Elements/transfer.ts

@@ -0,0 +1,85 @@
+import { CompBase } from "./base"
+import { HistoryController } from "./history";
+
+export type TransferValue = {
+    stageX: number;
+    stageY: number;
+    showOrthScale: boolean;
+    toolbars:  string[];
+    matrixInvert: string;
+    relWidth: number; 
+    relHeight: number;
+    showScaleBridge: boolean;
+    showScaletop: boolean;
+    showScalebottom: boolean;
+    selected: string[];
+}
+
+
+export class NodeTransfer extends CompBase<TransferValue> {
+
+    override onCreated() {
+            this.compKey = "Transfer";
+            this.state.size = [750, 60];
+    }
+
+    override init(): void {
+        this._bounds.clear();
+        this.value.selected.forEach(id=>{
+            const obj = this.getObj(id);
+            obj.getLocalBounds()
+            this._bounds.addBounds(obj._bounds);
+        })
+
+        const rect = this._bounds.getRectangle();
+        this.state.size[0] = rect.width;
+        this.state.size[1] = rect.height;
+        this.state.pos[0] = rect.x;
+        this.state.pos[1] = rect.y;
+
+
+        this.value.onSelectedChanged(()=>{
+            this.updateSeleted();
+        })
+        super.init();
+    }
+
+    translate(x: number, y:number) {
+        const pos = this.state.pos.slice(0);
+        pos[0] +=x;
+        pos[1] +=y;
+        this.state.setPos(pos);
+    }
+
+    rotate(r:number) {
+        this.state.setRotation(r);
+    }
+
+    updateSeleted() {
+        const selected = this.value.selected;
+        console.log("selected=>", selected);
+
+        const parent = this.getObj(this.value.selected[0]).parent as CompBase<any>; //获取父亲对象
+
+        const last = [] as string[];
+        parent.state.children.forEach(id=>{
+            if (selected.indexOf(id) == -1) last.push(id);
+        })
+        parent.changeChildNodes(last, false);
+
+        //更新当前内容
+        this.changeChildNodes(selected, true);
+    }
+}
+
+
+export function createNodeTransfer(values: Partial<TransferValue>, h: HistoryController) {
+    const options = { stageX: 0,    
+        showScaletop: true,
+        selected: [],
+        showScalebottom: true, stageY: 0,relWidth:0, relHeight:0, showScaleBridge:true, matrixInvert:"matrix(1,0,0,1,0,0)", showOrthScale:false, toolbars:[], ...values};
+    const obj = new NodeTransfer(options)
+    obj.init();
+    obj.setHistory(h);
+    return obj;
+}

src/modules/editor/objects/Elements/utils.ts

@@ -1,9 +1,9 @@
 export const utils = {
     designToNaturalSize(value: number) {
-        return value / 2 + "px";
+        return value / 2.0 + "px";
     },
     pxToDesignSize(value: number) {
-        return value * 2;
+        return value * 2.0;
     },
     designSizeToPx(value: number) {
         return value / 2.0;