Commit acf109a7 authored by hertzhaft's avatar hertzhaft

refactored the creation of drag handles for shapes

parent 07a4199a
...@@ -341,6 +341,26 @@ ...@@ -341,6 +341,26 @@
var style = props['style']; var style = props['style'];
var coords = shape.geometry.coordinates; var coords = shape.geometry.coordinates;
var gt = shape.geometry.type; var gt = shape.geometry.type;
//create handles for a shape.
var createHandles = function (shape) {
if (!shape.properties.editable) { return };
var $handles = [];
shape.$vertexElems = $handles;
var coords = shape.geometry.coordinates;
// create handle element from a coordinate pair
var createHandle = function (i, coord) {
var p = trafo.transform(geom.position(coord));
var $handle = $(svgElement('rect', {
'x': p.x-hs/2, 'y': p.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
$handles.push($handle);
$handle.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, i));
$svg.append($handle);
};
$.each(coords, createHandle);
};
// render the shape
if (gt === 'Point') { if (gt === 'Point') {
/* /*
* Point * Point
...@@ -371,21 +391,7 @@ ...@@ -371,21 +391,7 @@
'stroke': stroke, 'stroke-width': strokeWidth, 'style': style})); 'stroke': stroke, 'stroke-width': strokeWidth, 'style': style}));
shape.$elem = $elem; shape.$elem = $elem;
$svg.append($elem); $svg.append($elem);
if (props.editable) { createHandles(shape);
var $e1 = $(svgElement('rect', {
'x': p1.x-hs/2, 'y': p1.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $e2 = $(svgElement('rect', {
'x': p2.x-hs/2, 'y': p2.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $vertexElems = [$e1, $e2];
shape.$vertexElems = $vertexElems;
$svg.append($vertexElems);
$e1.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 0));
$e2.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 1));
}
} else if (gt === 'Rectangle') { } else if (gt === 'Rectangle') {
/* /*
* Rectangle * Rectangle
...@@ -401,21 +407,7 @@ ...@@ -401,21 +407,7 @@
'fill': fill, 'style': style})); 'fill': fill, 'style': style}));
shape.$elem = $elem; shape.$elem = $elem;
$svg.append($elem); $svg.append($elem);
if (props.editable) { createHandles(shape);
var $e1 = $(svgElement('rect', {
'x': p1.x-hs/2, 'y': p1.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $e2 = $(svgElement('rect', {
'x': p2.x-hs/2, 'y': p2.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $vertexElems = [$e1, $e2];
shape.$vertexElems = $vertexElems;
$svg.append($vertexElems);
$e1.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 0));
$e2.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 1));
}
} else if (gt === 'Polygon') { } else if (gt === 'Polygon') {
/* /*
* Polygon * Polygon
...@@ -431,21 +423,7 @@ ...@@ -431,21 +423,7 @@
'fill': fill, 'style': style})); 'fill': fill, 'style': style}));
shape.$elem = $elem; shape.$elem = $elem;
$svg.append($elem); $svg.append($elem);
if (props.editable) { createHandles(shape);
var $vertexElems = [];
shape.$vertexElems = $vertexElems;
for (var i in ps) {
var p = ps[i];
var $vertexElem = $(svgElement('rect', {
'x': p.x-hs/2, 'y': p.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
$vertexElems[i] = $vertexElem;
// getVertexDragHandler needs shape.$vertexElems
$vertexElem.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, i));
}
$svg.append($vertexElems);
}
} else if (gt === 'LineString') { } else if (gt === 'LineString') {
/* /*
* Polyline * Polyline
...@@ -461,21 +439,7 @@ ...@@ -461,21 +439,7 @@
'fill': 'none', 'style': style})); 'fill': 'none', 'style': style}));
shape.$elem = $elem; shape.$elem = $elem;
$svg.append($elem); $svg.append($elem);
if (props.editable) { createHandles(shape);
var $vertexElems = [];
shape.$vertexElems = $vertexElems;
for (var i in ps) {
var p = ps[i];
var $vertexElem = $(svgElement('rect', {
'x': p.x-hs/2, 'y': p.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
$vertexElems[i] = $vertexElem;
// getVertexDragHandler needs shape.$vertexElems
$vertexElem.one('mousedown.dlVertexDrag', getVertexDragHandler(data, shape, i));
}
$svg.append($vertexElems);
}
} else if (gt === 'Circle') { } else if (gt === 'Circle') {
/* /*
* Circle * Circle
...@@ -489,21 +453,7 @@ ...@@ -489,21 +453,7 @@
'style': style})); 'style': style}));
shape.$elem = $elem; shape.$elem = $elem;
$svg.append($elem); $svg.append($elem);
if (props.editable) { createHandles(shape);
var $e1 = $(svgElement('rect', {
'x': p1.x-hs/2, 'y': p1.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $e2 = $(svgElement('rect', {
'x': p2.x-hs/2, 'y': p2.y-hs/2, 'width': hs, 'height': hs,
'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none',
'class': css+'svg-handle', 'style': 'pointer-events:all'}));
var $vertexElems = [$e1, $e2];
shape.$vertexElems = $vertexElems;
$svg.append($vertexElems);
$e1.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 0));
$e2.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 1));
}
} else { } else {
console.error("Unable to render shape type:", gt); console.error("Unable to render shape type:", gt);
return; return;
...@@ -760,7 +710,7 @@ ...@@ -760,7 +710,7 @@
// start by clicking // start by clicking
$overlayDiv.one('mousedown.dlShape', shapeStart); $overlayDiv.one('mousedown.dlShape', shapeStart);
}; };
/** /**
* create a SVG element with attributes. * create a SVG element with attributes.
* *
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment