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() { pathActions.clear(); // 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"); }; this.linkControlPoints = function(linkPoints) { pathActions.linkControlPoints(linkPoints); } 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') { // Get bounding box var bbox = canvas.getStrokedBBox(); if(bbox) { batchCmd = new BatchCommand("Fit Canvas to Content"); var visEls = canvas.getVisibleElements(); canvas.addToSelection(visEls); var dx = [], dy = []; $.each(visEls, function(i, item) { dx.push(bbox.x*-1); dy.push(bbox.y*-1); }); var cmd = canvas.moveSelectedElements(dx, dy, true); batchCmd.addSubCommand(cmd); canvas.clearSelection(); 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) { if(!bb) return false; 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(); }); pathActions.zoomChange(); } this.getMode = function() { return current_mode; }; this.setMode = function(name) { pathActions.modeChange(); 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) { // Opera is included here because Opera/Win/Non-EN seems to change // transformlist float vals to use a comma rather than a period. if (isWebkit || isOpera) { var t = svgTransformLists[elem.id]; if (!t) { svgTransformLists[elem.id] = new SVGEditTransformList(elem); svgTransformLists[elem.id]._init(); 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 if (elem.nodeName == 'g' && isOpera) { // deal with an opera bug here // the bbox on a 'g' is not correct if the elements inside have been moved // so we create a new g, add all the children to it, add it to the DOM, get its bbox // then put all the children back on the old g and remove the new g // (this means we make no changes to the DOM, which saves us a lot of headache at // the cost of performance) ret = selected.getBBox(); var newg = document.createElementNS(svgns, "g"); while (selected.firstChild) { newg.appendChild(selected.firstChild); } var i = selected.attributes.length; while(i--) { newg.setAttributeNode(selected.attributes.item(i).cloneNode(true)); } selected.parentNode.appendChild(newg); ret = newg.getBBox(); while (newg.firstChild) { selected.appendChild(newg.firstChild); } selected.parentNode.removeChild(newg); } 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; }; // we get the rotation angle in the tlist this.getRotationAngle = function(elem, to_rad) { var selected = elem || selectedElements[0]; // find the rotation transform (if any) and set it var tlist = canvas.getTransformList(selected); if(!tlist) return 0; // <svg> elements have no tlist var N = tlist.numberOfItems; for (var i = 0; i < N; ++i) { var xform = tlist.getItem(i); if (xform.type == 4) { return to_rad ? xform.angle * Math.PI / 180.0 : xform.angle; } } return 0.0; }; // this should: // - remove any old rotations if present // - prepend a new rotation at the transformed center this.setRotationAngle = function(val,preventUndo) { // ensure val is the proper type val = parseFloat(val); var elem = selectedElements[0]; var oldTransform = elem.getAttribute("transform"); var bbox = canvas.getBBox(elem); var cx = bbox.x+bbox.width/2, cy = bbox.y+bbox.height/2; var tlist = canvas.getTransformList(elem); // only remove the real rotational transform if present (i.e. at index=0) if (tlist.numberOfItems > 0) { var xform = tlist.getItem(0); if (xform.type == 4) { tlist.removeItem(0); } } // find R_nc and insert it if (val != 0) { var center = transformPoint(cx,cy,transformListToTransform(tlist).matrix); var R_nc = svgroot.createSVGTransform(); R_nc.setRotate(val, center.x, center.y); tlist.insertItemBefore(R_nc,0); opera.postError(elem.getAttribute("transform")) } else if (tlist.numberOfItems == 0) { elem.removeAttribute("transform"); } if (!preventUndo) { // we need to 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 newTransform = elem.getAttribute("transform"); elem.setAttribute("transform", oldTransform); this.changeSelectedAttribute("transform",newTransform,selectedElements); } var pointGripContainer = document.getElementById("pathpointgrip_container"); if(elem.nodeName == "path" && pointGripContainer) { pathActions.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) { 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) { pathActions.setSegType(new_type); } var ffClone = 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 pathActions.moveNode(attr, newValue); } var elems = elems || selectedElements; var i = elems.length; while (i--) { var elem = elems[i]; if (elem == null) continue; // Set x,y vals on elements that don't have them if((attr == 'x' || attr == 'y') && $.inArray(elem.tagName, ['g', 'polyline', 'path']) != -1) { var bbox = canvas.getStrokedBBox([elem]); var diff_x = attr == 'x' ? newValue - bbox.x : 0; var diff_y = attr == 'y' ? newValue - bbox.y : 0; canvas.moveSelectedElements(diff_x*current_zoom, diff_y*current_zoom, true); 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 != String(newValue)) { if (attr == "#text") { var old_w = canvas.getBBox(elem).width; elem.textContent = newValue; elem = ffClone(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, true); // if (angle) { // var r = Math.sqrt( dx*dx + dy*dy ); // var theta = Math.atan2(dy,dx) - angle; // 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); if (i==0) selectedBBoxes[i] = this.getBBox(elem); // Use the Firefox ffClone 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 = ffClone(elem); } } // Timeout needed for Opera & Firefox setTimeout(function() { selectorManager.requestSelector(elem).resize(); },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 != 0 && attr != "transform") { var tlist = canvas.getTransformList(elem); var n = tlist.numberOfItems; while (n--) { var xform = tlist.getItem(n); if (xform.type == 4) { // remove old rotate tlist.removeItem(n); var box = canvas.getBBox(elem); var center = transformPoint(box.x+box.width/2, box.y+box.height/2, transformListToTransform(tlist).matrix); var cx = center.x, cy = center.y; var newrot = svgroot.createSVGTransform(); newrot.setRotate(angle, cx, cy); tlist.insertItemBefore(newrot, n); break; } } } } // 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); } }; $(window).mouseup(mouseEvents.up); $(container).mousedown(mouseEvents.down); $(container).mousemove(mouseEvents.move); 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); // update selection canvas.clearSelection(); canvas.addToSelection([g], true); }; 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"); // get consolidated matrix var glist = canvas.getTransformList(g); var m = transformListToTransform(glist).matrix; // TODO: get all fill/stroke properties from the group that we are about to destroy // "fill", "fill-opacity", "fill-rule", "stroke", "stroke-dasharray", "stroke-dashoffset", // "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", // "stroke-width" // and then for each child, if they do not have the attribute (or the value is 'inherit'?) // then set the child's attribute // TODO: get the group's opacity and propagate it down to the children (multiply it // by the child's opacity (or 1.0) var i = 0; var gangle = canvas.getRotationAngle(g); 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)); var chtlist = canvas.getTransformList(elem); if (glist.numberOfItems) { // TODO: if the group's transform is just a rotate, we can always transfer the // rotate() down to the children (collapsing consecutive rotates and factoring // out any translates) if (gangle && glist.numberOfItems == 1) { // [Rg] [Rc] [Mc] // we want [Tr] [Rc2] [Mc] where: // - [Rc2] is at the child's current center but has the // sum of the group and child's rotation angles // - [Tr] is the equivalent translation that this child // undergoes if the group wasn't there // [Tr] = [Rg] [Rc] [Rc2_inv] // get group's rotation matrix (Rg) var rgm = glist.getItem(0).matrix; // get child's rotation matrix (Rc) var rcm = svgroot.createSVGMatrix(); var cangle = canvas.getRotationAngle(elem); if (cangle) { rcm = chtlist.getItem(0).matrix; } // get child's old center of rotation var cbox = canvas.getBBox(elem); var ceqm = transformListToTransform(chtlist).matrix; var coldc = transformPoint(cbox.x+cbox.width/2, cbox.y+cbox.height/2,ceqm); // sum group and child's angles var sangle = gangle + cangle; // get child's rotation at the old center (Rc2_inv) var r2 = svgroot.createSVGTransform(); r2.setRotate(sangle, coldc.x, coldc.y); // calculate equivalent translate var trm = matrixMultiply(rgm, rcm, r2.matrix.inverse()); // set up tlist if (cangle) { chtlist.removeItem(0); } if (sangle) { chtlist.insertItemBefore(r2, 0); } if (trm.e || trm.f) { var tr = svgroot.createSVGTransform(); tr.setTranslate(trm.e, trm.f); chtlist.insertItemBefore(tr, 0); } } else { // more complicated than just a rotate // transfer the group's transform down to each child and then // call recalculateDimensions() var oldxform = elem.getAttribute("transform"); var changes = {}; changes["transform"] = oldxform ? oldxform : ""; var newxform = svgroot.createSVGTransform(); // [ gm ] [ chm ] = [ chm ] [ gm' ] // [ gm' ] = [ chm_inv ] [ gm ] [ chm ] var chm = transformListToTransform(chtlist).matrix, chm_inv = chm.inverse(); var gm = matrixMultiply( chm_inv, m, chm ); newxform.setMatrix(gm); chtlist.appendItem(newxform); } batchCmd.addSubCommand(recalculateDimensions(elem)); } } // 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); // update selection 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) { if (i==0) selectedBBoxes[i] = this.getBBox(selected); var xform = svgroot.createSVGTransform(); var tlist = canvas.getTransformList(selected); // dx and dy could be arrays if (dx.constructor == Array) { if (i==0) { selectedBBoxes[i].x += dx[i]; selectedBBoxes[i].y += dy[i]; } xform.setTranslate(dx[i],dy[i]); } else { if (i==0) { selectedBBoxes[i].x += dx; selectedBBoxes[i].y += dy; } xform.setTranslate(dx,dy); } tlist.insertItemBefore(xform, 0); var cmd = recalculateDimensions(selected); if (cmd) { batchCmd.addSubCommand(cmd); } selectorManager.requestSelector(selected).resize(); } } if (!batchCmd.isEmpty()) { if (undoable) addCommandToHistory(batchCmd); call("changed", selectedElements); return batchCmd; } }; 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 // FIXME: doesn't this mean that every time we call getStrokedBBox() that we are // re-creating the getCheckedBBox() function? shouldn't we make this a function // at the 'canvas' level var getCheckedBBox = function(elem) { try { // TODO: Fix issue with rotated groups. Currently they work // fine in FF, but not in other browsers (same problem mentioned // in Issue 339 comment #2). var bb = elem.getBBox(); var angle = canvas.getRotationAngle(elem); if ((angle && angle % 90) || hasMatrixTransform(canvas.getTransformList(elem))) { // Accurate way to get BBox of rotated element in Firefox: // Put element in group and get its BBox var good_bb = false; // Get the BBox from the raw path for these elements var elemNames = ['ellipse','path','line','polyline','polygon']; if($.inArray(elem.tagName, elemNames) != -1) { bb = good_bb = canvas.convertToPath(elem, true, angle); } else if(elem.tagName == 'rect') { // Look for radius var rx = elem.getAttribute('rx'); var ry = elem.getAttribute('ry'); if(rx || ry) { bb = good_bb = canvas.convertToPath(elem, true, angle); } } if(!good_bb) { var g = document.createElementNS(svgns, "g"); var parent = elem.parentNode; parent.replaceChild(g, elem); g.appendChild(elem); bb = g.getBBox(); parent.insertBefore(elem,g); parent.removeChild(g); } // Old method: Works by giving the rotated BBox, // this is (unfortunately) what Opera and Safari do // natively when getting the BBox of the parent group // var angle = angle * Math.PI / 180.0; // 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); }); // This shouldn't ever happen... if(full_bb == null) return null; 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; // FIXME: same re-creation problem with this function as getCheckedBBox() above 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(); pathActions.clear(); 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; } }); if(new_el.tagName == 'image') { preventClickDefault(new_el); } return new_el; }; var preventClickDefault = function(img) { $(img).click(function(e){e.preventDefault()}); } // 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.setUiStrings = function(strs) { $.extend(uiStrings, strs); } 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(''); }, "decode64" : function(input) { if(window.atob) return window.atob(input); var output = ""; var chr1, chr2, chr3 = ""; var enc1, enc2, enc3, enc4 = ""; var i = 0; // remove all characters that are not A-Z, a-z, 0-9, +, /, or = input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); do { enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ""; enc1 = enc2 = enc3 = enc4 = ""; } while (i < input.length); return unescape(output); }, // 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; } };