76 lines
2.9 KiB
JavaScript
Executable File
76 lines
2.9 KiB
JavaScript
Executable File
import { copyAndPast } from '../diagram/group-select-applay.js';
|
|
import { classAdd, classDel, clickForAll, listen, classSingleAdd, evtTargetAttr } from '../infrastructure/util.js';
|
|
import { PathSmbl } from './path-smbl.js';
|
|
|
|
export class PathSettings extends HTMLElement {
|
|
/**
|
|
* @param {CanvasElement} canvas
|
|
* @param {PathElement} pathElement
|
|
*/
|
|
constructor(canvas, pathElement) {
|
|
super();
|
|
/** @private */
|
|
this._pathElement = pathElement;
|
|
|
|
/** @private */
|
|
this._canvas = canvas;
|
|
}
|
|
|
|
connectedCallback() {
|
|
const pathStyles = this._pathElement[PathSmbl].data.styles;
|
|
const actStyle = style => this._pathElement[PathSmbl].data.styles?.includes(style) ? 'class="actv"' : '';
|
|
|
|
const shadow = this.attachShadow({ mode: 'closed' });
|
|
shadow.innerHTML = `
|
|
<style>
|
|
.ln { display: flex; }
|
|
.ln > * {
|
|
height: 24px;
|
|
padding: 10px;
|
|
fill-opacity: 0.3;
|
|
stroke-opacity: 0.3;
|
|
}
|
|
[data-cmd] { cursor: pointer; }
|
|
.actv {
|
|
fill-opacity: 1;
|
|
stroke-opacity: 1;
|
|
}
|
|
</style>
|
|
<ap-shape-edit id="edit" edit-btn="true">
|
|
<div class="ln">
|
|
<svg data-cmd data-cmd-arg="arw-s" ${actStyle('arw-s')} viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" fill="rgb(52,71,103)"/></svg>
|
|
<svg data-cmd data-cmd-arg="arw-e" ${actStyle('arw-e')} viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgb(52,71,103)"/></svg>
|
|
<svg data-cmd data-cmd-arg="dash" ${actStyle('dash')} viewBox="0 0 24 24" width="24" height="24"><path d="M 2,11 L 20,11" stroke="rgb(52,71,103)" style="stroke-dasharray: 4,3; stroke-width: 3;"></path></svg>
|
|
</div>
|
|
</ap-shape-edit>`;
|
|
|
|
// colors, del
|
|
listen(shadow.getElementById('edit'), 'cmd', /** @param {CustomEvent<{cmd:string, arg:string}>} evt */ evt => {
|
|
switch (evt.detail.cmd) {
|
|
case 'style': classSingleAdd(this._pathElement, this._pathElement[PathSmbl].data, 'cl-', evt.detail.arg); break;
|
|
case 'del': this._pathElement[PathSmbl].del(); break;
|
|
case 'copy': copyAndPast(this._canvas, [this._pathElement]); break;
|
|
}
|
|
});
|
|
|
|
// arrows, dotted
|
|
clickForAll(shadow, '[data-cmd]', evt => {
|
|
const argStyle = evtTargetAttr(evt, 'data-cmd-arg');
|
|
const currentArr = pathStyles.indexOf(argStyle);
|
|
if (currentArr > -1) {
|
|
classDel(this._pathElement, argStyle);
|
|
pathStyles.splice(currentArr, 1);
|
|
classDel(evt.currentTarget, 'actv');
|
|
} else {
|
|
classAdd(this._pathElement, argStyle);
|
|
pathStyles.push(argStyle);
|
|
classAdd(evt.currentTarget, 'actv');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
customElements.define('ap-path-settings', PathSettings);
|
|
|
|
/** @typedef { import('./path-smbl').PathElement } PathElement */
|
|
/** @typedef { import('../infrastructure/canvas-smbl.js').CanvasElement } CanvasElement */
|