Place image changes
Mark MacKay
parent
37381f2ad4
commit
65ee522665
|
|
@ -418,11 +418,13 @@
|
|||
</div>
|
||||
|
||||
<!-- formerly gsvg_panel -->
|
||||
<div id="container_panel" class="context_panel clearfix">
|
||||
<div id="svg_panel" class="context_panel clearfix">
|
||||
<h4>SVG</h4>
|
||||
</div>
|
||||
|
||||
<div id="use_panel" class="context_panel clearfix">
|
||||
<div class="button" id="tool_unlink_use" data-title="Break link">Break link reference</div>
|
||||
<h4>Use</h4>
|
||||
<div class="button full" id="tool_unlink_use" data-title="Break link">Break use ref</div>
|
||||
</div>
|
||||
|
||||
<div id="g_panel" class="context_panel clearfix">
|
||||
|
|
@ -500,7 +502,7 @@
|
|||
</div>
|
||||
|
||||
<div id="align_tools">
|
||||
<h4>Align</h4>
|
||||
<h4>Align to canvas</h4>
|
||||
<div class="toolset align_buttons" id="tool_position">
|
||||
<label>
|
||||
<div class="col last clear" id="position_opts">
|
||||
|
|
|
|||
|
|
@ -26,11 +26,9 @@ MD.Import = function(){
|
|||
var reader = new FileReader();
|
||||
reader.onloadend = function(e) {
|
||||
svgCanvas.importSvgString(e.target.result, true);
|
||||
svgCanvas.ungroupSelectedElement()
|
||||
svgCanvas.ungroupSelectedElement()
|
||||
svgCanvas.groupSelectedElements()
|
||||
svgCanvas.alignSelectedElements("m", "page")
|
||||
svgCanvas.alignSelectedElements("c", "page")
|
||||
//svgCanvas.ungroupSelectedElement();
|
||||
svgCanvas.alignSelectedElements("m", "page");
|
||||
svgCanvas.alignSelectedElements("c", "page");
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
|
@ -74,7 +72,7 @@ MD.Import = function(){
|
|||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
|
||||
//editor.saveCanvas();
|
||||
}
|
||||
|
||||
function loadSvgString(str, callback) {
|
||||
|
|
@ -83,6 +81,7 @@ MD.Import = function(){
|
|||
callback = callback || $.noop;
|
||||
if(success) {
|
||||
callback(true);
|
||||
editor.saveCanvas();
|
||||
} else {
|
||||
$.alert("Error: Unable to load SVG data", function() {
|
||||
callback(false);
|
||||
|
|
|
|||
|
|
@ -82,7 +82,11 @@ MD.Panel = function(){
|
|||
svgCanvas.pathActions.opencloseSubPath();
|
||||
});
|
||||
|
||||
// Text Path
|
||||
// Use
|
||||
$("#tool_unlink_use").on("click", function(){
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
});
|
||||
|
||||
|
||||
function show(elem) {
|
||||
$('.context_panel').hide();
|
||||
|
|
@ -243,7 +247,8 @@ MD.Panel = function(){
|
|||
line: ['x1','y1','x2','y2'],
|
||||
text: ['x', 'y'],
|
||||
'use': [],
|
||||
path : []
|
||||
path : [],
|
||||
svg : [],
|
||||
};
|
||||
|
||||
var el_name = elem.tagName;
|
||||
|
|
|
|||
|
|
@ -5492,7 +5492,6 @@ var uniquifyElems = this.uniquifyElems = function(g) {
|
|||
}
|
||||
// remap all href attributes
|
||||
var hreffers = ids[oldid]["hrefs"];
|
||||
console.log(hreffers)
|
||||
var k = hreffers.length;
|
||||
while (k--) {
|
||||
var hreffer = hreffers[k];
|
||||
|
|
@ -6002,101 +6001,87 @@ this.getPaint = function(color, opac, type) {
|
|||
// was obtained
|
||||
// * import should happen in top-left of current zoomed viewport
|
||||
this.importSvgString = function(xmlString) {
|
||||
|
||||
try {
|
||||
// Get unique ID
|
||||
var uid = svgedit.utilities.encode64(xmlString.length + xmlString).substr(0,32);
|
||||
|
||||
var useExisting = false;
|
||||
|
||||
// Look for symbol and make sure symbol exists in image
|
||||
if(import_ids[uid]) {
|
||||
if( $(import_ids[uid].symbol).parents('#svgroot').length ) {
|
||||
useExisting = true;
|
||||
}
|
||||
}
|
||||
|
||||
var batchCmd = new BatchCommand("Import SVG");
|
||||
// convert string into XML document
|
||||
var newDoc = svgedit.utilities.text2xml(xmlString);
|
||||
|
||||
if(useExisting) {
|
||||
var symbol = import_ids[uid].symbol;
|
||||
var ts = import_ids[uid].xform;
|
||||
} else {
|
||||
// convert string into XML document
|
||||
var newDoc = svgedit.utilities.text2xml(xmlString);
|
||||
this.prepareSvg(newDoc);
|
||||
|
||||
this.prepareSvg(newDoc);
|
||||
// import new svg document into our document
|
||||
var svg = svgdoc.adoptNode(newDoc.documentElement);
|
||||
|
||||
// import new svg document into our document
|
||||
var svg;
|
||||
// If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
|
||||
if(svgdoc.adoptNode) {
|
||||
svg = svgdoc.adoptNode(newDoc.documentElement);
|
||||
uniquifyElems(svg);
|
||||
|
||||
// Put all paint elems in defs
|
||||
|
||||
$(svg).find('linearGradient, radialGradient, pattern').appendTo(findDefs());
|
||||
|
||||
svg.querySelectorAll('textPath').forEach(function(el){
|
||||
const href = svgCanvas.getHref(el);
|
||||
if (!href) return;
|
||||
const path = svgcontent.querySelector(href);
|
||||
$(path).appendTo(findDefs());
|
||||
const offset = el.getAttribute("startOffset");
|
||||
// convert percentage based to absolute
|
||||
if (offset.includes("%") && path) {
|
||||
const totalLength = path.getTotalLength();
|
||||
const pct = parseFloat(offset) * .01;
|
||||
el.setAttribute("startOffset", (pct * totalLength).toFixed(0))
|
||||
}
|
||||
else {
|
||||
svg = svgdoc.importNode(newDoc.documentElement, true);
|
||||
const tspan = el.querySelector("tspan");
|
||||
const text = el.closest("text");
|
||||
text.setAttributeNS(xmlns, "xml:space", "default");
|
||||
if (tspan && text) {
|
||||
|
||||
// grab the first tspan and apply it to the text element
|
||||
svgedit.sanitize.svgWhiteList()["text"].forEach(attr => {
|
||||
const value = tspan.getAttribute(attr);
|
||||
if (value && attr !== "id" && !attr.includes(":")) {
|
||||
tspan.removeAttribute(attr);
|
||||
text.setAttribute(attr, value);
|
||||
}
|
||||
});
|
||||
tspan.setAttributeNS(xmlns, "xml:space", "preserve");
|
||||
}
|
||||
})
|
||||
|
||||
uniquifyElems(svg);
|
||||
// Set ref element for <use> elements
|
||||
|
||||
var innerw = convertToNum('width', svg.getAttribute("width")),
|
||||
innerh = convertToNum('height', svg.getAttribute("height")),
|
||||
innervb = svg.getAttribute("viewBox"),
|
||||
// if no explicit viewbox, create one out of the width and height
|
||||
vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
|
||||
for (var j = 0; j < 4; ++j)
|
||||
vb[j] = +(vb[j]);
|
||||
// TODO: This should also be done if the object is re-added through "redo"
|
||||
setUseData(svg);
|
||||
|
||||
// TODO: properly handle preserveAspectRatio
|
||||
var canvasw = +svgcontent.getAttribute("width"),
|
||||
canvash = +svgcontent.getAttribute("height");
|
||||
// imported content should be 1/3 of the canvas on its largest dimension
|
||||
convertGradients(svg);
|
||||
|
||||
// recalculate dimensions on the top-level children so that unnecessary transforms
|
||||
// are removed
|
||||
svgedit.utilities.walkTreePost(svgcontent, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}});
|
||||
|
||||
|
||||
// Hack to make recalculateDimensions understand how to scale
|
||||
var ts = "translate(0)";
|
||||
var innerw = convertToNum('width', svg.getAttribute("width")),
|
||||
innerh = convertToNum('height', svg.getAttribute("height")),
|
||||
innervb = svg.getAttribute("viewBox"),
|
||||
// if no explicit viewbox, create one out of the width and height
|
||||
vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
|
||||
for (var j = 0; j < 4; ++j)
|
||||
vb[j] = +(vb[j]);
|
||||
|
||||
var symbol = svgdoc.createElementNS(svgns, "symbol");
|
||||
var defs = findDefs();
|
||||
// TODO: properly handle preserveAspectRatio
|
||||
var canvasw = +svgcontent.getAttribute("width"),
|
||||
canvash = +svgcontent.getAttribute("height");
|
||||
|
||||
while (svg.firstChild) {
|
||||
var first = svg.firstChild;
|
||||
symbol.appendChild(first);
|
||||
}
|
||||
var attrs = svg.attributes;
|
||||
for(var i=0; i < attrs.length; i++) {
|
||||
var attr = attrs[i];
|
||||
symbol.setAttribute(attr.nodeName, attr.nodeValue);
|
||||
}
|
||||
symbol.id = getNextId();
|
||||
// Hack to make recalculateDimensions understand how to scale
|
||||
|
||||
// Store data
|
||||
import_ids[uid] = {
|
||||
symbol: symbol,
|
||||
xform: ts
|
||||
}
|
||||
|
||||
findDefs().appendChild(symbol);
|
||||
batchCmd.addSubCommand(new InsertElementCommand(symbol));
|
||||
const layer = (current_group || getCurrentDrawing().getCurrentLayer());
|
||||
const g = svgdoc.createElementNS(svgns, "g");
|
||||
while (svg.firstChild) {
|
||||
g.appendChild(svg.firstChild);
|
||||
}
|
||||
layer.appendChild(g);
|
||||
batchCmd.addSubCommand(new InsertElementCommand(g));
|
||||
|
||||
|
||||
var use_el = svgdoc.createElementNS(svgns, "use");
|
||||
use_el.id = getNextId();
|
||||
setHref(use_el, "#" + symbol.id);
|
||||
|
||||
(current_group || getCurrentDrawing().getCurrentLayer()).appendChild(use_el);
|
||||
batchCmd.addSubCommand(new InsertElementCommand(use_el));
|
||||
clearSelection();
|
||||
|
||||
use_el.setAttribute("transform", ts);
|
||||
recalculateDimensions(use_el);
|
||||
$(use_el).data('symbol', symbol).data('ref', symbol);
|
||||
addToSelection([use_el]);
|
||||
|
||||
// TODO: Find way to add this in a recalculateDimensions-parsable way
|
||||
// if (vb[0] != 0 || vb[1] != 0)
|
||||
// ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts;
|
||||
addToSelection([g]);
|
||||
addCommandToHistory(batchCmd);
|
||||
call("changed", [svgcontent]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue