自动排版

src/view/case/photos/canvas-photo-editor.js

@@ -197,7 +197,8 @@ export class CanvasPhotoEditor {
 
   // --- 核心：拖拽仅改坐标，不重绘 ---
   async handleMouseDown(e) {
-    if (e.button === 2 && this.tempArrow.drawing) { // 右键
+    console.log('handleMouseDown', e.button, this.tempArrow)
+    if (e.button === 2 && this.indexing) { // 右键
       //结束标引
       this.clearIndexing()
       e.preventDefault()
@@ -259,7 +260,7 @@ export class CanvasPhotoEditor {
     this.drawAllPages()
   }
 
-  handleMouseMove(e) {
+  async handleMouseMove(e) {
     const drawing = this.tempArrow?.drawing
     const rect = this.canvas.getBoundingClientRect()
     const mouseX = (e.clientX - rect.left - this.drawOffsetX) / this.scale
@@ -328,14 +329,14 @@ export class CanvasPhotoEditor {
     this.drawAllPages()
   }
 
-  handleMouseUp(e) {
+  async handleMouseUp(e) {
     this.isDragging = false
     this.canvas.style.cursor = 'grab'
     if(this.dragPageData.drawing && this.dragPageData.index != this.dragPageData.movedIndex){//鼠标释放左键时，移动页面到指定位置）
-    // 末尾必须加分号！！！
-    console.log('handleMouseUpdragPageData', this.dragPageData)
-    let newPagelist = this.moveItem(this.pages, this.dragPageData.index, this.dragPageData.movedIndex)
-    this.pages = newPagelist;
+      // 末尾必须加分号！！！
+      console.log('handleMouseUpdragPageData', this.dragPageData)
+      let newPagelist = this.moveItem(this.pages, this.dragPageData.index, this.dragPageData.movedIndex)
+      this.pages = newPagelist;
       this.drawAllPages()
     }
     this.dragPageData.drawing = false
@@ -481,17 +482,17 @@ export class CanvasPhotoEditor {
 
     let endIindexing1 = {//默认同页面
       x: this.indexingStartX,
-      y: startInfo.itemIndex > PhotoIndex.itemIndex ? (coordinate.y + coordinate.height) : coordinate.y,
+      y: startInfo.itemIndex > PhotoIndex.itemIndex ? (coordinate.y + coordinate.height + 3) : coordinate.y -3,
     }
     if (startInfo.pageIndex != PhotoIndex.pageIndex && startInfo.count == PhotoIndex.count && startInfo.itemIndex == PhotoIndex.itemIndex) {
       //不同页码 item 相同
       endIindexing1 = {//同数量同item
-        x: startInfo.pageIndex > PhotoIndex.pageIndex ? (coordinate.x + coordinate.width) : coordinate.x,
+        x: startInfo.pageIndex > PhotoIndex.pageIndex ? (coordinate.x + coordinate.width + 3) : coordinate.x -3,
         y: this.indexingStartY,
       }
     }else if(startInfo.pageIndex != PhotoIndex.pageIndex){
       endIindexing1 = {//不同同item页面
-        x: startInfo.pageIndex > PhotoIndex.pageIndex ? (coordinate.x + coordinate.width) : coordinate.x,
+        x: startInfo.pageIndex > PhotoIndex.pageIndex ? (coordinate.x + coordinate.width + 3) : coordinate.x -3,
         y: this.indexingEndY,
       }
     }
@@ -600,9 +601,9 @@ export class CanvasPhotoEditor {
     // 绘制起点圆点
     const first = points[0];
     const last = points[points.length - 1];
-    ctx.beginPath();
-    ctx.arc(first.x, first.y, 4, 0, Math.PI * 2);
-    ctx.fill();
+    // ctx.beginPath();
+    // ctx.arc(first.x, first.y, 4, 0, Math.PI * 2);
+    // ctx.fill();
     // ctx.restore();
     // 绘制T边
     let startInfo = indexingList[0]
@@ -610,7 +611,8 @@ export class CanvasPhotoEditor {
     ctx.beginPath();
     if (startInfo.pageIndex == endInfo.pageIndex) {//判断上下就行
       ctx.moveTo(coordinate.x, last.y);
-      ctx.lineTo((coordinate.x + coordinate.width), last.y);
+      ctx.lineTo((coordinate.x + coordinate.width), last.y
+    );
     } else {//左右
       ctx.moveTo(last.x, coordinate.y);
       ctx.lineTo(last.x, (coordinate.y + coordinate.height));
@@ -931,7 +933,7 @@ export class CanvasPhotoEditor {
     if(this.tempArrow.drawing && this.indexing){//绘制实时鼠标标引
         this.drawInterimLine([this.tempArrow.start,this.tempArrow.end])
     }
-    if(this.dragPageData.drawing && this.dragPageData.movedIndex){//绘制实时鼠标标引
+    if(this.dragPageData.drawing && this.dragPageData.movedIndex){//绘制拖拽标志
         this.drawPlusIcon(this.dragPageData.movedIndex)
     }
     this.drawGuideLineAll(true)//绘制标引
@@ -1035,7 +1037,7 @@ export class CanvasPhotoEditor {
 
   // --- 页面操作 ---
   autoLayout(selectedPhotos=[]) {
-    let newList = this.pages.flatMap(item => item.list.filter(i => i))
+    let newList = this.pages.flatMap(item => item.list)
     const layout = this.getItemSize()
     let newPages = []
     const pageX = this.pages.length * (this.pageWidth + this.pageMargin)
@@ -1044,9 +1046,11 @@ export class CanvasPhotoEditor {
       layoutMode: this.layoutMode, //页码布局类型
       coordinate: this.getCoordinate(pageX, layout), //坐标信息
     }
+    this._pages = this._pages.map(ele =>({...ele, layoutMode: this.layoutMode, coordinate: this.getCoordinate(pageX, layout)}))
+
     let list = []
     const newArr = [...newList, ...selectedPhotos]
-    console.log(newArr, selectedPhotos, 'newArr')
+    console.log(newArr, selectedPhotos, 'newArr', this.pages)
     newArr.forEach((photoId, photoIndex) => {
       list.push(photoId)
       if(list.length == layout.count){
@@ -1056,7 +1060,7 @@ export class CanvasPhotoEditor {
           newPages.push({...currentPage, list: list, })
       }
     })
-    this.pages = newPages.length > 0 ? newPages : [{ list: [], }]
+    this.pages = newPages.length > 0 ? newPages : this._pages
     this.resetPosition()
     return this.pages
   }