118 lines
3.4 KiB
JavaScript
118 lines
3.4 KiB
JavaScript
/* 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;padding:5px;background: #fff; border-radius: 5px;">
|
|
</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.append(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.append(newDiv);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @function connectedCallback
|
|
* @returns {void}
|
|
*/
|
|
connectedCallback () {
|
|
this.$strip.addEventListener('click', (evt) => {
|
|
evt.preventDefault();
|
|
// shift key or right click for stroke
|
|
const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
|
|
let color = this.$strip.currentItem.dataset.rgb;
|
|
// Webkit-based browsers returned 'initial' here for no stroke
|
|
if (color === 'none' || color === 'transparent' || color === 'initial') {
|
|
color = 'none';
|
|
}
|
|
const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
|
|
this.dispatchEvent(paletteEvent);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 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(); });
|
|
|
|
*/
|