diff --git a/src/editor/index.js b/src/editor/index.js
index a2c4ec05..db191bca 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -58,7 +58,6 @@ svgEditor.setConfig({
// opacity: 1
// },
// initOpacity: 1,
- // colorPickerCSS: null,
// initTool: 'select',
// exportWindowType: 'new', // 'same'
// wireframe: false,
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index f5401a83..c822463e 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -17,7 +17,6 @@
*/
import './touch.js';
-import {NS} from '../common/namespaces.js';
import {isChrome, isGecko, isMac} from '../common/browser.js';
// Until we split this into smaller files, this helps distinguish utilities
@@ -31,9 +30,7 @@ import {
import SvgCanvas from '../svgcanvas/svgcanvas.js';
import jQueryPluginJSHotkeys from './js-hotkeys/jquery.hotkeys.min.js';
-import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
import jQueryPluginContextMenu from './contextmenu/jQuery.contextMenu.js';
-import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
import jQueryPluginDBox from '../svgcanvas/dbox.js';
import ConfigObj from './ConfigObj.js';
@@ -76,10 +73,7 @@ const editor = {
setStrings
};
-const $ = [
- jQueryPluginJSHotkeys, jQueryPluginJGraduate,
- jQueryPluginContextMenu, jQueryPluginJPicker
-].reduce((jq, func) => func(jq), jQuery);
+const $ = [jQueryPluginJSHotkeys, jQueryPluginContextMenu].reduce((jq, func) => func(jq), jQuery);
const homePage = 'https://github.com/SVG-Edit/svgedit';
@@ -338,26 +332,6 @@ editor.init = () => {
}
};
- /**
- * @type {string}
- */
- const uaPrefix = (function () {
- const regex = /^(?:Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
- const someScript = document.getElementsByTagName('script')[0];
- for (const prop in someScript.style) {
- if (regex.test(prop)) {
- // test is faster than match, so it's better to perform
- // that on the lot and match only when necessary
- return prop.match(regex)[0];
- }
- }
- // Nothing found so far?
- if ('WebkitOpacity' in someScript.style) { return 'Webkit'; }
- if ('KhtmlOpacity' in someScript.style) { return 'Khtml'; }
-
- return '';
- }());
-
/**
* @name module:SVGEditor.canvas
* @type {module:svgcanvas.SvgCanvas}
@@ -579,13 +553,12 @@ editor.init = () => {
const {undoMgr} = svgCanvas;
const workarea = $('#workarea');
const canvMenu = $('#cmenu_canvas');
- const paintBox = {fill: null, stroke: null};
- let exportWindow = null,
- defaultImageURL = configObj.curConfig.imgPath + 'logo.svg',
- zoomInIcon = 'crosshair',
- zoomOutIcon = 'crosshair',
- uiContext = 'toolbars';
+ let exportWindow = null;
+ let defaultImageURL = configObj.curConfig.imgPath + 'logo.svg';
+ const zoomInIcon = 'crosshair';
+ const zoomOutIcon = 'crosshair';
+ let uiContext = 'toolbars';
// For external openers
(function () {
@@ -1156,6 +1129,11 @@ editor.init = () => {
);
};
+ const updateColorpickers = (apply) => {
+ $id('fill_color').update(selectedElement, apply);
+ $id('stroke_color').update(selectedElement, apply);
+ };
+
/**
* Updates the toolbar (colors, opacity, etc) based on the selected element.
* This function also updates the opacity and id elements that are in the
@@ -1186,14 +1164,10 @@ editor.init = () => {
}
$('#stroke_width').val(gWidth === null ? '' : gWidth);
-
- paintBox.fill.update(true);
- paintBox.stroke.update(true);
-
+ updateColorpickers(true);
break;
} default: {
- paintBox.fill.update(true);
- paintBox.stroke.update(true);
+ updateColorpickers(true);
$('#stroke_width').val(selectedElement.getAttribute('stroke-width') || 1);
$('#stroke_style').val(selectedElement.getAttribute('stroke-dasharray') || 'none');
@@ -1230,9 +1204,6 @@ editor.init = () => {
* @returns {void}
*/
const updateWireFrame = () => {
- // Test support
- if (supportsNonSS) { return; }
-
const rule = `
#workarea.wireframe #svgcontent * {
stroke-width: ${1 / svgCanvas.getZoom()}px;
@@ -1373,8 +1344,7 @@ editor.init = () => {
// In the event a gradient was flipped:
if (selectedElement && mode === 'select') {
- paintBox.fill.update();
- paintBox.stroke.update();
+ updateColorpickers();
}
svgCanvas.runExtensions('elementChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementChanged} */ {
@@ -1517,8 +1487,8 @@ editor.init = () => {
* @returns {void}
*/
const prepPaints = () => {
- paintBox.fill.prep();
- paintBox.stroke.prep();
+ $id('fill_color').prep();
+ $id('stroke_color').prep();
};
/**
@@ -1649,27 +1619,6 @@ editor.init = () => {
return runCallback();
};
- /**
- * @param {string} color
- * @param {Float} opac
- * @param {string} type
- * @returns {module:jGraduate~Paint}
- */
- const getPaint = function (color, opac, type) {
- // update the editor's fill paint
- const opts = {alpha: opac};
- if (color.startsWith('url(#')) {
- let refElem = svgCanvas.getRefElem(color);
- refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
- opts[refElem.tagName] = refElem;
- } else if (color.startsWith('#')) {
- opts.solidColor = color.substr(1);
- } else {
- opts.solidColor = 'none';
- }
- return new $.jGraduate.Paint(opts);
- };
-
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind('selected', selectedChanged);
svgCanvas.bind('transition', elementTransition);
@@ -2737,7 +2686,6 @@ editor.init = () => {
$id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
workarea.toggleClass('wireframe');
- if (supportsNonSS) { return; }
const wfRules = $('#wireframe_rules');
if (!wfRules.length) {
/* wfRules = */ $('').appendTo('head');
@@ -2754,7 +2702,11 @@ editor.init = () => {
const {picker, color} = e.detail;
// Webkit-based browsers returned 'initial' here for no stroke
const paint = color === 'none' ? new $.jGraduate.Paint() : new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
- paintBox[picker].setPaint(paint);
+ if (picker === 'fill') {
+ $id('fill_color').setPaint(paint);
+ } else {
+ $id('stroke_color').setPaint(paint);
+ }
svgCanvas.setColor(picker, color);
if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
svgCanvas.setPaintOpacity(picker, 1.0);
@@ -2988,246 +2940,16 @@ editor.init = () => {
$('#change_image_url').click(promptImgURL);
- /**
- * @param {external:jQuery} elem
- * @todo Go back to the color boxes having white background-color and then setting
- * background-image to none.png (otherwise partially transparent gradients look weird)
- * @returns {void}
- */
- const colorPicker = function (elem) {
- const picker = elem.attr('id') === 'stroke_color' ? 'stroke' : 'fill';
- // const opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
- const title = picker === 'stroke'
- ? uiStrings.ui.pick_stroke_paint_opacity
- : uiStrings.ui.pick_fill_paint_opacity;
- // let wasNone = false; // Currently unused
- const pos = elem.offset();
- let {paint} = paintBox[picker];
- $('#color_picker')
- .draggable({
- cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
- containment: 'window'
- })
- .css(configObj.curConfig.colorPickerCSS || {left: pos.left - 140, bottom: 40})
- .jGraduate(
- {
- images: {clientPath: './jgraduate/images/'},
- paint,
- window: {pickerTitle: title},
- // images: {clientPath: configObj.curConfig.imgPath},
- newstop: 'inverse'
- },
- function (p) {
- paint = new $.jGraduate.Paint(p);
- paintBox[picker].setPaint(paint);
- svgCanvas.setPaint(picker, paint);
- $('#color_picker').hide();
- },
- () => {
- $('#color_picker').hide();
- }
- );
- };
-
- /**
- * Paint box class.
- */
- class PaintBox {
- /**
- * @param {string|Element|external:jQuery} container
- * @param {"fill"} type
- */
- constructor (container, type) {
- const cur = configObj.curConfig[type === 'fill' ? 'initFill' : 'initStroke'];
- // set up gradients to be used for the buttons
- const svgdocbox = new DOMParser().parseFromString(
- `
-
-
- `,
- 'text/xml'
- );
-
- let docElem = svgdocbox.documentElement;
- docElem = $(container)[0].appendChild(document.importNode(docElem, true));
- docElem.setAttribute('width', 16.5);
-
- this.rect = docElem.firstElementChild;
- this.defs = docElem.getElementsByTagName('defs')[0];
- this.grad = this.defs.firstElementChild;
- this.paint = new $.jGraduate.Paint({solidColor: cur.color});
- this.type = type;
- }
-
- /**
- * @param {module:jGraduate~Paint} paint
- * @param {boolean} apply
- * @returns {void}
- */
- setPaint (paint, apply) {
- this.paint = paint;
-
- const ptype = paint.type;
- const opac = paint.alpha / 100;
-
- let fillAttr = 'none';
- switch (ptype) {
- case 'solidColor':
- fillAttr = (paint[ptype] !== 'none') ? '#' + paint[ptype] : paint[ptype];
- break;
- case 'linearGradient':
- case 'radialGradient': {
- this.grad.remove();
- this.grad = this.defs.appendChild(paint[ptype]);
- const id = this.grad.id = 'gradbox_' + this.type;
- fillAttr = 'url(#' + id + ')';
- break;
- }
- }
-
- this.rect.setAttribute('fill', fillAttr);
- this.rect.setAttribute('opacity', opac);
-
- if (apply) {
- svgCanvas.setColor(this.type, this._paintColor, true);
- svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);
- }
- }
-
- /**
- * @param {boolean} apply
- * @returns {void}
- */
- update (apply) {
- if (!selectedElement) { return; }
-
- const {type} = this;
- switch (selectedElement.tagName) {
- case 'use':
- case 'image':
- case 'foreignObject':
- // These elements don't have fill or stroke, so don't change
- // the current value
- return;
- case 'g':
- case 'a': {
- const childs = selectedElement.getElementsByTagName('*');
-
- let gPaint = null;
- for (let i = 0, len = childs.length; i < len; i++) {
- const elem = childs[i];
- const p = elem.getAttribute(type);
- if (i === 0) {
- gPaint = p;
- } else if (gPaint !== p) {
- gPaint = null;
- break;
- }
- }
-
- if (gPaint === null) {
- // No common color, don't update anything
- this._paintColor = null;
- return;
- }
- this._paintColor = gPaint;
- this._paintOpacity = 1;
- break;
- } default: {
- this._paintOpacity = Number.parseFloat(selectedElement.getAttribute(type + '-opacity'));
- if (Number.isNaN(this._paintOpacity)) {
- this._paintOpacity = 1.0;
- }
-
- const defColor = type === 'fill' ? 'black' : 'none';
- this._paintColor = selectedElement.getAttribute(type) || defColor;
- }
- }
-
- if (apply) {
- svgCanvas.setColor(type, this._paintColor, true);
- svgCanvas.setPaintOpacity(type, this._paintOpacity, true);
- }
-
- this._paintOpacity *= 100;
-
- const paint = getPaint(this._paintColor, this._paintOpacity, type);
- // update the rect inside #fill_color/#stroke_color
- this.setPaint(paint);
- }
-
- /**
- * @returns {void}
- */
- prep () {
- const ptype = this.paint.type;
-
- switch (ptype) {
- case 'linearGradient':
- case 'radialGradient': {
- const paint = new $.jGraduate.Paint({copy: this.paint});
- svgCanvas.setPaint(this.type, paint);
- break;
- }
- }
- }
- }
- PaintBox.ctr = 0;
-
- paintBox.fill = new PaintBox('#fill_color', 'fill');
- paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
-
$('#stroke_width').val(configObj.curConfig.initStroke.width);
$('#group_opacity').val(configObj.curConfig.initOpacity * 100);
- // Use this SVG elem to test vectorEffect support
- const testEl = paintBox.fill.rect.cloneNode(false);
- testEl.setAttribute('style', 'vector-effect:non-scaling-stroke');
- const supportsNonSS = (testEl.style.vectorEffect === 'non-scaling-stroke');
- testEl.removeAttribute('style');
- const svgdocbox = paintBox.fill.rect.ownerDocument;
- // Use this to test support for blur element. Seems to work to test support in Webkit
- const blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');
- if (blurTest.stdDeviationX === undefined) {
- $('#blur').hide();
- }
- $(blurTest).remove();
-
- // Test for zoom icon support
- (function () {
- const pre = '-' + uaPrefix.toLowerCase() + '-zoom-';
- const zoom = pre + 'in';
- workarea.css('cursor', zoom);
- if (workarea.css('cursor') === zoom) {
- zoomInIcon = zoom;
- zoomOutIcon = pre + 'out';
- }
- workarea.css('cursor', 'auto');
- }());
-
- // Test for embedImage support (use timeout to not interfere with page load)
- setTimeout(() => {
- svgCanvas.embedImage('images/logo.svg', function (datauri) {
- if (!datauri) {
- // Disable option
- const $imgDialog = document.getElementById('se-img-prop');
- editor.pref('img_save', 'ref');
- $imgDialog.setAttribute('save', 'ref');
- $imgDialog.setAttribute('embed', 'one|' + uiStrings.notification.featNotSupported);
- }
- });
- }, 1000);
-
- $('#fill_color, #tool_fill').click(() => {
- colorPicker($('#fill_color'));
+ const handleColorPicker = (type, evt) => {
+ // const {paint} = evt.detail;
updateToolButtonState();
- });
+ };
- $('#stroke_color, #tool_stroke').click(() => {
- colorPicker($('#stroke_color'));
- updateToolButtonState();
- });
+ $id('stroke_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
+ $id('fill_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
$('#group_opacityLabel').click(() => {
$('#opacity_dropdown button').mousedown();
@@ -3329,22 +3051,6 @@ editor.init = () => {
$(window).bind('load resize', centerCanvas);
- // function setResolution (w, h, center) {
- // updateCanvas();
- // // w -= 0; h -= 0;
- // // $('#svgcanvas').css({width: w, height: h});
- // // $('#canvas_width').val(w);
- // // $('#canvas_height').val(h);
- // //
- // // if (center) {
- // // const wArea = workarea;
- // // const scrollY = h/2 - wArea.height()/2;
- // // const scrollX = w/2 - wArea.width()/2;
- // // wArea[0].scrollTop = scrollY;
- // // wArea[0].scrollLeft = scrollX;
- // // }
- // }
-
// Prevent browser from erroneously repopulating fields
$('input,select').attr('autocomplete', 'off');
From aaf04adcf567202fac8c1c97a8f255f6fa6ddfbb Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Mon, 21 Dec 2020 00:50:25 +0100
Subject: [PATCH 2/6] css fixes
---
src/editor/components/seColorPicker.js | 22 +++++++++++++
src/editor/index.html | 4 +--
src/editor/svgedit.css | 44 ++------------------------
3 files changed, 26 insertions(+), 44 deletions(-)
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 86f4e29a..0a633fc8 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -11,6 +11,28 @@ const $ = [
const template = document.createElement('template');
template.innerHTML = `
diff --git a/src/editor/index.html b/src/editor/index.html
index b9a93d8e..4ffb7fb3 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -340,8 +340,8 @@
Fit to layer content
Fit to all content
-
-
+
+
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index d179c8cc..123924dc 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -416,31 +416,6 @@ hr {
margin-top: 5px;
}
-#fill_color, #stroke_color {
- height: 16px;
- width: 16px;
- border: 1px solid #808080;
- cursor: pointer;
- overflow: hidden;
-}
-
-#fill_color, #stroke_color {
- height: 16px;
- width: 16px;
- border: 1px solid #808080;
- cursor: pointer;
- overflow: hidden;
-}
-
-.color_block {
- top: 0;
- left: 0;
-}
-
-.color_block svg {
- display: block;
-}
-
#tools_left {
position: absolute;
border-right: none;
@@ -695,20 +670,12 @@ input[type=text] {
display: none;
}
-#color_picker {
- position: absolute;
- display: none;
- background: #E8E8E8;
- height: 350px;
- z-index: 5;
-}
-
#tools_bottom {
position: absolute;
left: 40px;
right: 0;
bottom: 0;
- height: 40px;
+ height: 33px;
overflow: visible;
}
@@ -754,10 +721,7 @@ input[type=text] {
#toggle_stroke_tools:hover {
background: white;
}
-.color_tool > * {
- float: left;
- margin-right: 5px;
-}
+
#tool_opacity { right: 0;}
#tool_opacity {
@@ -883,10 +847,6 @@ ul li.current {
margin-left: 30px;
}
-#bg_blocks .color_block {
- position: static;
-}
-
#svg_docprops #svg_docprops_container,
#svg_prefs #svg_prefs_container {
position: absolute;
From ad959ce7a636aea7e7d5e7b89d5cd63b9cf7709a Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Thu, 24 Dec 2020 13:47:38 +0100
Subject: [PATCH 3/6] progress
---
.../jgraduate/LICENSE-Apache2.0.txt | 0
src/editor/{ => components}/jgraduate/README | 0
.../jgraduate/css/jGraduate.css | 0
.../components/jgraduate/css/jPicker.css | 256 ++++++++++++++++++
.../jgraduate/images/AlphaBar.png | Bin
.../jgraduate/images/Bars.png | Bin
.../jgraduate/images/Maps.png | Bin
.../jgraduate/images/NoColor.png | Bin
.../jgraduate/images/bar-opacity.png | Bin
.../jgraduate/images/map-opacity.png | Bin
.../jgraduate/images/mappoint.gif | Bin
.../jgraduate/images/mappoint_c.png | Bin
.../jgraduate/images/mappoint_f.png | Bin
.../jgraduate/images/picker.gif | Bin
.../jgraduate/images/preview-opacity.png | Bin
.../jgraduate/images/rangearrows.gif | Bin
.../jgraduate/images/rangearrows2.gif | Bin
.../jgraduate/jQuery.jGraduate.js | 115 ++++----
.../jgraduate/jQuery.jPicker.js | 2 +-
src/editor/components/seColorPicker.js | 102 ++++---
src/editor/index.html | 2 -
src/editor/jgraduate/css/jPicker.css | 1 -
src/editor/svgedit.css | 4 -
23 files changed, 377 insertions(+), 105 deletions(-)
rename src/editor/{ => components}/jgraduate/LICENSE-Apache2.0.txt (100%)
rename src/editor/{ => components}/jgraduate/README (100%)
rename src/editor/{ => components}/jgraduate/css/jGraduate.css (100%)
create mode 100644 src/editor/components/jgraduate/css/jPicker.css
rename src/editor/{ => components}/jgraduate/images/AlphaBar.png (100%)
rename src/editor/{ => components}/jgraduate/images/Bars.png (100%)
rename src/editor/{ => components}/jgraduate/images/Maps.png (100%)
rename src/editor/{ => components}/jgraduate/images/NoColor.png (100%)
rename src/editor/{ => components}/jgraduate/images/bar-opacity.png (100%)
rename src/editor/{ => components}/jgraduate/images/map-opacity.png (100%)
rename src/editor/{ => components}/jgraduate/images/mappoint.gif (100%)
rename src/editor/{ => components}/jgraduate/images/mappoint_c.png (100%)
rename src/editor/{ => components}/jgraduate/images/mappoint_f.png (100%)
rename src/editor/{ => components}/jgraduate/images/picker.gif (100%)
rename src/editor/{ => components}/jgraduate/images/preview-opacity.png (100%)
rename src/editor/{ => components}/jgraduate/images/rangearrows.gif (100%)
rename src/editor/{ => components}/jgraduate/images/rangearrows2.gif (100%)
rename src/editor/{ => components}/jgraduate/jQuery.jGraduate.js (93%)
rename src/editor/{ => components}/jgraduate/jQuery.jPicker.js (99%)
delete mode 100644 src/editor/jgraduate/css/jPicker.css
diff --git a/src/editor/jgraduate/LICENSE-Apache2.0.txt b/src/editor/components/jgraduate/LICENSE-Apache2.0.txt
similarity index 100%
rename from src/editor/jgraduate/LICENSE-Apache2.0.txt
rename to src/editor/components/jgraduate/LICENSE-Apache2.0.txt
diff --git a/src/editor/jgraduate/README b/src/editor/components/jgraduate/README
similarity index 100%
rename from src/editor/jgraduate/README
rename to src/editor/components/jgraduate/README
diff --git a/src/editor/jgraduate/css/jGraduate.css b/src/editor/components/jgraduate/css/jGraduate.css
similarity index 100%
rename from src/editor/jgraduate/css/jGraduate.css
rename to src/editor/components/jgraduate/css/jGraduate.css
diff --git a/src/editor/components/jgraduate/css/jPicker.css b/src/editor/components/jgraduate/css/jPicker.css
new file mode 100644
index 00000000..831a171d
--- /dev/null
+++ b/src/editor/components/jgraduate/css/jPicker.css
@@ -0,0 +1,256 @@
+.jPicker .Icon {
+ display: inline-block;
+ height: 24px;
+ position: relative;
+ text-align: left;
+ width: 25px
+}
+
+.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
+ background-position: 2px 2px;
+ display: block;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%
+}
+
+.jPicker .Icon span.Image {
+ background-repeat: no-repeat;
+ cursor: pointer;
+ display: block;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%
+}
+
+.jPicker.Container {
+ z-index: 10
+}
+
+table.jPicker {
+ background-color: #efefef;
+ border: 1px outset #666;
+ font-family: Arial, Helvetica, Sans-Serif;
+ font-size: 12px!important;
+ margin: 0;
+ padding: 5px;
+ width: 545px;
+ z-index: 20
+}
+
+.jPicker .Move {
+ background-color: #ddd;
+ border-color: #fff #666 #666 #fff;
+ border-style: solid;
+ border-width: 1px;
+ cursor: move;
+ height: 12px;
+ padding: 0
+}
+
+.jPicker .Title {
+ font-size: 11px!important;
+ font-weight: bold;
+ margin: -2px 0 0 0;
+ padding: 0;
+ text-align: center;
+ width: 100%
+}
+
+.jPicker div.Map {
+ border-bottom: 2px solid #fff;
+ border-left: 2px solid #9a9a9a;
+ border-right: 2px solid #fff;
+ border-top: 2px solid #9a9a9a;
+ cursor: crosshair;
+ height: 260px;
+ margin: 0 5px 0 5px;
+ overflow: hidden;
+ padding: 0;
+ position: relative;
+ width: 260px
+}
+
+.jPicker div[class="Map"] {
+ height: 256px;
+ width: 256px
+}
+
+.jPicker div.Bar {
+ border-bottom: 2px solid #fff;
+ border-left: 2px solid #9a9a9a;
+ border-right: 2px solid #fff;
+ border-top: 2px solid #9a9a9a;
+ cursor: n-resize;
+ height: 260px;
+ margin: 12px 10px 0 5px;
+ overflow: hidden;
+ padding: 0;
+ position: relative;
+ width: 24px
+}
+
+.jPicker div[class="Bar"] {
+ height: 256px;
+ width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+ background-color: transparent;
+ background-image: none;
+ display: block;
+ left: 0;
+ position: absolute;
+ top: 0
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
+ height: 2596px;
+ width: 256px
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+ height: 3896px;
+ width: 20px
+}
+
+.jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+ height: 256px;
+ width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
+ background-repeat: no-repeat
+}
+
+.jPicker .Map .Map3, .jPicker .Bar .Map5 {
+ background-repeat: repeat
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+ background-repeat: repeat-x
+}
+
+.jPicker .Map .Arrow {
+ display: block;
+ position: absolute
+}
+
+.jPicker .Bar .Arrow {
+ display: block;
+ left: 0;
+ position: absolute
+}
+
+.jPicker .Preview {
+ font-size: 9px;
+ text-align: center
+}
+
+.jPicker .Preview div {
+ border: 2px inset #eee;
+ height: 62px;
+ margin: 0 auto;
+ padding: 0;
+ width: 62px
+}
+
+.jPicker .Preview div span {
+ border: 1px solid #000;
+ display: block;
+ height: 30px;
+ margin: 0 auto;
+ padding: 0;
+ width: 60px
+}
+
+.jPicker .Preview .Active {
+ border-bottom-width: 0
+}
+
+.jPicker .Preview .Current {
+ border-top-width: 0;
+ cursor: pointer
+}
+
+.jPicker .Button {
+ text-align: center;
+ width: 115px
+}
+
+.jPicker .Button input {
+ width: 100px
+}
+
+.jPicker .Button .Ok {
+ margin: 12px 0 5px 0
+}
+
+.jPicker td.Radio {
+ margin: 0;
+ padding: 0;
+ width: 31px
+}
+
+.jPicker td.Radio input {
+ margin: 0 5px 0 0;
+ padding: 0
+}
+
+.jPicker td.Text {
+ font-size: 12px!important;
+ height: 22px;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ width: 70px
+}
+
+.jPicker tr.Hex td.Text {
+ width: 100px
+}
+
+.jPicker td.Text input {
+ background-color: #fff;
+ border: 1px inset #aaa;
+ height: 19px;
+ margin: 0 0 0 5px;
+ text-align: left;
+ width: 30px
+}
+
+.jPicker td[class="Text"] input {
+ height: 15px
+}
+
+.jPicker tr.Hex td.Text input.Hex {
+ width: 50px
+}
+
+.jPicker tr.Hex td.Text input.AHex {
+ width: 20px
+}
+
+.jPicker .Grid {
+ text-align: center;
+ width: 114px
+}
+
+.jPicker .Grid span.QuickColor {
+ border: 1px inset #aaa;
+ cursor: pointer;
+ display: inline-block;
+ height: 15px;
+ line-height: 15px;
+ margin: 0;
+ padding: 0;
+ width: 19px
+}
+
+.jPicker .Grid span[class="QuickColor"] {
+ width: 17px
+}
\ No newline at end of file
diff --git a/src/editor/jgraduate/images/AlphaBar.png b/src/editor/components/jgraduate/images/AlphaBar.png
similarity index 100%
rename from src/editor/jgraduate/images/AlphaBar.png
rename to src/editor/components/jgraduate/images/AlphaBar.png
diff --git a/src/editor/jgraduate/images/Bars.png b/src/editor/components/jgraduate/images/Bars.png
similarity index 100%
rename from src/editor/jgraduate/images/Bars.png
rename to src/editor/components/jgraduate/images/Bars.png
diff --git a/src/editor/jgraduate/images/Maps.png b/src/editor/components/jgraduate/images/Maps.png
similarity index 100%
rename from src/editor/jgraduate/images/Maps.png
rename to src/editor/components/jgraduate/images/Maps.png
diff --git a/src/editor/jgraduate/images/NoColor.png b/src/editor/components/jgraduate/images/NoColor.png
similarity index 100%
rename from src/editor/jgraduate/images/NoColor.png
rename to src/editor/components/jgraduate/images/NoColor.png
diff --git a/src/editor/jgraduate/images/bar-opacity.png b/src/editor/components/jgraduate/images/bar-opacity.png
similarity index 100%
rename from src/editor/jgraduate/images/bar-opacity.png
rename to src/editor/components/jgraduate/images/bar-opacity.png
diff --git a/src/editor/jgraduate/images/map-opacity.png b/src/editor/components/jgraduate/images/map-opacity.png
similarity index 100%
rename from src/editor/jgraduate/images/map-opacity.png
rename to src/editor/components/jgraduate/images/map-opacity.png
diff --git a/src/editor/jgraduate/images/mappoint.gif b/src/editor/components/jgraduate/images/mappoint.gif
similarity index 100%
rename from src/editor/jgraduate/images/mappoint.gif
rename to src/editor/components/jgraduate/images/mappoint.gif
diff --git a/src/editor/jgraduate/images/mappoint_c.png b/src/editor/components/jgraduate/images/mappoint_c.png
similarity index 100%
rename from src/editor/jgraduate/images/mappoint_c.png
rename to src/editor/components/jgraduate/images/mappoint_c.png
diff --git a/src/editor/jgraduate/images/mappoint_f.png b/src/editor/components/jgraduate/images/mappoint_f.png
similarity index 100%
rename from src/editor/jgraduate/images/mappoint_f.png
rename to src/editor/components/jgraduate/images/mappoint_f.png
diff --git a/src/editor/jgraduate/images/picker.gif b/src/editor/components/jgraduate/images/picker.gif
similarity index 100%
rename from src/editor/jgraduate/images/picker.gif
rename to src/editor/components/jgraduate/images/picker.gif
diff --git a/src/editor/jgraduate/images/preview-opacity.png b/src/editor/components/jgraduate/images/preview-opacity.png
similarity index 100%
rename from src/editor/jgraduate/images/preview-opacity.png
rename to src/editor/components/jgraduate/images/preview-opacity.png
diff --git a/src/editor/jgraduate/images/rangearrows.gif b/src/editor/components/jgraduate/images/rangearrows.gif
similarity index 100%
rename from src/editor/jgraduate/images/rangearrows.gif
rename to src/editor/components/jgraduate/images/rangearrows.gif
diff --git a/src/editor/jgraduate/images/rangearrows2.gif b/src/editor/components/jgraduate/images/rangearrows2.gif
similarity index 100%
rename from src/editor/jgraduate/images/rangearrows2.gif
rename to src/editor/components/jgraduate/images/rangearrows2.gif
diff --git a/src/editor/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js
similarity index 93%
rename from src/editor/jgraduate/jQuery.jGraduate.js
rename to src/editor/components/jgraduate/jQuery.jGraduate.js
index 78a5a820..d27a85aa 100644
--- a/src/editor/jgraduate/jQuery.jGraduate.js
+++ b/src/editor/components/jgraduate/jQuery.jGraduate.js
@@ -17,6 +17,11 @@
* @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
*/
+/**
+ * @todo JFH: This jQuery plugin was adapted to work within a Web Component.
+ * We have to rewrite it as a pure webcomponent.
+*/
+
/* eslint-disable jsdoc/require-property */
/**
* The jQuery namespace.
@@ -273,6 +278,9 @@ export default function jQueryPluginJGraduate ($) {
$settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}),
id = $this.attr('id'),
idref = '#' + $this.attr('id') + ' ';
+ // JFH !!!!!
+ const $shadowRoot = this.parentNode;
+ const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
if (!idref) {
/* await */ $.alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
@@ -332,8 +340,9 @@ export default function jQueryPluginJGraduate ($) {
'
' +
'
'
);
- const colPicker = $(idref + '> .jGraduate_colPick');
- const gradPicker = $(idref + '> .jGraduate_gradPick');
+ /* JFH !!!! */
+ const colPicker = $wc(idref + '> .jGraduate_colPick');
+ const gradPicker = $wc(idref + '> .jGraduate_gradPick');
gradPicker.html(
'' +
@@ -440,9 +449,9 @@ export default function jQueryPluginJGraduate ($) {
const attrInput = {};
const SLIDERW = 145;
- $('.jGraduate_SliderBar').width(SLIDERW);
-
- const container = $('#' + id + '_jGraduate_GradContainer')[0];
+ $wc('.jGraduate_SliderBar').width(SLIDERW);
+ // JFH !!!!!!
+ const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
const svg = mkElem('svg', {
id: id + '_jgraduate_svg',
@@ -491,7 +500,8 @@ export default function jQueryPluginJGraduate ($) {
let stopGroup; // eslint-disable-line prefer-const
if (isSolid) {
- grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
+ // JFH !!!!!!!!
+ grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
color = $this.paint[curType];
mkStop(0, '#' + color, 1);
@@ -578,18 +588,6 @@ export default function jQueryPluginJGraduate ($) {
focusCoord[0].id = id + '_jGraduate_focusCoord';
- // const coords = $(idref + ' .grad_coord');
-
- // $(container).hover(function () {
- // coords.animate({
- // opacity: 1
- // }, 500);
- // }, function () {
- // coords.animate({
- // opacity: .2
- // }, 500);
- // });
-
let showFocus;
$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
const isRadial = isNaN(attr[1]);
@@ -606,7 +604,7 @@ export default function jQueryPluginJGraduate ($) {
}
}
- attrInput[attr] = $('#' + id + '_jGraduate_' + attr)
+ attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
.val(attrval)
.change(function () {
// TODO: Support values < 0 and > 1 (zoomable preview?)
@@ -683,14 +681,14 @@ export default function jQueryPluginJGraduate ($) {
e.preventDefault();
return false;
}).data('stop', stop).data('bg', pathbg).dblclick(function () {
- $('div.jGraduate_LightBox').show();
+ $wc('div.jGraduate_LightBox').show();
const colorhandle = this;
let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;
let stopColor = stop.getAttribute('stop-color') || 1;
let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
colr = stopColor.substr(1) + thisAlpha;
- $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
+ $wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
window: {title: 'Pick the start color and opacity for the gradient'},
images: {clientPath: $settings.images.clientPath},
color: {active: colr, alphaSupport: true}
@@ -701,11 +699,11 @@ export default function jQueryPluginJGraduate ($) {
colorhandle.setAttribute('fill-opacity', stopOpacity);
stop.setAttribute('stop-color', stopColor);
stop.setAttribute('stop-opacity', stopOpacity);
- $('div.jGraduate_LightBox').hide();
- $('#' + id + '_jGraduate_stopPicker').hide();
+ $wc('div.jGraduate_LightBox').hide();
+ $wc('#' + id + '_jGraduate_stopPicker').hide();
}, null, function () {
- $('div.jGraduate_LightBox').hide();
- $('#' + id + '_jGraduate_stopPicker').hide();
+ $wc('div.jGraduate_LightBox').hide();
+ $wc('#' + id + '_jGraduate_stopPicker').hide();
});
});
@@ -735,13 +733,13 @@ export default function jQueryPluginJGraduate ($) {
*/
function remStop () {
delStop.setAttribute('display', 'none');
- const path = $(curStop);
+ const path = $wc(curStop);
const stop = path.data('stop');
const bg = path.data('bg');
- $([curStop, stop, bg]).remove();
+ $wc([curStop, stop, bg]).remove();
}
- const stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
+ const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider');
let stops, curStop, drag;
@@ -761,9 +759,6 @@ export default function jQueryPluginJGraduate ($) {
if (curStop) curStop.setAttribute('stroke', '#000');
item.setAttribute('stroke', 'blue');
curStop = item;
- // stops = $('stop');
- // opac_select.val(curStop.attr('fill-opacity') || 1);
- // root.append(delStop);
}
let stopOffset;
@@ -792,7 +787,7 @@ export default function jQueryPluginJGraduate ($) {
const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
if (scaleX === 1 && scaleY === 1) {
curGradient.removeAttribute('gradientTransform');
- // $('#ang').addClass('dis');
+ // $wc('#ang').addClass('dis');
} else {
const x = -cX * (scaleX - 1);
const y = -cY * (scaleY - 1);
@@ -801,7 +796,7 @@ export default function jQueryPluginJGraduate ($) {
rot + 'translate(' + x + ',' + y + ') scale(' +
scaleX + ',' + scaleY + ')'
);
- // $('#ang').removeClass('dis');
+ // $wc('#ang').removeClass('dis');
}
}
@@ -981,22 +976,22 @@ export default function jQueryPluginJGraduate ($) {
previewRect.setAttribute('fill-opacity', gradalpha / 100);
- $('#' + id + ' div.grad_coord').mousedown(function (evt) {
+ $wc(id + ' div.grad_coord').mousedown(function (evt) {
evt.preventDefault();
- draggingCoord = $(this);
+ draggingCoord = $wc(this);
// const sPos = draggingCoord.offset();
offset = draggingCoord.parent().offset();
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
});
// bind GUI elements
- $('#' + id + '_jGraduate_Ok').bind('click', function () {
+ $wc(id + '_jGraduate_Ok').bind('click', function () {
$this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true);
$this.paint.solidColor = null;
okClicked();
});
- $('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
+ $wc(id + '_jGraduate_Cancel').bind('click', function (paint) {
cancelClicked();
});
@@ -1010,11 +1005,11 @@ export default function jQueryPluginJGraduate ($) {
}
}
- $('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+ $wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
let lastfx, lastfy;
- $('#' + id + '_jGraduate_match_ctr').change(function () {
+ $wc('#' + id + '_jGraduate_match_ctr').change(function () {
showFocus = !this.checked;
focusCoord.toggle(showFocus);
attrInput.fx.val('');
@@ -1157,13 +1152,13 @@ export default function jQueryPluginJGraduate ($) {
};
$.each(sliders, function (type, data) {
- const handle = $(data.handle);
+ const handle = $wc(data.handle);
handle.mousedown(function (evt) {
const parent = handle.parent();
slider = {
type,
elem: handle,
- input: $(data.input),
+ input: $wc(data.input),
parent,
offset: parent.offset()
};
@@ -1171,7 +1166,7 @@ export default function jQueryPluginJGraduate ($) {
evt.preventDefault();
});
- $(data.input).val(data.val).change(function () {
+ $wc(data.input).val(data.val).change(function () {
const isRad = curType === 'radialGradient';
let val = Number(this.value);
let xpos = 0;
@@ -1261,28 +1256,30 @@ export default function jQueryPluginJGraduate ($) {
null,
function () { cancelClicked(); }
);
-
- const tabs = $(idref + ' .jGraduate_tabs li');
+ // JFH !!!!
+ // const tabs = $wc(idref + ' .jGraduate_tabs li');
+ const tabs = $wc('.jGraduate_tabs li');
tabs.click(function () {
tabs.removeClass('jGraduate_tab_current');
$(this).addClass('jGraduate_tab_current');
- $(idref + ' > div').hide();
+ $wc(idref + ' > div').hide();
const type = $(this).attr('data-type');
- /* const container = */ $(idref + ' .jGraduate_gradPick').show();
+ $wc(idref + ' .jGraduate_gradPick').show();
if (type === 'rg' || type === 'lg') {
// Show/hide appropriate fields
- $('.jGraduate_' + type + '_field').show();
- $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
+ $wc('.jGraduate_' + type + '_field').show();
+ $wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
- $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
+ $wc('#' + id + '_jgraduate_rect')[0]
+ .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
// Copy stops
curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
- $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
+ $wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
- const newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
+ const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
if (curGradient !== newGrad) {
const curStops = $(curGradient).find('stop');
@@ -1292,27 +1289,27 @@ export default function jQueryPluginJGraduate ($) {
curGradient.setAttribute('spreadMethod', sm);
}
showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
- $('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
+ $wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
if (showFocus) {
- $('#' + id + '_jGraduate_match_ctr')[0].checked = false;
+ $wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
}
} else {
- $(idref + ' .jGraduate_gradPick').hide();
- $(idref + ' .jGraduate_colPick').show();
+ $wc(idref + ' .jGraduate_gradPick').hide();
+ $wc(idref + ' .jGraduate_colPick').show();
}
});
- $(idref + ' > div').hide();
+ $wc(idref + ' > div').hide();
tabs.removeClass('jGraduate_tab_current');
let tab;
switch ($this.paint.type) {
case 'linearGradient':
- tab = $(idref + ' .jGraduate_tab_lingrad');
+ tab = $wc(idref + ' .jGraduate_tab_lingrad');
break;
case 'radialGradient':
- tab = $(idref + ' .jGraduate_tab_radgrad');
+ tab = $wc(idref + ' .jGraduate_tab_radgrad');
break;
default:
- tab = $(idref + ' .jGraduate_tab_color');
+ tab = $wc(idref + ' .jGraduate_tab_color');
break;
}
$this.show();
diff --git a/src/editor/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js
similarity index 99%
rename from src/editor/jgraduate/jQuery.jPicker.js
rename to src/editor/components/jgraduate/jQuery.jPicker.js
index 4b6c41c7..86232ac6 100755
--- a/src/editor/jgraduate/jQuery.jPicker.js
+++ b/src/editor/components/jgraduate/jQuery.jPicker.js
@@ -1556,7 +1556,7 @@ const jPicker = function ($) {
const all = ui.val('all');
activePreview.css({backgroundColor: (all && '#' + all.hex) || 'transparent'});
setAlpha.call(that, activePreview, (all && toFixedNumeric((all.a * 100) / 255, 4)) || 0);
- } catch (e) { }
+ } catch (e) {}
}
/**
* @param {external:jQuery} ui
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 0a633fc8..443dd6c1 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -1,6 +1,6 @@
/* globals jQuery */
-import jQueryPluginJGraduate from '../jgraduate/jQuery.jGraduate.js';
-import jQueryPluginJPicker from '../jgraduate/jQuery.jPicker.js';
+import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
+import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
import PaintBox from './PaintBox.js';
const $ = [
@@ -11,7 +11,9 @@ const $ = [
const template = document.createElement('template');
template.innerHTML = `
-
-
+
+
@@ -46,7 +51,7 @@ template.innerHTML = `
`;
/**
- * @class SeMenuItem
+ * @class SeColorPicker
*/
export class SeColorPicker extends HTMLElement {
/**
@@ -57,17 +62,18 @@ export class SeColorPicker extends HTMLElement {
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({mode: 'open'});
this._shadowRoot.appendChild(template.content.cloneNode(true));
- this.$img = this._shadowRoot.querySelector('img');
- this.$label = this._shadowRoot.querySelector('label');
- this.$picker = this._shadowRoot.getElementById('picker');
+ this.$logo = this._shadowRoot.getElementById('logo');
+ this.$label = this._shadowRoot.getElementById('label');
this.paintBox = null;
+ this.$picker = this._shadowRoot.getElementById('picker');
+ this.$color_picker = this._shadowRoot.getElementById('color_picker');
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
- return ['label', 'src', 'value', 'picker'];
+ return ['label', 'src', 'type'];
}
/**
* @function attributeChangedCallback
@@ -80,10 +86,13 @@ export class SeColorPicker extends HTMLElement {
if (oldValue === newValue) return;
switch (name) {
case 'src':
- this.$img.setAttribute('src', newValue);
+ this.$logo.setAttribute('src', newValue);
break;
case 'label':
- this.$label.setAttribute('title', newValue);
+ this.setAttribute('title', newValue);
+ break;
+ case 'type':
+ this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`);
break;
default:
// eslint-disable-next-line no-console
@@ -96,7 +105,7 @@ export class SeColorPicker extends HTMLElement {
* @returns {any}
*/
get label () {
- return this.getAttribute('label');
+ return this.$label.getAttribute('title');
}
/**
@@ -106,6 +115,21 @@ export class SeColorPicker extends HTMLElement {
set label (value) {
this.setAttribute('label', value);
}
+ /**
+ * @function get
+ * @returns {any}
+ */
+ get type () {
+ return this.getAttribute('type');
+ }
+
+ /**
+ * @function set
+ * @returns {void}
+ */
+ set type (value) {
+ this.setAttribute('type', value);
+ }
/**
* @function get
* @returns {any}
@@ -138,29 +162,31 @@ export class SeColorPicker extends HTMLElement {
connectedCallback () {
this.paintBox = new PaintBox(this, this.type);
let {paint} = this.paintBox;
- $('#color_picker')
- .draggable({
- cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
- containment: 'window'
- })
- .jGraduate(
- {
- images: {clientPath: './jgraduate/images/'},
- paint,
- window: {pickerTitle: this.label},
- // images: {clientPath: configObj.curConfig.imgPath},
- newstop: 'inverse'
- },
- function (p) {
- paint = new $.jGraduate.Paint(p);
- this.paintBox.setPaint(paint);
- this.svgCanvas.setPaint(this.picker, paint);
- $('#color_picker').hide();
- },
- () => {
- $('#color_picker').hide();
- }
- );
+ $(this.$picker).click(() => {
+ $(this.$color_picker)
+ .draggable({
+ cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
+ containment: 'window'
+ })
+ .jGraduate(
+ {
+ images: {clientPath: './components/jgraduate/images/'},
+ paint,
+ window: {pickerTitle: this.label},
+ // images: {clientPath: configObj.curConfig.imgPath},
+ newstop: 'inverse'
+ },
+ function (p) {
+ paint = new $.jGraduate.Paint(p);
+ this.paintBox.setPaint(paint);
+ this.svgCanvas.setPaint(this.picker, paint);
+ $('#color_picker').hide();
+ },
+ () => {
+ $('#color_picker').hide();
+ }
+ );
+ });
}
}
diff --git a/src/editor/index.html b/src/editor/index.html
index f18e975e..aa31af93 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -398,8 +398,6 @@
-
-
diff --git a/src/editor/jgraduate/css/jPicker.css b/src/editor/jgraduate/css/jPicker.css
deleted file mode 100644
index f0f3a10f..00000000
--- a/src/editor/jgraduate/css/jPicker.css
+++ /dev/null
@@ -1 +0,0 @@
-.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 174a2455..79935b71 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -1,7 +1,3 @@
-@import "./jgraduate/css/jGraduate.css";
-@import "./jgraduate/css/jPicker.css";
-
-
body {
background: #D0D0D0;
}
From 00d98958f2baafaf8bf7b687beda8d68711b53f7 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Thu, 24 Dec 2020 16:01:53 +0100
Subject: [PATCH 4/6] fix colorpicker updates
---
src/editor/components/PaintBox.js | 36 ++++++++------------------
src/editor/components/seColorPicker.js | 36 ++++++++++++++++++--------
src/editor/svgedit.js | 5 ++--
3 files changed, 39 insertions(+), 38 deletions(-)
diff --git a/src/editor/components/PaintBox.js b/src/editor/components/PaintBox.js
index b1df023f..cc8ca793 100644
--- a/src/editor/components/PaintBox.js
+++ b/src/editor/components/PaintBox.js
@@ -5,40 +5,36 @@
class PaintBox {
/**
* @param {string|Element|external:jQuery} container
- * @param {PlainObject} svgcanvas
* @param {"fill"} type
* @param {string} color
* @param {number} opacity
*/
- constructor (container, svgcanvas, type, color, opacity) {
+ constructor (container, type, color, opacity) {
// set up gradients to be used for the buttons
const svgdocbox = new DOMParser().parseFromString(
- `
+ `
+ fill="#${color}" opacity="${opacity}" width="22" height="22"/>
`,
'text/xml'
);
let docElem = svgdocbox.documentElement;
- docElem = $(container)[0].appendChild(document.importNode(docElem, true));
- docElem.setAttribute('width', 16.5);
+ docElem = container.appendChild(document.importNode(docElem, true));
this.rect = docElem.firstElementChild;
this.defs = docElem.getElementsByTagName('defs')[0];
this.grad = this.defs.firstElementChild;
this.paint = new $.jGraduate.Paint({solidColor: color});
this.type = type;
- this.svgcanvas = svgcanvas;
}
/**
* @param {module:jGraduate~Paint} paint
- * @param {boolean} apply
* @returns {void}
*/
- setPaint (paint, apply) {
+ setPaint (paint) {
this.paint = paint;
const ptype = paint.type;
@@ -61,11 +57,6 @@ class PaintBox {
this.rect.setAttribute('fill', fillAttr);
this.rect.setAttribute('opacity', opac);
-
- if (apply) {
- this.svgCanvas.setColor(this.type, this._paintColor, true);
- this.svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);
- }
}
/**
* @param {string} color
@@ -90,11 +81,10 @@ class PaintBox {
/**
* @param {PlainObject} selectedElement
- * @param {boolean} apply
- * @returns {void}
+ * @returns {any}
*/
- update (selectedElement, apply) {
- if (!selectedElement) { return; }
+ update (selectedElement) {
+ if (!selectedElement) { return null; }
const {type} = this;
switch (selectedElement.tagName) {
@@ -103,7 +93,7 @@ class PaintBox {
case 'foreignObject':
// These elements don't have fill or stroke, so don't change
// the current value
- return;
+ return null;
case 'g':
case 'a': {
const childs = selectedElement.getElementsByTagName('*');
@@ -123,7 +113,7 @@ class PaintBox {
if (gPaint === null) {
// No common color, don't update anything
this._paintColor = null;
- return;
+ return null;
}
this._paintColor = gPaint;
this._paintOpacity = 1;
@@ -139,16 +129,12 @@ class PaintBox {
}
}
- if (apply) {
- this.svgCanvas.setColor(type, this._paintColor, true);
- this.svgCanvas.setPaintOpacity(type, this._paintOpacity, true);
- }
-
this._paintOpacity *= 100;
const paint = this.getPaint(this._paintColor, this._paintOpacity, type);
// update the rect inside #fill_color/#stroke_color
this.setPaint(paint);
+ return (paint);
}
/**
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 443dd6c1..cbc8af05 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -17,7 +17,7 @@ template.innerHTML = `
height: 22px;
width: 22px;
}
- .block {
+ #block {
height: 22px;
width: 22px;
float: right;
@@ -42,9 +42,7 @@ template.innerHTML = `
-
@@ -64,6 +62,7 @@ export class SeColorPicker extends HTMLElement {
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$logo = this._shadowRoot.getElementById('logo');
this.$label = this._shadowRoot.getElementById('label');
+ this.$block = this._shadowRoot.getElementById('block');
this.paintBox = null;
this.$picker = this._shadowRoot.getElementById('picker');
this.$color_picker = this._shadowRoot.getElementById('color_picker');
@@ -92,7 +91,7 @@ export class SeColorPicker extends HTMLElement {
this.setAttribute('title', newValue);
break;
case 'type':
- this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`);
+ this.$label.setAttribute('title', `Pick a ${newValue} Paint and Opacity`);
break;
default:
// eslint-disable-next-line no-console
@@ -152,7 +151,20 @@ export class SeColorPicker extends HTMLElement {
* @returns {void}
*/
update (selectedElement, apply) {
- this.paintBox.update(selectedElement, apply);
+ const paint = this.paintBox.update(selectedElement);
+ if (paint && apply) {
+ const changeEvent = new CustomEvent('change', {detail: {
+ paint
+ }});
+ this.dispatchEvent(changeEvent);
+ }
+ }
+ /**
+ * @param {PlainObject} paint
+ * @returns {void}
+ */
+ setPaint (paint) {
+ this.paintBox.setPaint(paint);
}
/**
@@ -160,7 +172,7 @@ export class SeColorPicker extends HTMLElement {
* @returns {void}
*/
connectedCallback () {
- this.paintBox = new PaintBox(this, this.type);
+ this.paintBox = new PaintBox(this.$block, this.type);
let {paint} = this.paintBox;
$(this.$picker).click(() => {
$(this.$color_picker)
@@ -173,13 +185,15 @@ export class SeColorPicker extends HTMLElement {
images: {clientPath: './components/jgraduate/images/'},
paint,
window: {pickerTitle: this.label},
- // images: {clientPath: configObj.curConfig.imgPath},
newstop: 'inverse'
},
- function (p) {
+ (p) => {
paint = new $.jGraduate.Paint(p);
- this.paintBox.setPaint(paint);
- this.svgCanvas.setPaint(this.picker, paint);
+ this.setPaint(paint);
+ const changeEvent = new CustomEvent('change', {detail: {
+ paint
+ }});
+ this.dispatchEvent(changeEvent);
$('#color_picker').hide();
},
() => {
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 58e1b255..f9f47b17 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -2946,12 +2946,13 @@ editor.init = () => {
$('#group_opacity').val(configObj.curConfig.initOpacity * 100);
const handleColorPicker = (type, evt) => {
- // const {paint} = evt.detail;
+ const {paint} = evt.detail;
+ svgCanvas.setPaint(type, paint);
updateToolButtonState();
};
$id('stroke_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
- $id('fill_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
+ $id('fill_color').addEventListener('change', (evt) => handleColorPicker('fill', evt));
$('#group_opacityLabel').click(() => {
$('#opacity_dropdown button').mousedown();
From 1a938fc52205c4b179e22a617587d69f2d84f5a4 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Thu, 24 Dec 2020 22:24:10 +0100
Subject: [PATCH 5/6] Update jQuery.jGraduate.js
---
.../components/jgraduate/jQuery.jGraduate.js | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js
index d27a85aa..8b571617 100644
--- a/src/editor/components/jgraduate/jQuery.jGraduate.js
+++ b/src/editor/components/jgraduate/jQuery.jGraduate.js
@@ -481,7 +481,7 @@ export default function jQueryPluginJGraduate ($) {
case 'linearGradient':
if (!isSolid) {
curGradient.id = id + '_lg_jgraduate_grad';
- grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+ grad = curGradient = svg.appendChild(curGradient);
}
mkElem('radialGradient', {
id: id + '_rg_jgraduate_grad'
@@ -491,7 +491,7 @@ export default function jQueryPluginJGraduate ($) {
case 'radialGradient':
if (!isSolid) {
curGradient.id = id + '_rg_jgraduate_grad';
- grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+ grad = curGradient = svg.appendChild(curGradient);
}
mkElem('linearGradient', {
id: id + '_lg_jgraduate_grad'
@@ -736,7 +736,7 @@ export default function jQueryPluginJGraduate ($) {
const path = $wc(curStop);
const stop = path.data('stop');
const bg = path.data('bg');
- $wc([curStop, stop, bg]).remove();
+ $([curStop, stop, bg]).remove();
}
const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider');
@@ -976,22 +976,22 @@ export default function jQueryPluginJGraduate ($) {
previewRect.setAttribute('fill-opacity', gradalpha / 100);
- $wc(id + ' div.grad_coord').mousedown(function (evt) {
+ $wc('#' + id + ' div.grad_coord').mousedown(function (evt) {
evt.preventDefault();
- draggingCoord = $wc(this);
+ draggingCoord = $(this);
// const sPos = draggingCoord.offset();
offset = draggingCoord.parent().offset();
$win.mousemove(onCoordDrag).mouseup(onCoordUp);
});
// bind GUI elements
- $wc(id + '_jGraduate_Ok').bind('click', function () {
+ $wc('#' + id + '_jGraduate_Ok').bind('click', function () {
$this.paint.type = curType;
$this.paint[curType] = curGradient.cloneNode(true);
$this.paint.solidColor = null;
okClicked();
});
- $wc(id + '_jGraduate_Cancel').bind('click', function (paint) {
+ $wc('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
cancelClicked();
});
@@ -1152,13 +1152,13 @@ export default function jQueryPluginJGraduate ($) {
};
$.each(sliders, function (type, data) {
- const handle = $wc(data.handle);
+ const handle = $(data.handle);
handle.mousedown(function (evt) {
const parent = handle.parent();
slider = {
type,
elem: handle,
- input: $wc(data.input),
+ input: $(data.input),
parent,
offset: parent.offset()
};
@@ -1166,7 +1166,7 @@ export default function jQueryPluginJGraduate ($) {
evt.preventDefault();
});
- $wc(data.input).val(data.val).change(function () {
+ $(data.input).val(data.val).change(function () {
const isRad = curType === 'radialGradient';
let val = Number(this.value);
let xpos = 0;
From fe6470bcdd9c6c8f64509e2828fc68350bf66759 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Thu, 24 Dec 2020 22:40:30 +0100
Subject: [PATCH 6/6] fix colorbox
---
src/editor/components/PaintBox.js | 12 +++++++-----
src/editor/components/seColorPicker.js | 5 +++--
src/editor/svgedit.js | 4 ++--
3 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/src/editor/components/PaintBox.js b/src/editor/components/PaintBox.js
index cc8ca793..b4cbce3d 100644
--- a/src/editor/components/PaintBox.js
+++ b/src/editor/components/PaintBox.js
@@ -59,16 +59,17 @@ class PaintBox {
this.rect.setAttribute('opacity', opac);
}
/**
+ * @param {PlainObject} svgCanvas
* @param {string} color
* @param {Float} opac
* @param {string} type
* @returns {module:jGraduate~Paint}
*/
- getPaint (color, opac, type) {
+ static getPaint (svgCanvas, color, opac, type) {
// update the editor's fill paint
const opts = {alpha: opac};
if (color.startsWith('url(#')) {
- let refElem = this.svgCanvas.getRefElem(color);
+ let refElem = svgCanvas.getRefElem(color);
refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
opts[refElem.tagName] = refElem;
} else if (color.startsWith('#')) {
@@ -80,10 +81,11 @@ class PaintBox {
}
/**
+ * @param {PlainObject} svgcanvas
* @param {PlainObject} selectedElement
* @returns {any}
*/
- update (selectedElement) {
+ update (svgcanvas, selectedElement) {
if (!selectedElement) { return null; }
const {type} = this;
@@ -131,7 +133,7 @@ class PaintBox {
this._paintOpacity *= 100;
- const paint = this.getPaint(this._paintColor, this._paintOpacity, type);
+ const paint = PaintBox.getPaint(svgcanvas, this._paintColor, this._paintOpacity, type);
// update the rect inside #fill_color/#stroke_color
this.setPaint(paint);
return (paint);
@@ -147,7 +149,7 @@ class PaintBox {
case 'linearGradient':
case 'radialGradient': {
const paint = new $.jGraduate.Paint({copy: this.paint});
- this.svgCanvas.setPaint(this.type, paint);
+ this.setPaint(this.type, paint);
break;
}
}
diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index cbc8af05..727445fd 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -146,12 +146,13 @@ export class SeColorPicker extends HTMLElement {
}
/**
+ * @param {PlainObject} svgCanvas
* @param {PlainObject} selectedElement
* @param {bool} apply
* @returns {void}
*/
- update (selectedElement, apply) {
- const paint = this.paintBox.update(selectedElement);
+ update (svgCanvas, selectedElement, apply) {
+ const paint = this.paintBox.update(svgCanvas, selectedElement);
if (paint && apply) {
const changeEvent = new CustomEvent('change', {detail: {
paint
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index f9f47b17..15833e17 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1133,8 +1133,8 @@ editor.init = () => {
};
const updateColorpickers = (apply) => {
- $id('fill_color').update(selectedElement, apply);
- $id('stroke_color').update(selectedElement, apply);
+ $id('fill_color').update(svgCanvas, selectedElement, apply);
+ $id('stroke_color').update(svgCanvas, selectedElement, apply);
};
/**