or element), then it is an orphan else if(canvas.getBBox(child) && child.nodeName != 'defs') { // Opera returns a BBox for defs var bb = canvas.getBBox(child); orphans.push(child); } } } // create a new layer and add all the orphans to it if (orphans.length > 0) { var i = 1; while ($.inArray(("Layer " + i), layernames) != -1) { i++; } var newname = "Layer " + i; current_layer = svgdoc.createElementNS(svgns, "g"); var layer_title = svgdoc.createElementNS(svgns, "title"); layer_title.textContent = newname; current_layer.appendChild(layer_title); for (var j = 0; j < orphans.length; ++j) { current_layer.appendChild(orphans[j]); } current_layer = svgcontent.appendChild(current_layer); all_layers.push( [newname, current_layer] ); } walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:inherit");}); current_layer.setAttribute("style","pointer-events:all"); }; // Function: createLayer // Creates a new top-level layer in the drawing with the given name, sets the current layer // to it, and then clears the selection This function then calls the 'changed' handler. // This is an undoable action. // // Parameters: // name - The given name this.createLayer = function(name) { var batchCmd = new BatchCommand("Create Layer"); var new_layer = svgdoc.createElementNS(svgns, "g"); var layer_title = svgdoc.createElementNS(svgns, "title"); layer_title.textContent = name; new_layer.appendChild(layer_title); new_layer = svgcontent.appendChild(new_layer); batchCmd.addSubCommand(new InsertElementCommand(new_layer)); addCommandToHistory(batchCmd); canvas.clearSelection(); identifyLayers(); canvas.setCurrentLayer(name); call("changed", [new_layer]); }; // Function: deleteCurrentLayer // Deletes the current layer from the drawing and then clears the selection. This function // then calls the 'changed' handler. This is an undoable action. this.deleteCurrentLayer = function() { if (current_layer && all_layers.length > 1) { var batchCmd = new BatchCommand("Delete Layer"); // actually delete from the DOM and store in our Undo History var parent = current_layer.parentNode; batchCmd.addSubCommand(new RemoveElementCommand(current_layer, parent)); parent.removeChild(current_layer); addCommandToHistory(batchCmd); canvas.clearSelection(); identifyLayers(); canvas.setCurrentLayer(all_layers[all_layers.length-1][0]); call("changed", [svgcontent]); return true; } return false; }; // Function: getNumLayers // Returns the number of layers in the current drawing. // // Returns: // The number of layers in the current drawing. this.getNumLayers = function() { return all_layers.length; }; // Function: getLayer // Returns the name of the ith layer. If the index is out of range, an empty string is returned. // // Parameters: // i - the zero-based index of the layer you are querying. // // Returns: // The name of the ith layer this.getLayer = function(i) { if (i >= 0 && i < canvas.getNumLayers()) { return all_layers[i][0]; } return ""; }; // Function: getCurrentLayer // Returns the name of the currently selected layer. If an error occurs, an empty string // is returned. // // Returns: // The name of the currently active layer. this.getCurrentLayer = function() { for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][1] == current_layer) { return all_layers[i][0]; } } return ""; }; // Function: setCurrentLayer // Sets the current layer. If the name is not a valid layer name, then this function returns // false. Otherwise it returns true. This is not an undo-able action. // // Parameters: // name - the name of the layer you want to switch to. // // Returns: // true if the current layer was switched, otherwise false this.setCurrentLayer = function(name) { name = toXml(name); for (var i = 0; i < all_layers.length; ++i) { if (name == all_layers[i][0]) { if (current_layer != all_layers[i][1]) { canvas.clearSelection(); current_layer.setAttribute("style", "pointer-events:none"); current_layer = all_layers[i][1]; current_layer.setAttribute("style", "pointer-events:all"); } return true; } } return false; }; // Function: renameCurrentLayer // Renames the current layer. If the layer name is not valid (i.e. unique), then this function // does nothing and returns false, otherwise it returns true. This is an undo-able action. // // Parameters: // newname - the new name you want to give the current layer. This name must be unique // among all layer names. // // Returns: // true if the rename succeeded, false otherwise. this.renameCurrentLayer = function(newname) { if (current_layer) { var oldLayer = current_layer; // setCurrentLayer will return false if the name doesn't already exists if (!canvas.setCurrentLayer(newname)) { var batchCmd = new BatchCommand("Rename Layer"); // find the index of the layer for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][1] == oldLayer) break; } var oldname = all_layers[i][0]; all_layers[i][0] = toXml(newname); // now change the underlying title element contents var len = oldLayer.childNodes.length; for (var i = 0; i < len; ++i) { var child = oldLayer.childNodes.item(i); // found the element, now append all the if (child && child.tagName == "title") { // wipe out old name while (child.firstChild) { child.removeChild(child.firstChild); } child.textContent = newname; batchCmd.addSubCommand(new ChangeElementCommand(child, {"#text":oldname})); addCommandToHistory(batchCmd); call("changed", [oldLayer]); return true; } } } current_layer = oldLayer; } return false; }; // Function: setCurrentLayerPosition // Changes the position of the current layer to the new value. If the new index is not valid, // this function does nothing and returns false, otherwise it returns true. This is an // undo-able action. // // Parameters: // newpos - The zero-based index of the new position of the layer. This should be between // 0 and (number of layers - 1) // // Returns: // true if the current layer position was changed, false otherwise. this.setCurrentLayerPosition = function(newpos) { if (current_layer && newpos >= 0 && newpos < all_layers.length) { for (var oldpos = 0; oldpos < all_layers.length; ++oldpos) { if (all_layers[oldpos][1] == current_layer) break; } // some unknown error condition (current_layer not in all_layers) if (oldpos == all_layers.length) { return false; } if (oldpos != newpos) { // if our new position is below us, we need to insert before the node after newpos var refLayer = null; var oldNextSibling = current_layer.nextSibling; if (newpos > oldpos ) { if (newpos < all_layers.length-1) { refLayer = all_layers[newpos+1][1]; } } // if our new position is above us, we need to insert before the node at newpos else { refLayer = all_layers[newpos][1]; } svgcontent.insertBefore(current_layer, refLayer); addCommandToHistory(new MoveElementCommand(current_layer, oldNextSibling, svgcontent)); identifyLayers(); canvas.setCurrentLayer(all_layers[newpos][0]); return true; } } return false; }; // Function: getLayerVisibility // Returns whether the layer is visible. If the layer name is not valid, then this function // returns false. // // Parameters: // layername - the name of the layer which you want to query. // // Returns: // The visibility state of the layer, or false if the layer name was invalid. this.getLayerVisibility = function(layername) { // find the layer var layer = null; for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][0] == layername) { layer = all_layers[i][1]; break; } } if (!layer) return false; return (layer.getAttribute("display") != "none"); }; // Function: setLayerVisibility // Sets the visibility of the layer. If the layer name is not valid, this function return // false, otherwise it returns true. This is an undo-able action. // // Parameters: // layername - the name of the layer to change the visibility // bVisible - true/false, whether the layer should be visible // // Returns: // true if the layer's visibility was set, false otherwise this.setLayerVisibility = function(layername, bVisible) { // find the layer var layer = null; for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][0] == layername) { layer = all_layers[i][1]; break; } } if (!layer) return false; var oldDisplay = layer.getAttribute("display"); if (!oldDisplay) oldDisplay = "inline"; layer.setAttribute("display", bVisible ? "inline" : "none"); addCommandToHistory(new ChangeElementCommand(layer, {"display":oldDisplay}, "Layer Visibility")); if (layer == current_layer) { canvas.clearSelection(); } // call("changed", [selected]); return true; }; // Function: moveSelectedToLayer // Moves the selected elements to layername. If the name is not a valid layer name, then false // is returned. Otherwise it returns true. This is an undo-able action. // // Parameters: // layername - the name of the layer you want to which you want to move the selected elements // // Returns: // true if the selected elements were moved to the layer, false otherwise. this.moveSelectedToLayer = function(layername) { // find the layer var layer = null; for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][0] == layername) { layer = all_layers[i][1]; break; } } if (!layer) return false; var batchCmd = new BatchCommand("Move Elements to Layer"); // loop for each selected element and move it var selElems = selectedElements; var i = selElems.length; while (i--) { var elem = selElems[i]; if (!elem) continue; var oldNextSibling = elem.nextSibling; // TODO: this is pretty brittle! var oldLayer = elem.parentNode; layer.appendChild(elem); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer)); } addCommandToHistory(batchCmd); return true; }; // Function: getLayerOpacity // Returns the opacity of the given layer. If the input name is not a layer, null is returned. // // Parameters: // layername - name of the layer on which to get the opacity // // Returns: // The opacity value of the given layer. This will be a value between 0.0 and 1.0, or null // if layername is not a valid layer this.getLayerOpacity = function(layername) { for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][0] == layername) { var g = all_layers[i][1]; var opacity = g.getAttribute("opacity"); if (!opacity) { opacity = "1.0"; } return parseFloat(opacity); } } return null; }; // Function: setLayerOpacity // Sets the opacity of the given layer. If the input name is not a layer, nothing happens. // This is not an undo-able action. NOTE: this function exists solely to apply // a highlighting/de-emphasis effect to a layer, when it is possible for a user to affect // the opacity of a layer, we will need to allow this function to produce an undo-able action. // If opacity is not a value between 0.0 and 1.0, then nothing happens. // // Parameters: // layername - name of the layer on which to set the opacity // opacity - a float value in the range 0.0-1.0 this.setLayerOpacity = function(layername, opacity) { if (opacity < 0.0 || opacity > 1.0) return; for (var i = 0; i < all_layers.length; ++i) { if (all_layers[i][0] == layername) { var g = all_layers[i][1]; g.setAttribute("opacity", opacity); break; } } }; // Function: clear // Clears the current document. This is not an undoable action. this.clear = function() { current_path_pts = []; // clear the svgcontent node var nodes = svgcontent.childNodes; var len = svgcontent.childNodes.length; var i = 0; this.clearSelection(); for(var rep = 0; rep < len; rep++){ if (nodes[i].nodeType == 1) { // element node svgcontent.removeChild(nodes[i]); } else { i++; } } // create empty first layer all_layers = []; canvas.createLayer("Layer 1"); // clear the undo stack resetUndoStack(); // reset the selector manager selectorManager.initGroup(); // reset the rubber band box rubberBox = selectorManager.getRubberBandBox(); call("cleared"); }; // TODO: should this be an 'internal' function? this.clearPath = function(remove) { if(remove && current_mode == "path") { var elem = svgdoc.getElementById(getId()); if(elem) elem.parentNode.removeChild(elem); } removeAllPointGripsFromPath(); current_path_pts = []; current_path_pt = -1; }; // TODO: should this be an 'internal' function? this.getNodePoint = function() { if(current_path_pt != -1) { var pt = getPathPoint(current_path_pt, true); var list = current_path.pathSegList; var segtype; if(list.numberOfItems > current_path_pt+1) { segtype = list.getItem(current_path_pt+1).pathSegType; } else { segtype = false; } return { x: pt[0], y: pt[1], type: segtype } } else { return false; } } this.clonePathNode = function() { var pt = current_path_pt, list = current_path.pathSegList; var next_item = list.getItem(pt+1); // Get point in between nodes if(next_item.pathSegType % 2 == 0) { // even num, so abs var cur_item = list.getItem(pt); var new_x = (next_item.x + cur_item.x) / 2; var new_y = (next_item.y + cur_item.y) / 2; } else { var new_x = next_item.x/2; var new_y = next_item.y/2; } var seg = current_path.createSVGPathSegLinetoAbs(new_x, new_y); list.insertItemBefore(seg, pt+1); // Webkit doesn't do this right. var abs_x = (getPathPoint(pt)[0] + new_x) * current_zoom; var abs_y = (getPathPoint(pt)[1] + new_y) * current_zoom; var last_num = current_path_pts.length/2; // Add new grip addPointGripToPath(abs_x, abs_y, last_num); // Update path_pts current_path_pts.splice(pt*2 + 2, 0, abs_x, abs_y); resetPointGrips(); this.addNodeToSelection(pt+1); // current_path.setAttribute("d", convertToD(current_path.pathSegList)); } this.deletePathNode = function() { var last_pt = current_path_pts.length/2 - 1; var pt = current_path_pt, list = current_path.pathSegList; var cur_item = list.getItem(pt); var next_item = list.getItem(pt+1); if(pt == 0) { var next_x = getPathPoint(1)[0]; var next_y = getPathPoint(1)[1]; // Make the next point be the "M" point replacePathSeg(2, 1, [next_x, next_y]); // Reposition last node var last_item = list.getItem(last_pt); replacePathSeg(4, last_pt, [next_x, next_y]); removeControlPointGrips(last_pt - 1); current_path_pts.splice(last_pt*2, 2, next_x, next_y); current_path_pts.splice(0, 2); } else { current_path_pts.splice(pt*2, 2); } list.removeItem(pt); resetPointGrips(); if(window.opera) { // Opera repaints incorrectly var cp = $(current_path); cp.attr('d',cp.attr('d')); } this.addNodeToSelection(pt); } this.getResolution = function() { // return [svgroot.getAttribute("width"), svgroot.getAttribute("height")]; var vb = svgcontent.getAttribute("viewBox").split(' '); return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom}; }; this.getImageTitle = function() { var childs = svgcontent.childNodes; for (var i=0; i<childs.length; i++) { if(childs[i].nodeName == 'title') { return childs[i].textContent; } } return ''; } this.setImageTitle = function(newtitle) { var childs = svgcontent.childNodes, doc_title = false, old_title = ''; var batchCmd = new BatchCommand("Change Image Title"); for (var i=0; i<childs.length; i++) { if(childs[i].nodeName == 'title') { doc_title = childs[i]; old_title = doc_title.textContent; break; } } if(!doc_title) { doc_title = svgdoc.createElementNS(svgns, "title"); svgcontent.insertBefore(doc_title, svgcontent.firstChild); } if(newtitle.length) { doc_title.textContent = newtitle; } else { // No title given, so element is not necessary doc_title.parentNode.removeChild(doc_title); } batchCmd.addSubCommand(new ChangeElementCommand(doc_title, {'#text': old_title})); addCommandToHistory(batchCmd); } this.setResolution = function(x, y) { var res = canvas.getResolution(); var w = res.w, h = res.h; var batchCmd; if(x == 'fit') { canvas.clearSelection(); // Get bounding box var bbox = canvas.getStrokedBBox(); if(bbox) { batchCmd = new BatchCommand("Fit Canvas to Content"); var visEls = canvas.getVisibleElements(); $.each(visEls, function(i, item) { var sel_bb = item.getBBox(); // TODO: we are not using the second argument here anymore, what to do? var cmd = recalculateDimensions(item, { x: sel_bb.x - bbox.x, y: sel_bb.y - bbox.y, width: sel_bb.width, height: sel_bb.height }); batchCmd.addSubCommand(cmd); }); x = Math.round(bbox.width); y = Math.round(bbox.height); } else { return false; } } x *= current_zoom; y *= current_zoom; if (x != w || y != h) { var handle = svgroot.suspendRedraw(1000); if(!batchCmd) { batchCmd = new BatchCommand("Change Image Dimensions"); } svgroot.setAttribute('width', x); svgroot.setAttribute('height', y); batchCmd.addSubCommand(new ChangeElementCommand(svgroot, {"width":w, "height":h})); svgcontent.setAttribute("viewBox", ["0 0", x/current_zoom, y/current_zoom].join(' ')); batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"viewBox": ["0 0", w, h].join(' ')})); addCommandToHistory(batchCmd); svgroot.unsuspendRedraw(handle); call("changed", [svgcontent]); } return true; }; this.setBBoxZoom = function(val, editor_w, editor_h) { var spacer = .85; var bb; var calcZoom = function(bb) { var w_zoom = Math.round((editor_w / bb.width)*100 * spacer)/100; var h_zoom = Math.round((editor_h / bb.height)*100 * spacer)/100; var zoomlevel = Math.min(w_zoom,h_zoom); canvas.setZoom(zoomlevel); return {'zoom': zoomlevel, 'bbox': bb}; } if(typeof val == 'object') { bb = val; if(bb.width == 0 || bb.height == 0) { var newzoom = bb.zoom?bb.zoom:current_zoom * bb.factor; canvas.setZoom(newzoom); return {'zoom': current_zoom, 'bbox': bb}; } return calcZoom(bb); } switch (val) { case 'selection': if(!selectedElements[0]) return; var sel_elems = $.map(selectedElements, function(n){ if(n) return n; }); bb = canvas.getStrokedBBox(sel_elems); break; case 'canvas': var res = canvas.getResolution(); spacer = .95; bb = {width:res.w, height:res.h ,x:0, y:0}; break; case 'content': bb = canvas.getStrokedBBox(); break; case 'layer': bb = canvas.getStrokedBBox(canvas.getVisibleElements(current_layer)); break; default: return; } return calcZoom(bb); } this.setZoom = function(zoomlevel) { var res = canvas.getResolution(); svgroot.setAttribute("width", res.w * zoomlevel); svgroot.setAttribute("height", res.h * zoomlevel); current_zoom = zoomlevel; $.each(selectedElements, function(i, elem) { if(!elem) return; selectorManager.requestSelector(elem).resize(); }); if(current_mode == "pathedit") { resetPointGrips(); } } this.getMode = function() { return current_mode; }; this.setMode = function(name) { // toss out half-drawn path if (current_mode == "path" && current_path_pts.length > 0) { var elem = svgdoc.getElementById(getId()); elem.parentNode.removeChild(elem); canvas.clearPath(); canvas.clearSelection(); started = false; } else if (current_mode == "pathedit") { canvas.clearPath(); } cur_properties = (selectedElements[0] && selectedElements[0].nodeName == 'text') ? cur_text : cur_shape; current_mode = name; }; this.getStrokeColor = function() { return cur_properties.stroke; }; this.setStrokeColor = function(val,preventUndo) { cur_shape.stroke = val; cur_properties.stroke_paint = {type:"solidColor"}; if (!preventUndo) this.changeSelectedAttribute("stroke", val); else this.changeSelectedAttributeNoUndo("stroke", val); }; this.getFillColor = function() { return cur_properties.fill; }; this.setFillColor = function(val,preventUndo) { cur_properties.fill = val; cur_properties.fill_paint = {type:"solidColor"}; // take out any path/line elements when setting fill var elems = []; var i = selectedElements.length; while(i--) { var elem = selectedElements[i]; if (elem && elem.tagName != "polyline" && elem.tagName != "line") { elems.push(elem); } } if (elems.length > 0) { if (!preventUndo) this.changeSelectedAttribute("fill", val, elems); else this.changeSelectedAttributeNoUndo("fill", val, elems); } }; var findDefs = function() { var defs = svgcontent.getElementsByTagNameNS(svgns, "defs"); if (defs.length > 0) { defs = defs[0]; } else { // first child is a comment, so call nextSibling defs = svgcontent.insertBefore( svgdoc.createElementNS(svgns, "defs" ), svgcontent.firstChild.nextSibling); } return defs; }; var addGradient = function() { $.each(['stroke','fill'],function(i,type) { if(!cur_properties[type + '_paint'] || cur_properties[type + '_paint'].type == "solidColor") return; var grad = canvas[type + 'Grad']; // find out if there is a duplicate gradient already in the defs var duplicate_grad = findDuplicateGradient(grad); var defs = findDefs(); // no duplicate found, so import gradient into defs if (!duplicate_grad) { var orig_grad = grad; grad = defs.appendChild( svgdoc.importNode(grad, true) ); canvas.fixOperaXML(grad, orig_grad); // get next id and set it on the grad grad.id = getNextId(); } else { // use existing gradient grad = duplicate_grad; } var functype = type=='fill'?'Fill':'Stroke'; canvas['set'+ functype +'Color']("url(#" + grad.id + ")"); }); } var findDuplicateGradient = function(grad) { var defs = findDefs(); var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient"); var i = existing_grads.length; while (i--) { var og = existing_grads.item(i); if (grad.getAttribute('x1') != og.getAttribute('x1') || grad.getAttribute('y1') != og.getAttribute('y1') || grad.getAttribute('x2') != og.getAttribute('x2') || grad.getAttribute('y2') != og.getAttribute('y2')) { continue; } // else could be a duplicate, iterate through stops var stops = grad.getElementsByTagNameNS(svgns, "stop"); var ostops = og.getElementsByTagNameNS(svgns, "stop"); if (stops.length != ostops.length) { continue; } var j = stops.length; while(j--) { var stop = stops.item(j); var ostop = ostops.item(j); if (stop.getAttribute('offset') != ostop.getAttribute('offset') || stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') || stop.getAttribute('stop-color') != ostop.getAttribute('stop-color')) { break; } } if (j == -1) { return og; } } // for each gradient in defs return null; }; // Group: Fill and Stroke this.setStrokePaint = function(p, addGrad) { // make a copy var p = new $.jGraduate.Paint(p); this.setStrokeOpacity(p.alpha/100); // now set the current paint object cur_properties.stroke_paint = p; if (p.type == "solidColor") { this.setStrokeColor("#"+p.solidColor); } else if(p.type == "linearGradient") { canvas.strokeGrad = p.linearGradient; if(addGrad) addGradient(); } else { // console.log("none!"); } }; this.setFillPaint = function(p, addGrad) { // make a copy var p = new $.jGraduate.Paint(p); this.setFillOpacity(p.alpha/100, true); // now set the current paint object cur_properties.fill_paint = p; if (p.type == "solidColor") { this.setFillColor("#"+p.solidColor); } else if(p.type == "linearGradient") { canvas.fillGrad = p.linearGradient; if(addGrad) addGradient(); } else { // console.log("none!"); } }; this.getStrokeWidth = function() { return cur_properties.stroke_width; }; // When attempting to set a line's width to 0, change it to 1 instead this.setStrokeWidth = function(val) { if(val == 0 && $.inArray(current_mode, ['line', 'path']) != -1) { canvas.setStrokeWidth(1); return; } cur_properties.stroke_width = val; this.changeSelectedAttribute("stroke-width", val); }; this.getStrokeStyle = function() { return cur_shape.stroke_style; }; this.setStrokeStyle = function(val) { cur_shape.stroke_style = val; this.changeSelectedAttribute("stroke-dasharray", val); }; this.getOpacity = function() { return cur_shape.opacity; }; this.setOpacity = function(val) { cur_shape.opacity = val; this.changeSelectedAttribute("opacity", val); }; this.getFillOpacity = function() { return cur_shape.fill_opacity; }; this.setFillOpacity = function(val, preventUndo) { cur_shape.fill_opacity = val; if (!preventUndo) this.changeSelectedAttribute("fill-opacity", val); else this.changeSelectedAttributeNoUndo("fill-opacity", val); }; this.getStrokeOpacity = function() { return cur_shape.stroke_opacity; }; this.setStrokeOpacity = function(val, preventUndo) { cur_shape.stroke_opacity = val; if (!preventUndo) this.changeSelectedAttribute("stroke-opacity", val); else this.changeSelectedAttributeNoUndo("stroke-opacity", val); }; // returns an object that behaves like a SVGTransformList this.getTransformList = function(elem) { if (isWebkit) { var t = svgTransformLists[elem.id]; if (!t) { svgTransformLists[elem.id] = new SVGEditTransformList(elem); t = svgTransformLists[elem.id]; } return t; } else if (elem.transform) { return elem.transform.baseVal; } return null; }; this.getBBox = function(elem) { var selected = elem || selectedElements[0]; if (elem.nodeType != 1) return null; var ret = null; if(elem.nodeName == 'text' && selected.textContent == '') { selected.textContent = 'a'; // Some character needed for the selector to use. ret = selected.getBBox(); selected.textContent = ''; } else { try { ret = selected.getBBox(); } catch(e) { ret = null; } } // get the bounding box from the DOM (which is in that element's coordinate system) return ret; }; // TODO: do we need to sum up all rotation angles? this.getRotationAngle = function(elem) { var selected = elem || selectedElements[0]; // find the rotation transform (if any) and set it var tlist = canvas.getTransformList(selected); var t = tlist.numberOfItems; while (t--) { var xform = tlist.getItem(t); if (xform.type == 4) { return xform.angle; } } return 0; }; this.setRotationAngle = function(val,preventUndo) { var elem = selectedElements[0]; // we use the actual element's bbox (not the calculated one) since the // calculated bbox's center can change depending on the angle var bbox = elem.getBBox(); var cx = round(bbox.x+bbox.width/2), cy = round(bbox.y+bbox.height/2); var tlist = canvas.getTransformList(elem); var rotIndex = 0; // find the index of the rotation transform var n = tlist.numberOfItems; while (n--) { var xform = tlist.getItem(n); if (xform.type == 4) { rotIndex = n; tlist.removeItem(n); break; } } // if we are not rotated yet, insert a dummy xform var m = elem.getCTM(); var center = transformPoint(cx,cy,m); var newrot = svgroot.createSVGTransform(); newrot.setRotate(val, center.x, center.y); tlist.insertItemBefore(newrot, rotIndex); // TODO: remove this seperate chunk of code where we replace the rotation transform // because calling setRotate() above changes the live transform in the list if (preventUndo) { // we don't need to undo, just update the transform list // Opera Bug: for whatever reason, sometimes Opera doesn't let you // replace the 0th transform (perhaps if it's an identity matrix?) try { tlist.replaceItem(newrot, rotIndex); } catch(e) { tlist.insertItemBefore(newrot,rotIndex); } } else { // FIXME: we need to do it, then undo it, then redo it so it can be undo-able! :) // TODO: figure out how to make changes to transform list undo-able cross-browser var oldTransform = elem.getAttribute("transform"); tlist.replaceItem(newrot, rotIndex); var newTransform = elem.getAttribute("transform"); elem.setAttribute("transform", oldTransform); this.changeSelectedAttribute("transform",newTransform,selectedElements); } var pointGripContainer = document.getElementById("pathpointgrip_container"); if(elem.nodeName == "path" && pointGripContainer) { setPointContainerTransform(elem.getAttribute("transform")); } var selector = selectorManager.requestSelector(selectedElements[0]); selector.resize(); selector.updateGripCursors(val); }; this.each = function(cb) { $(svgroot).children().each(cb); }; this.bind = function(event, f) { var old = events[event]; events[event] = f; return old; }; this.setIdPrefix = function(p) { idprefix = p; }; this.getBold = function() { // should only have one element selected var selected = selectedElements[0]; if (selected != null && selected.tagName == "text" && selectedElements[1] == null) { return (selected.getAttribute("font-weight") == "bold"); } return false; }; this.setBold = function(b) { var selected = selectedElements[0]; if (selected != null && selected.tagName == "text" && selectedElements[1] == null) { this.changeSelectedAttribute("font-weight", b ? "bold" : "normal"); } }; this.getItalic = function() { var selected = selectedElements[0]; if (selected != null && selected.tagName == "text" && selectedElements[1] == null) { return (selected.getAttribute("font-style") == "italic"); } return false; }; this.setItalic = function(i) { var selected = selectedElements[0]; if (selected != null && selected.tagName == "text" && selectedElements[1] == null) { this.changeSelectedAttribute("font-style", i ? "italic" : "normal"); } }; this.getFontFamily = function() { return cur_text.font_family; }; this.setFontFamily = function(val) { cur_text.font_family = val; this.changeSelectedAttribute("font-family", val); }; this.getFontSize = function() { return cur_text.font_size; }; this.setFontSize = function(val) { cur_text.font_size = val; this.changeSelectedAttribute("font-size", val); }; this.getText = function() { var selected = selectedElements[0]; if (selected == null) { return ""; } return selected.textContent; }; this.setTextContent = function(val) { this.changeSelectedAttribute("#text", val); }; this.setImageURL = function(val) { // Below is some code to fetch the data: URL representation // of local image files. It is commented out until we figure out // a way of introducing this as an option into the UI. Also, it // does not work in Firefox at all :( /* // load in the image and once it's loaded, get the dimensions var img = document.createElement("img"); var svgCanvas = this; img.addEventListener("load", function(evt) { if (this.width > 0 && this.height > 0) { // create a canvas the same size as the raster image var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; // load the raster image into the canvas canvas.getContext("2d").drawImage(img,0,0); // retrieve the data: URL try { var dataurl = canvas.toDataURL(); svgCanvas.changeSelectedAttribute("#href", dataurl); } catch(e) { // if we get an exception, just set the href to the URL svgCanvas.changeSelectedAttribute("#href", val); } } }, false); img.setAttribute("src", val); */ svgCanvas.changeSelectedAttribute("#href", val); }; this.setRectRadius = function(val) { var selected = selectedElements[0]; if (selected != null && selected.tagName == "rect") { var r = selected.getAttribute("rx"); if (r != val) { selected.setAttribute("rx", val); selected.setAttribute("ry", val); addCommandToHistory(new ChangeElementCommand(selected, {"rx":r, "ry":r}, "Radius")); call("changed", [selected]); } } }; this.setSegType = function(new_type) { var grip = $('#pathpointgrip_' + current_path_pt); var old_d = current_path.getAttribute('d'); var index = grip[0].id.split('_')[1] - 0; var last_index = current_path_pts.length/2 - 1; var is_closed = current_path.getAttribute('d').toLowerCase().indexOf('z') != -1; if(!is_closed && index == last_index) { return; // Last point of unclosed path should do nothing } else if(index >= last_index && is_closed) { index = 0; } var next_index = index+1; var cur_x = getPathPoint(index)[0]; var cur_y = getPathPoint(index)[1]; var next_x = getPathPoint(next_index)[0]; var next_y = getPathPoint(next_index)[1]; if(!new_type) { // double-click, so just toggle var batchCmd = new BatchCommand("Toggle Path Segment Type"); // Toggle segment to curve/straight line var old_type = current_path.pathSegList.getItem(index+1).pathSegType; new_type = (old_type == 6) ? 4 : 6; } else { new_type -= 0; var batchCmd = new BatchCommand("Change Path Segment Type"); } var points; var bb = current_path.getBBox(); switch ( new_type ) { case 6: var diff_x = next_x - cur_x; var diff_y = next_y - cur_y; var ct1_x = cur_x + (diff_y/2); var ct1_y = cur_y - (diff_x/2); var ct2_x = next_x + (diff_y/2); var ct2_y = next_y - (diff_x/2); points = [next_x,next_y, ct1_x,ct1_y, ct2_x,ct2_y]; break; case 4: points = [next_x,next_y]; removeControlPointGrips(index); break; } replacePathSeg(new_type, next_index, points); addAllPointGripsToPath(); recalculateDimensions(current_path);//, current_path.getBBox()); updateSegLine(true); batchCmd.addSubCommand(new ChangeElementCommand(current_path, {d: old_d})); addCommandToHistory(batchCmd); call("changed", [current_path]); } this.quickClone = function(elem) { // Hack for Firefox bugs where text element features aren't updated if(navigator.userAgent.indexOf('Gecko/') == -1) return elem; var clone = elem.cloneNode(true) elem.parentNode.insertBefore(clone, elem); elem.parentNode.removeChild(elem); selectorManager.releaseSelector(elem); selectedElements[0] = clone; selectorManager.requestSelector(clone).showGrips(true); return clone; } // New functions for refactoring of Undo/Redo // this is the stack that stores the original values, the elements and // the attribute name for begin/finish var undoChangeStackPointer = -1; var undoableChangeStack = []; // This function tells the canvas to remember the old values of the // attrName attribute for each element sent in. The elements and values // are stored on a stack, so the next call to finishUndoableChange() will // pop the elements and old values off the stack, gets the current values // from the DOM and uses all of these to construct the undo-able command. this.beginUndoableChange = function(attrName, elems) { var p = ++undoChangeStackPointer; var i = elems.length; var oldValues = new Array(i), elements = new Array(i); while (i--) { var elem = elems[i]; if (elem == null) continue; elements[i] = elem; oldValues[i] = elem.getAttribute(attrName); } undoableChangeStack[p] = {'attrName': attrName, 'oldValues': oldValues, 'elements': elements}; }; // This function makes the changes to the elements this.changeSelectedAttributeNoUndo = function(attr, newValue, elems) { var handle = svgroot.suspendRedraw(1000); if(current_mode == 'pathedit') { // Editing node var num = (attr == 'x')?0:1; var old_path_pts = $.map(current_path_pts, function(n){return n/current_zoom;}); current_path_pts[current_path_pt*2 + num] = newValue-0; current_path_pt_drag = current_path_pt; updatePath(current_path_pts[current_path_pt*2], current_path_pts[current_path_pt*2 + 1], old_path_pts); } var elems = elems || selectedElements; var i = elems.length; while (i--) { var elem = elems[i]; if (elem == null) continue; // only allow the transform/opacity attribute to change on <g> elements, slightly hacky if (elem.tagName == "g" && (attr != "transform" && attr != "opacity")) continue; var oldval = attr == "#text" ? elem.textContent : elem.getAttribute(attr); if (oldval == null) oldval = ""; if (oldval !== newValue) { if (attr == "#text") { var old_w = elem.getBBox().width; elem.textContent = newValue; elem = canvas.quickClone(elem); // Hoped to solve the issue of moving text with text-anchor="start", // but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd // var box=canvas.getBBox(elem), left=box.x, top=box.y, width=box.width, // height=box.height, dx = width - old_w, dy=0; // var angle = canvas.getRotationAngle(elem); // if (angle) { // var r = Math.sqrt( dx*dx + dy*dy ); // var theta = Math.atan2(dy,dx) - angle * Math.PI / 180.0; // dx = r * Math.cos(theta); // dy = r * Math.sin(theta); // // elem.setAttribute('x', elem.getAttribute('x')-dx); // elem.setAttribute('y', elem.getAttribute('y')-dy); // } } else if (attr == "#href") { elem.setAttributeNS(xlinkns, "href", newValue); } else elem.setAttribute(attr, newValue); selectedBBoxes[i] = this.getBBox(elem); // Use the Firefox quickClone hack for text elements with gradients or // where other text attributes are changed. if(elem.nodeName == 'text') { if((newValue+'').indexOf('url') == 0 || $.inArray(attr, ['font-size','font-family','x','y']) != -1) { elem = canvas.quickClone(elem); } } // Timeout needed for Opera & Firefox setTimeout(function() { selectorManager.requestSelector(elem).resize();//elem.getBBox()); // TODO: remove box arg },0); // if this element was rotated, and we changed the position of this element // we need to update the rotational transform attribute var angle = canvas.getRotationAngle(elem); if (angle && attr != "transform") { var cx = round(selectedBBoxes[i].x + selectedBBoxes[i].width/2), cy = round(selectedBBoxes[i].y + selectedBBoxes[i].height/2); var rotate = ["rotate(", angle, " ", cx, ",", cy, ")"].join(''); if (rotate != elem.getAttribute("transform")) { elem.setAttribute("transform", rotate); } } } // if oldValue != newValue } // for each elem svgroot.unsuspendRedraw(handle); }; // This function returns a BatchCommand object which summarizes the // change since beginUndoableChange was called. The command can then // be added to the command history this.finishUndoableChange = function() { var p = undoChangeStackPointer--; var changeset = undoableChangeStack[p]; var i = changeset['elements'].length; var attrName = changeset['attrName']; var batchCmd = new BatchCommand("Change " + attrName); while (i--) { var elem = changeset['elements'][i]; if (elem == null) continue; var changes = {}; changes[attrName] = changeset['oldValues'][i]; if (changes[attrName] != elem.getAttribute(attrName)) { batchCmd.addSubCommand(new ChangeElementCommand(elem, changes, attrName)); } } undoableChangeStack[p] = null; return batchCmd; }; // If you want to change all selectedElements, ignore the elems argument. // If you want to change only a subset of selectedElements, then send the // subset to this function in the elems argument. this.changeSelectedAttribute = function(attr, val, elems) { var elems = elems || selectedElements; canvas.beginUndoableChange(attr, elems); var i = elems.length; canvas.changeSelectedAttributeNoUndo(attr, val, elems); var batchCmd = canvas.finishUndoableChange(); if (!batchCmd.isEmpty()) { addCommandToHistory(batchCmd); } }; $(container).mouseup(mouseUp); $(container).mousedown(mouseDown); $(container).mousemove(mouseMove); this.deleteSelectedElements = function() { var batchCmd = new BatchCommand("Delete Elements"); var len = selectedElements.length; var selectedCopy = []; //selectedElements is being deleted for (var i = 0; i < len; ++i) { var selected = selectedElements[i]; if (selected == null) break; var parent = selected.parentNode; var t = selected; // this will unselect the element and remove the selectedOutline selectorManager.releaseSelector(t); var elem = parent.removeChild(t); selectedCopy.push(selected) //for the copy selectedElements[i] = null; batchCmd.addSubCommand(new RemoveElementCommand(elem, parent)); } if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); call("changed", selectedCopy); canvas.clearSelection(); }; this.groupSelectedElements = function() { var batchCmd = new BatchCommand("Group Elements"); // create and insert the group element var g = addSvgElementFromJson({ "element": "g", "attr": { "id": getNextId() } }); batchCmd.addSubCommand(new InsertElementCommand(g)); // now move all children into the group var i = selectedElements.length; while (i--) { var elem = selectedElements[i]; if (elem == null) continue; var oldNextSibling = elem.nextSibling; var oldParent = elem.parentNode; g.appendChild(elem); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); } if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); // ensure selectors are at bottom and update selection selectorManager.update(); canvas.clearSelection(); canvas.addToSelection([g], true); }; // TODO: when transferring group's rotational transform to the children, must deal // with children who are already rotated within the group (Issue 204) this.ungroupSelectedElement = function() { var g = selectedElements[0]; if (g.tagName == "g") { var batchCmd = new BatchCommand("Ungroup Elements"); var parent = g.parentNode; var anchor = g.previousSibling; var children = new Array(g.childNodes.length); var xform = g.getAttribute("transform"); var i = 0; var gbox = g.getBBox(), gx = gbox.x + gbox.width/2, gy = gbox.y + gbox.height/2; var gangle = canvas.getRotationAngle(g) * Math.PI / 180.0; while (g.firstChild) { var elem = g.firstChild; var oldNextSibling = elem.nextSibling; var oldParent = elem.parentNode; children[i++] = elem = parent.insertBefore(elem, anchor); batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldParent)); if (xform) { var childBox = elem.getBBox(); var cx = childBox.x + childBox.width/2, cy = childBox.y + childBox.height/2, dx = cx - gx, dy = cy - gy, r = Math.sqrt(dx*dx + dy*dy); var tangle = gangle + Math.atan2(dy,dx); var newcx = r * Math.cos(tangle) + gx, newcy = r * Math.sin(tangle) + gy; childBox.x += (newcx - cx); childBox.y += (newcy - cy); // now we add the angle that the element was rotated by // if it's non-zero, we need to set the new transform // otherwise, we clear it var angle = gangle + canvas.getRotationAngle(elem) * Math.PI / 180.0; var changes = {}; changes["transform"] = elem.getAttribute("transform"); if (angle != 0) { elem.setAttribute("transform", "rotate(" + (angle*180.0)/Math.PI + " " + cx + "," + cy + ")"); } else { elem.setAttribute("transform", ""); } batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); batchCmd.addSubCommand(recalculateDimensions(elem));//, childBox)); } } // remove transform and make it undo-able if (xform) { var changes = {}; changes["transform"] = xform; g.setAttribute("transform", ""); g.removeAttribute("transform"); batchCmd.addSubCommand(new ChangeElementCommand(g, changes)); } // remove the group from the selection canvas.clearSelection(); // delete the group element (but make undo-able) g = parent.removeChild(g); batchCmd.addSubCommand(new RemoveElementCommand(g, parent)); if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd); // ensure selectors are at bottom and update selection selectorManager.update(); canvas.addToSelection(children); } }; this.moveToTopSelectedElement = function() { var selected = selectedElements[0]; if (selected != null) { var t = selected; var oldParent = t.parentNode; var oldNextSibling = t.nextSibling; if (oldNextSibling == selectorManager.selectorParentGroup) oldNextSibling = null; t = t.parentNode.appendChild(t); addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "top")); } }; this.moveToBottomSelectedElement = function() { var selected = selectedElements[0]; if (selected != null) { var t = selected; var oldParent = t.parentNode; var oldNextSibling = t.nextSibling; if (oldNextSibling == selectorManager.selectorParentGroup) oldNextSibling = null; // first child is a comment, so call nextSibling var firstChild = t.parentNode.firstChild.nextSibling; if (firstChild.tagName == 'defs') { firstChild = firstChild.nextSibling; } t = t.parentNode.insertBefore(t, firstChild); addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, "bottom")); } }; this.moveSelectedElements = function(dx,dy,undoable) { // if undoable is not sent, default to true // if single values, scale them to the zoom if (dx.constructor != Array) { dx /= current_zoom; dy /= current_zoom; } var undoable = undoable || true; var batchCmd = new BatchCommand("position"); var i = selectedElements.length; while (i--) { var selected = selectedElements[i]; if (selected != null) { selectedBBoxes[i] = this.getBBox(selected); var xform = svgroot.createSVGTransform(); var tlist = canvas.getTransformList(selected); // dx and dy could be arrays if (dx.constructor == Array) { selectedBBoxes[i].x += dx[i]; selectedBBoxes[i].y += dy[i]; xform.setTranslate(dx[i],dy[i]); } else { selectedBBoxes[i].x += dx; selectedBBoxes[i].y += dy; xform.setTranslate(dx,dy); } tlist.appendItem(xform); var cmd = recalculateDimensions(selected);//,selectedBBoxes[i]); if (cmd) { batchCmd.addSubCommand(cmd); } selectorManager.requestSelector(selected).resize();//selectedBBoxes[i]); } } if (!batchCmd.isEmpty()) { if (undoable) addCommandToHistory(batchCmd); call("changed", selectedElements); } }; this.getStrokedBBox = function(elems) { if(!elems) elems = canvas.getVisibleElements(); if(!elems.length) return false; // Make sure the expected BBox is returned if the element is a group var getCheckedBBox = function(elem) { if(elem.tagName == 'g') { return canvas.getStrokedBBox(elem.childNodes); } else { try { var bb = elem.getBBox(); var angle = canvas.getRotationAngle(elem) * Math.PI / 180.0; if (angle) { var rminx = Number.MAX_VALUE, rminy = Number.MAX_VALUE, rmaxx = Number.MIN_VALUE, rmaxy = Number.MIN_VALUE; var cx = round(bb.x + bb.width/2), cy = round(bb.y + bb.height/2); var pts = [ [bb.x - cx, bb.y - cy], [bb.x + bb.width - cx, bb.y - cy], [bb.x + bb.width - cx, bb.y + bb.height - cy], [bb.x - cx, bb.y + bb.height - cy] ]; var j = 4; while (j--) { var x = pts[j][0], y = pts[j][1], r = Math.sqrt( x*x + y*y ); var theta = Math.atan2(y,x) + angle; x = round(r * Math.cos(theta) + cx); y = round(r * Math.sin(theta) + cy); // now set the bbox for the shape after it's been rotated if (x < rminx) rminx = x; if (y < rminy) rminy = y; if (x > rmaxx) rmaxx = x; if (y > rmaxy) rmaxy = y; } bb.x = rminx; bb.y = rminy; bb.width = rmaxx - rminx; bb.height = rmaxy - rminy; } return bb; } catch(e) { return null; } } } var full_bb; $.each(elems, function() { if(full_bb) return; full_bb = getCheckedBBox(this); }); if(elems.length == 1) return full_bb; var max_x = full_bb.x + full_bb.width; var max_y = full_bb.y + full_bb.height; var min_x = full_bb.x; var min_y = full_bb.y; var getOffset = function(elem) { var sw = elem.getAttribute("stroke-width"); var offset = 0; if (elem.getAttribute("stroke") != "none" && !isNaN(sw)) { offset += sw/2; } return offset; } $.each(elems, function(i, elem) { var cur_bb = getCheckedBBox(elem); if(!cur_bb) return; var offset = getOffset(elem); min_x = Math.min(min_x, cur_bb.x - offset); min_y = Math.min(min_y, cur_bb.y - offset); }); full_bb.x = min_x; full_bb.y = min_y; $.each(elems, function(i, elem) { var cur_bb = getCheckedBBox(elem); if(!cur_bb) return; var offset = getOffset(elem); max_x = Math.max(max_x, cur_bb.x + cur_bb.width + offset); max_y = Math.max(max_y, cur_bb.y + cur_bb.height + offset); }); full_bb.width = max_x - min_x; full_bb.height = max_y - min_y; return full_bb; } this.getVisibleElements = function(parent, includeBBox) { if(!parent) parent = $(svgcontent).children(); // Prevent layers from being included var contentElems = []; $(parent).children().each(function(i, elem) { try { var box = elem.getBBox(); if (box) { var item = includeBBox?{'elem':elem, 'bbox':canvas.getStrokedBBox([elem])}:elem; contentElems.push(item); } } catch(e) {} }); return contentElems.reverse(); } this.cycleElement = function(next) { var cur_elem = selectedElements[0]; var elem = false; var all_elems = this.getVisibleElements(current_layer); if (cur_elem == null) { var num = next?all_elems.length-1:0; elem = all_elems[num]; } else { var i = all_elems.length; while(i--) { if(all_elems[i] == cur_elem) { var num = next?i-1:i+1; if(num >= all_elems.length) { num = 0; } else if(num < 0) { num = all_elems.length-1; } elem = all_elems[num]; break; } } } canvas.clearSelection(); canvas.addToSelection([elem], true); call("selected", selectedElements); } var resetUndoStack = function() { undoStack = []; undoStackPointer = 0; }; this.getUndoStackSize = function() { return undoStackPointer; }; this.getRedoStackSize = function() { return undoStack.length - undoStackPointer; }; this.getNextUndoCommandText = function() { if (undoStackPointer > 0) return undoStack[undoStackPointer-1].text; return ""; }; this.getNextRedoCommandText = function() { if (undoStackPointer < undoStack.length) return undoStack[undoStackPointer].text; return ""; }; this.undo = function() { if (undoStackPointer > 0) { this.clearSelection(); removeAllPointGripsFromPath(); var cmd = undoStack[--undoStackPointer]; cmd.unapply(); call("changed", cmd.elements()); } }; this.redo = function() { if (undoStackPointer < undoStack.length && undoStack.length > 0) { this.clearSelection(); var cmd = undoStack[undoStackPointer++]; cmd.apply(); call("changed", cmd.elements()); } }; // this function no longer uses cloneNode because we need to update the id // of every copied element (even the descendants) // we also do it manually because Opera/Win/non-EN puts , instead of . var copyElem = function(el) { // manually create a copy of the element var new_el = document.createElementNS(svgns, el.nodeName); $.each(el.attributes, function(i, attr) { var ns = attr.nodeName == 'href' ? xlinkns : attr.prefix == "xml" ? xmlns : null; new_el.setAttributeNS(ns, attr.nodeName, attr.nodeValue); }); // set the copied element's new id new_el.removeAttribute("id"); new_el.id = getNextId(); // manually increment obj_num because our cloned elements are not in the DOM yet obj_num++; // now create copies of all children $.each(el.childNodes, function(i, child) { switch(child.nodeType) { case 1: // element node new_el.appendChild(copyElem(child)); break; case 3: // text node new_el.textContent = child.nodeValue; break; default: break; } }); return new_el; }; // this creates deep DOM copies (clones) of all selected elements this.cloneSelectedElements = function() { var batchCmd = new BatchCommand("Clone Elements"); // find all the elements selected (stop at first null) var len = selectedElements.length; for (var i = 0; i < len; ++i) { var elem = selectedElements[i]; if (elem == null) break; } // use slice to quickly get the subset of elements we need var copiedElements = selectedElements.slice(0,i); this.clearSelection(); // note that we loop in the reverse way because of the way elements are added // to the selectedElements array (top-first) var i = copiedElements.length; while (i--) { // clone each element and replace it within copiedElements var elem = copiedElements[i] = copyElem(copiedElements[i]); current_layer.appendChild(elem); batchCmd.addSubCommand(new InsertElementCommand(elem)); } if (!batchCmd.isEmpty()) { this.addToSelection(copiedElements.reverse()); // Need to reverse for correct selection-adding this.moveSelectedElements(20,20,false); addCommandToHistory(batchCmd); call("selected", selectedElements); } }; // aligns selected elements (type is a char - see switch below for explanation) // relative_to can be "selected", "largest", "smallest", "page" this.alignSelectedElements = function(type, relative_to) { var bboxes = [], angles = []; var minx = Number.MAX_VALUE, maxx = Number.MIN_VALUE, miny = Number.MAX_VALUE, maxy = Number.MIN_VALUE; var curwidth = Number.MIN_VALUE, curheight = Number.MIN_VALUE; var len = selectedElements.length; if (!len) return; for (var i = 0; i < len; ++i) { if (selectedElements[i] == null) break; var elem = selectedElements[i]; bboxes[i] = canvas.getStrokedBBox([elem]); // now bbox is axis-aligned and handles rotation switch (relative_to) { case 'smallest': if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth > bboxes[i].width) || (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight > bboxes[i].height) ) { minx = bboxes[i].x; miny = bboxes[i].y; maxx = bboxes[i].x + bboxes[i].width; maxy = bboxes[i].y + bboxes[i].height; curwidth = bboxes[i].width; curheight = bboxes[i].height; } break; case 'largest': if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth < bboxes[i].width) || (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight < bboxes[i].height) ) { minx = bboxes[i].x; miny = bboxes[i].y; maxx = bboxes[i].x + bboxes[i].width; maxy = bboxes[i].y + bboxes[i].height; curwidth = bboxes[i].width; curheight = bboxes[i].height; } break; default: // 'selected' if (bboxes[i].x < minx) minx = bboxes[i].x; if (bboxes[i].y < miny) miny = bboxes[i].y; if (bboxes[i].x + bboxes[i].width > maxx) maxx = bboxes[i].x + bboxes[i].width; if (bboxes[i].y + bboxes[i].height > maxy) maxy = bboxes[i].y + bboxes[i].height; break; } } // loop for each element to find the bbox and adjust min/max if (relative_to == 'page') { minx = 0; miny = 0; maxx = svgroot.getAttribute('width'); maxy = svgroot.getAttribute('height'); } var dx = new Array(len); var dy = new Array(len); for (var i = 0; i < len; ++i) { if (selectedElements[i] == null) break; var elem = selectedElements[i]; var bbox = bboxes[i]; dx[i] = 0; dy[i] = 0; switch (type) { case 'l': // left (horizontal) dx[i] = minx - bbox.x; break; case 'c': // center (horizontal) dx[i] = (minx+maxx)/2 - (bbox.x + bbox.width/2); break; case 'r': // right (horizontal) dx[i] = maxx - (bbox.x + bbox.width); break; case 't': // top (vertical) dy[i] = miny - bbox.y; break; case 'm': // middle (vertical) dy[i] = (miny+maxy)/2 - (bbox.y + bbox.height/2); break; case 'b': // bottom (vertical) dy[i] = maxy - (bbox.y + bbox.height); break; } } this.moveSelectedElements(dx,dy); }; this.getZoom = function(){return current_zoom;}; // Function: getVersion // Returns a string which describes the revision number of SvgCanvas. this.getVersion = function() { return "svgcanvas.js ($Rev$)"; }; this.clear(); }; // Static class for various utility functions var Utils = { // This code was written by Tyler Akins and has been placed in the // public domain. It would be nice if you left this header intact. // Base64 code from Tyler Akins -- http://rumkin.com // schiller: Removed string concatenation in favour of Array.join() optimization, // also precalculate the size of the array needed. "_keyStr" : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", "encode64" : function(input) { // base64 strings are 4/3 larger than the original string // input = Utils.encodeUTF8(input); // convert non-ASCII characters input = Utils.convertToXMLReferences(input); if(window.btoa) return window.btoa(input); // Use native if available var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 ); var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0, p = 0; do { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output[p++] = this._keyStr.charAt(enc1); output[p++] = this._keyStr.charAt(enc2); output[p++] = this._keyStr.charAt(enc3); output[p++] = this._keyStr.charAt(enc4); } while (i < input.length); return output.join(''); }, // based on http://phpjs.org/functions/utf8_encode:577 // codedread:does not seem to work with webkit-based browsers on OSX "encodeUTF8": function(input) { //return unescape(encodeURIComponent(input)); //may or may not work var output = ''; for (var n = 0; n < input.length; n++){ var c = input.charCodeAt(n); if (c < 128) { output += input[n]; } else if (c > 127) { if (c < 2048){ output += String.fromCharCode((c >> 6) | 192); } else { output += String.fromCharCode((c >> 12) | 224) + String.fromCharCode((c >> 6) & 63 | 128); } output += String.fromCharCode((c & 63) | 128); } } return output; }, "convertToXMLReferences": function(input) { var output = ''; for (var n = 0; n < input.length; n++){ var c = input.charCodeAt(n); if (c < 128) { output += input[n]; } else if(c > 127) { output += ("&#" + c + ";"); } } return output; }, "rectsIntersect": function(r1, r2) { return r2.x < (r1.x+r1.width) && (r2.x+r2.width) > r1.x && r2.y < (r1.y+r1.height) && (r2.y+r2.height) > r1.y; }, // found this function http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f "text2xml": function(sXML) { // NOTE: I'd like to use jQuery for this, but jQuery makes all tags uppercase //return $(xml)[0]; var out; try{ var dXML = ($.browser.msie)?new ActiveXObject("Microsoft.XMLDOM"):new DOMParser(); dXML.async = false; } catch(e){ throw new Error("XML Parser could not be instantiated"); }; try{ if($.browser.msie) out = (dXML.loadXML(sXML))?dXML:false; else out = dXML.parseFromString(sXML, "text/xml"); } catch(e){ throw new Error("Error parsing XML string"); }; return out; } };