383 lines
10 KiB
JavaScript
383 lines
10 KiB
JavaScript
/**
|
|
* Partial polyfill of `SVGTransformList`
|
|
* @module SVGTransformList
|
|
*
|
|
* @license MIT
|
|
*
|
|
* @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
|
|
*/
|
|
|
|
import {NS} from './namespaces.js';
|
|
import {supportsNativeTransformLists} from './browser.js';
|
|
|
|
const svgroot = document.createElementNS(NS.SVG, 'svg');
|
|
|
|
// Helper function.
|
|
function transformToString (xform) {
|
|
const m = xform.matrix;
|
|
let text = '';
|
|
switch (xform.type) {
|
|
case 1: // MATRIX
|
|
text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')';
|
|
break;
|
|
case 2: // TRANSLATE
|
|
text = 'translate(' + m.e + ',' + m.f + ')';
|
|
break;
|
|
case 3: // SCALE
|
|
if (m.a === m.d) {
|
|
text = 'scale(' + m.a + ')';
|
|
} else {
|
|
text = 'scale(' + m.a + ',' + m.d + ')';
|
|
}
|
|
break;
|
|
case 4: { // ROTATE
|
|
let cx = 0;
|
|
let cy = 0;
|
|
// this prevents divide by zero
|
|
if (xform.angle !== 0) {
|
|
const K = 1 - m.a;
|
|
cy = (K * m.f + m.b * m.e) / (K * K + m.b * m.b);
|
|
cx = (m.e - m.b * cy) / K;
|
|
}
|
|
text = 'rotate(' + xform.angle + ' ' + cx + ',' + cy + ')';
|
|
break;
|
|
}
|
|
}
|
|
return text;
|
|
}
|
|
|
|
/**
|
|
* Map of SVGTransformList objects.
|
|
*/
|
|
let listMap_ = {};
|
|
|
|
/**
|
|
* @interface module:SVGTransformList.SVGEditTransformList
|
|
* @property {Integer} numberOfItems unsigned long
|
|
*/
|
|
/**
|
|
* @function module:SVGTransformList.SVGEditTransformList#clear
|
|
* @returns {undefined}
|
|
*/
|
|
/**
|
|
* @function module:SVGTransformList.SVGEditTransformList#initialize
|
|
* @param {SVGTransform} newItem
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
* @function module:SVGTransformList.SVGEditTransformList#getItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
* @function module:SVGTransformList.SVGEditTransformList#insertItemBefore
|
|
* @param {SVGTransform} newItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
* @function module:SVGTransformList.SVGEditTransformList#replaceItem
|
|
* @param {SVGTransform} newItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* (DOES NOT THROW DOMException, INDEX_SIZE_ERR)
|
|
* @function module:SVGTransformList.SVGEditTransformList#removeItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* @function module:SVGTransformList.SVGEditTransformList#appendItem
|
|
* @param {SVGTransform} newItem
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* NOT IMPLEMENTED
|
|
* @ignore
|
|
* @function module:SVGTransformList.SVGEditTransformList#createSVGTransformFromMatrix
|
|
* @param {SVGMatrix} matrix
|
|
* @returns {SVGTransform}
|
|
*/
|
|
/**
|
|
* NOT IMPLEMENTED
|
|
* @ignore
|
|
* @function module:SVGTransformList.SVGEditTransformList#consolidate
|
|
* @returns {SVGTransform}
|
|
*/
|
|
|
|
/**
|
|
* SVGTransformList implementation for Webkit.
|
|
* These methods do not currently raise any exceptions.
|
|
* These methods also do not check that transforms are being inserted. This is basically
|
|
* implementing as much of SVGTransformList that we need to get the job done.
|
|
*/
|
|
export class SVGTransformList {
|
|
/**
|
|
* @param {Element} elem
|
|
*/
|
|
constructor (elem) {
|
|
this._elem = elem || null;
|
|
this._xforms = [];
|
|
// TODO: how do we capture the undo-ability in the changed transform list?
|
|
this._update = function () {
|
|
let tstr = '';
|
|
// /* const concatMatrix = */ svgroot.createSVGMatrix();
|
|
for (let i = 0; i < this.numberOfItems; ++i) {
|
|
const xform = this._list.getItem(i);
|
|
tstr += transformToString(xform) + ' ';
|
|
}
|
|
this._elem.setAttribute('transform', tstr);
|
|
};
|
|
this._list = this;
|
|
this._init = function () {
|
|
// Transform attribute parser
|
|
let str = this._elem.getAttribute('transform');
|
|
if (!str) { return; }
|
|
|
|
// TODO: Add skew support in future
|
|
const re = /\s*((scale|matrix|rotate|translate)\s*\(.*?\))\s*,?\s*/;
|
|
let m = true;
|
|
while (m) {
|
|
m = str.match(re);
|
|
str = str.replace(re, '');
|
|
if (m && m[1]) {
|
|
const x = m[1];
|
|
const bits = x.split(/\s*\(/);
|
|
const name = bits[0];
|
|
const valBits = bits[1].match(/\s*(.*?)\s*\)/);
|
|
valBits[1] = valBits[1].replace(/(\d)-/g, '$1 -');
|
|
const valArr = valBits[1].split(/[, ]+/);
|
|
const letters = 'abcdef'.split('');
|
|
const mtx = svgroot.createSVGMatrix();
|
|
Object.values(valArr).forEach(function (item, i) {
|
|
valArr[i] = parseFloat(item);
|
|
if (name === 'matrix') {
|
|
mtx[letters[i]] = valArr[i];
|
|
}
|
|
});
|
|
const xform = svgroot.createSVGTransform();
|
|
const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1);
|
|
const values = name === 'matrix' ? [mtx] : valArr;
|
|
|
|
if (name === 'scale' && values.length === 1) {
|
|
values.push(values[0]);
|
|
} else if (name === 'translate' && values.length === 1) {
|
|
values.push(0);
|
|
} else if (name === 'rotate' && values.length === 1) {
|
|
values.push(0, 0);
|
|
}
|
|
xform[fname].apply(xform, values);
|
|
this._list.appendItem(xform);
|
|
}
|
|
}
|
|
};
|
|
this._removeFromOtherLists = function (item) {
|
|
if (item) {
|
|
// Check if this transform is already in a transformlist, and
|
|
// remove it if so.
|
|
let found = false;
|
|
for (const id in listMap_) {
|
|
const tl = listMap_[id];
|
|
for (let i = 0, len = tl._xforms.length; i < len; ++i) {
|
|
if (tl._xforms[i] === item) {
|
|
found = true;
|
|
tl.removeItem(i);
|
|
break;
|
|
}
|
|
}
|
|
if (found) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
this.numberOfItems = 0;
|
|
}
|
|
/**
|
|
* @returns {undefined}
|
|
*/
|
|
clear () {
|
|
this.numberOfItems = 0;
|
|
this._xforms = [];
|
|
}
|
|
|
|
/**
|
|
* @param {SVGTransform} newItem
|
|
* @returns {SVGTransform}
|
|
*/
|
|
initialize (newItem) {
|
|
this.numberOfItems = 1;
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms = [newItem];
|
|
}
|
|
|
|
/**
|
|
* @param {Integer} index unsigned long
|
|
* @throws {Error}
|
|
* @returns {SVGTransform}
|
|
*/
|
|
getItem (index) {
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
return this._xforms[index];
|
|
}
|
|
const err = new Error('DOMException with code=INDEX_SIZE_ERR');
|
|
err.code = 1;
|
|
throw err;
|
|
}
|
|
|
|
/**
|
|
* @param {SVGTransform} newItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
insertItemBefore (newItem, index) {
|
|
let retValue = null;
|
|
if (index >= 0) {
|
|
if (index < this.numberOfItems) {
|
|
this._removeFromOtherLists(newItem);
|
|
const newxforms = new Array(this.numberOfItems + 1);
|
|
// TODO: use array copying and slicing
|
|
let i;
|
|
for (i = 0; i < index; ++i) {
|
|
newxforms[i] = this._xforms[i];
|
|
}
|
|
newxforms[i] = newItem;
|
|
for (let j = i + 1; i < this.numberOfItems; ++j, ++i) {
|
|
newxforms[j] = this._xforms[i];
|
|
}
|
|
this.numberOfItems++;
|
|
this._xforms = newxforms;
|
|
retValue = newItem;
|
|
this._list._update();
|
|
} else {
|
|
retValue = this._list.appendItem(newItem);
|
|
}
|
|
}
|
|
return retValue;
|
|
}
|
|
|
|
/**
|
|
* @param {SVGTransform} newItem
|
|
* @param {Integer} index unsigned long
|
|
* @returns {SVGTransform}
|
|
*/
|
|
replaceItem (newItem, index) {
|
|
let retValue = null;
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms[index] = newItem;
|
|
retValue = newItem;
|
|
this._list._update();
|
|
}
|
|
return retValue;
|
|
}
|
|
|
|
/**
|
|
* @param {Integer} index unsigned long
|
|
* @throws {Error}
|
|
* @returns {SVGTransform}
|
|
*/
|
|
removeItem (index) {
|
|
if (index < this.numberOfItems && index >= 0) {
|
|
const retValue = this._xforms[index];
|
|
const newxforms = new Array(this.numberOfItems - 1);
|
|
let i;
|
|
for (i = 0; i < index; ++i) {
|
|
newxforms[i] = this._xforms[i];
|
|
}
|
|
for (let j = i; j < this.numberOfItems - 1; ++j, ++i) {
|
|
newxforms[j] = this._xforms[i + 1];
|
|
}
|
|
this.numberOfItems--;
|
|
this._xforms = newxforms;
|
|
this._list._update();
|
|
return retValue;
|
|
}
|
|
const err = new Error('DOMException with code=INDEX_SIZE_ERR');
|
|
err.code = 1;
|
|
throw err;
|
|
}
|
|
|
|
/**
|
|
* @param {SVGTransform} newItem
|
|
* @returns {SVGTransform}
|
|
*/
|
|
appendItem (newItem) {
|
|
this._removeFromOtherLists(newItem);
|
|
this._xforms.push(newItem);
|
|
this.numberOfItems++;
|
|
this._list._update();
|
|
return newItem;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @function module:SVGTransformList.resetListMap
|
|
* @returns {undefined}
|
|
*/
|
|
export const resetListMap = function () {
|
|
listMap_ = {};
|
|
};
|
|
|
|
/**
|
|
* Removes transforms of the given element from the map.
|
|
* @function module:SVGTransformList.removeElementFromListMap
|
|
* @param {Element} elem - a DOM Element
|
|
* @returns {undefined}
|
|
*/
|
|
export let removeElementFromListMap = function (elem) {
|
|
if (elem.id && listMap_[elem.id]) {
|
|
delete listMap_[elem.id];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns an object that behaves like a `SVGTransformList` for the given DOM element
|
|
* @function module:SVGTransformList.getTransformList
|
|
* @param {Element} elem - DOM element to get a transformlist from
|
|
* @todo The polyfill should have `SVGAnimatedTransformList` and this should use it
|
|
* @returns {SVGAnimatedTransformList|SVGTransformList}
|
|
*/
|
|
export const getTransformList = function (elem) {
|
|
if (!supportsNativeTransformLists()) {
|
|
const id = elem.id || 'temp';
|
|
let t = listMap_[id];
|
|
if (!t || id === 'temp') {
|
|
listMap_[id] = new SVGTransformList(elem);
|
|
listMap_[id]._init();
|
|
t = listMap_[id];
|
|
}
|
|
return t;
|
|
}
|
|
if (elem.transform) {
|
|
return elem.transform.baseVal;
|
|
}
|
|
if (elem.gradientTransform) {
|
|
return elem.gradientTransform.baseVal;
|
|
}
|
|
if (elem.patternTransform) {
|
|
return elem.patternTransform.baseVal;
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* @callback module:SVGTransformList.removeElementFromListMap
|
|
* @param {Element} elem
|
|
*/
|
|
/**
|
|
* For unit-testing
|
|
* @function module:SVGTransformList.changeRemoveElementFromListMap
|
|
* @param {module:SVGTransformList.removeElementFromListMap} cb Passed a single argument `elem`
|
|
* @returns {undefined}
|
|
*/
|
|
export const changeRemoveElementFromListMap = function (cb) {
|
|
removeElementFromListMap = cb;
|
|
};
|