Skip to content

Commit

Permalink
"move" tool
Browse files Browse the repository at this point in the history
  • Loading branch information
r03ert0 committed May 15, 2024
1 parent 7488d41 commit 2424dac
Show file tree
Hide file tree
Showing 6 changed files with 241 additions and 24 deletions.
97 changes: 97 additions & 0 deletions app/public/img/move.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/public/js/configuration.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"presets": {
"default": [
{ "name": "Select", "id": "select", "desc": "", "exportedVar": ["ToolSelect"], "scriptPath": "/js/tools/select.js", "iconPath": "/img/select.svg" },
{ "name": "Move", "id": "move", "desc": "", "exportedVar": ["ToolMove"], "scriptPath": "/js/tools/move.js", "iconPath": "/img/move.svg" },
{ "name": "Back", "id": "back", "desc": "Move selection to the back", "exportedVar": ["ToolBack"], "scriptPath": "/js/tools/back.js", "iconPath": "/img/back.svg" },
{ "name": "Backward", "id": "backward", "desc": "Move selection one step back", "exportedVar": ["ToolBackward"], "scriptPath": "/js/tools/backward.js", "iconPath": "/img/backward.svg" },
{ "name": "Foreward", "id": "foreward", "desc": "Move selection on step front", "exportedVar": ["ToolForeward"], "scriptPath": "/js/tools/foreward.js", "iconPath": "/img/foreward.svg" },
Expand Down
10 changes: 8 additions & 2 deletions app/public/js/microdraw.js
Original file line number Diff line number Diff line change
Expand Up @@ -581,7 +581,11 @@ const Microdraw = (function () {

if( !me.navEnabled ) {
event.stopHandlers = true;
me.mouseDrag(event.originalEvent.layerX, event.originalEvent.layerY, event.delta.x, event.delta.y);
me.mouseDrag(
event.originalEvent.layerX,
event.originalEvent.layerY,
event.delta.x,
event.delta.y);
}
},

Expand Down Expand Up @@ -656,7 +660,9 @@ const Microdraw = (function () {
me.handle.y += point.y-me.handle.point.y;
me.handle.point = point;
me.commitMouseUndo();
} else if (me.tools[me.selectedTool] && me.tools[me.selectedTool].mouseDrag) {
} else if (me.tools[me.selectedTool]
&& me.tools[me.selectedTool].mouseDrag
) {
me.tools[me.selectedTool].mouseDrag(point, dpoint);
}
paper.view.draw();
Expand Down
109 changes: 109 additions & 0 deletions app/public/js/tools/move.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/* global Microdraw */
/* global paper */


window.ToolMove = {move: (function() {
const tool = {

/**
* @function mouseDrag
* @param {object} point The point where you moved to (x,y)
* @param {object} dpoint The movement of the point
* @return {void}
*/
mouseDrag: function mouseDrag(point, dpoint) {

// event.stopHandlers = true;
for( var reg of Microdraw.ImageInfo[Microdraw.currentImage].Regions ) {
if( reg.path.selected ) {
reg.path.position.x += dpoint.x;
reg.path.position.y += dpoint.y;
Microdraw.commitMouseUndo();
}
}
},

_handleHitResultType: function (hitResult, point) {
if( hitResult.type === 'handle-in' ) {
Microdraw.handle = hitResult.segment.handleIn;
Microdraw.handle.point = point;
} else if( hitResult.type === 'handle-out' ) {
Microdraw.handle = hitResult.segment.handleOut;
Microdraw.handle.point = point;
} else if( hitResult.type === 'segment' ) {
Microdraw.handle = hitResult.segment.point;
Microdraw.handle.point = point;
} else if( hitResult.type === 'fill' ) {
if ({}.hasOwnProperty.call(hitResult.item, 'fontSize')) {
Microdraw.tools.textAnnotation.updateTextAnnotationPanel(hitResult.item);
}
}
},

_handleHit: function (hitResult, point) {
// let prevRegion = null;
let re;

for( let i = 0; i < Microdraw.ImageInfo[Microdraw.currentImage].Regions.length; i += 1 ) {
if( Microdraw.ImageInfo[Microdraw.currentImage].Regions[i].path === hitResult.item ) {
re = Microdraw.ImageInfo[Microdraw.currentImage].Regions[i];
}
}

// select path
if( Microdraw.region && Microdraw.region !== re ) {
Microdraw.region.path.selected = false;
// prevRegion = Microdraw.region;
}
Microdraw.selectRegion(re);

tool._handleHitResultType(hitResult, point);
},

/**
* @function mouseDown
* @param {object} point The point where you click (x,y)
* @returns {void}
*/
mouseDown: function mouseDown(point) {
Microdraw.mouseUndo = Microdraw.getUndo();
Microdraw.handle = null;

const hitResult = paper.project.hitTest(point, {
tolerance : Microdraw.tolerance/paper.view.zoom,
stroke: true,
segments: true,
fill: true,
handles: true
});

Microdraw.newRegionFlag = false;
if( hitResult ) {
tool._handleHit(hitResult, point);
}

if( hitResult === null && Microdraw.region ) {
//deselect paths
Microdraw.region.path.selected = false;
Microdraw.region = null;
}


paper.view.draw();
},


/*
* @function click
* @desc Convert polygon path to bezier curve
* @param {string} prevTool The previous tool to which the selection goes back
* @returns {void}
*/
click: function click() {
Microdraw.navEnabled = false;
Microdraw.handle = null;
}
};

return tool;
}())};
21 changes: 12 additions & 9 deletions app/public/js/tools/select.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@ window.ToolSelect = {select: (function() {
* @param {object} dpoint The movement of the point
* @return {void}
*/
mouseDrag: function mouseDrag() {
mouseDrag: function mouseDrag(point, dpoint) {

// event.stopHandlers = true;
for( var reg of Microdraw.ImageInfo[Microdraw.currentImage].Regions ) {
if( reg.path.selected ) {
// reg.path.position.x += dpoint.x;
// reg.path.position.y += dpoint.y;
// Microdraw.commitMouseUndo();
}
}
// for( var reg of Microdraw.ImageInfo[Microdraw.currentImage].Regions ) {
// if( reg.path.selected ) {
// reg.path.position.x += dpoint.x;
// reg.path.position.y += dpoint.y;
// Microdraw.commitMouseUndo();
// }
// }
},

_handleHitResultType: function (hitResult, point) {
Expand All @@ -33,7 +34,9 @@ window.ToolSelect = {select: (function() {
Microdraw.handle = hitResult.segment.point;
Microdraw.handle.point = point;
} else if( hitResult.type === 'fill' ) {
Microdraw.tools.textAnnotation.updateTextAnnotationPanel(hitResult.item);
if ({}.hasOwnProperty.call(hitResult.item, 'fontSize')) {
Microdraw.tools.textAnnotation.updateTextAnnotationPanel(hitResult.item);
}
}
},

Expand Down
27 changes: 14 additions & 13 deletions app/views/partials/toolsFull.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,20 @@
</div>
<div id="paintTool" style="display:flex">
<div id="clickTool" style="flex:2;display:flex;flex-wrap:wrap" class="mui-chose">
<div style="flex:1"><div id="navigate" title="Navigate" class="mui sub mui-pressed"><img class="icon" alt="navigate" src="/img/navigate.svg" /></div></div>
<div style="flex:1"><div id="select" title="Select" class="mui sub"><img class="icon" alt="select" src="/img/select.svg" /></div></div>
<div style="flex:1"><div id="draw" title="Draw" class="mui sub"><img class="icon" alt="draw" src="/img/draw.svg" /></div></div>
<div style="flex:1"><div id="drawPolygon" title="DrawPolygon" class="mui sub"><img class="icon" alt="drawPolygon" src="/img/drawPolygon.svg" /></div></div>
<div style="flex:1"><div id="drawLine" title="DrawLine" class="mui sub"><img class="icon" alt="drawLine" src="/img/drawLine.svg" /></div></div>
<div style="flex:1"><div id="addPoint" title="AddPoint" class="mui sub"><img class="icon" alt="addPoint" src="/img/addPoint.svg" /></div></div>
<div style="flex:1"><div id="deletePoint" title="DeletePoint" class="mui sub"><img class="icon" alt="deletePoint" src="/img/deletePoint.svg" /></div></div>
<div style="flex:1"><div id="addRegion" title="AddRegion" class="mui sub"><img class="icon" alt="addRegion" src="/img/addRegion.svg" /></div></div>
<div style="flex:1"><div id="subtractRegion" title="SubtractRegion" class="mui sub"><img class="icon" alt="subtractRegion" src="/img/subtractRegion.svg" /></div></div>
<div style="flex:1"><div id="splitRegion" title="SplitRegion" class="mui sub"><img class="icon" alt="splitRegion" src="/img/splitRegion.svg" /></div></div>
<div style="flex:1"><div id="rotate" title="Rotate" class="mui sub"><img class="icon" alt="rotate" src="/img/rotate.svg" /></div></div>
<div style="flex:1"><div id="flipRegion" title="FlipRegion" class="mui sub"><img class="icon" alt="flipRegion" src="/img/flipRegion.svg" /></div></div>
<div style="flex:1"><div id="textAnnotation" title="TextAnnotation" class="mui sub"><img class="icon" alt="textAnnotation" src="/img/textAnnotation.svg" /></div></div>
<div><div id="navigate" title="Navigate" class="mui sub mui-pressed"><img class="icon" alt="navigate" src="/img/navigate.svg" /></div></div>
<div><div id="select" title="Select" class="mui sub"><img class="icon" alt="select" src="/img/select.svg" /></div></div>
<div><div id="move" title="Move" class="mui sub"><img class="icon" alt="move" src="/img/move.svg" /></div></div>
<div><div id="draw" title="Draw" class="mui sub"><img class="icon" alt="draw" src="/img/draw.svg" /></div></div>
<div><div id="drawPolygon" title="DrawPolygon" class="mui sub"><img class="icon" alt="drawPolygon" src="/img/drawPolygon.svg" /></div></div>
<div><div id="drawLine" title="DrawLine" class="mui sub"><img class="icon" alt="drawLine" src="/img/drawLine.svg" /></div></div>
<div><div id="addPoint" title="AddPoint" class="mui sub"><img class="icon" alt="addPoint" src="/img/addPoint.svg" /></div></div>
<div><div id="deletePoint" title="DeletePoint" class="mui sub"><img class="icon" alt="deletePoint" src="/img/deletePoint.svg" /></div></div>
<div><div id="addRegion" title="AddRegion" class="mui sub"><img class="icon" alt="addRegion" src="/img/addRegion.svg" /></div></div>
<div><div id="subtractRegion" title="SubtractRegion" class="mui sub"><img class="icon" alt="subtractRegion" src="/img/subtractRegion.svg" /></div></div>
<div><div id="splitRegion" title="SplitRegion" class="mui sub"><img class="icon" alt="splitRegion" src="/img/splitRegion.svg" /></div></div>
<div><div id="rotate" title="Rotate" class="mui sub"><img class="icon" alt="rotate" src="/img/rotate.svg" /></div></div>
<div><div id="flipRegion" title="FlipRegion" class="mui sub"><img class="icon" alt="flipRegion" src="/img/flipRegion.svg" /></div></div>
<div><div id="textAnnotation" title="TextAnnotation" class="mui sub"><img class="icon" alt="textAnnotation" src="/img/textAnnotation.svg" /></div></div>
</div>
</div>
<div style="display:flex">
Expand Down

0 comments on commit 2424dac

Please sign in to comment.