Path Box widely supported, Replace/Insert in Path are deprecated (but polyfilled)
parent
e8d59904f7
commit
e92ccd0444
|
@ -1,5 +1,4 @@
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
import * as browser from '../../../instrumented/common/browser.js';
|
|
||||||
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
|
import * as utilities from '../../../instrumented/svgcanvas/utilities.js';
|
||||||
import { NS } from '../../../instrumented/common/namespaces.js';
|
import { NS } from '../../../instrumented/common/namespaces.js';
|
||||||
|
|
||||||
|
@ -161,19 +160,6 @@ describe('utilities', function () {
|
||||||
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
|
assert.equal(utilities.getUrlFromAttr('url("#foo")'), '#foo');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Test getPathBBox', function () {
|
|
||||||
if (browser.supportsPathBBox()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const doc = utilities.text2xml('<svg></svg>');
|
|
||||||
const path = doc.createElementNS(NS.SVG, 'path');
|
|
||||||
path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z');
|
|
||||||
const bb = utilities.getPathBBox(path);
|
|
||||||
assert.equal(typeof bb, 'object', 'BBox returned object');
|
|
||||||
assert.ok(bb.x && !isNaN(bb.x));
|
|
||||||
assert.ok(bb.y && !isNaN(bb.y));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Test getPathDFromSegments', function () {
|
it('Test getPathDFromSegments', function () {
|
||||||
const { getPathDFromSegments } = utilities;
|
const { getPathDFromSegments } = utilities;
|
||||||
|
|
||||||
|
@ -226,7 +212,6 @@ describe('utilities', function () {
|
||||||
});
|
});
|
||||||
svgroot.append(elem);
|
svgroot.append(elem);
|
||||||
const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.0\d*,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/;
|
const closeEnough = /M0,4 C0,2.3\d* 0.9\d*,1 2,1 L8,1 C9.0\d*,1 10,2.3\d* 10,4 L10,9 C10,10.6\d* 9.0\d*,12 8,12 L2,12 C0.9\d*,12 0,10.6\d* 0,9 L0,4 Z/;
|
||||||
console.log(getPathDFromElement(elem), closeEnough);
|
|
||||||
assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
|
assert.equal(closeEnough.test(getPathDFromElement(elem)), true);
|
||||||
elem.remove();
|
elem.remove();
|
||||||
|
|
||||||
|
|
|
@ -6,8 +6,6 @@
|
||||||
* @copyright 2010 Jeff Schiller, 2010 Alexis Deveria
|
* @copyright 2010 Jeff Schiller, 2010 Alexis Deveria
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import 'pathseg';
|
|
||||||
|
|
||||||
import { NS } from './namespaces.js';
|
import { NS } from './namespaces.js';
|
||||||
|
|
||||||
const { userAgent } = navigator;
|
const { userAgent } = navigator;
|
||||||
|
@ -19,31 +17,6 @@ const isChrome_ = userAgent.includes('Chrome/');
|
||||||
const isMac_ = userAgent.includes('Macintosh');
|
const isMac_ = userAgent.includes('Macintosh');
|
||||||
const isTouch_ = 'ontouchstart' in window;
|
const isTouch_ = 'ontouchstart' in window;
|
||||||
|
|
||||||
// segList functions (for FF1.5 and 2.0)
|
|
||||||
const supportsPathReplaceItem_ = (function () {
|
|
||||||
const path = document.createElementNS(NS.SVG, 'path');
|
|
||||||
path.setAttribute('d', 'M0,0 10,10');
|
|
||||||
const seglist = path.pathSegList;
|
|
||||||
const seg = path.createSVGPathSegLinetoAbs(5, 5);
|
|
||||||
try {
|
|
||||||
seglist.replaceItem(seg, 1);
|
|
||||||
return true;
|
|
||||||
}catch (err) {/* empty */}
|
|
||||||
return false;
|
|
||||||
}());
|
|
||||||
|
|
||||||
const supportsPathInsertItemBefore_ = (function () {
|
|
||||||
const path = document.createElementNS(NS.SVG, 'path');
|
|
||||||
path.setAttribute('d', 'M0,0 10,10');
|
|
||||||
const seglist = path.pathSegList;
|
|
||||||
const seg = path.createSVGPathSegLinetoAbs(5, 5);
|
|
||||||
try {
|
|
||||||
seglist.insertItemBefore(seg, 1);
|
|
||||||
return true;
|
|
||||||
}catch (err) {/* empty */}
|
|
||||||
return false;
|
|
||||||
}());
|
|
||||||
|
|
||||||
// text character positioning (for IE9 and now Chrome)
|
// text character positioning (for IE9 and now Chrome)
|
||||||
const supportsGoodTextCharPos_ = (function () {
|
const supportsGoodTextCharPos_ = (function () {
|
||||||
const svgroot = document.createElementNS(NS.SVG, 'svg');
|
const svgroot = document.createElementNS(NS.SVG, 'svg');
|
||||||
|
@ -64,17 +37,6 @@ const supportsGoodTextCharPos_ = (function () {
|
||||||
}
|
}
|
||||||
}());
|
}());
|
||||||
|
|
||||||
const supportsPathBBox_ = (function () {
|
|
||||||
const svgcontent = document.createElementNS(NS.SVG, 'svg');
|
|
||||||
document.documentElement.append(svgcontent);
|
|
||||||
const path = document.createElementNS(NS.SVG, 'path');
|
|
||||||
path.setAttribute('d', 'M0,0 C0,0 10,10 10,0');
|
|
||||||
svgcontent.append(path);
|
|
||||||
const bbox = path.getBBox();
|
|
||||||
svgcontent.remove();
|
|
||||||
return (bbox.height > 4 && bbox.height < 5);
|
|
||||||
}());
|
|
||||||
|
|
||||||
// Support for correct bbox sizing on groups with horizontal/vertical lines
|
// Support for correct bbox sizing on groups with horizontal/vertical lines
|
||||||
const supportsHVLineContainerBBox_ = (function () {
|
const supportsHVLineContainerBBox_ = (function () {
|
||||||
const svgcontent = document.createElementNS(NS.SVG, 'svg');
|
const svgcontent = document.createElementNS(NS.SVG, 'svg');
|
||||||
|
@ -127,24 +89,6 @@ export const isMac = () => isMac_;
|
||||||
*/
|
*/
|
||||||
export const isTouch = () => isTouch_;
|
export const isTouch = () => isTouch_;
|
||||||
|
|
||||||
/**
|
|
||||||
* @function module:browser.supportsPathReplaceItem
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
export const supportsPathReplaceItem = () => supportsPathReplaceItem_;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @function module:browser.supportsPathInsertItemBefore
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
export const supportsPathInsertItemBefore = () => supportsPathInsertItemBefore_;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @function module:browser.supportsPathBBox
|
|
||||||
* @returns {boolean}
|
|
||||||
*/
|
|
||||||
export const supportsPathBBox = () => supportsPathBBox_;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @function module:browser.supportsHVLineContainerBBox
|
* @function module:browser.supportsHVLineContainerBBox
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
|
|
|
@ -365,7 +365,8 @@ class Editor extends EditorStartup {
|
||||||
const { workarea } = this;
|
const { workarea } = this;
|
||||||
const cnvs = $id("svgcanvas");
|
const cnvs = $id("svgcanvas");
|
||||||
|
|
||||||
let w = parseFloat(getComputedStyle(workarea, null).width.replace("px", "")); let h = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
|
let w = parseFloat(getComputedStyle(workarea, null).width.replace("px", ""));
|
||||||
|
let h = parseFloat(getComputedStyle(workarea, null).height.replace("px", ""));
|
||||||
const wOrig = w; const hOrig = h;
|
const wOrig = w; const hOrig = h;
|
||||||
const oldCtr = {
|
const oldCtr = {
|
||||||
x: workarea.scrollLeft + wOrig / 2,
|
x: workarea.scrollLeft + wOrig / 2,
|
||||||
|
|
|
@ -48,8 +48,7 @@ Array.prototype.forEach.call(atags, function (aEle) {
|
||||||
post({ href, data });
|
post({ href, data });
|
||||||
return data;
|
return data;
|
||||||
})
|
})
|
||||||
// eslint-disable-next-line no-console
|
.catch( (error) => console.error(error));
|
||||||
.catch( (error) => console.log(error));
|
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
|
@ -782,8 +782,7 @@ class TopPanel {
|
||||||
editor.svgCanvas.setMode('select');
|
editor.svgCanvas.setMode('select');
|
||||||
editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true);
|
editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true);
|
||||||
}, (error) => {
|
}, (error) => {
|
||||||
// eslint-disable-next-line no-console
|
console.error("error =", error);
|
||||||
console.log("error =", error);
|
|
||||||
seAlert(editor.i18next.t('tools.no_embed'));
|
seAlert(editor.i18next.t('tools.no_embed'));
|
||||||
editor.svgCanvas.deleteSelectedElements();
|
editor.svgCanvas.deleteSelectedElements();
|
||||||
});
|
});
|
||||||
|
|
|
@ -44,7 +44,6 @@ export const setBlurNoUndo = function (val) {
|
||||||
blurContext_.changeSelectedAttributeNoUndoMethod('filter', 'url(#' + elem.id + '_blur)');
|
blurContext_.changeSelectedAttributeNoUndoMethod('filter', 'url(#' + elem.id + '_blur)');
|
||||||
}
|
}
|
||||||
if (blurContext_.isWebkit()) {
|
if (blurContext_.isWebkit()) {
|
||||||
// console.log('e', elem);
|
|
||||||
elem.removeAttribute('filter');
|
elem.removeAttribute('filter');
|
||||||
elem.setAttribute('filter', 'url(#' + elem.id + '_blur)');
|
elem.setAttribute('filter', 'url(#' + elem.id + '_blur)');
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,13 +12,10 @@ import {
|
||||||
hasMatrixTransform, transformListToTransform, transformBox
|
hasMatrixTransform, transformListToTransform, transformBox
|
||||||
} from './math.js';
|
} from './math.js';
|
||||||
import {
|
import {
|
||||||
isWebkit, supportsHVLineContainerBBox, supportsPathBBox
|
isWebkit, supportsHVLineContainerBBox
|
||||||
} from '../common/browser.js';
|
} from '../common/browser.js';
|
||||||
import { getClosest, mergeDeep } from '../editor/components/jgraduate/Util.js';
|
import { getClosest, mergeDeep } from '../editor/components/jgraduate/Util.js';
|
||||||
|
|
||||||
// String used to encode base64.
|
|
||||||
const KEYSTR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
||||||
|
|
||||||
// Much faster than running getBBox() every time
|
// Much faster than running getBBox() every time
|
||||||
const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use,clipPath';
|
const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use,clipPath';
|
||||||
const visElemsArr = visElems.split(',');
|
const visElemsArr = visElems.split(',');
|
||||||
|
@ -137,41 +134,7 @@ export const toXml = function (str) {
|
||||||
export function encode64(input) {
|
export function encode64(input) {
|
||||||
// base64 strings are 4/3 larger than the original string
|
// base64 strings are 4/3 larger than the original string
|
||||||
input = encodeUTF8(input); // convert non-ASCII characters
|
input = encodeUTF8(input); // convert non-ASCII characters
|
||||||
// input = convertToXMLReferences(input);
|
return window.btoa(input); // Use native if available
|
||||||
if (window.btoa) {
|
|
||||||
return window.btoa(input); // Use native if available
|
|
||||||
}
|
|
||||||
const output = new Array(Math.floor((input.length + 2) / 3) * 4);
|
|
||||||
|
|
||||||
let i = 0;
|
|
||||||
let p = 0;
|
|
||||||
do {
|
|
||||||
const chr1 = input.charCodeAt(i++);
|
|
||||||
const chr2 = input.charCodeAt(i++);
|
|
||||||
const chr3 = input.charCodeAt(i++);
|
|
||||||
|
|
||||||
/* eslint-disable no-bitwise */
|
|
||||||
const enc1 = chr1 >> 2;
|
|
||||||
const enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
|
|
||||||
|
|
||||||
let enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
|
|
||||||
let enc4 = chr3 & 63;
|
|
||||||
/* eslint-enable no-bitwise */
|
|
||||||
|
|
||||||
if (Number.isNaN(chr2)) {
|
|
||||||
enc3 = 64;
|
|
||||||
enc4 = 64;
|
|
||||||
} else if (Number.isNaN(chr3)) {
|
|
||||||
enc4 = 64;
|
|
||||||
}
|
|
||||||
|
|
||||||
output[p++] = KEYSTR.charAt(enc1);
|
|
||||||
output[p++] = KEYSTR.charAt(enc2);
|
|
||||||
output[p++] = KEYSTR.charAt(enc3);
|
|
||||||
output[p++] = KEYSTR.charAt(enc4);
|
|
||||||
} while (i < input.length);
|
|
||||||
|
|
||||||
return output.join('');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -181,38 +144,7 @@ export function encode64(input) {
|
||||||
* @returns {string} Decoded output
|
* @returns {string} Decoded output
|
||||||
*/
|
*/
|
||||||
export function decode64(input) {
|
export function decode64(input) {
|
||||||
if (window.atob) {
|
return decodeUTF8(window.atob(input));
|
||||||
return decodeUTF8(window.atob(input));
|
|
||||||
}
|
|
||||||
|
|
||||||
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
|
|
||||||
input = input.replace(/[^A-Za-z\d+/=]/g, '');
|
|
||||||
|
|
||||||
let output = '';
|
|
||||||
let i = 0;
|
|
||||||
|
|
||||||
do {
|
|
||||||
const enc1 = KEYSTR.indexOf(input.charAt(i++));
|
|
||||||
const enc2 = KEYSTR.indexOf(input.charAt(i++));
|
|
||||||
const enc3 = KEYSTR.indexOf(input.charAt(i++));
|
|
||||||
const enc4 = KEYSTR.indexOf(input.charAt(i++));
|
|
||||||
|
|
||||||
/* eslint-disable no-bitwise */
|
|
||||||
const chr1 = (enc1 << 2) | (enc2 >> 4);
|
|
||||||
const chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
|
||||||
const chr3 = ((enc3 & 3) << 6) | enc4;
|
|
||||||
/* eslint-enable no-bitwise */
|
|
||||||
|
|
||||||
output += String.fromCharCode(chr1);
|
|
||||||
|
|
||||||
if (enc3 !== 64) {
|
|
||||||
output += String.fromCharCode(chr2);
|
|
||||||
}
|
|
||||||
if (enc4 !== 64) {
|
|
||||||
output += String.fromCharCode(chr3);
|
|
||||||
}
|
|
||||||
} while (i < input.length);
|
|
||||||
return decodeUTF8(output);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -315,17 +247,13 @@ export const text2xml = function (sXML) {
|
||||||
|
|
||||||
let out; let dXML;
|
let out; let dXML;
|
||||||
try {
|
try {
|
||||||
dXML = (window.DOMParser) ? new DOMParser() : new window.ActiveXObject('Microsoft.XMLDOM');
|
dXML = new DOMParser();
|
||||||
dXML.async = false;
|
dXML.async = false;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
throw new Error('XML Parser could not be instantiated');
|
throw new Error('XML Parser could not be instantiated');
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
if (dXML.loadXML) {
|
out = dXML.parseFromString(sXML, 'text/xml');
|
||||||
out = (dXML.loadXML(sXML)) ? dXML : false;
|
|
||||||
} else {
|
|
||||||
out = dXML.parseFromString(sXML, 'text/xml');
|
|
||||||
}
|
|
||||||
} catch (e2) { throw new Error('Error parsing XML string'); }
|
} catch (e2) { throw new Error('Error parsing XML string'); }
|
||||||
return out;
|
return out;
|
||||||
};
|
};
|
||||||
|
@ -618,9 +546,7 @@ export const getBBox = function (elem) {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'path':
|
case 'path':
|
||||||
if (!supportsPathBBox()) {
|
if (selected.getBBox) {
|
||||||
ret = getPathBBox(selected);
|
|
||||||
} else if (selected.getBBox) {
|
|
||||||
ret = selected.getBBox();
|
ret = selected.getBBox();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
Loading…
Reference in New Issue