update

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

@@ -122,17 +122,11 @@ export class AssistRulerCtrl {
     const pageViewPort = this.ctrl.pageEl as HTMLElement;
     const pageBox = pageViewPort.getBoundingClientRect();
 
-    // if ( !this._currAddingRuler ) this._currAddingRuler = {cid: this.ctrl.getCurrCard().id};
-
     if (typeIndex == 0 || typeIndex == 1) {
-      let mx = e.clientX;
-      if (Math.abs(mx - pageBox.left) < 2) {
-        //吸附效果
-        mx = pageBox.left;
-      }
+      let mx = e.clientX - box.left;
       let x = mx;
       let y = this.ctrl._selCanvaseSize.h;
-      ctx.moveTo(x * 2, box.y * 2);
+      ctx.moveTo(x * 2, 0);
       ctx.lineTo(x * 2, y);
       if (typeIndex == 0) {
         ctx.fillText(
@@ -151,9 +145,10 @@ export class AssistRulerCtrl {
     } else {
       const x1 = box.left * 2,
         x2 = box.right * 2;
-      const y = e.clientY * 2;
-      ctx.moveTo(x1, y);
-      ctx.lineTo(x2, y);
+      const y = (e.clientY - box.top) * 2;
+
+      ctx.moveTo(0, y);
+      ctx.lineTo(this.ctrl._selCanvaseSize.w,  y);
 
       const curBox = this.ctrl.getCurrCardViewPortBox();
       if (typeIndex == 2) {
@@ -183,11 +178,13 @@ export class AssistRulerCtrl {
     if (!this._currAddingRuler) {
       return;
     }
+
     const viewPort = this.ctrl.pageEl as HTMLElement;
     const box = viewPort.getBoundingClientRect();
     const currDragItem = this._currAddingRuler;
     const verz = currDragItem.verz || 0;
     const horz = currDragItem.horz || 0;
+
     if (verz < 0 || horz < 0 || verz > box.width * 2 || horz > box.height * 2) {
       this._currAddingRuler = undefined;
       return;
@@ -197,8 +194,6 @@ export class AssistRulerCtrl {
 
     console.log("rulerLineMouseUp=>", e.clientY);
     this._currAddingRuler = undefined;
-
-    //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
   }
 
   draw() {
@@ -227,14 +222,14 @@ export class AssistRulerCtrl {
       if (item.horz != undefined) {
         //水平线
         ctx.beginPath();
-        ctx.moveTo(box.x * 2, item.horz + pageELBox.top * 2);
-        ctx.lineTo(box.right * 2, item.horz + pageELBox.top * 2);
+        ctx.moveTo(0, item.horz + pageELBox.top * 2);
+        ctx.lineTo(this.ctrl._selCanvaseSize.w, item.horz + pageELBox.top * 2);
         ctx.stroke();
         ctx.closePath();
       } else if (item.verz != undefined) {
         ctx.beginPath();
         const x = item.verz + pageELBox.left * 2;
-        ctx.moveTo(x, box.y * 2);
+        ctx.moveTo(x, 0);
         ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
         ctx.stroke();
         ctx.closePath();

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

@@ -93,9 +93,11 @@ export const editActions = EditorModule.action({
     const currComp = this.helper.findComp(compId) as DesignComp;
     cb?.(currComp);
 
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
+
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      375 - (currComp.layout.size?.[0] || 750) / 2
+      w / 2.0  - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
     //没有选中组件添加到当前卡片最后
@@ -159,10 +161,11 @@ export const editActions = EditorModule.action({
     }
 
     const currComp = this.helper.findComp(addedId) as DesignComp;
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
 
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
-      375 - (currComp.layout.size?.[0] || 750) / 2
+      w / 2.0 - (currComp.layout.size?.[0] || w) / 2
     );
     const obj = new CompObject(currComp);
 
@@ -208,9 +211,12 @@ export const editActions = EditorModule.action({
       const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
       const { currComp } = this.store;
       let selCtrl = this.controls.selectCtrl;
+
+      const w = this.controls.screenCtrl.getCurrScreenWidth();
+
       selCtrl.translate(
         this.helper.designSizeToPx(
-          375 - (currComp.layout.size?.[0] || 750) / 2
+          w/2.0 - (currComp.layout.size?.[0] || w) / 2
         ),
         cardPoints.y
       );
@@ -316,8 +322,9 @@ export const editActions = EditorModule.action({
   setSameSize(isWidth: boolean) {
     const selectCtrl = this.controls.selectCtrl;
     const objc = selectCtrl.objContainer as ObjsContainer;
+    const w = this.controls.screenCtrl.getCurrScreenWidth();
     if (this.store.selected.length == 1) {
-      if (isWidth) this.store.currComp.layout.size[0] = 750;
+      if (isWidth) this.store.currComp.layout.size[0] = w;
       else this.store.currComp.layout.size[1] = this.store.currStreamCard.layout.size[1];
 
       objc.updateSize();
@@ -672,6 +679,7 @@ export const editActions = EditorModule.action({
   setAlignX(flag: 0 | 1 | 2 | 3) {
     console.log("alignX");
     const selectCtrl = this.controls.selectCtrl;
+    const w = this.helper.designSizeToPx(this.controls.screenCtrl.getCurrScreenWidth())
 
     if (this.store.selected.length == 1) {
       const objc = selectCtrl.objContainer as ObjsContainer;
@@ -681,10 +689,10 @@ export const editActions = EditorModule.action({
           selectCtrl.translate(-box.left, 0);
           break;
         case 1:
-          selectCtrl.translate(-(box.center.x - 187.5), 0);
+          selectCtrl.translate(-(box.center.x - w / 2.0), 0);
           break;
         case 2:
-          selectCtrl.translate(375 - box.right, 0);
+          selectCtrl.translate(w - box.right, 0);
           break;
       }
       return;
@@ -854,9 +862,10 @@ export const editActions = EditorModule.action({
     objc.updateSize();
     selectCtrl.upgateGizmoStyle();
   },
+
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
-    comp.layout.size[0] = 750;
+    comp.layout.size[0] = this.controls.screenCtrl.getCurrScreenWidth();
   },
   //
   setCompAlign(comp: DesignComp, align: string) {