Skip to content
This repository has been archived by the owner on Sep 6, 2024. It is now read-only.

handles to stretch the shape #15

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 56 additions & 8 deletions src/freehand/EditableFreehand.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ 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.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]) });
}
}

Expand Down Expand Up @@ -88,7 +90,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;
Expand All @@ -111,6 +121,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
Expand Down Expand Up @@ -147,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
Expand All @@ -172,7 +191,36 @@ export default class EditableFreehand extends EditableShape {
this.stretchCorners(handleIdx, oppositeHandle, pos);

this.emit('update', toSVGTarget(this.shape, this.env.image));
}*/
}*/
else {
console.log('=== grabbed a handle === ');


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));
}
}
}

Expand Down