@ixfx/components 0.0.2

package/dist/tabs/tab-list-item.js

@@ -0,0 +1,63 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * CSS vars
+ * * --selected-colour: text colour
+ * * --selected-border-width: bottom border width
+ * * --padding
+ */
+let TabListItemElement = class TabListItemElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.closeable = true;
+    }
+    // @property({ type: Boolean })
+    // activated = true;
+    render() {
+        return html `<div ><slot part="header"></slot></div>`;
+    }
+    // protected createRenderRoot() {
+    //   return this;
+    // }
+    static { this.styles = css `
+    :host {
+      --selected-colour: blue;
+      --selected-border-width: 1px;
+      --padding: 0.5ch;
+      --hover-background: whitesmoke;
+      display: inline;
+      user-select:none;
+      box-sizing: border-box;
+    }
+    
+    :host([selected])>div {
+      color: var(--selected-colour);
+      border-bottom: var(--selected-border-width) solid var(--selected-colour);
+    }
+    div {
+      padding:var(--padding) calc(2*var(--padding)) var(--padding) calc(2*var(--padding));
+      border-bottom: var(--selected-border-width) solid transparent;
+
+    }
+    
+    div:hover {
+      background-color: var(--hover-background);
+      color:unset !important;
+
+    }
+  `; }
+};
+__decorate([
+    property({ type: Boolean })
+], TabListItemElement.prototype, "closeable", void 0);
+TabListItemElement = __decorate([
+    customElement('ixfx-tab-list-item')
+], TabListItemElement);
+export { TabListItemElement };
+//# sourceMappingURL=tab-list-item.js.map

package/dist/tabs/tab-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-item.js","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;GAKG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAEL,cAAS,GAAG,IAAI,CAAC;IAuCnB,CAAC;IArCC,+BAA+B;IAC/B,oBAAoB;IAEpB,MAAM;QACJ,OAAO,IAAI,CAAA,yCAAyC,CAAA;IACtD,CAAC;IAED,iCAAiC;IACjC,iBAAiB;IACjB,IAAI;aACG,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BlB,AA1BY,CA0BZ;;AAtCD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACX;AAFN,kBAAkB;IAD9B,aAAa,CAAC,oBAAoB,CAAC;GACvB,kBAAkB,CAyC9B"}

package/dist/tabs/tab-list.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+import { TabListItemElement } from "./tab-list-item.js";
+/**
+ * Events
+ * * 'change' - new tab selected { previous:string, selected:string, for:string }
+ */
+export declare class TabListElement extends LitElement {
+    #private;
+    horizontal: boolean;
+    _listItems: TabListItemElement[];
+    render(): import("lit-html").TemplateResult<1>;
+    getSelectedElement(): TabListItemElement | undefined;
+    selectElement(el: HTMLElement): void;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-list": TabListElement;
+    }
+}
+//# sourceMappingURL=tab-list.d.ts.map

package/dist/tabs/tab-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD;;;GAGG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAE5C,UAAU,UAAQ;IAGlB,UAAU,EAAG,kBAAkB,EAAE,CAAC;IAElC,MAAM;IAyBN,kBAAkB;IAalB,aAAa,CAAC,EAAE,EAAE,WAAW;IA6D7B,MAAM,CAAC,MAAM,0BAsBZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,cAAc,CAAC;KACjC;CACF"}

package/dist/tabs/tab-list.js

@@ -0,0 +1,148 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, property, queryAssignedElements } from "lit/decorators.js";
+import { TabListItemElement } from "./tab-list-item.js";
+/**
+ * Events
+ * * 'change' - new tab selected { previous:string, selected:string, for:string }
+ */
+let TabListElement = class TabListElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.horizontal = true;
+        this.#onKeyUp = (event) => {
+            const key = event.key;
+            if (key === `ArrowUp` && !this.horizontal) {
+                this.#selectPrevious();
+                return;
+            }
+            else if (key === `ArrowDown` && !this.horizontal) {
+                this.#selectNext();
+                return;
+            }
+            else if (key === `ArrowRight` && this.horizontal) {
+                this.#selectNext();
+                return;
+            }
+            else if (key === `ArrowLeft` && this.horizontal) {
+                this.#selectPrevious();
+                return;
+            }
+        };
+        this.#onSlotClick = (event) => {
+            this.focus();
+            const t = event.target;
+            const previous = this.getSelectedElement();
+            this.selectElement(t);
+            const forId = t.getAttribute(`for`);
+            this.dispatchEvent(new CustomEvent(`change`, {
+                detail: {
+                    previous, selected: t.id, for: forId ?? ``
+                }
+            }));
+        };
+    }
+    render() {
+        return html `
+    <div tabindex=0 @keyup=${this.#onKeyUp} @click=${this.#onSlotClick} id="container" class=${this.horizontal ? `horizontal` : `vertical`}>
+      <slot></slot>
+    </div>`;
+    }
+    #onKeyUp;
+    getSelectedElement() {
+        for (const el of this._listItems) {
+            if (this.#isSelected(el))
+                return el;
+        }
+    }
+    #isSelected(el) {
+        const v = el.getAttribute(`selected`);
+        if (v === null)
+            return false;
+        return (el.hasAttribute(`selected`));
+    }
+    selectElement(el) {
+        const existing = this.getSelectedElement();
+        if (existing) {
+            existing.removeAttribute(`selected`);
+        }
+        el.setAttribute(`selected`, ``);
+    }
+    #selectNext() {
+        let found = false;
+        for (const el of this._listItems) {
+            if (this.#isSelected(el) && !found) {
+                found = true;
+            }
+            else if (found) {
+                this.selectElement(el);
+                break;
+            }
+        }
+    }
+    #selectPrevious() {
+        let prev;
+        for (const el of this._listItems) {
+            if (this.#isSelected(el) && prev) {
+                this.selectElement(prev);
+            }
+            else {
+                prev = el;
+            }
+        }
+    }
+    #onSlotClick;
+    // #updateSelection() {
+    //   for (const el of this._listItems) {
+    //     if (el.id === this.selectedId) {
+    //       el.classList.add(`activated`);
+    //       el.setAttribute(`activated`, ``);
+    //     } else {
+    //       el.classList.remove(`activated`);
+    //       el.removeAttribute(`activated`);
+    //     }
+    //   }
+    // }
+    // protected updated(_changedProperties: PropertyValues): void {
+    //   this.#updateSelection();
+    // }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      --activated-colour: blue;
+      --colur: pink;
+    }
+    text {
+      user-select:none;
+    }
+    #container {
+      display:flex;
+    }
+    #container.horizontal {
+      flex-direction: row;
+    }
+    #container.vertical {
+      flex-direction: column;
+    }
+
+    ::slotted(.activated) {
+      --colour: var(--activated-colour);
+    }
+  `; }
+};
+__decorate([
+    property({ type: Boolean })
+], TabListElement.prototype, "horizontal", void 0);
+__decorate([
+    queryAssignedElements()
+], TabListElement.prototype, "_listItems", void 0);
+TabListElement = __decorate([
+    customElement('ixfx-tab-list')
+], TabListElement);
+export { TabListElement };
+//# sourceMappingURL=tab-list.js.map

package/dist/tabs/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","sourceRoot":"","sources":["../../src/tabs/tab-list.ts"],"names":[],"mappings":"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"}

package/dist/tabs/tab-panel.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class TabPanelElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-panel": TabPanelElement;
+    }
+}
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/tabs/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,eAAgB,SAAQ,UAAU;IAE7C,MAAM;IAGN,MAAM,CAAC,MAAM,0BAWZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,eAAe,CAAC;KACnC;CACF"}

package/dist/tabs/tab-panel.js

@@ -0,0 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+let TabPanelElement = class TabPanelElement extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+    static { this.styles = css `
+  :host {
+    display:none;
+    height:100%;
+    width:100%;
+  }
+
+  :host([selected]) {
+    background: whitesmoke;
+    display:block;
+  }
+  `; }
+};
+TabPanelElement = __decorate([
+    customElement('ixfx-tab-panel')
+], TabPanelElement);
+export { TabPanelElement };
+//# sourceMappingURL=tab-panel.js.map

package/dist/tabs/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../src/tabs/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAE7C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;aACM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWZ;;AAhBU,eAAe;IAD3B,aAAa,CAAC,gBAAgB,CAAC;GACnB,eAAe,CAiB3B"}

package/dist/tabs/tab-panels.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+import { TabPanelElement } from "./tab-panel.js";
+import { TabListElement } from "./tab-list.js";
+export declare class TabPanelsElement extends LitElement {
+    #private;
+    _listItems: TabPanelElement[];
+    /**
+     * Triggered when a panel is being de-selected
+     */
+    onUnselectedPanel?: (id: string, el: TabPanelElement) => void;
+    /**
+     * Triggered before panel is selected
+     */
+    onSelectingPanel?: (id: string, el: TabPanelElement) => void;
+    /**
+     * Triggered after panel is selected
+     */
+    onSelectedPanel?: (id: string, el: TabPanelElement) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    getSelectedElement(): TabPanelElement | undefined;
+    syncWithList(el: TabListElement): void;
+    selectPanel(id: string): boolean | undefined;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-panels": TabPanelsElement;
+    }
+}
+//# sourceMappingURL=tab-panels.d.ts.map

package/dist/tabs/tab-panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panels.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,qBACa,gBAAiB,SAAQ,UAAU;;IAG9C,UAAU,EAAG,eAAe,EAAE,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC7D;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5D;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3D,MAAM;IAIN,kBAAkB;IA6BlB,YAAY,CAAC,EAAE,EAAE,cAAc;IAQ/B,WAAW,CAAC,EAAE,EAAE,MAAM;IAiBtB,MAAM,CAAC,MAAM,0BAKZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}

package/dist/tabs/tab-panels.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, queryAssignedElements } from "lit/decorators.js";
+import { TabPanelElement } from "./tab-panel.js";
+import { TabListElement } from "./tab-list.js";
+let TabPanelsElement = class TabPanelsElement extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+    getSelectedElement() {
+        for (const el of this._listItems) {
+            if (this.#isSelected(el))
+                return el;
+        }
+    }
+    #isSelected(el) {
+        //const v = el.getAttribute(`selected`);
+        //console.log(`id: ${ el.id } v: ${ v }`);
+        return el.hasAttribute(`selected`);
+    }
+    #unselect(el) {
+        el.removeAttribute(`selected`);
+        if (this.onUnselectedPanel) {
+            this.onUnselectedPanel(el.id, el);
+        }
+    }
+    #select(el) {
+        if (this.onSelectingPanel) {
+            this.onSelectingPanel(el.id, el);
+        }
+        el.setAttribute(`selected`, ``);
+        if (this.onSelectedPanel) {
+            this.onSelectedPanel(el.id, el);
+        }
+    }
+    syncWithList(el) {
+        const t = el.getSelectedElement();
+        if (!t)
+            return;
+        const forEl = t.getAttribute(`for`);
+        if (!forEl)
+            return;
+        this.selectPanel(forEl);
+    }
+    selectPanel(id) {
+        const current = this.getSelectedElement();
+        if (current) {
+            if (current.id === id)
+                return;
+            this.#unselect(current);
+        }
+        let found = false;
+        for (const el of this._listItems) {
+            if (el.id === id) {
+                this.#select(el);
+                found = true;
+            }
+        }
+        return found;
+    }
+    static { this.styles = css `
+  :host {
+    display: block;
+  }
+  
+  `; }
+};
+__decorate([
+    queryAssignedElements()
+], TabPanelsElement.prototype, "_listItems", void 0);
+TabPanelsElement = __decorate([
+    customElement('ixfx-tab-panels')
+], TabPanelsElement);
+export { TabPanelsElement };
+//# sourceMappingURL=tab-panels.js.map

package/dist/tabs/tab-panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panels.js","sourceRoot":"","sources":["../../src/tabs/tab-panels.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAG,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGxC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAiB9C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAA;IAC5B,CAAC;IAED,kBAAkB;QAChB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBAAE,OAAO,EAAE,CAAC;QACtC,CAAC;IACH,CAAC;IAED,WAAW,CAAC,EAAmB;QAC7B,wCAAwC;QACxC,0CAA0C;QAC1C,OAAO,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,CAAC,EAAmB;QAC3B,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,OAAO,CAAC,EAAmB;QACzB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QACD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,YAAY,CAAC,EAAkB;QAC7B,MAAM,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,CAAC;QAClC,IAAI,CAAC,CAAC;YAAE,OAAO;QACf,MAAM,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,WAAW,CAAC,EAAU;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,OAAO,CAAC,EAAE,KAAK,EAAE;gBAAE,OAAO;YAC9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,CAAC;QAED,IAAI,KAAK,GAAG,KAAK,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBACjB,KAAK,GAAG,IAAI,CAAC;YACf,CAAC;QACH,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;GAKlB,AALY,CAKZ;;AA7ED;IADC,qBAAqB,EAAE;oDACO;AAHpB,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAiF5B"}

package/dist/util/circle-arc.d.ts

@@ -0,0 +1,34 @@
+import type { Point } from "@ixfx/geometry/point";
+export type CircleArcAnchor = `south` | `south-east` | `east` | `north`;
+export type CircleArc = {
+    radius: number;
+    anchor?: CircleArcAnchor;
+    rangeRadian?: number;
+    x: number;
+    y: number;
+};
+export type CircleArcDefined = CircleArc & {
+    startPoint: Point;
+    startAngle: number;
+    endPoint: Point;
+    endAngle: number;
+    midPoint: Point;
+    midAngle: number;
+    rotation: number;
+    rangeRadian: number;
+    anchor: CircleArcAnchor;
+    invert: boolean;
+};
+export declare const precompute: (arc: CircleArc) => CircleArcDefined;
+export declare const interpolatePoint: (arc: CircleArcDefined, t: number) => Point;
+export type ArcPart = {
+    startPoint: Point;
+    startAngle: number;
+    endPoint: Point;
+    endAngle: number;
+    range: number;
+};
+export declare const arcPart: (track: CircleArcDefined, startAngle: number, endAngle: number, cw: boolean) => ArcPart;
+export declare const partToSvg: (arc: CircleArc, part: ArcPart, largeArc?: boolean, clockwise?: boolean) => string[];
+export declare const toSvg: (arc: CircleArcDefined, largeArc?: boolean, clockwise?: boolean) => string[];
+//# sourceMappingURL=circle-arc.d.ts.map

package/dist/util/circle-arc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-arc.d.ts","sourceRoot":"","sources":["../../src/util/circle-arc.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAKlD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAExE,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,UAAU,EAAE,KAAK,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,eAAe,CAAA;IACvB,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,KAAK,SAAS,KAAG,gBA2C3C,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,KAAK,gBAAgB,EAAE,GAAG,MAAM,KAAG,KAGnE,CAAA;AAGD,MAAM,MAAM,OAAO,GAAG;IACpB,UAAU,EAAE,KAAK,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AACD,eAAO,MAAM,OAAO,GAAI,OAAO,gBAAgB,EAAE,YAAY,MAAM,EAAE,UAAU,MAAM,EAAE,IAAI,OAAO,KAAG,OAcpG,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,KAAK,SAAS,EAAE,MAAM,OAAO,EAAE,kBAAe,EAAE,mBAAgB,aAMzF,CAAA;AACD,eAAO,MAAM,KAAK,GAAI,KAAK,gBAAgB,EAAE,kBAAe,EAAE,mBAAgB,aAM7E,CAAA"}

package/dist/util/circle-arc.js

@@ -0,0 +1,77 @@
+import { Circles, radianToDegree, radianArc } from "@ixfx/geometry";
+const piPi = Math.PI * 2;
+export const precompute = (arc) => {
+    let rotation = 0;
+    const anchor = arc.anchor ?? `south`;
+    const rangeRadian = arc.rangeRadian ?? radianToDegree(300);
+    let invert = false;
+    switch (anchor) {
+        case `east`:
+            break;
+        case `south-east`:
+            rotation = -Math.PI / 4; // 0 at south-east
+            break;
+        case `north`:
+            rotation = Math.PI / 2;
+            invert = true;
+            break;
+        case `south`:
+        default:
+            //90 - (range / 2);
+            rotation = (Math.PI * 3) / 2;
+    }
+    const rangeRemainder = piPi - rangeRadian;
+    let startAngle = rotation - (rangeRemainder / 2);
+    let endAngle = rotation + (rangeRemainder / 2);
+    const midAngle = rotation - Math.PI;
+    if (invert) {
+        const oldStart = startAngle;
+        startAngle = endAngle;
+        endAngle = oldStart;
+    }
+    //console.log(`start: ${ startAngle } end:${ endAngle } range: ${ rangeRadian } remain: ${ rangeRemainder }`);
+    const startPoint = Circles.pointOnPerimeter(arc, startAngle);
+    const endPoint = Circles.pointOnPerimeter(arc, endAngle);
+    const midPoint = Circles.pointOnPerimeter(arc, midAngle);
+    return {
+        ...arc,
+        anchor,
+        rangeRadian,
+        midPoint, midAngle,
+        startPoint, endPoint, rotation,
+        startAngle, endAngle, invert
+    };
+};
+export const interpolatePoint = (arc, t) => {
+    const angle = arc.rangeRadian * t;
+    return Circles.pointOnPerimeter(arc, arc.startAngle - angle);
+};
+export const arcPart = (track, startAngle, endAngle, cw) => {
+    const startPoint = Circles.pointOnPerimeter(track, startAngle);
+    const endPoint = Circles.pointOnPerimeter(track, endAngle);
+    return {
+        startPoint, endPoint, startAngle, endAngle,
+        range: radianArc(startAngle, endAngle, cw)
+    };
+    // const startPoint = start ? interpolatePoint(arc, start) : arc.startPoint;
+    // const endPoint = end ? interpolatePoint(arc, end) : arc.endPoint;
+    // return {
+    //   ...arc,
+    //   startPoint, endPoint
+    // }
+};
+export const partToSvg = (arc, part, largeArc = true, clockwise = true) => {
+    const rotation = 0;
+    return [
+        `M ${part.startPoint.x} ${part.startPoint.y}`,
+        `A ${arc.radius} ${arc.radius} ${rotation} ${largeArc ? `1` : `0`} ${clockwise ? `1` : `0`} ${part.endPoint.x} ${part.endPoint.y}`
+    ];
+};
+export const toSvg = (arc, largeArc = true, clockwise = true) => {
+    const rotation = 0;
+    return [
+        `M ${arc.startPoint.x} ${arc.startPoint.y}`,
+        `A ${arc.radius} ${arc.radius} ${rotation} ${largeArc ? `1` : `0`} ${clockwise ? `1` : `0`} ${arc.endPoint.x} ${arc.endPoint.y}`
+    ];
+};
+//# sourceMappingURL=circle-arc.js.map

package/dist/util/circle-arc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle-arc.js","sourceRoot":"","sources":["../../src/util/circle-arc.ts"],"names":[],"mappings":"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"}

package/dist/util/compare.d.ts

@@ -0,0 +1,53 @@
+export type CompareResult = number;
+export type Comparer<V> = (a: V, b: V) => CompareResult;
+/**
+ * Sort numbers in ascending order.
+ *
+ * ```js
+ * [10, 4, 5, 0].sort(numericComparer);
+ * // Yields: [0, 4, 5, 10]
+ * [10, 4, 5, 0].sort(comparerInverse(numericComparer));
+ * // Yields: [ 10, 5, 4, 0]
+ * ```
+ * @param x
+ * @param y
+ * @returns
+ */
+export declare const numericComparer: (x: number, y: number) => CompareResult;
+/**
+ * Compares numbers by numeric value, otherwise uses the default
+ * logic of string comparison.
+ *
+ * Is an ascending sort:
+ * * b, a, c -> a, b, c
+ * * 10, 5, 100 -> 5, 10, 100
+ *
+ * Returns -1 if x is less than y
+ * Returns 1 if x is greater than y
+ * Returns 0 if x is the same as y
+ * @param x
+ * @param y
+ * @see {@link comparerInverse} Inverted order
+ * @returns
+ */
+export declare const defaultComparer: (x: unknown, y: unknown) => CompareResult;
+/**
+ * Default sort comparer, following same sematics as Array.sort.
+ * Consider using {@link defaultComparer} to get more logical sorting of numbers.
+ *
+ * Note: numbers are sorted in alphabetical order, eg:
+ * ```js
+ * [ 10, 20, 5, 100 ].sort(jsComparer); // same as .sort()
+ * // Yields: [10, 100, 20, 5]
+ * ```
+ *
+ * Returns -1 if x is less than y
+ * Returns 1 if x is greater than y
+ * Returns 0 if x is the same as y
+ * @param x
+ * @param y
+ * @returns
+ */
+export declare const jsComparer: (x: unknown, y: unknown) => CompareResult;
+export declare const defaultToString: (object: unknown) => string;
+//# sourceMappingURL=compare.d.ts.map

package/dist/util/compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.d.ts","sourceRoot":"","sources":["../../src/util/compare.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AACnC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,aAAa,CAAC;AAExD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,aAKtD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,GAAI,GAAG,OAAO,EAAE,GAAG,OAAO,KAAG,aAKxD,CAAC;AAGF;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,GAAG,OAAO,EAAE,GAAG,OAAO,KAAG,aAcnD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,OAAO,KAAG,MAUjD,CAAC"}