Change all tab indentations to 2sp indentation. Addresses issue #37
This commit is contained in:
codedread
716
editor/select.js
716
editor/select.js
@@ -20,7 +20,7 @@
|
||||
'use strict';
|
||||
|
||||
if (!svgedit.select) {
|
||||
svgedit.select = {};
|
||||
svgedit.select = {};
|
||||
}
|
||||
|
||||
var svgFactory_;
|
||||
@@ -36,50 +36,50 @@ var gripRadius = svgedit.browser.isTouch() ? 10 : 4;
|
||||
// elem - DOM element associated with this selector
|
||||
// bbox - Optional bbox to use for initialization (prevents duplicate getBBox call).
|
||||
svgedit.select.Selector = function (id, elem, bbox) {
|
||||
// this is the selector's unique number
|
||||
this.id = id;
|
||||
// this is the selector's unique number
|
||||
this.id = id;
|
||||
|
||||
// this holds a reference to the element for which this selector is being used
|
||||
this.selectedElement = elem;
|
||||
// this holds a reference to the element for which this selector is being used
|
||||
this.selectedElement = elem;
|
||||
|
||||
// this is a flag used internally to track whether the selector is being used or not
|
||||
this.locked = true;
|
||||
// this is a flag used internally to track whether the selector is being used or not
|
||||
this.locked = true;
|
||||
|
||||
// this holds a reference to the <g> element that holds all visual elements of the selector
|
||||
this.selectorGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': ('selectorGroup' + this.id)}
|
||||
});
|
||||
// this holds a reference to the <g> element that holds all visual elements of the selector
|
||||
this.selectorGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': ('selectorGroup' + this.id)}
|
||||
});
|
||||
|
||||
// this holds a reference to the path rect
|
||||
this.selectorRect = this.selectorGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'path',
|
||||
'attr': {
|
||||
'id': ('selectedBox' + this.id),
|
||||
'fill': 'none',
|
||||
'stroke': '#22C',
|
||||
'stroke-width': '1',
|
||||
'stroke-dasharray': '5,5',
|
||||
// need to specify this so that the rect is not selectable
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
// this holds a reference to the path rect
|
||||
this.selectorRect = this.selectorGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'path',
|
||||
'attr': {
|
||||
'id': ('selectedBox' + this.id),
|
||||
'fill': 'none',
|
||||
'stroke': '#22C',
|
||||
'stroke-width': '1',
|
||||
'stroke-dasharray': '5,5',
|
||||
// need to specify this so that the rect is not selectable
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// this holds a reference to the grip coordinates for this selector
|
||||
this.gripCoords = {
|
||||
'nw': null,
|
||||
'n': null,
|
||||
'ne': null,
|
||||
'e': null,
|
||||
'se': null,
|
||||
's': null,
|
||||
'sw': null,
|
||||
'w': null
|
||||
};
|
||||
// this holds a reference to the grip coordinates for this selector
|
||||
this.gripCoords = {
|
||||
'nw': null,
|
||||
'n': null,
|
||||
'ne': null,
|
||||
'e': null,
|
||||
'se': null,
|
||||
's': null,
|
||||
'sw': null,
|
||||
'w': null
|
||||
};
|
||||
|
||||
this.reset(this.selectedElement, bbox);
|
||||
this.reset(this.selectedElement, bbox);
|
||||
};
|
||||
|
||||
// Function: svgedit.select.Selector.reset
|
||||
@@ -89,10 +89,10 @@ svgedit.select.Selector = function (id, elem, bbox) {
|
||||
// e - DOM element associated with this selector
|
||||
// bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
|
||||
svgedit.select.Selector.prototype.reset = function (e, bbox) {
|
||||
this.locked = true;
|
||||
this.selectedElement = e;
|
||||
this.resize(bbox);
|
||||
this.selectorGroup.setAttribute('display', 'inline');
|
||||
this.locked = true;
|
||||
this.selectedElement = e;
|
||||
this.resize(bbox);
|
||||
this.selectorGroup.setAttribute('display', 'inline');
|
||||
};
|
||||
|
||||
// Function: svgedit.select.Selector.updateGripCursors
|
||||
@@ -101,22 +101,22 @@ svgedit.select.Selector.prototype.reset = function (e, bbox) {
|
||||
// Parameters:
|
||||
// angle - Float indicating current rotation angle in degrees
|
||||
svgedit.select.Selector.prototype.updateGripCursors = function (angle) {
|
||||
var dir,
|
||||
dirArr = [],
|
||||
steps = Math.round(angle / 45);
|
||||
if (steps < 0) { steps += 8; }
|
||||
for (dir in selectorManager_.selectorGrips) {
|
||||
dirArr.push(dir);
|
||||
}
|
||||
while (steps > 0) {
|
||||
dirArr.push(dirArr.shift());
|
||||
steps--;
|
||||
}
|
||||
var i = 0;
|
||||
for (dir in selectorManager_.selectorGrips) {
|
||||
selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dirArr[i] + '-resize'));
|
||||
i++;
|
||||
}
|
||||
var dir,
|
||||
dirArr = [],
|
||||
steps = Math.round(angle / 45);
|
||||
if (steps < 0) { steps += 8; }
|
||||
for (dir in selectorManager_.selectorGrips) {
|
||||
dirArr.push(dir);
|
||||
}
|
||||
while (steps > 0) {
|
||||
dirArr.push(dirArr.shift());
|
||||
steps--;
|
||||
}
|
||||
var i = 0;
|
||||
for (dir in selectorManager_.selectorGrips) {
|
||||
selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dirArr[i] + '-resize'));
|
||||
i++;
|
||||
}
|
||||
};
|
||||
|
||||
// Function: svgedit.select.Selector.showGrips
|
||||
@@ -125,292 +125,292 @@ svgedit.select.Selector.prototype.updateGripCursors = function (angle) {
|
||||
// Parameters:
|
||||
// show - boolean indicating whether grips should be shown or not
|
||||
svgedit.select.Selector.prototype.showGrips = function (show) {
|
||||
var bShow = show ? 'inline' : 'none';
|
||||
selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
|
||||
var elem = this.selectedElement;
|
||||
this.hasGrips = show;
|
||||
if (elem && show) {
|
||||
this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
|
||||
this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
|
||||
}
|
||||
var bShow = show ? 'inline' : 'none';
|
||||
selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
|
||||
var elem = this.selectedElement;
|
||||
this.hasGrips = show;
|
||||
if (elem && show) {
|
||||
this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
|
||||
this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
|
||||
}
|
||||
};
|
||||
|
||||
// Function: svgedit.select.Selector.resize
|
||||
// Updates the selector to match the element's size
|
||||
// bbox - Optional bbox to use for resize (prevents duplicate getBBox call).
|
||||
svgedit.select.Selector.prototype.resize = function (bbox) {
|
||||
var selectedBox = this.selectorRect,
|
||||
mgr = selectorManager_,
|
||||
selectedGrips = mgr.selectorGrips,
|
||||
selected = this.selectedElement,
|
||||
sw = selected.getAttribute('stroke-width'),
|
||||
currentZoom = svgFactory_.currentZoom();
|
||||
var offset = 1 / currentZoom;
|
||||
if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
|
||||
offset += (sw / 2);
|
||||
}
|
||||
var selectedBox = this.selectorRect,
|
||||
mgr = selectorManager_,
|
||||
selectedGrips = mgr.selectorGrips,
|
||||
selected = this.selectedElement,
|
||||
sw = selected.getAttribute('stroke-width'),
|
||||
currentZoom = svgFactory_.currentZoom();
|
||||
var offset = 1 / currentZoom;
|
||||
if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
|
||||
offset += (sw / 2);
|
||||
}
|
||||
|
||||
var tagName = selected.tagName;
|
||||
if (tagName === 'text') {
|
||||
offset += 2 / currentZoom;
|
||||
}
|
||||
var tagName = selected.tagName;
|
||||
if (tagName === 'text') {
|
||||
offset += 2 / currentZoom;
|
||||
}
|
||||
|
||||
// loop and transform our bounding box until we reach our first rotation
|
||||
var tlist = svgedit.transformlist.getTransformList(selected);
|
||||
var m = svgedit.math.transformListToTransform(tlist).matrix;
|
||||
// loop and transform our bounding box until we reach our first rotation
|
||||
var tlist = svgedit.transformlist.getTransformList(selected);
|
||||
var m = svgedit.math.transformListToTransform(tlist).matrix;
|
||||
|
||||
// This should probably be handled somewhere else, but for now
|
||||
// it keeps the selection box correctly positioned when zoomed
|
||||
m.e *= currentZoom;
|
||||
m.f *= currentZoom;
|
||||
// This should probably be handled somewhere else, but for now
|
||||
// it keeps the selection box correctly positioned when zoomed
|
||||
m.e *= currentZoom;
|
||||
m.f *= currentZoom;
|
||||
|
||||
if (!bbox) {
|
||||
bbox = svgedit.utilities.getBBox(selected);
|
||||
}
|
||||
// TODO: svgedit.utilities.getBBox (previous line) already knows to call getStrokedBBox when tagName === 'g'. Remove this?
|
||||
// TODO: svgedit.utilities.getBBox doesn't exclude 'gsvg' and calls getStrokedBBox for any 'g'. Should getBBox be updated?
|
||||
if (tagName === 'g' && !$.data(selected, 'gsvg')) {
|
||||
// The bbox for a group does not include stroke vals, so we
|
||||
// get the bbox based on its children.
|
||||
var strokedBbox = svgFactory_.getStrokedBBox(selected.childNodes);
|
||||
if (strokedBbox) {
|
||||
bbox = strokedBbox;
|
||||
}
|
||||
}
|
||||
if (!bbox) {
|
||||
bbox = svgedit.utilities.getBBox(selected);
|
||||
}
|
||||
// TODO: svgedit.utilities.getBBox (previous line) already knows to call getStrokedBBox when tagName === 'g'. Remove this?
|
||||
// TODO: svgedit.utilities.getBBox doesn't exclude 'gsvg' and calls getStrokedBBox for any 'g'. Should getBBox be updated?
|
||||
if (tagName === 'g' && !$.data(selected, 'gsvg')) {
|
||||
// The bbox for a group does not include stroke vals, so we
|
||||
// get the bbox based on its children.
|
||||
var strokedBbox = svgFactory_.getStrokedBBox(selected.childNodes);
|
||||
if (strokedBbox) {
|
||||
bbox = strokedBbox;
|
||||
}
|
||||
}
|
||||
|
||||
// apply the transforms
|
||||
var l = bbox.x, t = bbox.y, w = bbox.width, h = bbox.height;
|
||||
bbox = {x: l, y: t, width: w, height: h};
|
||||
// apply the transforms
|
||||
var l = bbox.x, t = bbox.y, w = bbox.width, h = bbox.height;
|
||||
bbox = {x: l, y: t, width: w, height: h};
|
||||
|
||||
// we need to handle temporary transforms too
|
||||
// if skewed, get its transformed box, then find its axis-aligned bbox
|
||||
// we need to handle temporary transforms too
|
||||
// if skewed, get its transformed box, then find its axis-aligned bbox
|
||||
|
||||
// *
|
||||
offset *= currentZoom;
|
||||
// *
|
||||
offset *= currentZoom;
|
||||
|
||||
var nbox = svgedit.math.transformBox(l * currentZoom, t * currentZoom, w * currentZoom, h * currentZoom, m),
|
||||
aabox = nbox.aabox,
|
||||
nbax = aabox.x - offset,
|
||||
nbay = aabox.y - offset,
|
||||
nbaw = aabox.width + (offset * 2),
|
||||
nbah = aabox.height + (offset * 2);
|
||||
var nbox = svgedit.math.transformBox(l * currentZoom, t * currentZoom, w * currentZoom, h * currentZoom, m),
|
||||
aabox = nbox.aabox,
|
||||
nbax = aabox.x - offset,
|
||||
nbay = aabox.y - offset,
|
||||
nbaw = aabox.width + (offset * 2),
|
||||
nbah = aabox.height + (offset * 2);
|
||||
|
||||
// now if the shape is rotated, un-rotate it
|
||||
var cx = nbax + nbaw / 2,
|
||||
cy = nbay + nbah / 2;
|
||||
// now if the shape is rotated, un-rotate it
|
||||
var cx = nbax + nbaw / 2,
|
||||
cy = nbay + nbah / 2;
|
||||
|
||||
var angle = svgedit.utilities.getRotationAngle(selected);
|
||||
if (angle) {
|
||||
var rot = svgFactory_.svgRoot().createSVGTransform();
|
||||
rot.setRotate(-angle, cx, cy);
|
||||
var rotm = rot.matrix;
|
||||
nbox.tl = svgedit.math.transformPoint(nbox.tl.x, nbox.tl.y, rotm);
|
||||
nbox.tr = svgedit.math.transformPoint(nbox.tr.x, nbox.tr.y, rotm);
|
||||
nbox.bl = svgedit.math.transformPoint(nbox.bl.x, nbox.bl.y, rotm);
|
||||
nbox.br = svgedit.math.transformPoint(nbox.br.x, nbox.br.y, rotm);
|
||||
var angle = svgedit.utilities.getRotationAngle(selected);
|
||||
if (angle) {
|
||||
var rot = svgFactory_.svgRoot().createSVGTransform();
|
||||
rot.setRotate(-angle, cx, cy);
|
||||
var rotm = rot.matrix;
|
||||
nbox.tl = svgedit.math.transformPoint(nbox.tl.x, nbox.tl.y, rotm);
|
||||
nbox.tr = svgedit.math.transformPoint(nbox.tr.x, nbox.tr.y, rotm);
|
||||
nbox.bl = svgedit.math.transformPoint(nbox.bl.x, nbox.bl.y, rotm);
|
||||
nbox.br = svgedit.math.transformPoint(nbox.br.x, nbox.br.y, rotm);
|
||||
|
||||
// calculate the axis-aligned bbox
|
||||
var tl = nbox.tl;
|
||||
var minx = tl.x,
|
||||
miny = tl.y,
|
||||
maxx = tl.x,
|
||||
maxy = tl.y;
|
||||
// calculate the axis-aligned bbox
|
||||
var tl = nbox.tl;
|
||||
var minx = tl.x,
|
||||
miny = tl.y,
|
||||
maxx = tl.x,
|
||||
maxy = tl.y;
|
||||
|
||||
var min = Math.min, max = Math.max;
|
||||
var min = Math.min, max = Math.max;
|
||||
|
||||
minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset;
|
||||
miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset;
|
||||
maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset;
|
||||
maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset;
|
||||
minx = min(minx, min(nbox.tr.x, min(nbox.bl.x, nbox.br.x))) - offset;
|
||||
miny = min(miny, min(nbox.tr.y, min(nbox.bl.y, nbox.br.y))) - offset;
|
||||
maxx = max(maxx, max(nbox.tr.x, max(nbox.bl.x, nbox.br.x))) + offset;
|
||||
maxy = max(maxy, max(nbox.tr.y, max(nbox.bl.y, nbox.br.y))) + offset;
|
||||
|
||||
nbax = minx;
|
||||
nbay = miny;
|
||||
nbaw = (maxx - minx);
|
||||
nbah = (maxy - miny);
|
||||
}
|
||||
nbax = minx;
|
||||
nbay = miny;
|
||||
nbaw = (maxx - minx);
|
||||
nbah = (maxy - miny);
|
||||
}
|
||||
|
||||
var dstr = 'M' + nbax + ',' + nbay +
|
||||
' L' + (nbax + nbaw) + ',' + nbay +
|
||||
' ' + (nbax + nbaw) + ',' + (nbay + nbah) +
|
||||
' ' + nbax + ',' + (nbay + nbah) + 'z';
|
||||
selectedBox.setAttribute('d', dstr);
|
||||
var dstr = 'M' + nbax + ',' + nbay +
|
||||
' L' + (nbax + nbaw) + ',' + nbay +
|
||||
' ' + (nbax + nbaw) + ',' + (nbay + nbah) +
|
||||
' ' + nbax + ',' + (nbay + nbah) + 'z';
|
||||
selectedBox.setAttribute('d', dstr);
|
||||
|
||||
var xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : '';
|
||||
this.selectorGroup.setAttribute('transform', xform);
|
||||
var xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : '';
|
||||
this.selectorGroup.setAttribute('transform', xform);
|
||||
|
||||
// TODO(codedread): Is this if needed?
|
||||
// if (selected === selectedElements[0]) {
|
||||
this.gripCoords = {
|
||||
'nw': [nbax, nbay],
|
||||
'ne': [nbax + nbaw, nbay],
|
||||
'sw': [nbax, nbay + nbah],
|
||||
'se': [nbax + nbaw, nbay + nbah],
|
||||
'n': [nbax + (nbaw) / 2, nbay],
|
||||
'w': [nbax, nbay + (nbah) / 2],
|
||||
'e': [nbax + nbaw, nbay + (nbah) / 2],
|
||||
's': [nbax + (nbaw) / 2, nbay + nbah]
|
||||
};
|
||||
var dir;
|
||||
for (dir in this.gripCoords) {
|
||||
var coords = this.gripCoords[dir];
|
||||
selectedGrips[dir].setAttribute('cx', coords[0]);
|
||||
selectedGrips[dir].setAttribute('cy', coords[1]);
|
||||
}
|
||||
// TODO(codedread): Is this if needed?
|
||||
// if (selected === selectedElements[0]) {
|
||||
this.gripCoords = {
|
||||
'nw': [nbax, nbay],
|
||||
'ne': [nbax + nbaw, nbay],
|
||||
'sw': [nbax, nbay + nbah],
|
||||
'se': [nbax + nbaw, nbay + nbah],
|
||||
'n': [nbax + (nbaw) / 2, nbay],
|
||||
'w': [nbax, nbay + (nbah) / 2],
|
||||
'e': [nbax + nbaw, nbay + (nbah) / 2],
|
||||
's': [nbax + (nbaw) / 2, nbay + nbah]
|
||||
};
|
||||
var dir;
|
||||
for (dir in this.gripCoords) {
|
||||
var coords = this.gripCoords[dir];
|
||||
selectedGrips[dir].setAttribute('cx', coords[0]);
|
||||
selectedGrips[dir].setAttribute('cy', coords[1]);
|
||||
}
|
||||
|
||||
// we want to go 20 pixels in the negative transformed y direction, ignoring scale
|
||||
mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw) / 2);
|
||||
mgr.rotateGripConnector.setAttribute('y1', nbay);
|
||||
mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw) / 2);
|
||||
mgr.rotateGripConnector.setAttribute('y2', nbay - (gripRadius * 5));
|
||||
// we want to go 20 pixels in the negative transformed y direction, ignoring scale
|
||||
mgr.rotateGripConnector.setAttribute('x1', nbax + (nbaw) / 2);
|
||||
mgr.rotateGripConnector.setAttribute('y1', nbay);
|
||||
mgr.rotateGripConnector.setAttribute('x2', nbax + (nbaw) / 2);
|
||||
mgr.rotateGripConnector.setAttribute('y2', nbay - (gripRadius * 5));
|
||||
|
||||
mgr.rotateGrip.setAttribute('cx', nbax + (nbaw) / 2);
|
||||
mgr.rotateGrip.setAttribute('cy', nbay - (gripRadius * 5));
|
||||
// }
|
||||
mgr.rotateGrip.setAttribute('cx', nbax + (nbaw) / 2);
|
||||
mgr.rotateGrip.setAttribute('cy', nbay - (gripRadius * 5));
|
||||
// }
|
||||
};
|
||||
|
||||
// Class: svgedit.select.SelectorManager
|
||||
svgedit.select.SelectorManager = function () {
|
||||
// this will hold the <g> element that contains all selector rects/grips
|
||||
this.selectorParentGroup = null;
|
||||
// this will hold the <g> element that contains all selector rects/grips
|
||||
this.selectorParentGroup = null;
|
||||
|
||||
// this is a special rect that is used for multi-select
|
||||
this.rubberBandBox = null;
|
||||
// this is a special rect that is used for multi-select
|
||||
this.rubberBandBox = null;
|
||||
|
||||
// this will hold objects of type svgedit.select.Selector (see above)
|
||||
this.selectors = [];
|
||||
// this will hold objects of type svgedit.select.Selector (see above)
|
||||
this.selectors = [];
|
||||
|
||||
// this holds a map of SVG elements to their Selector object
|
||||
this.selectorMap = {};
|
||||
// this holds a map of SVG elements to their Selector object
|
||||
this.selectorMap = {};
|
||||
|
||||
// this holds a reference to the grip elements
|
||||
this.selectorGrips = {
|
||||
'nw': null,
|
||||
'n': null,
|
||||
'ne': null,
|
||||
'e': null,
|
||||
'se': null,
|
||||
's': null,
|
||||
'sw': null,
|
||||
'w': null
|
||||
};
|
||||
// this holds a reference to the grip elements
|
||||
this.selectorGrips = {
|
||||
'nw': null,
|
||||
'n': null,
|
||||
'ne': null,
|
||||
'e': null,
|
||||
'se': null,
|
||||
's': null,
|
||||
'sw': null,
|
||||
'w': null
|
||||
};
|
||||
|
||||
this.selectorGripsGroup = null;
|
||||
this.rotateGripConnector = null;
|
||||
this.rotateGrip = null;
|
||||
this.selectorGripsGroup = null;
|
||||
this.rotateGripConnector = null;
|
||||
this.rotateGrip = null;
|
||||
|
||||
this.initGroup();
|
||||
this.initGroup();
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.initGroup
|
||||
// Resets the parent selector group element
|
||||
svgedit.select.SelectorManager.prototype.initGroup = function () {
|
||||
// remove old selector parent group if it existed
|
||||
if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
|
||||
this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
|
||||
}
|
||||
// remove old selector parent group if it existed
|
||||
if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
|
||||
this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
|
||||
}
|
||||
|
||||
// create parent selector group and add it to svgroot
|
||||
this.selectorParentGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': 'selectorParentGroup'}
|
||||
});
|
||||
this.selectorGripsGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'display': 'none'}
|
||||
});
|
||||
this.selectorParentGroup.appendChild(this.selectorGripsGroup);
|
||||
svgFactory_.svgRoot().appendChild(this.selectorParentGroup);
|
||||
// create parent selector group and add it to svgroot
|
||||
this.selectorParentGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': 'selectorParentGroup'}
|
||||
});
|
||||
this.selectorGripsGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'display': 'none'}
|
||||
});
|
||||
this.selectorParentGroup.appendChild(this.selectorGripsGroup);
|
||||
svgFactory_.svgRoot().appendChild(this.selectorParentGroup);
|
||||
|
||||
this.selectorMap = {};
|
||||
this.selectors = [];
|
||||
this.rubberBandBox = null;
|
||||
this.selectorMap = {};
|
||||
this.selectors = [];
|
||||
this.rubberBandBox = null;
|
||||
|
||||
// add the corner grips
|
||||
var dir;
|
||||
for (dir in this.selectorGrips) {
|
||||
var grip = svgFactory_.createSVGElement({
|
||||
'element': 'circle',
|
||||
'attr': {
|
||||
'id': ('selectorGrip_resize_' + dir),
|
||||
'fill': '#22C',
|
||||
'r': gripRadius,
|
||||
'style': ('cursor:' + dir + '-resize'),
|
||||
// This expands the mouse-able area of the grips making them
|
||||
// easier to grab with the mouse.
|
||||
// This works in Opera and WebKit, but does not work in Firefox
|
||||
// see https://bugzilla.mozilla.org/show_bug.cgi?id=500174
|
||||
'stroke-width': 2,
|
||||
'pointer-events': 'all'
|
||||
}
|
||||
});
|
||||
// add the corner grips
|
||||
var dir;
|
||||
for (dir in this.selectorGrips) {
|
||||
var grip = svgFactory_.createSVGElement({
|
||||
'element': 'circle',
|
||||
'attr': {
|
||||
'id': ('selectorGrip_resize_' + dir),
|
||||
'fill': '#22C',
|
||||
'r': gripRadius,
|
||||
'style': ('cursor:' + dir + '-resize'),
|
||||
// This expands the mouse-able area of the grips making them
|
||||
// easier to grab with the mouse.
|
||||
// This works in Opera and WebKit, but does not work in Firefox
|
||||
// see https://bugzilla.mozilla.org/show_bug.cgi?id=500174
|
||||
'stroke-width': 2,
|
||||
'pointer-events': 'all'
|
||||
}
|
||||
});
|
||||
|
||||
$.data(grip, 'dir', dir);
|
||||
$.data(grip, 'type', 'resize');
|
||||
this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
|
||||
}
|
||||
$.data(grip, 'dir', dir);
|
||||
$.data(grip, 'type', 'resize');
|
||||
this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
|
||||
}
|
||||
|
||||
// add rotator elems
|
||||
this.rotateGripConnector = this.selectorGripsGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'line',
|
||||
'attr': {
|
||||
'id': ('selectorGrip_rotateconnector'),
|
||||
'stroke': '#22C',
|
||||
'stroke-width': '1'
|
||||
}
|
||||
})
|
||||
);
|
||||
// add rotator elems
|
||||
this.rotateGripConnector = this.selectorGripsGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'line',
|
||||
'attr': {
|
||||
'id': ('selectorGrip_rotateconnector'),
|
||||
'stroke': '#22C',
|
||||
'stroke-width': '1'
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
this.rotateGrip = this.selectorGripsGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'circle',
|
||||
'attr': {
|
||||
'id': 'selectorGrip_rotate',
|
||||
'fill': 'lime',
|
||||
'r': gripRadius,
|
||||
'stroke': '#22C',
|
||||
'stroke-width': 2,
|
||||
'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
|
||||
}
|
||||
})
|
||||
);
|
||||
$.data(this.rotateGrip, 'type', 'rotate');
|
||||
this.rotateGrip = this.selectorGripsGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'circle',
|
||||
'attr': {
|
||||
'id': 'selectorGrip_rotate',
|
||||
'fill': 'lime',
|
||||
'r': gripRadius,
|
||||
'stroke': '#22C',
|
||||
'stroke-width': 2,
|
||||
'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
|
||||
}
|
||||
})
|
||||
);
|
||||
$.data(this.rotateGrip, 'type', 'rotate');
|
||||
|
||||
if ($('#canvasBackground').length) { return; }
|
||||
if ($('#canvasBackground').length) { return; }
|
||||
|
||||
var dims = config_.dimensions;
|
||||
var canvasbg = svgFactory_.createSVGElement({
|
||||
'element': 'svg',
|
||||
'attr': {
|
||||
'id': 'canvasBackground',
|
||||
'width': dims[0],
|
||||
'height': dims[1],
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
var dims = config_.dimensions;
|
||||
var canvasbg = svgFactory_.createSVGElement({
|
||||
'element': 'svg',
|
||||
'attr': {
|
||||
'id': 'canvasBackground',
|
||||
'width': dims[0],
|
||||
'height': dims[1],
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
var rect = svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'stroke-width': 1,
|
||||
'stroke': '#000',
|
||||
'fill': '#FFF',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
var rect = svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'stroke-width': 1,
|
||||
'stroke': '#000',
|
||||
'fill': '#FFF',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
// Both Firefox and WebKit are too slow with this filter region (especially at higher
|
||||
// zoom levels) and Opera has at least one bug
|
||||
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
||||
canvasbg.appendChild(rect);
|
||||
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
||||
// Both Firefox and WebKit are too slow with this filter region (especially at higher
|
||||
// zoom levels) and Opera has at least one bug
|
||||
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
||||
canvasbg.appendChild(rect);
|
||||
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.requestSelector
|
||||
@@ -420,27 +420,27 @@ svgedit.select.SelectorManager.prototype.initGroup = function () {
|
||||
// elem - DOM element to get the selector for
|
||||
// bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
|
||||
svgedit.select.SelectorManager.prototype.requestSelector = function (elem, bbox) {
|
||||
if (elem == null) { return null; }
|
||||
var i,
|
||||
N = this.selectors.length;
|
||||
// If we've already acquired one for this element, return it.
|
||||
if (typeof this.selectorMap[elem.id] === 'object') {
|
||||
this.selectorMap[elem.id].locked = true;
|
||||
return this.selectorMap[elem.id];
|
||||
}
|
||||
for (i = 0; i < N; ++i) {
|
||||
if (this.selectors[i] && !this.selectors[i].locked) {
|
||||
this.selectors[i].locked = true;
|
||||
this.selectors[i].reset(elem, bbox);
|
||||
this.selectorMap[elem.id] = this.selectors[i];
|
||||
return this.selectors[i];
|
||||
}
|
||||
}
|
||||
// if we reached here, no available selectors were found, we create one
|
||||
this.selectors[N] = new svgedit.select.Selector(N, elem, bbox);
|
||||
this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
|
||||
this.selectorMap[elem.id] = this.selectors[N];
|
||||
return this.selectors[N];
|
||||
if (elem == null) { return null; }
|
||||
var i,
|
||||
N = this.selectors.length;
|
||||
// If we've already acquired one for this element, return it.
|
||||
if (typeof this.selectorMap[elem.id] === 'object') {
|
||||
this.selectorMap[elem.id].locked = true;
|
||||
return this.selectorMap[elem.id];
|
||||
}
|
||||
for (i = 0; i < N; ++i) {
|
||||
if (this.selectors[i] && !this.selectors[i].locked) {
|
||||
this.selectors[i].locked = true;
|
||||
this.selectors[i].reset(elem, bbox);
|
||||
this.selectorMap[elem.id] = this.selectors[i];
|
||||
return this.selectors[i];
|
||||
}
|
||||
}
|
||||
// if we reached here, no available selectors were found, we create one
|
||||
this.selectors[N] = new svgedit.select.Selector(N, elem, bbox);
|
||||
this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
|
||||
this.selectorMap[elem.id] = this.selectors[N];
|
||||
return this.selectors[N];
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.releaseSelector
|
||||
@@ -449,51 +449,51 @@ svgedit.select.SelectorManager.prototype.requestSelector = function (elem, bbox)
|
||||
// Parameters:
|
||||
// elem - DOM element to remove the selector for
|
||||
svgedit.select.SelectorManager.prototype.releaseSelector = function (elem) {
|
||||
if (elem == null) { return; }
|
||||
var i,
|
||||
N = this.selectors.length,
|
||||
sel = this.selectorMap[elem.id];
|
||||
if (!sel.locked) {
|
||||
// TODO(codedread): Ensure this exists in this module.
|
||||
console.log('WARNING! selector was released but was already unlocked');
|
||||
}
|
||||
for (i = 0; i < N; ++i) {
|
||||
if (this.selectors[i] && this.selectors[i] === sel) {
|
||||
delete this.selectorMap[elem.id];
|
||||
sel.locked = false;
|
||||
sel.selectedElement = null;
|
||||
sel.showGrips(false);
|
||||
if (elem == null) { return; }
|
||||
var i,
|
||||
N = this.selectors.length,
|
||||
sel = this.selectorMap[elem.id];
|
||||
if (!sel.locked) {
|
||||
// TODO(codedread): Ensure this exists in this module.
|
||||
console.log('WARNING! selector was released but was already unlocked');
|
||||
}
|
||||
for (i = 0; i < N; ++i) {
|
||||
if (this.selectors[i] && this.selectors[i] === sel) {
|
||||
delete this.selectorMap[elem.id];
|
||||
sel.locked = false;
|
||||
sel.selectedElement = null;
|
||||
sel.showGrips(false);
|
||||
|
||||
// remove from DOM and store reference in JS but only if it exists in the DOM
|
||||
try {
|
||||
sel.selectorGroup.setAttribute('display', 'none');
|
||||
} catch (e) {}
|
||||
// remove from DOM and store reference in JS but only if it exists in the DOM
|
||||
try {
|
||||
sel.selectorGroup.setAttribute('display', 'none');
|
||||
} catch (e) {}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.getRubberBandBox
|
||||
// Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming
|
||||
svgedit.select.SelectorManager.prototype.getRubberBandBox = function () {
|
||||
if (!this.rubberBandBox) {
|
||||
this.rubberBandBox = this.selectorParentGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'id': 'selectorRubberBand',
|
||||
'fill': '#22C',
|
||||
'fill-opacity': 0.15,
|
||||
'stroke': '#22C',
|
||||
'stroke-width': 0.5,
|
||||
'display': 'none',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
return this.rubberBandBox;
|
||||
if (!this.rubberBandBox) {
|
||||
this.rubberBandBox = this.selectorParentGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'id': 'selectorRubberBand',
|
||||
'fill': '#22C',
|
||||
'fill-opacity': 0.15,
|
||||
'stroke': '#22C',
|
||||
'stroke-width': 0.5,
|
||||
'display': 'none',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
return this.rubberBandBox;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -519,9 +519,9 @@ svgedit.select.SelectorManager.prototype.getRubberBandBox = function () {
|
||||
* svgFactory - an object implementing the SVGFactory interface (see above).
|
||||
*/
|
||||
svgedit.select.init = function (config, svgFactory) {
|
||||
config_ = config;
|
||||
svgFactory_ = svgFactory;
|
||||
selectorManager_ = new svgedit.select.SelectorManager();
|
||||
config_ = config;
|
||||
svgFactory_ = svgFactory;
|
||||
selectorManager_ = new svgedit.select.SelectorManager();
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -531,6 +531,6 @@ svgedit.select.init = function (config, svgFactory) {
|
||||
* The SelectorManager instance.
|
||||
*/
|
||||
svgedit.select.getSelectorManager = function () {
|
||||
return selectorManager_;
|
||||
return selectorManager_;
|
||||
};
|
||||
}());
|
||||
|
||||
Reference in New Issue
Block a user