ruler

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

@@ -133,8 +133,8 @@ export default defineUI({
           <div class={meatureStyle}>
             <div class="ruler top" id="rulerTop"></div>
             <div class="ruler left" id="rulerLeft"></div>
-            <div class="ruler right" id="rulerRight"></div>
-            <div class="ruler bottom" id="rulerBottom"></div>
+            {/* <div class="ruler right" id="rulerRight"></div>
+            <div class="ruler bottom" id="rulerBottom"></div> */}
           </div>
         </div>
       );
@@ -162,8 +162,8 @@ const meatureStyle = css`
   width: 100%;
   height: 100%;
   left: 0;
-  top: 0;
-  z-index: 1001;
+  top: 56px;
+  z-index: 999;
   pointer-events: none;
 
   .ruler {
@@ -174,8 +174,28 @@ const meatureStyle = css`
   .top {
     top: 0;
     left: 0;
-    height: 10px;
+    height: 20px;
     width: 100%;
+    z-index: 2;
+    background-color: rgba(38, 38, 38, 0.8);
+    background-image: repeating-linear-gradient(
+        90deg,
+        #434343 0,
+        #434343 1px,
+        transparent 0,
+        transparent 1cm
+      ),
+      repeating-linear-gradient(
+        90deg,
+        #434343 0,
+        #434343 1px,
+        transparent 0,
+        transparent 0.5cm
+      );
+    border-bottom: 1px solid #434343;
+    background-position: 0.5cm 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 15px, 100% 10px;
   }
   .bottom {
     bottom: 0;
@@ -187,14 +207,35 @@ const meatureStyle = css`
     top: 0;
     left: 0;
     height: 100%;
-    width: 10px;
+    width: 20px;
+    z-index: 1;
     cursor: ew-resize;
+    border-right: 1px solid #434343;
+    background-color: rgba(38, 38, 38, 0.8);
+    background-image: repeating-linear-gradient(
+        180deg,
+        #434343 0,
+        #434343 1px,
+        transparent 0,
+        transparent 1cm
+      ),
+      repeating-linear-gradient(
+        180deg,
+        #434343 0,
+        #434343 1px,
+        transparent 0,
+        transparent 0.5cm
+      );
+
+    background-position: 100% 0.5cm;
+    background-repeat: no-repeat;
+    background-size: 15px 100%, 10px 100%;
   }
   .right {
     top: 0;
     right: 0;
     height: 100%;
-    width: 10px;
+    width: 20px;
     cursor: ew-resize;
   }
 `;

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

@@ -20,7 +20,7 @@ export default defineUI({
         <slots.Header class="p-16px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="w-300px bg-component border-right !border-2px" />
-          <div class="flex-1 relative flex flex-col">
+          <div class="flex-1 relative flex flex-col overflow-hidden">
             <slots.Toolbar />
             <slots.Content />
           </div>

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

@@ -1,194 +1,250 @@
 import { SelectCtrl } from ".";
 
-type  Ruler = {
-    horz?: number, verz?: number
-}
+type Ruler = {
+  horz?: number;
+  verz?: number;
+};
 export class AssistRulerCtrl {
-    ctrl: SelectCtrl
-    rulers :Ruler[] = []
-
-    _currDragItem?:Ruler;
-
-    constructor(ctrl: SelectCtrl) {
-        this.ctrl = ctrl;
-        // const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
-        // if (c) {
-        //     this.rulers = JSON.parse(c);
-        // }
-        this.draw();
+  ctrl: SelectCtrl;
+  rulers: Ruler[] = [];
+
+  _currDragItem?: Ruler;
+
+  constructor(ctrl: SelectCtrl) {
+    this.ctrl = ctrl;
+    // const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
+    // if (c) {
+    //     this.rulers = JSON.parse(c);
+    // }
+    this.draw();
+  }
+
+  dragTest(e: MouseEvent) {
+    const pageViewPort = this.ctrl.pageEl as HTMLElement;
+    const pageBox = pageViewPort.getBoundingClientRect();
+    let x = e.clientX - pageBox.left;
+    let y = e.clientY - pageBox.top;
+
+    this._currDragItem = undefined;
+
+    let n = this.rulers.length;
+    while (n--) {
+      const item = this.rulers[n];
+      if (item.horz != undefined && Math.abs(item.horz - y * 2) < 4) {
+        this._currDragItem = item;
+        break;
+      } else if (item.verz != undefined && Math.abs(item.verz - x * 2) < 4) {
+        this._currDragItem = item;
+        break;
+      }
     }
 
-    dragTest(e:MouseEvent) {
-        const pageViewPort = this.ctrl.pageEl as HTMLElement;
-        const pageBox = pageViewPort.getBoundingClientRect();
-        let x = e.clientX - pageBox.left;
-        let y = e.clientY - pageBox.top;
-
-        this._currDragItem = undefined;
-
-        let n = this.rulers.length;
-        while(n--) {
-           const item = this.rulers[n]
-           if (item.horz != undefined && Math.abs(item.horz - y*2) < 4 ) {
-                this._currDragItem = item;
-                break;
-           } else if (item.verz != undefined && Math.abs(item.verz - x*2) < 4) {
-                this._currDragItem = item;
-                break;
-           }
-        }
-
-        console.log("test=>", this._currDragItem);
-        if (this._currCursor) {
-            this._currCursor = document.body.style.cursor;
-        }
-        return !!this._currDragItem;
+    console.log("test=>", this._currDragItem);
+    if (this._currCursor) {
+      this._currCursor = document.body.style.cursor;
+    }
+    return !!this._currDragItem;
+  }
+
+  _currAddingRuler?: { horz?: number; verz?: number }; //={horz: 0, verz: 0, cid:""}
+
+  _currCursor = "";
+  onDragMove(e: MouseEvent) {
+    const it = this._currDragItem;
+    if (!it) return;
+
+    const pageViewPort = this.ctrl.pageEl as HTMLElement;
+    const pageBox = pageViewPort.getBoundingClientRect();
+    const cx = e.clientX - pageBox.left;
+    const cy = e.clientY - pageBox.top;
+    if (
+      Math.floor(cx) < -40 ||
+      Math.floor(cy) < -40 ||
+      e.clientX - pageBox.right > 40 ||
+      e.clientY - pageBox.bottom > 40
+    ) {
+      return;
     }
 
-    _currAddingRuler?:{horz?: number, verz?: number}; //={horz: 0, verz: 0, cid:""}
-
-    _currCursor = "";
-    onDragMove(e:MouseEvent) {
-        const it = this._currDragItem
-        if (!it) return;
-
-        const pageViewPort = this.ctrl.pageEl as HTMLElement;
-        const pageBox = pageViewPort.getBoundingClientRect();
-        const cx = e.clientX - pageBox.left;
-        const cy = e.clientY - pageBox.top;
-        if (  Math.floor(cx) < -40 || Math.floor(cy) < -40 || (e.clientX - pageBox.right) > 40 ||  (e.clientY - pageBox.bottom) > 40 ) {
-            return;
-        }
-
-        if (it.verz != undefined) {
-            it.verz = cx *2;
-            document.body.style.cursor = "ew-resize";
-        } else {
-            it.horz = cy *2;
-            document.body.style.cursor = "ns-resize";
-        }
-
-        console.log( it );
-        this.draw();
+    if (it.verz != undefined) {
+      it.verz = cx * 2;
+      document.body.style.cursor = "ew-resize";
+    } else {
+      it.horz = cy * 2;
+      document.body.style.cursor = "ns-resize";
     }
 
-    onDragUp(e:MouseEvent) {
-        this._currDragItem = undefined;
-        document.body.style.cursor = this._currCursor;
+    console.log(it);
+    this.draw();
+  }
+
+  onDragUp(e: MouseEvent) {
+    if (!this._currDragItem) {
+      return;
+    }
+    const pageEL = this.ctrl.pageEl as HTMLElement;
+    const pageBox = pageEL.getBoundingClientRect();
+    const currDragItem = this._currDragItem;
+    const verz = currDragItem.verz || 0;
+    const horz = currDragItem.horz || 0;
+    console.log(pageBox);
+    if (
+      verz < 0 ||
+      horz < 0 ||
+      verz > pageBox.width * 2 ||
+      horz > pageBox.height * 2
+    ) {
+      const index = this.rulers.indexOf(this._currDragItem);
+      this.rulers.splice(index, 1);
     }
-    
-    rulerLineMouseMove(e:MouseEvent) {
-        this.draw();
-        const viewPort = this.ctrl.viewport as HTMLElement;
-        const box = viewPort.getBoundingClientRect();
-        if (e.clientX < box.x || e.clientX > box.right || e.clientY < box.top || e.clientY > box.bottom) return;
-
-        const ctx = this.ctrl._selCtx;
-        ctx.beginPath();
-        const typeIndex = ["rulerLeft", "rulerRight", "rulerTop", "rulerBottom"].indexOf(this.ctrl._mouseDownFlag)
-    
-        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 x = mx
-          let y = this.ctrl._selCanvaseSize.h
-          ctx.moveTo(x *2, 0)
-          ctx.lineTo(x *2, y)
-          if (typeIndex == 0) {
-            ctx.fillText(((mx-pageBox.left) *2).toFixed(0), x*2, e.clientY*2)
-          } else {
-            ctx.fillText(((pageBox.right - e.clientX) *2).toFixed(0), x*2, e.clientY*2)
-          }
-          this._currAddingRuler = {verz: (mx - pageBox.left)*2}
-    
-        } else {
-          const x1 = box.left*2, x2 = box.right*2;
-          const y = e.clientY*2
-          ctx.moveTo(x1,  y)
-          ctx.lineTo(x2,  y)
-    
-          const curBox = this.ctrl.getCurrCardBox();
-          if (typeIndex ==2 ) {
-            ctx.fillText(((e.clientY  - curBox.top) *2).toFixed(0),(x1 + x2 ) / 2, y)
-          } else {
-            ctx.fillText((( curBox.bottom - e.clientY) *2).toFixed(0),(x1 + x2 ) / 2, y)
-          }
-          this._currAddingRuler = {horz: y - pageBox.top *2}
-        }
 
-        ctx.stroke();
-        ctx.closePath();
+    this._currDragItem = undefined;
+    document.body.style.cursor = this._currCursor;
+  }
+
+  rulerLineMouseMove(e: MouseEvent) {
+    this.draw();
+    const viewPort = this.ctrl.viewport as HTMLElement;
+    const box = viewPort.getBoundingClientRect();
+    if (
+      e.clientX < box.x ||
+      e.clientX > box.right ||
+      e.clientY < box.top ||
+      e.clientY > box.bottom
+    )
+      return;
+
+    const ctx = this.ctrl._selCtx;
+    ctx.beginPath();
+    const typeIndex = [
+      "rulerLeft",
+      "rulerRight",
+      "rulerTop",
+      "rulerBottom",
+    ].indexOf(this.ctrl._mouseDownFlag);
+
+    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 x = mx;
+      let y = this.ctrl._selCanvaseSize.h;
+      ctx.moveTo(x * 2, box.y * 2);
+      ctx.lineTo(x * 2, y);
+      if (typeIndex == 0) {
+        ctx.fillText(
+          ((mx - pageBox.left) * 2).toFixed(0),
+          x * 2,
+          e.clientY * 2
+        );
+      } else {
+        ctx.fillText(
+          ((pageBox.right - e.clientX) * 2).toFixed(0),
+          x * 2,
+          e.clientY * 2
+        );
+      }
+      this._currAddingRuler = { verz: (mx - pageBox.left) * 2 };
+    } else {
+      const x1 = box.left * 2,
+        x2 = box.right * 2;
+      const y = e.clientY * 2;
+      ctx.moveTo(x1, y);
+      ctx.lineTo(x2, y);
+
+      const curBox = this.ctrl.getCurrCardBox();
+      if (typeIndex == 2) {
+        ctx.fillText(
+          ((e.clientY - curBox.top) * 2).toFixed(0),
+          (x1 + x2) / 2,
+          y
+        );
+      } else {
+        ctx.fillText(
+          ((curBox.bottom - e.clientY) * 2).toFixed(0),
+          (x1 + x2) / 2,
+          y
+        );
+      }
+      this._currAddingRuler = { horz: y - pageBox.top * 2 };
     }
-    
-    rulerLineMouseUp(e:MouseEvent, isClick:boolean) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (!this._currAddingRuler) {
-            return;
-        }
-        const viewPort = this.ctrl.pageEl as HTMLElement;
-        const box = viewPort.getBoundingClientRect();
-        
-        if ((e.clientX - box.left) < -20  || 
-           (e.clientY - box.top) < -20   ||
-            (e.clientY - box.bottom) > 20 ||
-            (e.clientX - box.right) > 20  
-        ) {
-            this._currAddingRuler = undefined;
-            return;
-        }
-        this.rulers.push({...this._currAddingRuler})
-
-        console.log("rulerLineMouseUp=>", e.clientY);
-        this._currAddingRuler = undefined;
-        
-        //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
+
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  rulerLineMouseUp(e: MouseEvent, isClick: boolean) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!this._currAddingRuler) {
+      return;
+    }
+    const viewPort = this.ctrl.pageEl as HTMLElement;
+    const box = viewPort.getBoundingClientRect();
+
+    if (
+      e.clientX - box.left < -20 ||
+      e.clientY - box.top < -20 ||
+      e.clientY - box.bottom > 20 ||
+      e.clientX - box.right > 20
+    ) {
+      this._currAddingRuler = undefined;
+      return;
     }
-    
-    draw() {
-        const ctx = this.ctrl._selCtx;
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = "#E88B00";
-        ctx.fillStyle = "#E88B00";
-        ctx.font = "36px Arial";
-        ctx.setLineDash([5, 5]);
-        ctx.clearRect(0, 0, this.ctrl._selCanvaseSize.w, this.ctrl._selCanvaseSize.h)
-        let n = this.rulers.length;
-        const viewPort = this.ctrl.viewport as HTMLElement;
-        const pageEL = this.ctrl.pageEl as HTMLElement;
-
-        const box = viewPort.getBoundingClientRect();
-        const pageELBox = pageEL.getBoundingClientRect();
-    
-
-        while(n--) {
-            const item = this.rulers[n];
-
-
-            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.stroke();
-                ctx.closePath();
-
-            } else if( item.verz != undefined) {
-                ctx.beginPath();
-                const x = item.verz + pageELBox.left *2
-                ctx.moveTo(x, 0)
-                ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
-                ctx.stroke();
-                ctx.closePath();
-            }
-        }
+    this.rulers.push({ ...this._currAddingRuler });
+
+    console.log("rulerLineMouseUp=>", e.clientY);
+    this._currAddingRuler = undefined;
+
+    //localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
+  }
+
+  draw() {
+    const ctx = this.ctrl._selCtx;
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#E88B00";
+    ctx.fillStyle = "#E88B00";
+    ctx.font = "36px Arial";
+    ctx.setLineDash([5, 5]);
+    ctx.clearRect(
+      0,
+      0,
+      this.ctrl._selCanvaseSize.w,
+      this.ctrl._selCanvaseSize.h
+    );
+    let n = this.rulers.length;
+    const viewPort = this.ctrl.viewport as HTMLElement;
+    const pageEL = this.ctrl.pageEl as HTMLElement;
+
+    const box = viewPort.getBoundingClientRect();
+    const pageELBox = pageEL.getBoundingClientRect();
+
+    while (n--) {
+      const item = this.rulers[n];
+
+      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.stroke();
+        ctx.closePath();
+      } else if (item.verz != undefined) {
+        ctx.beginPath();
+        const x = item.verz + pageELBox.left * 2;
+        ctx.moveTo(x, box.y * 2);
+        ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
+        ctx.stroke();
+        ctx.closePath();
+      }
     }
+  }
 }