From 0d364c5314d3c40e94e02715cc2d28b9c2ab62df Mon Sep 17 00:00:00 2001 From: VERA <2398434365@qq.com> Date: Thu, 18 Nov 2021 21:46:48 +0800 Subject: [PATCH 1/4] handles to stretch the shape --- src/freehand/EditableFreehand.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/freehand/EditableFreehand.js b/src/freehand/EditableFreehand.js index bb5f5fc..012e6e5 100644 --- a/src/freehand/EditableFreehand.js +++ b/src/freehand/EditableFreehand.js @@ -173,6 +173,30 @@ export default class EditableFreehand extends EditableShape { this.emit('update', toSVGTarget(this.shape, this.env.image)); }*/ + else { + const { naturalWidth, naturalHeight } = this.env.image; + const dx = constrain(x, pos.x - this.grabbedAt.x, naturalWidth - width); + const dy = constrain(y, pos.y - this.grabbedAt.y, naturalHeight - height); + + const handleIdx = this.handles.indexOf(this.grabbedElem); + let updatedPoints = []; + getPoints(this.shape).forEach((pt, idx) => { + if (idx === handleIdx) { + updatedPoints.push(pos); + } else if (idx + 1 === handleIdx || idx - 1 === handleIdx) { + let f = 0.5; + this.setHandleXY(this.handles[idx], pt.x + f * dx, pt.y + f * dy); + updatedPoints.push({ x: pt.x + f * dx, y: pt.y + f * dy }); //{ x: pt.x + 0.5*dx, y: pt.y + 0.5*dy }; + } else { + updatedPoints.push(pt); + } + }); + + this.grabbedAt = pos; + this.setPoints(updatedPoints); + this.setHandleXY(this.handles[handleIdx], pos.x, pos.y); + this.emit('update', toSVGTarget(this.shape, this.env.image)); + } } } From f02cb823ff595f01c711aba905eec11fc75abdd1 Mon Sep 17 00:00:00 2001 From: VERA <2398434365@qq.com> Date: Fri, 19 Nov 2021 20:35:43 +0800 Subject: [PATCH 2/4] Modified code, not completely uploaded before --- src/freehand/EditableFreehand.js | 74 +++++++++++++++++++------------- 1 file changed, 45 insertions(+), 29 deletions(-) diff --git a/src/freehand/EditableFreehand.js b/src/freehand/EditableFreehand.js index 012e6e5..74db6c5 100644 --- a/src/freehand/EditableFreehand.js +++ b/src/freehand/EditableFreehand.js @@ -6,15 +6,16 @@ import { format, setFormatterElSize } from '@recogito/annotorious/src/util/Forma //import Mask from './FreehandMask'; const getPoints = shape => { - const pointList = shape.getAttribute('d').split('L'); + const pointList = shape.querySelector('.a9s-inner').getAttribute('d').split('L'); const points = []; + if(pointList.length > 0) { var point = pointList[0].substring(1).trim().split(' '); points.push({ x: parseFloat(point[0]), y: parseFloat(point[1]) }); for (let i = 1; i < pointList.length; i++) { - var point = pointList[i].trim().split(' '); - points.push({ x: parseFloat(point[0]), y: parseFloat(point[1]) }); + var point = pointList[i].trim().split(' '); + points.push({ x: parseFloat(point[0]), y: parseFloat(point[1]) }); } } @@ -88,7 +89,15 @@ export default class EditableFreehand extends EditableShape { this.elementGroup.appendChild(handle); return handle; - });*/ + });*/ + this.handles = getPoints(this.shape).map((pt,idx) => { + const handle = this.drawHandle(pt.x, pt.y); + console.log(handle.firstChild.firstChild.r); + handle.addEventListener('mousedown', this.onGrab(handle)); + this.elementGroup.appendChild(handle); + return handle; + }); + // The grabbed element (handle or entire shape), if any this.grabbedElem = null; @@ -111,6 +120,8 @@ export default class EditableFreehand extends EditableShape { const outer = this.shape.querySelector('.a9s-outer'); outer.setAttribute('d', str); + console.log(str); + const { x, y, width, height } = outer.getBBox(); // TODO optional: mask to dim the outside area @@ -172,31 +183,36 @@ export default class EditableFreehand extends EditableShape { this.stretchCorners(handleIdx, oppositeHandle, pos); this.emit('update', toSVGTarget(this.shape, this.env.image)); - }*/ - else { - const { naturalWidth, naturalHeight } = this.env.image; - const dx = constrain(x, pos.x - this.grabbedAt.x, naturalWidth - width); - const dy = constrain(y, pos.y - this.grabbedAt.y, naturalHeight - height); - - const handleIdx = this.handles.indexOf(this.grabbedElem); - let updatedPoints = []; - getPoints(this.shape).forEach((pt, idx) => { - if (idx === handleIdx) { - updatedPoints.push(pos); - } else if (idx + 1 === handleIdx || idx - 1 === handleIdx) { - let f = 0.5; - this.setHandleXY(this.handles[idx], pt.x + f * dx, pt.y + f * dy); - updatedPoints.push({ x: pt.x + f * dx, y: pt.y + f * dy }); //{ x: pt.x + 0.5*dx, y: pt.y + 0.5*dy }; - } else { - updatedPoints.push(pt); - } - }); - - this.grabbedAt = pos; - this.setPoints(updatedPoints); - this.setHandleXY(this.handles[handleIdx], pos.x, pos.y); - this.emit('update', toSVGTarget(this.shape, this.env.image)); - } + }*/ + else { + console.log('=== ELSE MEETING === '); + + + const { naturalWidth, naturalHeight } = this.env.image; + const dx = constrain(x, pos.x - this.grabbedAt.x, naturalWidth - width); + const dy = constrain(y, pos.y - this.grabbedAt.y, naturalHeight - height); + + const handleIdx = this.handles.indexOf(this.grabbedElem); + let updatedPoints = []; + getPoints(this.shape).forEach((pt, idx) => { + if (idx === handleIdx) { + updatedPoints.push(pos); + } else if (idx + 1 === handleIdx || idx - 1 === handleIdx) { + //pt.x += 0.2*dx; + //pt.y += 0.2*dy; + let f = 0.5; + this.setHandleXY(this.handles[idx], pt.x + f*dx, pt.y + f*dy); + updatedPoints.push({x:pt.x + f*dx, y:pt.y + f*dy}); //{ x: pt.x + 0.5*dx, y: pt.y + 0.5*dy }; + } else { + updatedPoints.push(pt); + } + }); + // const updatedPoints = getPoints(this.shape).map((pt, idx) => (idx === handleIdx) ? pos : pt); + this.grabbedAt = pos; + this.setPoints(updatedPoints); + this.setHandleXY(this.handles[handleIdx], pos.x, pos.y); + this.emit('update', toSVGTarget(this.shape, this.env.image)); + } } } From 7e64ba9fb1820b14d70283db9db0792b8257e0f2 Mon Sep 17 00:00:00 2001 From: VERA <2398434365@qq.com> Date: Fri, 19 Nov 2021 20:57:32 +0800 Subject: [PATCH 3/4] Modified code, not completely uploaded before --- src/freehand/EditableFreehand.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/freehand/EditableFreehand.js b/src/freehand/EditableFreehand.js index 012e6e5..b553114 100644 --- a/src/freehand/EditableFreehand.js +++ b/src/freehand/EditableFreehand.js @@ -6,7 +6,7 @@ import { format, setFormatterElSize } from '@recogito/annotorious/src/util/Forma //import Mask from './FreehandMask'; const getPoints = shape => { - const pointList = shape.getAttribute('d').split('L'); + const pointList = shape.querySelector('.a9s-inner').getAttribute('d').split('L'); const points = []; if(pointList.length > 0) { var point = pointList[0].substring(1).trim().split(' '); @@ -88,7 +88,15 @@ export default class EditableFreehand extends EditableShape { this.elementGroup.appendChild(handle); return handle; - });*/ + });*/ + this.handles = getPoints(this.shape).map((pt,idx) => { + const handle = this.drawHandle(pt.x, pt.y); + console.log(handle.firstChild.firstChild.r); + handle.addEventListener('mousedown', this.onGrab(handle)); + this.elementGroup.appendChild(handle); + return handle; + }); + // The grabbed element (handle or entire shape), if any this.grabbedElem = null; From 4f506589291c570bc6f43bfa8ef72cd4eb4eddab Mon Sep 17 00:00:00 2001 From: VERA <2398434365@qq.com> Date: Sun, 5 Dec 2021 05:26:29 +0800 Subject: [PATCH 4/4] fix the bug that the handles don't move when the whole shape is dragged --- src/freehand/EditableFreehand.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/freehand/EditableFreehand.js b/src/freehand/EditableFreehand.js index 74db6c5..48c604c 100644 --- a/src/freehand/EditableFreehand.js +++ b/src/freehand/EditableFreehand.js @@ -5,6 +5,7 @@ import { format, setFormatterElSize } from '@recogito/annotorious/src/util/Forma // TODO optional: mask to dim the outside area //import Mask from './FreehandMask'; + const getPoints = shape => { const pointList = shape.querySelector('.a9s-inner').getAttribute('d').split('L'); const points = []; @@ -158,20 +159,27 @@ export default class EditableFreehand extends EditableShape { const { x, y, width, height } = getBBox(this.shape); - if (this.grabbedElem === this.shape) { + if (this.grabbedElem === this.shape) { + + console.log('=== grabbed a shape === '); const { naturalWidth, naturalHeight } = this.env.image; const dx = constrain(x, pos.x - this.grabbedAt.x, naturalWidth - width); const dy = constrain(y, pos.y - this.grabbedAt.y, naturalHeight - height); - const inner = this.shape.querySelector('.a9s-inner'); - const updatedPoints = getPoints(inner).map(pt => ({ x: pt.x + dx, y: pt.y + dy })); + // const inner = this.shape.querySelector('.a9s-inner'); + const updatedPoints = getPoints(this.shape).map(pt => ({ x: pt.x + dx, y: pt.y + dy })); this.grabbedAt = pos; this.setPoints(updatedPoints); + // Update the handle positions + getPoints(this.shape).forEach((pt, idx) => { + this.setHandleXY(this.handles[idx], pt.x + dx, pt.y + dy); + }); + this.emit('update', toSVGTarget(this.shape, this.env.image)); } // TODO optional: handles to stretch the shape @@ -185,7 +193,7 @@ export default class EditableFreehand extends EditableShape { this.emit('update', toSVGTarget(this.shape, this.env.image)); }*/ else { - console.log('=== ELSE MEETING === '); + console.log('=== grabbed a handle === '); const { naturalWidth, naturalHeight } = this.env.image; @@ -193,7 +201,7 @@ export default class EditableFreehand extends EditableShape { const dy = constrain(y, pos.y - this.grabbedAt.y, naturalHeight - height); const handleIdx = this.handles.indexOf(this.grabbedElem); - let updatedPoints = []; + /*let updatedPoints = []; getPoints(this.shape).forEach((pt, idx) => { if (idx === handleIdx) { updatedPoints.push(pos); @@ -206,8 +214,8 @@ export default class EditableFreehand extends EditableShape { } else { updatedPoints.push(pt); } - }); - // const updatedPoints = getPoints(this.shape).map((pt, idx) => (idx === handleIdx) ? pos : pt); + });*/ + const updatedPoints = getPoints(this.shape).map((pt, idx) => (idx === handleIdx) ? pos : pt); this.grabbedAt = pos; this.setPoints(updatedPoints); this.setHandleXY(this.handles[handleIdx], pos.x, pos.y);