| 1 | |
| 2 | |
| 3 |
|
| 4 | import { r as registerInstance, h, H as Host, g as getElement } from './_commonjsHelpers-383fba37.js';
|
| 5 | import { f as fsw } from './fsw-74700325.js';
|
| 6 | import { s as style } from './style-fd531f8d.js';
|
| 7 | import { c as cssValues } from './global-4493408c.js';
|
| 8 |
|
| 9 | const fswVpCss = ":host{writing-mode:vertical-lr;border-right:1px solid blue;height:100%}:host svg{display:block}:host span.outside{font-size:0%;line-height:0%;border-left:1px solid blue;vertical-align:top}:host span.middle{vertical-align:bottom}:host span.inside{border-left:1px dashed red}fsw-sign,fsw-symbol{writing-mode:horizontal-tb;display:inline-block;vertical-align:middle;box-sizing:content-box}";
|
| 10 |
|
| 11 | const FswVp = class {
|
| 12 | constructor(hostRef) {
|
| 13 | registerInstance(this, hostRef);
|
| 14 | this.sgnw = window.sgnw;
|
| 15 | this.items = [];
|
| 16 | }
|
| 17 | parseText(newValue) {
|
| 18 | this.items = fsw.parse.text(newValue).map(val => {
|
| 19 | let i = fsw.info(val);
|
| 20 | i['text'] = val;
|
| 21 | return i;
|
| 22 | });
|
| 23 | }
|
| 24 | connectedCallback() {
|
| 25 | if (!this.vp) {
|
| 26 | this.vp = this.el.innerHTML;
|
| 27 | }
|
| 28 | else {
|
| 29 | this.parseText(this.vp);
|
| 30 | }
|
| 31 | if (!this.sgnw) {
|
| 32 | let self = this;
|
| 33 | function handleSgnw() {
|
| 34 | self.sgnw = window.sgnw;
|
| 35 | window.removeEventListener("sgnw", handleSgnw, false);
|
| 36 | }
|
| 37 | window.addEventListener('sgnw', handleSgnw, false);
|
| 38 | }
|
| 39 | }
|
| 40 | render() {
|
| 41 | const values = cssValues(this.el);
|
| 42 | const styling = style.compose({
|
| 43 | colorize: this.colorize,
|
| 44 | detail: values.detail
|
| 45 | });
|
| 46 | const offset = 150;
|
| 47 | return (h(Host, { vp: this.vp }, h("span", { class: "outside" }, h("span", { class: "middle" }, h("span", { class: "inside" }, this.items.map((item) => {
|
| 48 | let zoom, pad, width, height, right, padding;
|
| 49 | if (item['segment'] == 'sign') {
|
| 50 | zoom = values.zoom * item['zoom'];
|
| 51 | pad = item['padding'] * zoom;
|
| 52 | width = item['width'] * zoom + pad * 2;
|
| 53 | height = item['height'] * zoom + pad * 2;
|
| 54 | right = (1000 - (item["minX"] * 2) - item['width']) * zoom - (offset * values.zoom * item['lane']);
|
| 55 | padding = Math.max(0, (20 * zoom) - pad);
|
| 56 | return h("fsw-sign", { styling: styling, style: { "font-size": (values.zoom * 30) + "px", "width": width + "px", "height": height + "px", "margin-right": ((right > 0) ? right : 0) + "px", "border-left": ((right < 0) ? (-right) : 0) + "px solid transparent", "padding": padding + "px" } }, item['text']);
|
| 57 | }
|
| 58 | else if (item['segment'] == 'symbol') {
|
| 59 | zoom = values.zoom * item['zoom'];
|
| 60 | pad = item['padding'] * zoom;
|
| 61 | width = item['width'] * zoom + pad * 2;
|
| 62 | height = item['height'] * zoom + pad * 2;
|
| 63 | padding = Math.max(0, (20 * zoom) - pad);
|
| 64 | return h("fsw-symbol", { styling: styling, style: { "font-size": (values.zoom * 30) + "px", "width": width + "px", "height": height + "px", "padding-bottom": padding + "px" } }, item['text']);
|
| 65 | }
|
| 66 | else {
|
| 67 | console.log("other");
|
| 68 | return h("div", null, item['text']);
|
| 69 | }
|
| 70 | }))))));
|
| 71 | }
|
| 72 | get el() { return getElement(this); }
|
| 73 | static get watchers() { return {
|
| 74 | "vp": ["parseText"]
|
| 75 | }; }
|
| 76 | };
|
| 77 | FswVp.style = fswVpCss;
|
| 78 |
|
| 79 | export { FswVp as fsw_vp };
|