From 29f2847f27662e4f6984a1eebf5040bd45f74710 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Sun, 22 Nov 2020 00:51:21 +0100 Subject: [PATCH] add sePalette - in progress --- src/editor/components/index.js | 1 + src/editor/components/sePalette.js | 110 +++++++++++ src/editor/components/seSpinInput.js | 25 --- src/editor/images/fill.png | Bin 644 -> 0 bytes src/editor/images/fill.svg | 8 + src/editor/images/svg_edit_icons.svg | 11 -- src/editor/index.html | 205 ++++++++++---------- src/editor/svgedit.css | 170 +---------------- src/editor/svgedit.js | 267 ++------------------------- 9 files changed, 248 insertions(+), 549 deletions(-) create mode 100644 src/editor/components/sePalette.js delete mode 100644 src/editor/images/fill.png create mode 100644 src/editor/images/fill.svg diff --git a/src/editor/components/index.js b/src/editor/components/index.js index 07b104cf..f26f829e 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -4,3 +4,4 @@ import './seExplorerButton.js'; import './seDropdown.js'; import './seInput.js'; import './seSpinInput.js'; +import './sePalette.js'; diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js new file mode 100644 index 00000000..16ae9a1a --- /dev/null +++ b/src/editor/components/sePalette.js @@ -0,0 +1,110 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/CenteredStrip.js'; + +const palette = [ + // Todo: Make into configuration item? + '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff', + '#ff0000', '#ff7f00', '#ffff00', '#7fff00', + '#00ff00', '#00ff7f', '#00ffff', '#007fff', + '#0000ff', '#7f00ff', '#ff00ff', '#ff007f', + '#7f0000', '#7f3f00', '#7f7f00', '#3f7f00', + '#007f00', '#007f3f', '#007f7f', '#003f7f', + '#00007f', '#3f007f', '#7f007f', '#7f003f', + '#ffaaaa', '#ffd4aa', '#ffffaa', '#d4ffaa', + '#aaffaa', '#aaffd4', '#aaffff', '#aad4ff', + '#aaaaff', '#d4aaff', '#ffaaff', '#ffaad4' +]; + +const template = document.createElement('template'); +template.innerHTML = ` + +
+ + +
+`; + +/** + * @class SEPalette + */ +export class SEPalette extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot.appendChild(template.content.cloneNode(true)); + this.$strip = this._shadowRoot.querySelector('elix-centered-strip'); + palette.forEach((rgb) => { + const newDiv = document.createElement('div'); + newDiv.classList.add('square'); + newDiv.style.backgroundColor = rgb; + newDiv.dataset.rgb = rgb; + this.$strip.appendChild(newDiv); + }); + } + + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + this.$strip.addEventListener('click', (e) => { + e.preventDefault(); + console.log(e); + this.dispatchEvent(this.$event); + }); + } +} + +// Register +customElements.define('se-palette', SEPalette); + +/* #palette_holder { + overflow: hidden; + margin-top: 5px; + padding: 5px; + position: absolute; + right: 15px; + height: 16px; + background: #f0f0f0; + border-radius: 3px; + z-index: 2; + + #palette { + float: left; + width: 632px; + height: 16px; +} + + $('.palette_item').mousedown(function (evt) { + // shift key or right click for stroke + const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill'; + let color = $(this).data('rgb'); + let paint; + + // Webkit-based browsers returned 'initial' here for no stroke + if (color === 'none' || color === 'transparent' || color === 'initial') { + color = 'none'; + paint = new $.jGraduate.Paint(); + } else { + paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)}); + } + + paintBox[picker].setPaint(paint); + svgCanvas.setColor(picker, color); + + if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) { + svgCanvas.setPaintOpacity(picker, 1.0); + } + updateToolButtonState(); + }).bind('contextmenu', function (e) { e.preventDefault(); }); + +*/ diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index e04e8ed1..9f7ed67b 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -60,7 +60,6 @@ export class SESpinInput extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { - console.log(name, newValue); if (oldValue === newValue) return; switch (name) { case 'src': @@ -177,27 +176,3 @@ export class SESpinInput extends HTMLElement { // Register customElements.define('se-spin-input', SESpinInput); - -/* TO DO - Call back for fontsize - function stepFontSize (elem, step) { - const origVal = Number(elem.value); - const sugVal = origVal + step; - const increasing = sugVal >= origVal; - if (step === 0) { return origVal; } - - if (origVal >= 24) { - if (increasing) { - return Math.round(origVal * 1.1); - } - return Math.round(origVal / 1.1); - } - if (origVal <= 1) { - if (increasing) { - return origVal * 2; - } - return origVal / 2; - } - return sugVal; - } - */ diff --git a/src/editor/images/fill.png b/src/editor/images/fill.png deleted file mode 100644 index c785879d6b5b13d4608312129f033841dcae0d5a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 644 zcmV-~0(i-Y?4}77vHNGXjF+MxaGfs{K?FarZ{I3C~6Mj1UnDD>j zXXWRTXQ_{qD`UBd(thCog8vFoR^~V7HxSl_|I@xC{miN-Li>UL@&9H2mqFPDU(H`2 zWcoj5&mgEh|G(w`jsJE3H$wT9U$mbhWT$*d+lE*Bf&bC}Oa34DpY%TyF4Fu(;UPl4 z?M*@~9_N5FEx54;Y+=bm+K{^$daxd<@)T;z>V2BB@^! zMUlf1uMvSS5lK3YKlwXIEa_(`4{A)}G$Qf`PYXg>qG;+@kZ9r`2Nv|ifYpfDA95%q zQ<7BLmjnOz|4;afEjeNs5&vCgCaRKT`Has8{_p;u_!E1EKrtfmyUZMP1qrHI9}oQB z@jvMct~>=dBKf=2JWT0Ct?Um6{%`%C@(y>d1{;z3U1|X~$pnMk4+s8l`k(p&U%?V{~3Q$s>wDWC%Nrg$ + + + + + + + \ No newline at end of file diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg index d50deaf6..b548fe06 100644 --- a/src/editor/images/svg_edit_icons.svg +++ b/src/editor/images/svg_edit_icons.svg @@ -75,17 +75,6 @@ - - - - - - - - - - - diff --git a/src/editor/index.html b/src/editor/index.html index 13fa57f2..0eeab25b 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -57,7 +57,8 @@ - + + @@ -116,13 +117,14 @@
  • - Deploys by Netlify + Deploys by Netlify
    • -
    +
    @@ -139,23 +141,25 @@
    - + +
    - - + + +
    - - + +
    - +
    - +
    - - + + + +
    - +
    - + + @@ -201,15 +209,20 @@
    - - + +
    - +
    - - + +
    - - + + + +
    @@ -243,12 +258,16 @@
    - - + + + +
    - - + + + +
    @@ -275,7 +294,8 @@
    - +
    @@ -313,40 +333,43 @@ - + +
    -
    +
    - + - + - + - + - + +
    -
    +
    1000
    @@ -360,70 +383,58 @@
    Fit to layer content
    Fit to all content
     -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    - - - -
    -
    - - -
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    -
    -
    -
    -
    + + + + + +
    + + +
    - -
    + +