@sutton-signwriting/sgnw-components/dist/collection/components/fsw-palette-symbol/fsw-palette-symbol.js

a javascript package of web components for use with the SignWriting script.

/*!
 * The Sutton SignWriting Web Components
 */
import { Host, h } from "@stencil/core";
import { symbolSvg } from "@sutton-signwriting/font-ttf/fsw/fsw";
import draggabilly from "draggabilly";
import { addSvgClassStyle, addSvgStyle } from "../../global/svg";
const PALETTE_SYMBOL_SVG_STYLE = 'position:absolute;display:block;top:2.5%;bottom:2.5%;left:2.5%;right:2.5%;margin:auto;max-width:95%;max-height:95%;cursor:default';
const PALETTE_SYMBOL_DRAGGING_SVG_STYLE = 'position:absolute;display:block;top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial;cursor:default';
const SYMBOL_LINE_STYLE = 'fill:var(--font-color) !important';
const SYMBOL_FILL_STYLE = 'fill:var(--bg-color) !important';
export class FswPaletteSymbol {
    constructor() {
        this.sgnw = window.sgnw;
        this.dragging = false;
    }
    paletteSymbolClickHandler() {
        this.paletteSymbolClick.emit(this.symbol);
    }
    paletteSymbolDropHandler({}, pointer) {
        this.dragging = false;
        this.paletteSymbolDrop.emit({ encoding: "fsw", symbol: this.symbol, x: pointer.pageX, y: pointer.pageY });
        this.el.style.top = "0";
        this.el.style.left = "0";
    }
    paletteSymbolDragStartHandler() {
        this.dragging = true;
    }
    connectedCallback() {
        if (!this.sgnw) {
            let self = this;
            function handleSgnw() {
                self.sgnw = window.sgnw;
                window.removeEventListener("sgnw", handleSgnw, false);
            }
            window.addEventListener('sgnw', handleSgnw, false);
        }
    }
    componentDidLoad() {
        this.draggie = new draggabilly(this.el);
        this.draggie.on('staticClick', this.paletteSymbolClickHandler.bind(this));
        this.draggie.on('dragStart', this.paletteSymbolDragStartHandler.bind(this));
        this.draggie.on('dragEnd', this.paletteSymbolDropHandler.bind(this));
    }
    render() {
        let svg = this.sgnw ? symbolSvg(this.symbol) : '';
        svg = addSvgStyle(svg, this.dragging ? PALETTE_SYMBOL_DRAGGING_SVG_STYLE : PALETTE_SYMBOL_SVG_STYLE);
        svg = addSvgClassStyle(svg, 'sym-line', SYMBOL_LINE_STYLE);
        svg = addSvgClassStyle(svg, 'sym-fill', SYMBOL_FILL_STYLE);
        return (h(Host, { key: '47faf6997eb350fba25e4612d8e8d3dcfaf81710', symbol: this.symbol, innerHTML: svg }));
    }
    static get is() { return "fsw-palette-symbol"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["fsw-palette-symbol.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["fsw-palette-symbol.css"]
        };
    }
    static get properties() {
        return {
            "symbol": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "FSW key for symbol"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "symbol"
            }
        };
    }
    static get states() {
        return {
            "sgnw": {},
            "dragging": {}
        };
    }
    static get events() {
        return [{
                "method": "paletteSymbolClick",
                "name": "paletteSymbolClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "click event for the symbol palette"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "paletteSymbolDrop",
                "name": "paletteSymbolDrop",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "drop event for the signbox and sequence"
                },
                "complexType": {
                    "original": "{encoding:string,symbol:string,x:number,y:number}",
                    "resolved": "{ encoding: string; symbol: string; x: number; y: number; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}