87 lines
3.2 KiB
JavaScript
Executable File
87 lines
3.2 KiB
JavaScript
Executable File
import { copyAndPast } from '../diagram/group-select-applay.js';
|
|
import { classAdd, classDel, clickForAll, listen, classSingleAdd, evtTargetAttr } from '../infrastructure/util.js';
|
|
import { modalCreate } from './modal-create.js';
|
|
import { ShapeSmbl } from './shape-smbl.js';
|
|
|
|
/**
|
|
* @param {import('../infrastructure/canvas-smbl.js').CanvasElement} canvas
|
|
* @param {import('./shape-smbl').ShapeElement} shapeElement
|
|
* @param {number} bottomX positon of the bottom left corner of the panel
|
|
* @param {number} bottomY positon of the bottom left corner of the panel
|
|
*/
|
|
export const rectTxtSettingsPnlCreate = (canvas, shapeElement, bottomX, bottomY) =>
|
|
modalCreate(bottomX, bottomY, new RectTxtSettings(canvas, shapeElement));
|
|
|
|
class RectTxtSettings extends HTMLElement {
|
|
/**
|
|
* @param {import('../infrastructure/canvas-smbl.js').CanvasElement} canvas
|
|
* @param {import('./shape-smbl').ShapeElement} rectElement
|
|
*/
|
|
constructor(canvas, rectElement) {
|
|
super();
|
|
/** @private */
|
|
this._rectElement = rectElement;
|
|
|
|
/** @private */
|
|
this._canvas = canvas;
|
|
}
|
|
|
|
connectedCallback() {
|
|
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; }
|
|
|
|
.ta-1 [data-cmd-arg="1"],
|
|
.ta-2 [data-cmd-arg="2"],
|
|
.ta-3 [data-cmd-arg="3"]
|
|
{ fill-opacity: 1; stroke-opacity: 1; }
|
|
</style>
|
|
<ap-shape-edit id="F" edit-btn="true">
|
|
<div class="ln">
|
|
<svg data-cmd data-cmd-arg="1" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z" fill="rgb(52,71,103)"/></svg>
|
|
<svg data-cmd data-cmd-arg="2" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm2 15h14v2H5v-2zm-2-5h18v2H3v-2zm2-5h14v2H5V9z" fill="rgb(52,71,103)"/></svg>
|
|
<svg data-cmd data-cmd-arg="3" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z" fill="rgb(52,71,103)"/></svg>
|
|
</div>
|
|
</ap-shape-edit>`;
|
|
|
|
const rectData = /** @type {import('./rect.js').RectData} */(this._rectElement[ShapeSmbl].data);
|
|
|
|
const editEl = shadow.getElementById('edit');
|
|
classAdd(editEl, `ta-${rectData.a}`);
|
|
|
|
// colors, del
|
|
listen(editEl, 'cmd', /** @param {CustomEvent<{cmd:string, arg:string}>} evt */ evt => {
|
|
switch (evt.detail.cmd) {
|
|
case 'style': classSingleAdd(this._rectElement, rectData, 'cl-', evt.detail.arg); break;
|
|
case 'del': this._rectElement[ShapeSmbl].del(); break;
|
|
case 'copy': copyAndPast(this._canvas, [this._rectElement]); break;
|
|
}
|
|
});
|
|
|
|
// text align
|
|
clickForAll(shadow, '[data-cmd]', evt => {
|
|
const alignNew = /** @type {1|2|3} */(Number.parseInt(evtTargetAttr(evt, 'data-cmd-arg')));
|
|
if (alignNew === rectData.a) { return; }
|
|
|
|
const alignOld = rectData.a;
|
|
|
|
// applay text align to shape
|
|
rectData.a = alignNew;
|
|
this._rectElement[ShapeSmbl].draw();
|
|
|
|
// highlight text align btn in settings panel
|
|
classDel(editEl, `ta-${alignOld}`);
|
|
classAdd(editEl, `ta-${rectData.a}`);
|
|
});
|
|
}
|
|
}
|
|
customElements.define('ap-rect-txt-settings', RectTxtSettings);
|