svgedit/dist/extensions/ext-star.js

247 lines
6.9 KiB
JavaScript
Raw Normal View History

- Breaking change: Rename config file to `svgedit-config-iife.js` (or for the module version, `svgedit-config-es.js`); also expect one directory higher; incorporates #207 (@iuyiuy) - Breaking change: Separate `extIconsPath` from `extPath` (not copying over icons) - Breaking change: Don't reference `custom.css` in HTML; can instead be referenced in JavaScript through the config file (provided in `svgedit-config-sample-iife.js`/`svgedit-config-sample-es.js` as `svgedit-custom.css` for better namespacing); incorporates #207 (@iuyiuy) - Breaking change: Remove minified jgraduate/spinbtn files (minified within Rollup routine) - Fix: Zoom when scrolled; incorporates #169 (@AndrolGenhald), adapting for conventions; also allow avoidance when shift key pressed - Fix: Update Atom feed reference in HTML - Fixes related to recent commits: Some path and method name fixes needed, function order, missing methods, variable scope declaration, no need for DOMContentLoaded listeners in modules, switch back to non-default export, avoid trimming nullish, deal with mock tests, fix `math.matrixMultiply`, use jquery-svg where needed for array/SVG attributes; add babel-polyfill and defer script to imagelib; other misc. fixes - Enhancement: Move config-sample.js out of `editor` directory - Enhancement: For `callback`-style extensions, also provide config object; add following to that object: buildCanvgCallback, canvg, decode64, encode64, executeAfterLoads, getTypeMap, isChrome, ieIE, NS, text2xml - Enhancement: Complete ES6 modules work (extensions, locales, tests), along with Babel; make Node build routine for converting modular source to non-modular, use `loadStylesheets` for modular stylehsheet defining (but parallel loading); - Enhancement: Add `stylesheets` config for modular but parallel stylesheet loading with `@default` option for simple inclusion/exclusion of defaults (if not going with default). - Refactoring: Clean up `svg-editor.html`: consistent indents; avoid extra lbs, avoid long lines - Refactoring: Avoid embedded API adding inline JavaScript listener - Refactoring: Move layers and context code to `draw.js` - Refactoring: Move `pathActions` from `svgcanvas.js` (though preserve aliases to these methods on `canvas`) and `convertPath` from `svgutils.js` to `path.js` - Refactoring: Move `getStrokedBBox` from `svgcanvas.js` (while keeping an alias) to `svgutils.js` (as `getStrokedBBoxDefaultVisible` to avoid conflict with existing) - Docs: Remove "dependencies" comments in code except where summarizing role of jQuery or a non-obvious dependency - Refactoring/Linting: Enfore `no-extra-semi` and `quote-props` rules - Refactoring: Further avoidance of quotes on properties (as possible) - Refactoring: Use `class` in place of functions where intended as classes - Refactoring: Consistency and granularity in extensions imports - Testing: Update QUnit to 2.6.1 (node_modules) and Sinon to 5.0.8 (and add sinon-test at 2.1.3) and enforce eslint-plugin-qunit linting rules; update custom extensions - Testing: Add node-static for automating (and accessing out-of-directory contents) - Testing: Avoid HTML attributes for styling - Testing: Add npm `test` script - Testing: Comment out unused jQuery SVG test - Testing: Add test1 and svgutils_performance_test to all tests page - Testing: Due apparently to Path having not been a formal class, the test was calling it without `new`; refactored now with sufficient mock data to take into account it is a class - npm: Update devDeps - npm: Add html modules and config build to test script
2018-05-22 10:03:16 +00:00
(function () {
'use strict';
/* globals jQuery */
/*
* ext-star.js
*
*
* Copyright(c) 2010 CloudCanvas, Inc.
* All rights reserved
*
*/
svgEditor.addExtension('star', function (S) {
var $ = jQuery;
var svgCanvas = svgEditor.canvas;
var // {svgcontent} = S,
selElems = void 0,
// editingitex = false,
// svgdoc = S.svgroot.parentNode.ownerDocument,
started = void 0,
newFO = void 0;
// edg = 0,
// newFOG, newFOGParent, newDef, newImageName, newMaskID,
// undoCommand = 'Not image',
// modeChangeG, ccZoom, wEl, hEl, wOffset, hOffset, ccRgbEl, brushW, brushH;
function showPanel(on) {
var fcRules = $('#fc_rules');
if (!fcRules.length) {
fcRules = $('<style id="fc_rules"></style>').appendTo('head');
}
fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
$('#star_panel').toggle(on);
}
/*
function toggleSourceButtons(on){
$('#star_save, #star_cancel').toggle(on);
}
*/
function setAttr(attr, val) {
svgCanvas.changeSelectedAttribute(attr, val);
S.call('changed', selElems);
}
/*
function cot(n){
return 1 / Math.tan(n);
}
function sec(n){
return 1 / Math.cos(n);
}
*/
return {
name: 'star',
svgicons: svgEditor.curConfig.extIconsPath + 'star-icons.svg',
buttons: [{
id: 'tool_star',
type: 'mode',
title: 'Star Tool',
position: 12,
events: {
click: function click() {
showPanel(true);
svgCanvas.setMode('star');
}
}
}],
context_tools: [{
type: 'input',
panel: 'star_panel',
title: 'Number of Sides',
id: 'starNumPoints',
label: 'points',
size: 3,
defval: 5,
events: {
change: function change() {
setAttr('point', this.value);
}
}
}, {
type: 'input',
panel: 'star_panel',
title: 'Pointiness',
id: 'starRadiusMulitplier',
label: 'Pointiness',
size: 3,
defval: 2.5
}, {
type: 'input',
panel: 'star_panel',
title: 'Twists the star',
id: 'radialShift',
label: 'Radial Shift',
size: 3,
defval: 0,
events: {
change: function change() {
setAttr('radialshift', this.value);
}
}
}],
callback: function callback() {
$('#star_panel').hide();
// const endChanges = function(){};
},
mouseDown: function mouseDown(opts) {
var rgb = svgCanvas.getColor('fill');
// const ccRgbEl = rgb.substring(1, rgb.length);
var sRgb = svgCanvas.getColor('stroke');
// const ccSRgbEl = sRgb.substring(1, rgb.length);
var sWidth = svgCanvas.getStrokeWidth();
if (svgCanvas.getMode() === 'star') {
started = true;
newFO = S.addSvgElementFromJson({
element: 'polygon',
attr: {
cx: opts.start_x,
cy: opts.start_y,
id: S.getNextId(),
shape: 'star',
point: document.getElementById('starNumPoints').value,
r: 0,
radialshift: document.getElementById('radialShift').value,
r2: 0,
orient: 'point',
fill: rgb,
strokecolor: sRgb,
strokeWidth: sWidth
}
});
return {
started: true
};
}
},
mouseMove: function mouseMove(opts) {
if (!started) {
return;
}
if (svgCanvas.getMode() === 'star') {
var c = $(newFO).attr(['cx', 'cy', 'point', 'orient', 'fill', 'strokecolor', 'strokeWidth', 'radialshift']);
var x = opts.mouse_x;
var y = opts.mouse_y;
var cx = c.cx,
cy = c.cy,
fill = c.fill,
strokecolor = c.strokecolor,
strokeWidth = c.strokeWidth,
radialshift = c.radialshift,
- Breaking change: Rename config file to `svgedit-config-iife.js` (or for the module version, `svgedit-config-es.js`); also expect one directory higher; incorporates #207 (@iuyiuy) - Breaking change: Separate `extIconsPath` from `extPath` (not copying over icons) - Breaking change: Don't reference `custom.css` in HTML; can instead be referenced in JavaScript through the config file (provided in `svgedit-config-sample-iife.js`/`svgedit-config-sample-es.js` as `svgedit-custom.css` for better namespacing); incorporates #207 (@iuyiuy) - Breaking change: Remove minified jgraduate/spinbtn files (minified within Rollup routine) - Fix: Zoom when scrolled; incorporates #169 (@AndrolGenhald), adapting for conventions; also allow avoidance when shift key pressed - Fix: Update Atom feed reference in HTML - Fixes related to recent commits: Some path and method name fixes needed, function order, missing methods, variable scope declaration, no need for DOMContentLoaded listeners in modules, switch back to non-default export, avoid trimming nullish, deal with mock tests, fix `math.matrixMultiply`, use jquery-svg where needed for array/SVG attributes; add babel-polyfill and defer script to imagelib; other misc. fixes - Enhancement: Move config-sample.js out of `editor` directory - Enhancement: For `callback`-style extensions, also provide config object; add following to that object: buildCanvgCallback, canvg, decode64, encode64, executeAfterLoads, getTypeMap, isChrome, ieIE, NS, text2xml - Enhancement: Complete ES6 modules work (extensions, locales, tests), along with Babel; make Node build routine for converting modular source to non-modular, use `loadStylesheets` for modular stylehsheet defining (but parallel loading); - Enhancement: Add `stylesheets` config for modular but parallel stylesheet loading with `@default` option for simple inclusion/exclusion of defaults (if not going with default). - Refactoring: Clean up `svg-editor.html`: consistent indents; avoid extra lbs, avoid long lines - Refactoring: Avoid embedded API adding inline JavaScript listener - Refactoring: Move layers and context code to `draw.js` - Refactoring: Move `pathActions` from `svgcanvas.js` (though preserve aliases to these methods on `canvas`) and `convertPath` from `svgutils.js` to `path.js` - Refactoring: Move `getStrokedBBox` from `svgcanvas.js` (while keeping an alias) to `svgutils.js` (as `getStrokedBBoxDefaultVisible` to avoid conflict with existing) - Docs: Remove "dependencies" comments in code except where summarizing role of jQuery or a non-obvious dependency - Refactoring/Linting: Enfore `no-extra-semi` and `quote-props` rules - Refactoring: Further avoidance of quotes on properties (as possible) - Refactoring: Use `class` in place of functions where intended as classes - Refactoring: Consistency and granularity in extensions imports - Testing: Update QUnit to 2.6.1 (node_modules) and Sinon to 5.0.8 (and add sinon-test at 2.1.3) and enforce eslint-plugin-qunit linting rules; update custom extensions - Testing: Add node-static for automating (and accessing out-of-directory contents) - Testing: Avoid HTML attributes for styling - Testing: Add npm `test` script - Testing: Comment out unused jQuery SVG test - Testing: Add test1 and svgutils_performance_test to all tests page - Testing: Due apparently to Path having not been a formal class, the test was calling it without `new`; refactored now with sufficient mock data to take into account it is a class - npm: Update devDeps - npm: Add html modules and config build to test script
2018-05-22 10:03:16 +00:00
point = c.point,
orient = c.orient,
circumradius = Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy)) / 1.5,
inradius = circumradius / document.getElementById('starRadiusMulitplier').value;
newFO.setAttributeNS(null, 'r', circumradius);
newFO.setAttributeNS(null, 'r2', inradius);
var polyPoints = '';
for (var s = 0; point >= s; s++) {
var angle = 2.0 * Math.PI * (s / point);
if (orient === 'point') {
angle -= Math.PI / 2;
} else if (orient === 'edge') {
angle = angle + Math.PI / point - Math.PI / 2;
}
x = circumradius * Math.cos(angle) + cx;
y = circumradius * Math.sin(angle) + cy;
polyPoints += x + ',' + y + ' ';
if (inradius != null) {
angle = 2.0 * Math.PI * (s / point) + Math.PI / point;
if (orient === 'point') {
angle -= Math.PI / 2;
} else if (orient === 'edge') {
angle = angle + Math.PI / point - Math.PI / 2;
}
angle += radialshift;
- Breaking change: Rename config file to `svgedit-config-iife.js` (or for the module version, `svgedit-config-es.js`); also expect one directory higher; incorporates #207 (@iuyiuy) - Breaking change: Separate `extIconsPath` from `extPath` (not copying over icons) - Breaking change: Don't reference `custom.css` in HTML; can instead be referenced in JavaScript through the config file (provided in `svgedit-config-sample-iife.js`/`svgedit-config-sample-es.js` as `svgedit-custom.css` for better namespacing); incorporates #207 (@iuyiuy) - Breaking change: Remove minified jgraduate/spinbtn files (minified within Rollup routine) - Fix: Zoom when scrolled; incorporates #169 (@AndrolGenhald), adapting for conventions; also allow avoidance when shift key pressed - Fix: Update Atom feed reference in HTML - Fixes related to recent commits: Some path and method name fixes needed, function order, missing methods, variable scope declaration, no need for DOMContentLoaded listeners in modules, switch back to non-default export, avoid trimming nullish, deal with mock tests, fix `math.matrixMultiply`, use jquery-svg where needed for array/SVG attributes; add babel-polyfill and defer script to imagelib; other misc. fixes - Enhancement: Move config-sample.js out of `editor` directory - Enhancement: For `callback`-style extensions, also provide config object; add following to that object: buildCanvgCallback, canvg, decode64, encode64, executeAfterLoads, getTypeMap, isChrome, ieIE, NS, text2xml - Enhancement: Complete ES6 modules work (extensions, locales, tests), along with Babel; make Node build routine for converting modular source to non-modular, use `loadStylesheets` for modular stylehsheet defining (but parallel loading); - Enhancement: Add `stylesheets` config for modular but parallel stylesheet loading with `@default` option for simple inclusion/exclusion of defaults (if not going with default). - Refactoring: Clean up `svg-editor.html`: consistent indents; avoid extra lbs, avoid long lines - Refactoring: Avoid embedded API adding inline JavaScript listener - Refactoring: Move layers and context code to `draw.js` - Refactoring: Move `pathActions` from `svgcanvas.js` (though preserve aliases to these methods on `canvas`) and `convertPath` from `svgutils.js` to `path.js` - Refactoring: Move `getStrokedBBox` from `svgcanvas.js` (while keeping an alias) to `svgutils.js` (as `getStrokedBBoxDefaultVisible` to avoid conflict with existing) - Docs: Remove "dependencies" comments in code except where summarizing role of jQuery or a non-obvious dependency - Refactoring/Linting: Enfore `no-extra-semi` and `quote-props` rules - Refactoring: Further avoidance of quotes on properties (as possible) - Refactoring: Use `class` in place of functions where intended as classes - Refactoring: Consistency and granularity in extensions imports - Testing: Update QUnit to 2.6.1 (node_modules) and Sinon to 5.0.8 (and add sinon-test at 2.1.3) and enforce eslint-plugin-qunit linting rules; update custom extensions - Testing: Add node-static for automating (and accessing out-of-directory contents) - Testing: Avoid HTML attributes for styling - Testing: Add npm `test` script - Testing: Comment out unused jQuery SVG test - Testing: Add test1 and svgutils_performance_test to all tests page - Testing: Due apparently to Path having not been a formal class, the test was calling it without `new`; refactored now with sufficient mock data to take into account it is a class - npm: Update devDeps - npm: Add html modules and config build to test script
2018-05-22 10:03:16 +00:00
x = inradius * Math.cos(angle) + cx;
y = inradius * Math.sin(angle) + cy;
polyPoints += x + ',' + y + ' ';
}
}
newFO.setAttributeNS(null, 'points', polyPoints);
newFO.setAttributeNS(null, 'fill', fill);
newFO.setAttributeNS(null, 'stroke', strokecolor);
newFO.setAttributeNS(null, 'stroke-width', strokeWidth);
/* const shape = */newFO.getAttributeNS(null, 'shape');
return {
started: true
};
}
},
mouseUp: function mouseUp() {
if (svgCanvas.getMode() === 'star') {
var attrs = $(newFO).attr(['r']);
// svgCanvas.addToSelection([newFO], true);
return {
keep: attrs.r !== '0',
element: newFO
};
}
},
selectedChanged: function selectedChanged(opts) {
// Use this to update the current selected elements
selElems = opts.elems;
var i = selElems.length;
while (i--) {
var elem = selElems[i];
if (elem && elem.getAttributeNS(null, 'shape') === 'star') {
if (opts.selectedElement && !opts.multiselected) {
// $('#starRadiusMulitplier').val(elem.getAttribute('r2'));
$('#starNumPoints').val(elem.getAttribute('point'));
$('#radialShift').val(elem.getAttribute('radialshift'));
showPanel(true);
} else {
showPanel(false);
}
} else {
showPanel(false);
}
}
},
elementChanged: function elementChanged(opts) {
// const elem = opts.elems[0];
}
};
});
}());