github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(INCOMPLETE: ES6 Module conversion and linting)

Browse Source 
- Breaking change: Require `new` with `EmbeddedSVGEdit` (allows us to use `class` internally)
- Breaking change: If `svgcanvas.setUiStrings` must now be called if not using editor in order
    to get strings (for sake of i18n) (and if using path.js alone, must also have its `setUiStrings` called)
- Breaking change (ext-overview-window): Avoid global `overviewWindowGlobals`
- Breaking change (ext-imagelib): Change to object-based encoding for namespacing of
    messages (though keep stringifying/parsing ourselves until we remove IE9 support)
- Breaking change: Rename `jquery.js` to `jquery.min.js`
- Breaking change: Remove `scoped` attribute from `style`; it is now deprecated and
    obsolete; also move to head (after other stylesheets)
- Enhancement: Make SpinButton plugin independent of SVGEdit via
    generic state object for tool_scale
- Enhancement: Remove now unused Python l10n scripts (#238)
- Enhancement: ES6 Modules (including jQuery plugins but not jQuery)
- Enhancement: Further JSDoc (incomplete)
- Enhancement (Optimization): Compress images using imageoptim (and add
    npm script) (per #215)
- Fix: i18nize path.js strings and canvas notifications
- Fix: Attempt i18n for ext-markers
- Refactoring (ext-storage): Move locale info to own file imported by the extension (toward modularity; still should be split into separate files by language and *dynamically* imported, but we'll wait for better `import` support to refactor this)
- Refactoring: For imagelib, add local jQuery copy (using old 1.4.4 as had
    been using from server)
- Refactoring: For MathJax, add local copy (using old 2.3 as had been using from
    server); server had not been working
- Refactoring: Remove `use strict` (implicit in modules)
- Refactoring: Remove trailing whitespace, fix some code within comments
- Refactoring: Expect `jQuery` global rather than `$` for better modularity
    (also to adapt line later once available via `import`)
- Refactoring: Prefer `const` (and then `let`)
- Refactoring: Add block scope keywords closer to first block in which they appear
- Refactoring: Use ES6 `class`
- Refactoring `$.isArray` -> `Array.isArray` and avoid some other jQuery core methods
    with simple VanillaJS replacements
- Refactoring: Use abbreviated object property syntax
- Refactoring: Object destructuring
- Refactoring: Remove `uiStrings` contents in svg-editor.js (obtains from locale)
- Refactoring: Add favicon to embedded API file
- Refactoring: Use arrow functions for brief functions (incomplete)
- Refactoring: Use `Array.prototype.includes`/`String.prototype.includes`;
    `String.prototype.startsWith`, `String.prototype.trim`
- Refactoring: Remove now unnecessary svgutils do/while resetting of variables
- Refactoring: Use shorthand methods for object literals (avoid ": function")
- Refactoring: Avoid quoting object property keys where unnecessary
- Refactoring: Just do truthy/falsey check for lengths in place of comparison to 0
- Refactoring (Testing): Avoid jQuery usage within most test files (defer script,
    also in preparation for future switch to ES6 modules for tests)
- Refactoring: Make jpicker variable declaration indent bearable
- Refactoring (Linting): Finish svgcanvas.js
- Docs: Mention in comment no longer an entry file as before
- Docs: Migrate old config, extensions, and FAQ docs
- Licensing: Indicate MIT is license type of rgbcolor; rename/add license file name for
    jgraduate and screencast to reflect type (Apache 2.0); rename file to reflect it
    contains license information (of type MIT) for Raphael icons
This commit is contained in:
Brett Zamir
2018-05-18 11:25:45 +08:00
parent 7cf976cfb8
commit ae2394f086
249 changed files with 24738 additions and 23260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
editor/units.js
View File

@@ -1,5 +1,3 @@
/* eslint-disable no-var */
/* globals $, svgedit */
/**
* Package: svgedit.units
*
@@ -9,23 +7,14 @@
* Copyright(c) 2010 Jeff Schiller
*/
// Dependencies:
// 1) jQuery
import {NS} from './svgedit.js';
(function () {
'use strict';
if (!svgedit.units) {
svgedit.units = {};
}
var NS = svgedit.NS;
var wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];
var hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];
var unitAttrs = ['r', 'radius'].concat(wAttrs, hAttrs);
const wAttrs = ['x', 'x1', 'cx', 'rx', 'width'];
const hAttrs = ['y', 'y1', 'cy', 'ry', 'height'];
const unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs];
// unused
/*
var unitNumMap = {
const unitNumMap = {
'%': 2,
'em': 3,
'ex': 4,
@@ -38,45 +27,43 @@ var unitNumMap = {
};
*/
// Container of elements.
var elementContainer_;
let elementContainer_;
/**
* Stores mapping of unit type to user coordinates.
*/
var typeMap_ = {};
let typeMap_ = {};
/**
* ElementContainer interface
*
* function getBaseUnit() - returns a string of the base unit type of the container ('em')
* function getElement() - returns an element in the container given an id
* function getHeight() - returns the container's height
* function getWidth() - returns the container's width
* function getRoundDigits() - returns the number of digits number should be rounded to
* function getBaseUnit() - Returns a string of the base unit type of the container ('em')
* function getElement() - Returns an element in the container given an id
* function getHeight() - Returns the container's height
* function getWidth() - Returns the container's width
* function getRoundDigits() - Returns the number of digits number should be rounded to
*/
/**
* Function: svgedit.units.init()
* Initializes this module.
*
* Parameters:
* elementContainer - an object implementing the ElementContainer interface.
* @param elementContainer - An object implementing the ElementContainer interface.
*/
svgedit.units.init = function (elementContainer) {
export const init = function (elementContainer) {
elementContainer_ = elementContainer;
// Get correct em/ex values by creating a temporary SVG.
var svg = document.createElementNS(NS.SVG, 'svg');
const svg = document.createElementNS(NS.SVG, 'svg');
document.body.appendChild(svg);
var rect = document.createElementNS(NS.SVG, 'rect');
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('width', '1em');
rect.setAttribute('height', '1ex');
rect.setAttribute('x', '1in');
svg.appendChild(rect);
var bb = rect.getBBox();
const bb = rect.getBBox();
document.body.removeChild(svg);
var inch = bb.x;
const inch = bb.x;
typeMap_ = {
'em': bb.width,
'ex': bb.height,
@@ -92,66 +79,69 @@ svgedit.units.init = function (elementContainer) {
// Group: Unit conversion functions
// Function: svgedit.units.getTypeMap
// Returns the unit object with values for each unit
svgedit.units.getTypeMap = function () {
/**
* @returns The unit object with values for each unit
*/
export const getTypeMap = function () {
return typeMap_;
};
// Function: svgedit.units.shortFloat
// Rounds a given value to a float with number of digits defined in save_options
//
// Parameters:
// val - The value as a String, Number or Array of two numbers to be rounded
//
// Returns:
// If a string/number was given, returns a Float. If an array, return a string
// with comma-separated floats
svgedit.units.shortFloat = function (val) {
var digits = elementContainer_.getRoundDigits();
/**
* Rounds a given value to a float with number of digits defined in save_options
*
* @param val - The value as a String, Number or Array of two numbers to be rounded
*
* @returns
* If a string/number was given, returns a Float. If an array, return a string
* with comma-separated floats
*/
export const shortFloat = function (val) {
const digits = elementContainer_.getRoundDigits();
if (!isNaN(val)) {
// Note that + converts to Number
return +((+val).toFixed(digits));
}
if ($.isArray(val)) {
return svgedit.units.shortFloat(val[0]) + ',' + svgedit.units.shortFloat(val[1]);
if (Array.isArray(val)) {
return shortFloat(val[0]) + ',' + shortFloat(val[1]);
}
return parseFloat(val).toFixed(digits) - 0;
};
// Function: svgedit.units.convertUnit
// Converts the number to given unit or baseUnit
svgedit.units.convertUnit = function (val, unit) {
/**
* Converts the number to given unit or baseUnit
* @returns {number}
*/
export const convertUnit = function (val, unit) {
unit = unit || elementContainer_.getBaseUnit();
// baseVal.convertToSpecifiedUnits(unitNumMap[unit]);
// var val = baseVal.valueInSpecifiedUnits;
// const val = baseVal.valueInSpecifiedUnits;
// baseVal.convertToSpecifiedUnits(1);
return svgedit.units.shortFloat(val / typeMap_[unit]);
return shortFloat(val / typeMap_[unit]);
};
// Function: svgedit.units.setUnitAttr
// Sets an element's attribute based on the unit in its current value.
//
// Parameters:
// elem - DOM element to be changed
// attr - String with the name of the attribute associated with the value
// val - String with the attribute value to convert
svgedit.units.setUnitAttr = function (elem, attr, val) {
/**
* Sets an element's attribute based on the unit in its current value.
*
* @param elem - DOM element to be changed
* @param attr - String with the name of the attribute associated with the value
* @param val - String with the attribute value to convert
*/
export const setUnitAttr = function (elem, attr, val) {
// if (!isNaN(val)) {
// New value is a number, so check currently used unit
// var old_val = elem.getAttribute(attr);
// const oldVal = elem.getAttribute(attr);
// Enable this for alternate mode
// if (old_val !== null && (isNaN(old_val) || elementContainer_.getBaseUnit() !== 'px')) {
// if (oldVal !== null && (isNaN(oldVal) || elementContainer_.getBaseUnit() !== 'px')) {
// // Old value was a number, so get unit, then convert
// var unit;
// if (old_val.substr(-1) === '%') {
// var res = getResolution();
// let unit;
// if (oldVal.substr(-1) === '%') {
// const res = getResolution();
// unit = '%';
// val *= 100;
// if (wAttrs.indexOf(attr) >= 0) {
// if (wAttrs.includes(attr)) {
// val = val / res.w;
// } else if (hAttrs.indexOf(attr) >= 0) {
// } else if (hAttrs.includes(attr)) {
// val = val / res.h;
// } else {
// return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
@@ -160,7 +150,7 @@ svgedit.units.setUnitAttr = function (elem, attr, val) {
// if (elementContainer_.getBaseUnit() !== 'px') {
// unit = elementContainer_.getBaseUnit();
// } else {
// unit = old_val.substr(-2);
// unit = oldVal.substr(-2);
// }
// val = val / typeMap_[unit];
// }
@@ -171,7 +161,7 @@ svgedit.units.setUnitAttr = function (elem, attr, val) {
elem.setAttribute(attr, val);
};
var attrsToConvert = {
const attrsToConvert = {
'line': ['x1', 'x2', 'y1', 'y2'],
'circle': ['cx', 'cy', 'r'],
'ellipse': ['cx', 'cy', 'rx', 'ry'],
@@ -182,22 +172,20 @@ var attrsToConvert = {
'text': ['x', 'y']
};
// Function: svgedit.units.convertAttrs
// Converts all applicable attributes to the configured baseUnit
//
// Parameters:
// element - a DOM element whose attributes should be converted
svgedit.units.convertAttrs = function (element) {
var elName = element.tagName;
var unit = elementContainer_.getBaseUnit();
var attrs = attrsToConvert[elName];
/**
* Converts all applicable attributes to the configured baseUnit
* @param element - A DOM element whose attributes should be converted
*/
export const convertAttrs = function (element) {
const elName = element.tagName;
const unit = elementContainer_.getBaseUnit();
const attrs = attrsToConvert[elName];
if (!attrs) { return; }
var len = attrs.length;
var i;
for (i = 0; i < len; i++) {
var attr = attrs[i];
var cur = element.getAttribute(attr);
const len = attrs.length;
for (let i = 0; i < len; i++) {
const attr = attrs[i];
const cur = element.getAttribute(attr);
if (cur) {
if (!isNaN(cur)) {
element.setAttribute(attr, (cur / typeMap_[unit]) + unit);
@@ -209,55 +197,53 @@ svgedit.units.convertAttrs = function (element) {
}
};
// Function: svgedit.units.convertToNum
// Converts given values to numbers. Attributes must be supplied in
// case a percentage is given
//
// Parameters:
// attr - String with the name of the attribute associated with the value
// val - String with the attribute value to convert
svgedit.units.convertToNum = function (attr, val) {
/**
* Converts given values to numbers. Attributes must be supplied in
* case a percentage is given
*
* @param attr - String with the name of the attribute associated with the value
* @param val - String with the attribute value to convert
*/
export const convertToNum = function (attr, val) {
// Return a number if that's what it already is
if (!isNaN(val)) { return val - 0; }
var num;
if (val.substr(-1) === '%') {
// Deal with percentage, depends on attribute
num = val.substr(0, val.length - 1) / 100;
var width = elementContainer_.getWidth();
var height = elementContainer_.getHeight();
const num = val.substr(0, val.length - 1) / 100;
const width = elementContainer_.getWidth();
const height = elementContainer_.getHeight();
if (wAttrs.indexOf(attr) >= 0) {
if (wAttrs.includes(attr)) {
return num * width;
}
if (hAttrs.indexOf(attr) >= 0) {
if (hAttrs.includes(attr)) {
return num * height;
}
return num * Math.sqrt((width * width) + (height * height)) / Math.sqrt(2);
}
var unit = val.substr(-2);
num = val.substr(0, val.length - 2);
const unit = val.substr(-2);
const num = val.substr(0, val.length - 2);
// Note that this multiplication turns the string into a number
return num * typeMap_[unit];
};
// Function: svgedit.units.isValidUnit
// Check if an attribute's value is in a valid format
//
// Parameters:
// attr - String with the name of the attribute associated with the value
// val - String with the attribute value to check
svgedit.units.isValidUnit = function (attr, val, selectedElement) {
var valid = false;
if (unitAttrs.indexOf(attr) >= 0) {
/**
* Check if an attribute's value is in a valid format
* @param attr - String with the name of the attribute associated with the value
* @param val - String with the attribute value to check
*/
export const isValidUnit = function (attr, val, selectedElement) {
let valid = false;
if (unitAttrs.includes(attr)) {
// True if it's just a number
if (!isNaN(val)) {
valid = true;
} else {
// Not a number, check if it has a valid unit
val = val.toLowerCase();
$.each(typeMap_, function (unit) {
Object.keys(typeMap_).forEach((unit) => {
if (valid) { return; }
var re = new RegExp('^-?[\\d\\.]+' + unit + '$');
const re = new RegExp('^-?[\\d\\.]+' + unit + '$');
if (re.test(val)) { valid = true; }
});
}
@@ -265,13 +251,13 @@ svgedit.units.isValidUnit = function (attr, val, selectedElement) {
// if we're trying to change the id, make sure it's not already present in the doc
// and the id value is valid.
var result = false;
let result = false;
// because getElem() can throw an exception in the case of an invalid id
// (according to https://www.w3.org/TR/xml-id/ IDs must be a NCName)
// we wrap it in an exception and only return true if the ID was valid and
// not already present
try {
var elem = elementContainer_.getElement(val);
const elem = elementContainer_.getElement(val);
result = (elem == null || elem === selectedElement);
} catch (e) {}
return result;
@@ -280,4 +266,3 @@ svgedit.units.isValidUnit = function (attr, val, selectedElement) {
return valid;
};
}());