| 1 | |
| 2 | |
| 3 |
|
| 4 | import { r as registerInstance, h, g as getElement, H as Host, d as createEvent } from './_commonjsHelpers-383fba37.js';
|
| 5 | import { s as style } from './style-fd531f8d.js';
|
| 6 | import { f as fsw } from './fsw-bd4c9f61.js';
|
| 7 | import { c as cssValues } from './global-4493408c.js';
|
| 8 | import { d as draggabilly } from './draggabilly-b10e2ab0.js';
|
| 9 |
|
| 10 | const fswButtonCss = "*.sc-fsw-button,*.sc-fsw-button::before,*.sc-fsw-button::after{box-sizing:border-box}.sc-fsw-button-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode=\"dark\"] .sc-fsw-button-h,[data-theme=\"dark\"] .sc-fsw-button-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-fsw-button{font-family:SuttonSignWritingOneD !important}.sc-fsw-button-h{display:inline-block;position:relative;border-radius:5px;color:var(--font-color);background-color:var(--button-color);width:5rem;height:4rem}.sc-fsw-button-h:hover{background-color:var(--button-hover)}.sc-fsw-button-s>svg{position:absolute;top:10%;bottom:10%;left:5%;right:5%;margin:auto;max-width:90%;max-height:80%;cursor:default}.sc-fsw-button-s>svg g text.sym-line,.sc-fsw-button-s>svg path{fill:var(--font-color) !important}.sc-fsw-button-s>svg g text.sym-fill{fill:var(--button-color) !important}.sc-fsw-button-h:hover.sc-fsw-button-s>svg g text.sym-fill{fill:var(--button-hover) !important}";
|
| 11 |
|
| 12 | const FswButton = class {
|
| 13 | constructor(hostRef) {
|
| 14 | registerInstance(this, hostRef);
|
| 15 | this.sgnw = window.sgnw;
|
| 16 | }
|
| 17 | connectedCallback() {
|
| 18 | if (!this.sgnw) {
|
| 19 | let self = this;
|
| 20 | function handleSgnw() {
|
| 21 | self.sgnw = window.sgnw;
|
| 22 | window.removeEventListener("sgnw", handleSgnw, false);
|
| 23 | }
|
| 24 | window.addEventListener('sgnw', handleSgnw, false);
|
| 25 | }
|
| 26 | }
|
| 27 | render() {
|
| 28 | const styleStr = style.compose(Object.assign(cssValues(this.el), { background: "transparent", zoom: "x" }));
|
| 29 | let svg = '';
|
| 30 | if (this.symbol) {
|
| 31 | svg = this.sgnw ? fsw.symbolSvg(this.symbol + styleStr) : '';
|
| 32 | }
|
| 33 | else if (this.sign) {
|
| 34 | svg = this.sgnw ? fsw.signSvg(this.sign + styleStr) : '';
|
| 35 | }
|
| 36 | else if (this.svg) {
|
| 37 | svg = this.svg;
|
| 38 | }
|
| 39 | return (h(Host, { innerHTML: svg }));
|
| 40 | }
|
| 41 | get el() { return getElement(this); }
|
| 42 | };
|
| 43 | FswButton.style = fswButtonCss;
|
| 44 |
|
| 45 | const fswPaletteSymbolCss = "*.sc-fsw-palette-symbol,*.sc-fsw-palette-symbol::before,*.sc-fsw-palette-symbol::after{box-sizing:border-box}.sc-fsw-palette-symbol-h{--font-color:#424242;--button-color:lightgray;--button-hover:darkgray;--bg-color:#fff}[data-color-mode=\"dark\"] .sc-fsw-palette-symbol-h,[data-theme=\"dark\"] .sc-fsw-palette-symbol-h{--font-color:#e1e1ff;--button-color:gray;--button-hover:darkgray;--bg-color:#161625}.swu.sc-fsw-palette-symbol{font-family:SuttonSignWritingOneD !important}.sc-fsw-palette-symbol-h{border:1px solid var(--font-color);cursor:move;font-size:30px;color:var(--font-color);background:var(--bg-color)}.is-dragging.sc-fsw-palette-symbol-h{border:0px;z-index:1;text-align:initial;vertical-align:top;line-height:0px;font-size:0px;background:transparent}.sc-fsw-palette-symbol-s>svg{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}.sc-fsw-palette-symbol-h.is-dragging.sc-fsw-palette-symbol-s>svg{top:0;bottom:initial;left:0;right:initial;margin:0;max-width:initial;max-height:initial}.sc-fsw-palette-symbol-s>svg g text.sym-line{fill:var(--font-color) !important}.sc-fsw-palette-symbol-s>svg g text.sym-fill{fill:var(--bg-color) !important}";
|
| 46 |
|
| 47 | const FswPaletteSymbol = class {
|
| 48 | constructor(hostRef) {
|
| 49 | registerInstance(this, hostRef);
|
| 50 | this.paletteSymbolClick = createEvent(this, "paletteSymbolClick", 7);
|
| 51 | this.paletteSymbolDrop = createEvent(this, "paletteSymbolDrop", 7);
|
| 52 | this.sgnw = window.sgnw;
|
| 53 | }
|
| 54 | paletteSymbolClickHandler() {
|
| 55 | this.paletteSymbolClick.emit(this.symbol);
|
| 56 | }
|
| 57 | paletteSymbolDropHandler({}, pointer) {
|
| 58 | this.paletteSymbolDrop.emit({ encoding: "fsw", symbol: this.symbol, x: pointer.pageX, y: pointer.pageY });
|
| 59 | this.el.style.top = "0";
|
| 60 | this.el.style.left = "0";
|
| 61 | }
|
| 62 | connectedCallback() {
|
| 63 | if (!this.sgnw) {
|
| 64 | let self = this;
|
| 65 | function handleSgnw() {
|
| 66 | self.sgnw = window.sgnw;
|
| 67 | window.removeEventListener("sgnw", handleSgnw, false);
|
| 68 | }
|
| 69 | window.addEventListener('sgnw', handleSgnw, false);
|
| 70 | }
|
| 71 | }
|
| 72 | componentDidLoad() {
|
| 73 | this.draggie = new draggabilly(this.el);
|
| 74 | this.draggie.on('staticClick', this.paletteSymbolClickHandler.bind(this));
|
| 75 | this.draggie.on('dragEnd', this.paletteSymbolDropHandler.bind(this));
|
| 76 | }
|
| 77 | render() {
|
| 78 | return (h(Host, { symbol: this.symbol, innerHTML: this.sgnw ? fsw.symbolSvg(this.symbol) : '' }));
|
| 79 | }
|
| 80 | get el() { return getElement(this); }
|
| 81 | };
|
| 82 | FswPaletteSymbol.style = fswPaletteSymbolCss;
|
| 83 |
|
| 84 | export { FswButton as fsw_button, FswPaletteSymbol as fsw_palette_symbol };
|