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

122
editor/extensions/ext-arrows.js
View File

@@ -1,5 +1,4 @@
/* eslint-disable no-var */
/* globals svgEditor, svgCanvas, $ */
/* globals jQuery, svgEditor, svgCanvas */
/*
* ext-arrows.js
*
@@ -10,11 +9,10 @@
*/
svgEditor.addExtension('Arrows', function (S) {
var // svgcontent = S.svgcontent,
const $ = jQuery;
const // {svgcontent} = S,
addElem = S.addSvgElementFromJson,
nonce = S.nonce,
randomizeIds = S.randomize_ids,
selElems, pathdata,
{nonce} = S,
langList = {
'en': [
{'id': 'arrow_none', 'textContent': 'No arrow'}
@@ -23,9 +21,10 @@ svgEditor.addExtension('Arrows', function (S) {
{'id': 'arrow_none', 'textContent': 'Sans flèche'}
]
},
arrowprefix,
prefix = 'se_arrow_';
let selElems, arrowprefix, randomizeIds = S.randomize_ids;
function setArrowNonce (window, n) {
randomizeIds = true;
arrowprefix = prefix + n + '_';
@@ -49,15 +48,15 @@ svgEditor.addExtension('Arrows', function (S) {
arrowprefix = prefix;
}
pathdata = {
const pathdata = {
fw: {d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw'},
bk: {d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk'}
};
function getLinked (elem, attr) {
var str = elem.getAttribute(attr);
const str = elem.getAttribute(attr);
if (!str) { return null; }
var m = str.match(/\(#(.*)\)/);
const m = str.match(/\(#(.*)\)/);
if (!m || m.length !== 2) {
return null;
}
@@ -67,12 +66,11 @@ svgEditor.addExtension('Arrows', function (S) {
function showPanel (on) {
$('#arrow_panel').toggle(on);
if (on) {
var el = selElems[0];
var end = el.getAttribute('marker-end');
var start = el.getAttribute('marker-start');
var mid = el.getAttribute('marker-mid');
var val;
const el = selElems[0];
const end = el.getAttribute('marker-end');
const start = el.getAttribute('marker-start');
const mid = el.getAttribute('marker-mid');
let val;
if (end && start) {
val = 'both';
} else if (end) {
@@ -81,7 +79,7 @@ svgEditor.addExtension('Arrows', function (S) {
val = 'start';
} else if (mid) {
val = 'mid';
if (mid.indexOf('bk') !== -1) {
if (mid.includes('bk')) {
val = 'mid_bk';
}
}
@@ -95,7 +93,7 @@ svgEditor.addExtension('Arrows', function (S) {
}
function resetMarker () {
var el = selElems[0];
const el = selElems[0];
el.removeAttribute('marker-start');
el.removeAttribute('marker-mid');
el.removeAttribute('marker-end');
@@ -105,32 +103,32 @@ svgEditor.addExtension('Arrows', function (S) {
// TODO: Make marker (or use?) per arrow type, since refX can be different
id = id || arrowprefix + dir;
var marker = S.getElem(id);
var data = pathdata[dir];
const data = pathdata[dir];
if (type === 'mid') {
data.refx = 5;
}
let marker = S.getElem(id);
if (!marker) {
marker = addElem({
'element': 'marker',
'attr': {
'viewBox': '0 0 10 10',
'id': id,
'refY': 5,
'markerUnits': 'strokeWidth',
'markerWidth': 5,
'markerHeight': 5,
'orient': 'auto',
'style': 'pointer-events:none' // Currently needed for Opera
element: 'marker',
attr: {
viewBox: '0 0 10 10',
id,
refY: 5,
markerUnits: 'strokeWidth',
markerWidth: 5,
markerHeight: 5,
orient: 'auto',
style: 'pointer-events:none' // Currently needed for Opera
}
});
var arrow = addElem({
'element': 'path',
'attr': {
'd': data.d,
'fill': '#000000'
const arrow = addElem({
element: 'path',
attr: {
d: data.d,
fill: '#000000'
}
});
marker.appendChild(arrow);
@@ -143,15 +141,15 @@ svgEditor.addExtension('Arrows', function (S) {
}
function setArrow () {
var type = this.value;
resetMarker();
let type = this.value;
if (type === 'none') {
return;
}
// Set marker on element
var dir = 'fw';
let dir = 'fw';
if (type === 'mid_bk') {
type = 'mid';
dir = 'bk';
@@ -170,23 +168,23 @@ svgEditor.addExtension('Arrows', function (S) {
}
function colorChanged (elem) {
var color = elem.getAttribute('stroke');
var mtypes = ['start', 'mid', 'end'];
var defs = S.findDefs();
const color = elem.getAttribute('stroke');
const mtypes = ['start', 'mid', 'end'];
const defs = S.findDefs();
$.each(mtypes, function (i, type) {
var marker = getLinked(elem, 'marker-' + type);
const marker = getLinked(elem, 'marker-' + type);
if (!marker) { return; }
var curColor = $(marker).children().attr('fill');
var curD = $(marker).children().attr('d');
var newMarker = null;
const curColor = $(marker).children().attr('fill');
const curD = $(marker).children().attr('d');
if (curColor === color) { return; }
var allMarkers = $(defs).find('marker');
const allMarkers = $(defs).find('marker');
let newMarker = null;
// Different color, check if already made
allMarkers.each(function () {
var attrs = $(this).children().attr(['fill', 'd']);
const attrs = $(this).children().attr(['fill', 'd']);
if (attrs.fill === color && attrs.d === curD) {
// Found another marker with this color and this path
newMarker = this;
@@ -195,8 +193,8 @@ svgEditor.addExtension('Arrows', function (S) {
if (!newMarker) {
// Create a new marker with this color
var lastId = marker.id;
var dir = lastId.indexOf('_fw') !== -1 ? 'fw' : 'bk';
const lastId = marker.id;
const dir = lastId.includes('_fw') ? 'fw' : 'bk';
newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length);
@@ -206,9 +204,9 @@ svgEditor.addExtension('Arrows', function (S) {
$(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')');
// Check if last marker can be removed
var remove = true;
let remove = true;
$(S.svgcontent).find('line, polyline, path, polygon').each(function () {
var elem = this;
const elem = this;
$.each(mtypes, function (j, mtype) {
if ($(elem).attr('marker-' + mtype) === 'url(#' + marker.id + ')') {
remove = false;
@@ -245,25 +243,25 @@ svgEditor.addExtension('Arrows', function (S) {
change: setArrow
}
}],
callback: function () {
callback () {
$('#arrow_panel').hide();
// Set ID so it can be translated in locale file
$('#arrow_list option')[0].id = 'connector_no_arrow';
},
addLangData: function (lang) {
addLangData (lang) {
return {
data: langList[lang]
};
},
selectedChanged: function (opts) {
selectedChanged (opts) {
// Use this to update the current selected elements
selElems = opts.elems;
var i = selElems.length;
var markerElems = ['line', 'path', 'polyline', 'polygon'];
const markerElems = ['line', 'path', 'polyline', 'polygon'];
let i = selElems.length;
while (i--) {
var elem = selElems[i];
if (elem && $.inArray(elem.tagName, markerElems) !== -1) {
const elem = selElems[i];
if (elem && markerElems.includes(elem.tagName)) {
if (opts.selectedElement && !opts.multiselected) {
showPanel(true);
} else {
@@ -274,16 +272,16 @@ svgEditor.addExtension('Arrows', function (S) {
}
}
},
elementChanged: function (opts) {
var elem = opts.elems[0];
elementChanged (opts) {
const elem = opts.elems[0];
if (elem && (
elem.getAttribute('marker-start') ||
elem.getAttribute('marker-mid') ||
elem.getAttribute('marker-end')
)) {
// var start = elem.getAttribute('marker-start');
// var mid = elem.getAttribute('marker-mid');
// var end = elem.getAttribute('marker-end');
// const start = elem.getAttribute('marker-start');
// const mid = elem.getAttribute('marker-mid');
// const end = elem.getAttribute('marker-end');
// Has marker, so see if it should match color
colorChanged(elem);
}