Merge pull request #9 from GachiLord/client

Client
GachiLord · Feb 24, 2023 · d5abc53 · d5abc53
2 parents a4a2b9b + 723e7f0
commit d5abc53
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "board4you",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "client side of board4you",
   "main": "./src/client/desktop/main.js",
   "scripts": {

diff --git a/src/client/lib/CanvasUtils.js b/src/client/lib/CanvasUtils.js
@@ -43,6 +43,20 @@ export default class CanvasUtils{
         }
     }
 
+    static hasInterceptionWithLine(box, line){
+        const attrs = line.attrs === undefined ? line: line.attrs
+
+        for (let i = 0; i < attrs.points.length; i += 2){
+            const x = attrs.pos.x + attrs.points[i]
+            const y = attrs.pos.y + attrs.points[i+1]
+
+            if ( (x >= box.x && x <= (box.x + box.width))
+                && (y >= box.y && y <= (box.y + box.height)) ) return true
+        }
+
+        return false
+    }
+
     static findShapes = (history, query = {}) => {
         return history.map( (hisItem) => {
             // get count of mathced properties

diff --git a/src/client/view/board/canvas/Canvas.js b/src/client/view/board/canvas/Canvas.js
@@ -47,6 +47,7 @@ export default React.forwardRef((props, ref) => {
                             case 'arrow':
                                 return (
                                     <Arrow
+                                        pos={shape.pos}
                                         y={shape.pos.y}
                                         x={shape.pos.x}
                                         shapeId={shape.shapeId}

diff --git a/src/client/view/board/canvas/Drawer.js b/src/client/view/board/canvas/Drawer.js
@@ -361,7 +361,14 @@ export default class Drawer extends React.Component{
 
             let selected = shapes.filter((shape) =>
                 {
-                    if (Konva.Util.haveIntersection(box, CanvasUtils.getClientRect(shape))) return shape
+                    const shapeType = shape.attrs.tool
+                    if (shapeType === 'line' || shapeType === 'arrow' || shapeType === 'pen'){
+                        if (CanvasUtils.hasInterceptionWithLine(box, shape)) return shape
+                    }
+                    else{
+                        if (Konva.Util.haveIntersection(box, CanvasUtils.getClientRect(shape))) return shape
+                    }
+                    // if (Konva.Util.haveIntersection(box, CanvasUtils.getClientRect(shape))) return shape
                 }
             );
             this.setState({selection: selected})
@@ -456,27 +463,32 @@ export default class Drawer extends React.Component{
         const x = 0
         const y = CanvasUtils.getLastY(this.getCurrentHistoryAcActions()) + delta
 
-        this.setState( state => {
-            return {
-                currentHistory: [
-                    ...state.currentHistory,
-                    {
-                    type: 'img',
-                    pos: {
-                    x: x,
-                    y: y,
-                    },
-                    url: url,
-                    height: height,
-                    width: width,
-                    shapeId: uuid4()
+        flushSync( () => {
+            this.acceptCurrentHistoryChanges()
+            this.setState( state => {
+                return {
+                    currentHistory: [
+                        ...state.currentHistory,
+                        {
+                        type: 'img',
+                        pos: {
+                        x: x,
+                        y: y,
+                        },
+                        url: url,
+                        height: height,
+                        width: width,
+                        shapeId: uuid4()
+                        }
+                    ]
                     }
-                ]
-                }
-            } )
+                } )
+            this.addAction()
+        } )
 
             if (y + height > this.state.height) this.increaseHeight( Math.round(scale) )
-            this.addAction()
+
+            this.removeSelectRect()
     }
 
     runOption = async (o, data) => {
@@ -592,7 +604,6 @@ export default class Drawer extends React.Component{
         window.addEventListener('paste', (e) => {
             CanvasUtils.retrieveImageFromClipboardAsBase64(e, (url, size) => {
                 this.paste(url, size)
-
             })
         });
         window.addEventListener('copy', () => {