add sePalette - in progress

src/editor/components/index.js

@@ -4,3 +4,4 @@ import './seExplorerButton.js';
 import './seDropdown.js';
 import './seInput.js';
 import './seSpinInput.js';
+import './sePalette.js';

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 = `
+  <style>
+  .square {
+    height: 15px;
+    width: 15px;
+  }
+  </style>
+  <div title="Click to change fill color, shift-click to change stroke color">
+    <elix-centered-strip style="width:300px">
+    </elix-centered-strip>
+  </div>
+`;
+
+/**
+ * @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(); });
+
+*/

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;
-  }
-  */