@omegagrid/core 0.10.2 → 0.10.4

package/dist/ui/overlay.style.js

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+export const style = css `
+	:host {
+		display: none;
+		position: absolute;
+		z-index: 150;
+	}
+
+	#inner {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		background-color: var(--og-background-color);
+		opacity: 0.8;
+	}
+
+	:host([striped]) {
+		background-image: repeating-linear-gradient(45deg, var(--og-accent-color) 0, var(--og-accent-color) 2px, transparent 0, transparent 50%);
+		background-size: 10px 10px;
+		background-color: transparent;
+		opacity: 1;
+	}
+
+	#text {
+		font-size: 3em;
+		text-align: center;
+	}
+
+	#text span {
+		background-color: var(--og-background-color);
+		padding: 20px;
+		opacity: 0.8;
+	}
+
+	#loader {
+		text-align: center;
+	}
+
+	#loader img {
+		width: 50px;
+	}
+`;
+//# sourceMappingURL=overlay.style.js.map

package/dist/ui/overlay.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.style.js","sourceRoot":"","sources":["../../src/ui/overlay.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CvB,CAAC","sourcesContent":["import { css } from 'lit';\nexport const style = css`\n\t:host {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tz-index: 150;\n\t}\n\n\t#inner {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground-color: var(--og-background-color);\n\t\topacity: 0.8;\n\t}\n\n\t:host([striped]) {\n\t\tbackground-image: repeating-linear-gradient(45deg, var(--og-accent-color) 0, var(--og-accent-color) 2px, transparent 0, transparent 50%);\n\t\tbackground-size: 10px 10px;\n\t\tbackground-color: transparent;\n\t\topacity: 1;\n\t}\n\n\t#text {\n\t\tfont-size: 3em;\n\t\ttext-align: center;\n\t}\n\n\t#text span {\n\t\tbackground-color: var(--og-background-color);\n\t\tpadding: 20px;\n\t\topacity: 0.8;\n\t}\n\n\t#loader {\n\t\ttext-align: center;\n\t}\n\n\t#loader img {\n\t\twidth: 50px;\n\t}\n`;"]}

package/dist/ui/panel.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { HorizontalPosition } from '../types';
+import { IconSpec } from './icon';
+export declare class Panel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    text: string;
+    icon: string | IconSpec;
+    scrollable: boolean;
+    closable: boolean;
+    collapsible: boolean;
+    collapsed: boolean;
+    arrowPosition: HorizontalPosition;
+    bodySlot: HTMLSlotElement;
+    body: HTMLDivElement;
+    header: HTMLDivElement;
+    private contentHeight;
+    private collapsing;
+    private interval;
+    _onHeaderClick: () => void;
+    animateCollapse(): void;
+    firstUpdated(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+    layout(): void;
+}
+//# sourceMappingURL=panel.d.ts.map

package/dist/ui/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ui/panel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,kBAAkB,EAAU,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,qBACa,KAAM,SAAQ,UAAU;IAEpC,MAAM,CAAC,MAAM,4BAAW;IAGxB,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,GAAC,QAAQ,CAAC;IAGtB,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,SAAS,UAAS;IAGlB,aAAa,EAAE,kBAAkB,CAAW;IAG5C,QAAQ,EAAE,eAAe,CAAC;IAG1B,IAAI,EAAE,cAAc,CAAC;IAGrB,MAAM,EAAE,cAAc,CAAC;IAGvB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAS;IAEzB,cAAc,aAOb;IAED,eAAe;IAkCf,YAAY;IAKZ,MAAM,6CA0BJ;IAEF,MAAM;CAkBN"}

package/dist/ui/panel.js

@@ -0,0 +1,151 @@
+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 { dom } from '../common';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { style } from './panel.style';
+const ANIMATION_INTERVAL = 10;
+const ANIMATION_LENGTH = 100;
+let Panel = class Panel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.scrollable = false;
+        this.closable = false;
+        this.collapsible = false;
+        this.collapsed = false;
+        this.arrowPosition = 'right';
+        this.collapsing = false;
+        this._onHeaderClick = () => {
+            if (this.collapsing)
+                return;
+            if (!this.collapsible)
+                return;
+            if (!this.collapsed)
+                this.contentHeight = this.body.offsetHeight;
+            this.collapsed = !this.collapsed;
+            this.collapsing = true;
+            this.animateCollapse();
+        };
+        this.render = () => html `
+		<div id="header" @click="${this._onHeaderClick}">
+			${this.collapsible && this.arrowPosition == 'left' ? html `
+				<og-icon id="chevron-left" .icon="chevron-${this.collapsed ? 'right' : 'down'}" fixedWidth></og-icon>
+			` : ``}
+			
+			${this.icon ? html `<og-icon id="icon" .icon="${this.icon}" fixedWidth></og-icon>` : ``}
+			
+			<div id="title">
+				<slot name="header"></slot>
+			</div>
+
+			${this.collapsible && this.arrowPosition == 'right' ? html `
+				<og-icon id="chevron-right" .icon="chevron-${this.collapsed ? 'right' : 'down'}" fixedWidth></og-icon>
+			` : ``}
+		</div>
+
+		<div id="body">
+			${this.scrollable ? html `
+				<og-container>
+					<slot name="body" slot="content"></slot>
+				</og-container>
+			` : html `
+				<slot name="body"></slot>
+			`}
+		</div>
+	`;
+    }
+    animateCollapse() {
+        const step = this.contentHeight / (ANIMATION_LENGTH / ANIMATION_INTERVAL);
+        let height = this.collapsed ? this.contentHeight : 0;
+        const resizeEvent = new Event('resize', { bubbles: true, composed: true });
+        if (!this.collapsed) {
+            dom.setMaxSize(this.body, { h: 0 });
+            dom.showElement(this.body);
+        }
+        this.dispatchEvent(new Event('resizestart', { bubbles: true, composed: true }));
+        this.interval = window.setInterval(this.collapsed ? () => {
+            height = Math.max(0, height - step);
+            dom.setMaxSize(this.body, { h: height });
+            if (height == 0) {
+                dom.hideElement(this.body);
+                dom.setMaxSize(this.body, { h: 'none' });
+                window.clearInterval(this.interval);
+                this.collapsing = false;
+                this.dispatchEvent(new Event('resizestop', { bubbles: true, composed: true }));
+            }
+            this.dispatchEvent(resizeEvent);
+        } : () => {
+            height = Math.min(height + step, this.contentHeight);
+            dom.setMaxSize(this.body, { h: height });
+            if (height >= this.contentHeight) {
+                dom.setMaxSize(this.body, { h: 'none' });
+                window.clearInterval(this.interval);
+                this.collapsing = false;
+                this.dispatchEvent(new Event('resizestop', { bubbles: true, composed: true }));
+            }
+            this.dispatchEvent(resizeEvent);
+        }, ANIMATION_INTERVAL);
+    }
+    firstUpdated() {
+        this.contentHeight = this.body.offsetHeight;
+        if (this.collapsed)
+            dom.hideElement(this.body);
+    }
+    layout() {
+        const element = this.body?.firstElementChild;
+        if (element instanceof HTMLSlotElement) {
+            element.assignedElements().forEach((elm) => {
+                if (elm instanceof HTMLElement && elm.layout) {
+                    elm.layout();
+                }
+                else if (elm instanceof HTMLElement && elm.firstElementChild
+                    && elm.firstElementChild.layout) {
+                    elm.firstElementChild.layout();
+                }
+            });
+        }
+        else if (element instanceof HTMLElement && element.layout) {
+            element.layout();
+        }
+    }
+};
+Panel.styles = [style];
+__decorate([
+    property({ type: String })
+], Panel.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Panel.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "scrollable", void 0);
+__decorate([
+    property({ type: Boolean })
+], Panel.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Panel.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Panel.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String })
+], Panel.prototype, "arrowPosition", void 0);
+__decorate([
+    query('slot[name="body"]')
+], Panel.prototype, "bodySlot", void 0);
+__decorate([
+    query('#body')
+], Panel.prototype, "body", void 0);
+__decorate([
+    query('#header')
+], Panel.prototype, "header", void 0);
+Panel = __decorate([
+    customElement(`og-panel`)
+], Panel);
+export { Panel };
+//# sourceMappingURL=panel.js.map

package/dist/ui/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/ui/panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom } from '../common';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { style } from './panel.style';\nimport { HorizontalPosition, Layout } from '../types';\nimport { IconSpec } from './icon';\n\nconst ANIMATION_INTERVAL = 10;\nconst ANIMATION_LENGTH = 100;\n\n@customElement(`og-panel`)\nexport class Panel extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property({type: String})\n\ttext: string;\n\n\t@property({type: String})\n\ticon: string|IconSpec;\n\n\t@property({type: Boolean})\n\tscrollable = false;\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\t@property({type: Boolean, reflect: true})\n\tcollapsible = false;\n\n\t@property({type: Boolean, reflect: true})\n\tcollapsed = false;\n\n\t@property({type: String})\n\tarrowPosition: HorizontalPosition = 'right';\n\n\t@query('slot[name=\"body\"]')\n\tbodySlot: HTMLSlotElement;\n\n\t@query('#body')\n\tbody: HTMLDivElement;\n\n\t@query('#header')\n\theader: HTMLDivElement;\n\t\n\n\tprivate contentHeight: number;\n\tprivate collapsing = false;\n\tprivate interval: number;\n\t\n\t_onHeaderClick = () => {\n\t\tif (this.collapsing) return;\n\t\tif (!this.collapsible) return;\n\t\tif (!this.collapsed) this.contentHeight = this.body.offsetHeight;\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.collapsing = true;\n\t\tthis.animateCollapse();\n\t}\n\n\tanimateCollapse() {\n\t\tconst step = this.contentHeight / (ANIMATION_LENGTH / ANIMATION_INTERVAL);\n\t\tlet height = this.collapsed ? this.contentHeight : 0;\n\t\t\n\t\tconst resizeEvent = new Event('resize', {bubbles: true, composed: true});\n\t\tif (!this.collapsed) {\n\t\t\tdom.setMaxSize(this.body, {h: 0});\n\t\t\tdom.showElement(this.body);\n\t\t}\n\t\tthis.dispatchEvent(new Event('resizestart', {bubbles: true, composed: true}));\n\t\tthis.interval = window.setInterval(this.collapsed ? () => {\n\t\t\theight = Math.max(0, height - step);\n\t\t\tdom.setMaxSize(this.body, {h: height});\n\t\t\tif (height == 0) {\n\t\t\t\tdom.hideElement(this.body);\n\t\t\t\tdom.setMaxSize(this.body, {h: 'none'});\n\t\t\t\twindow.clearInterval(this.interval);\n\t\t\t\tthis.collapsing = false;\n\t\t\t\tthis.dispatchEvent(new Event('resizestop', {bubbles: true, composed: true}));\n\t\t\t}\n\t\t\tthis.dispatchEvent(resizeEvent);\n\t\t} : () => {\n\t\t\theight = Math.min(height + step, this.contentHeight);\n\t\t\tdom.setMaxSize(this.body, {h: height});\n\t\t\tif (height >= this.contentHeight) {\n\t\t\t\tdom.setMaxSize(this.body, {h: 'none'});\n\t\t\t\twindow.clearInterval(this.interval);\n\t\t\t\tthis.collapsing = false;\n\t\t\t\tthis.dispatchEvent(new Event('resizestop', {bubbles: true, composed: true}));\n\t\t\t}\n\t\t\tthis.dispatchEvent(resizeEvent);\n\t\t}, ANIMATION_INTERVAL);\n\t}\n\n\tfirstUpdated() {\n\t\tthis.contentHeight = this.body.offsetHeight;\n\t\tif (this.collapsed) dom.hideElement(this.body);\n\t}\n\n\trender = () => html`\n\t\t<div id=\"header\" @click=\"${this._onHeaderClick}\">\n\t\t\t${this.collapsible && this.arrowPosition == 'left' ? html`\n\t\t\t\t<og-icon id=\"chevron-left\" .icon=\"chevron-${this.collapsed ? 'right' : 'down'}\" fixedWidth></og-icon>\n\t\t\t`: ``}\n\t\t\t\n\t\t\t${this.icon ? html`<og-icon id=\"icon\" .icon=\"${this.icon}\" fixedWidth></og-icon>` : ``}\n\t\t\t\n\t\t\t<div id=\"title\">\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t</div>\n\n\t\t\t${this.collapsible && this.arrowPosition == 'right' ? html`\n\t\t\t\t<og-icon id=\"chevron-right\" .icon=\"chevron-${this.collapsed ? 'right' : 'down'}\" fixedWidth></og-icon>\n\t\t\t`: ``}\n\t\t</div>\n\n\t\t<div id=\"body\">\n\t\t\t${this.scrollable ? html`\n\t\t\t\t<og-container>\n\t\t\t\t\t<slot name=\"body\" slot=\"content\"></slot>\n\t\t\t\t</og-container>\n\t\t\t`: html`\n\t\t\t\t<slot name=\"body\"></slot>\n\t\t\t`}\n\t\t</div>\n\t`;\n\n\tlayout() {\n\t\tconst element = this.body?.firstElementChild as HTMLElement & Layout;\n\t\tif (element instanceof HTMLSlotElement) {\n\t\t\telement.assignedElements().forEach((elm: HTMLElement & Layout) => {\n\t\t\t\tif (elm instanceof HTMLElement && elm.layout) {\n\t\t\t\t\t(elm as Layout).layout();\n\t\t\t\t} else if (\n\t\t\t\t\telm instanceof HTMLElement && elm.firstElementChild \n\t\t\t\t\t&& (elm.firstElementChild as HTMLElement & Layout).layout\n\t\t\t\t) {\n\t\t\t\t\t(elm.firstElementChild as HTMLElement & Layout).layout();\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (element instanceof HTMLElement && element.layout) {\n\t\t\telement.layout();\n\t\t}\n\t}\n\t\n}"]}

package/dist/ui/panel.style.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+//# sourceMappingURL=panel.style.d.ts.map

package/dist/ui/panel.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.style.d.ts","sourceRoot":"","sources":["../../src/ui/panel.style.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,yBAqEjB,CAAC"}

package/dist/ui/panel.style.js

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+// TODO - remove top/bottom padding from header
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		font-size: var(--og-font-size);
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--og-border-color);
+	}
+
+	#header {
+		flex: 0;
+		color: var(--og-text-color);
+		display: flex;
+		flex-direction: row;
+		border-bottom: 1px solid var(--og-border-color);
+		align-items: center;
+	}
+
+	#title {
+		flex: 1;
+		margin-left: 5px;
+	}
+
+	#title > * {
+		line-height: 25px;
+	}
+
+	og-icon {
+		vertical-align: middle;
+		height: 12px;
+	}
+	
+	#icon, #chevron-left {
+		margin-left: 5px;
+	}
+
+	#chevron-right {
+		margin-right: 5px;
+	}
+
+	#header > og-icon {
+		flex: 0;
+		text-align: center;
+		min-width: 12px;
+	}
+
+	:host([collapsible]) #header {
+		cursor: pointer;
+	}
+
+	:host([collapsible]) #header:hover {
+		background-color: var(--og-background-color-2);
+	}
+
+	#body {
+		flex: 1;
+		border-top-width: 0;
+		overflow: hidden;
+		max-height: 100%;
+	}
+
+	og-container {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+`;
+//# sourceMappingURL=panel.style.js.map

package/dist/ui/panel.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.style.js","sourceRoot":"","sources":["../../src/ui/panel.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAG,GAAG,EAAE,MAAM,KAAK,CAAC;AAE3B,+CAA+C;AAE/C,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEvB,CAAC","sourcesContent":["import {  css } from 'lit';\n\n// TODO - remove top/bottom padding from header\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tfont-size: var(--og-font-size);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder: 1px solid var(--og-border-color);\n\t}\n\n\t#header {\n\t\tflex: 0;\n\t\tcolor: var(--og-text-color);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\talign-items: center;\n\t}\n\n\t#title {\n\t\tflex: 1;\n\t\tmargin-left: 5px;\n\t}\n\n\t#title > * {\n\t\tline-height: 25px;\n\t}\n\n\tog-icon {\n\t\tvertical-align: middle;\n\t\theight: 12px;\n\t}\n\t\n\t#icon, #chevron-left {\n\t\tmargin-left: 5px;\n\t}\n\n\t#chevron-right {\n\t\tmargin-right: 5px;\n\t}\n\n\t#header > og-icon {\n\t\tflex: 0;\n\t\ttext-align: center;\n\t\tmin-width: 12px;\n\t}\n\n\t:host([collapsible]) #header {\n\t\tcursor: pointer;\n\t}\n\n\t:host([collapsible]) #header:hover {\n\t\tbackground-color: var(--og-background-color-2);\n\t}\n\n\t#body {\n\t\tflex: 1;\n\t\tborder-top-width: 0;\n\t\toverflow: hidden;\n\t\tmax-height: 100%;\n\t}\n\n\tog-container {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n`;"]}

package/dist/ui/sizer.d.ts

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import { Orientation } from "../types";
+type ResizeEventArgs = {
+    offsetX?: number;
+    offsetY?: number;
+    clientX?: number;
+    clientY?: number;
+    mouseX?: number;
+    mouseY?: number;
+    deltaX?: number;
+    deltaY?: number;
+};
+export declare class ResizeEvent extends Event {
+    readonly resizeArgs: ResizeEventArgs;
+    readonly offsetX: number;
+    readonly offsetY: number;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly mouseX: number;
+    readonly mouseY: number;
+    readonly deltaX: number;
+    readonly deltaY: number;
+    constructor(type: string, resizeArgs: ResizeEventArgs);
+}
+export declare class Sizer extends LitElement {
+    private snappedTo;
+    private offsetElement;
+    private lineElm;
+    private _resizing;
+    private startX;
+    private startY;
+    private offset;
+    private startWidth;
+    private startHeight;
+    private startResize;
+    private mouseDownTime;
+    static styles: import("lit").CSSResult;
+    orientation: Orientation;
+    noGuideLine: boolean;
+    get resizing(): boolean;
+    constructor();
+    show: () => void;
+    hide: () => void;
+    _onMouseLeave: () => void;
+    _onMouseDown: (e: MouseEvent) => void;
+    private startResizing;
+    _onMouseMove: (e: MouseEvent) => void;
+    _onMouseUp: (e: MouseEvent) => void;
+    render(): void;
+    snap(elm: HTMLElement, offsetElement?: HTMLElement): void;
+}
+export {};
+//# sourceMappingURL=sizer.d.ts.map

package/dist/ui/sizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizer.d.ts","sourceRoot":"","sources":["../../src/ui/sizer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,KAAK,eAAe,GAAG;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qBAAa,WAAY,SAAQ,KAAK;aAWK,UAAU,EAAE,eAAe;IATrE,SAAgB,OAAO,EAAE,MAAM,CAAC;IAChC,SAAgB,OAAO,EAAE,MAAM,CAAC;IAChC,SAAgB,OAAO,EAAE,MAAM,CAAC;IAChC,SAAgB,OAAO,EAAE,MAAM,CAAC;IAChC,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,MAAM,EAAE,MAAM,CAAC;gBAEnB,IAAI,EAAE,MAAM,EAAkB,UAAU,EAAE,eAAe;CAYrE;AAED,qBACa,KAAM,SAAQ,UAAU;IAEpC,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,MAAM,CAA8B;IAC5C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,aAAa,CAAK;IAE1B,MAAM,CAAC,MAAM,0BA6CX;IAGF,WAAW,EAAE,WAAW,CAAC;IAGzB,WAAW,UAAS;IAEpB,IAAW,QAAQ,YAA4B;;IAU/C,IAAI,aAGH;IAED,IAAI,aAIH;IAED,aAAa,aAEZ;IAED,YAAY,GAAI,GAAG,UAAU,UAkB5B;IAED,OAAO,CAAC,aAAa;IA8BrB,YAAY,GAAI,GAAG,UAAU,UAe3B;IAEF,UAAU,GAAI,GAAG,UAAU,UAc1B;IAED,MAAM;IAON,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,cAAqB;CAezD"}

package/dist/ui/sizer.js

@@ -0,0 +1,203 @@
+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 * as dom from "../common/dom";
+import constants from "../constants";
+import { LitElement, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+export class ResizeEvent extends Event {
+    constructor(type, resizeArgs) {
+        super(type);
+        this.resizeArgs = resizeArgs;
+        resizeArgs = resizeArgs || {};
+        this.offsetX = resizeArgs.offsetX;
+        this.offsetY = resizeArgs.offsetY;
+        this.clientX = resizeArgs.clientX;
+        this.clientY = resizeArgs.clientY;
+        this.mouseX = resizeArgs.mouseX;
+        this.mouseY = resizeArgs.mouseY;
+        this.deltaX = resizeArgs.deltaX;
+        this.deltaY = resizeArgs.deltaY;
+    }
+}
+let Sizer = class Sizer extends LitElement {
+    get resizing() { return this._resizing; }
+    constructor() {
+        super();
+        this._resizing = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.startResize = false;
+        this.mouseDownTime = 0;
+        this.noGuideLine = false;
+        this.show = () => {
+            this.classList.add('visible');
+            dom.showElement(this);
+        };
+        this.hide = () => {
+            this.classList.remove('visible');
+            dom.hideElement(this);
+            dom.hideElement(this.lineElm);
+        };
+        this._onMouseLeave = () => {
+            if (!this._resizing)
+                this.hide();
+        };
+        this._onMouseDown = (e) => {
+            e.stopPropagation();
+            const lastTime = this.mouseDownTime;
+            this.mouseDownTime = performance.now();
+            if (this.mouseDownTime - lastTime < 500) {
+                this.dispatchEvent(new Event('dblclick'));
+                return;
+            }
+            this.startX = e.pageX;
+            this.startY = e.pageY;
+            this._resizing = true;
+            this.startResize = true;
+            this.offset = dom.getElementOffset(this.snappedTo, this.offsetElement);
+            this.startWidth = this.snappedTo.clientWidth;
+            this.startHeight = this.snappedTo.clientHeight;
+            document.addEventListener('mousemove', this._onMouseMove);
+            document.addEventListener('mouseup', this._onMouseUp, { once: true });
+        };
+        this._onMouseMove = (e) => {
+            if (this.startResize)
+                this.startResizing();
+            dom.setPosition(this, this.orientation == 'horizontal' ? {
+                l: this.offset.left + this.startWidth - constants.SIZER_SIZE / 2 + e.pageX - this.startX
+            } : {
+                t: this.offset.top + this.startHeight - constants.SIZER_SIZE / 2 + e.pageY - this.startY
+            });
+            this.dispatchEvent(new ResizeEvent('resize', {
+                deltaX: e.pageX - this.startX,
+                deltaY: e.pageY - this.startY,
+                mouseX: e.pageX,
+                mouseY: e.pageY,
+            }));
+        };
+        this._onMouseUp = (e) => {
+            document.removeEventListener('mousemove', this._onMouseMove);
+            this._resizing = false;
+            if (this.startResize) {
+                this.startResize = false;
+                return;
+            }
+            this.hide();
+            this.dispatchEvent(new ResizeEvent('resizestop', {
+                deltaX: e.pageX - this.startX,
+                deltaY: e.pageY - this.startY,
+                mouseX: e.pageX,
+                mouseY: e.pageY,
+            }));
+        };
+        this.addEventListener('mouseleave', this._onMouseLeave);
+        this.addEventListener('mousedown', this._onMouseDown);
+    }
+    startResizing() {
+        this.dispatchEvent(new ResizeEvent('resizestart', {
+            deltaX: 0,
+            deltaY: 0,
+            mouseX: this.startX,
+            mouseY: this.startY,
+        }));
+        if (!this.noGuideLine) {
+            dom.showElement(this.lineElm);
+            dom.setSize(this.lineElm, this.orientation == 'horizontal' ? {
+                w: 1,
+                h: this.offsetElement.clientHeight
+            } : {
+                w: this.offsetElement.clientWidth,
+                h: 1
+            });
+            dom.setPosition(this.lineElm, this.orientation == 'horizontal' ? {
+                t: 0,
+                r: -1
+            } : {
+                b: -1,
+                l: 0
+            });
+        }
+        this.startResize = false;
+    }
+    render() {
+        this.shadowRoot.innerHTML = '';
+        this.lineElm = dom.createElement('div');
+        this.lineElm.className = 'sizer-line';
+        this.shadowRoot.appendChild(this.lineElm);
+    }
+    snap(elm, offsetElement = this.parentElement) {
+        this.snappedTo = elm;
+        this.offsetElement = offsetElement;
+        this.show();
+        const offset = dom.getElementOffset(elm, offsetElement);
+        if (this.orientation == 'horizontal') {
+            dom.setSize(this, { w: constants.SIZER_SIZE, h: elm.offsetHeight });
+            dom.setPosition(this, { l: offset.left + elm.offsetWidth - constants.SIZER_SIZE / 2, t: offset.top });
+        }
+        else {
+            dom.setSize(this, { w: elm.offsetWidth, h: constants.SIZER_SIZE });
+            dom.setPosition(this, { l: offset.left, t: offset.top + elm.offsetHeight - constants.SIZER_SIZE / 2 });
+        }
+    }
+};
+Sizer.styles = css `
+		:host {
+			z-index: 105;
+			position: relative;
+			opacity: 0;
+			background-color: var(--og-accent-color);
+		}
+
+		@keyframes show {
+			from { opacity: 0; }
+			to { opacity: 1; }
+		}
+
+		:host(.visible) {
+			animation: show 1s;
+			opacity: 1;
+		}
+
+		:host([orientation="vertical"]) {
+			cursor: row-resize;
+		}
+
+		:host([orientation="vertical"]) .sizer-line {
+			background: repeating-linear-gradient(
+				90deg,
+				var(--og-accent-color),
+				var(--og-accent-color) 10px,
+				transparent 10px,
+				transparent 20px
+			);
+		}
+
+		:host([orientation="horizontal"]) {
+			cursor: col-resize;
+		}
+
+		:host([orientation="horizontal"]) .sizer-line {
+			background: repeating-linear-gradient(
+				0deg,
+				var(--og-accent-color),
+				var(--og-accent-color) 10px,
+				transparent 10px,
+				transparent 20px
+			);
+		}
+	`;
+__decorate([
+    property({ type: String, reflect: true })
+], Sizer.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Sizer.prototype, "noGuideLine", void 0);
+Sizer = __decorate([
+    customElement('og-sizer')
+], Sizer);
+export { Sizer };
+//# sourceMappingURL=sizer.js.map

package/dist/ui/sizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizer.js","sourceRoot":"","sources":["../../src/ui/sizer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from \"../common/dom\";\nimport constants from \"../constants\";\nimport { LitElement, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Orientation } from \"../types\";\n\ntype ResizeEventArgs = {\n\toffsetX?: number,\n\toffsetY?: number,\n\tclientX?: number,\n\tclientY?: number,\n\tmouseX?: number,\n\tmouseY?: number,\n\tdeltaX?: number,\n\tdeltaY?: number,\n};\n\nexport class ResizeEvent extends Event {\n\t\n\tpublic readonly offsetX: number;\n\tpublic readonly offsetY: number;\n\tpublic readonly clientX: number;\n\tpublic readonly clientY: number;\n\tpublic readonly mouseX: number;\n\tpublic readonly mouseY: number;\n\tpublic readonly deltaX: number;\n\tpublic readonly deltaY: number;\n\t\n\tconstructor(type: string, public readonly resizeArgs: ResizeEventArgs) {\n\t\tsuper(type);\n\t\tresizeArgs = resizeArgs || {};\n\t\tthis.offsetX = resizeArgs.offsetX;\n\t\tthis.offsetY = resizeArgs.offsetY;\n\t\tthis.clientX = resizeArgs.clientX;\n\t\tthis.clientY = resizeArgs.clientY;\n\t\tthis.mouseX = resizeArgs.mouseX;\n\t\tthis.mouseY = resizeArgs.mouseY;\n\t\tthis.deltaX = resizeArgs.deltaX;\n\t\tthis.deltaY = resizeArgs.deltaY;\n\t}\n}\n\n@customElement('og-sizer')\nexport class Sizer extends LitElement {\n\n\tprivate snappedTo: HTMLElement;\n\tprivate offsetElement: HTMLElement;\n\tprivate lineElm: HTMLDivElement;\n\tprivate _resizing = false;\n\tprivate startX = 0;\n\tprivate startY = 0;\n\tprivate offset: {top: number, left: number};\n\tprivate startWidth: number;\n\tprivate startHeight: number;\n\tprivate startResize = false;\n\tprivate mouseDownTime = 0;\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tz-index: 105;\n\t\t\tposition: relative;\n\t\t\topacity: 0;\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t}\n\n\t\t@keyframes show {\n\t\t\tfrom { opacity: 0; }\n\t\t\tto { opacity: 1; }\n\t\t}\n\n\t\t:host(.visible) {\n\t\t\tanimation: show 1s;\n\t\t\topacity: 1;\n\t\t}\n\n\t\t:host([orientation=\"vertical\"]) {\n\t\t\tcursor: row-resize;\n\t\t}\n\n\t\t:host([orientation=\"vertical\"]) .sizer-line {\n\t\t\tbackground: repeating-linear-gradient(\n\t\t\t\t90deg,\n\t\t\t\tvar(--og-accent-color),\n\t\t\t\tvar(--og-accent-color) 10px,\n\t\t\t\ttransparent 10px,\n\t\t\t\ttransparent 20px\n\t\t\t);\n\t\t}\n\n\t\t:host([orientation=\"horizontal\"]) {\n\t\t\tcursor: col-resize;\n\t\t}\n\n\t\t:host([orientation=\"horizontal\"]) .sizer-line {\n\t\t\tbackground: repeating-linear-gradient(\n\t\t\t\t0deg,\n\t\t\t\tvar(--og-accent-color),\n\t\t\t\tvar(--og-accent-color) 10px,\n\t\t\t\ttransparent 10px,\n\t\t\t\ttransparent 20px\n\t\t\t);\n\t\t}\n\t`;\n\n\t@property({type: String, reflect: true})\n\torientation: Orientation;\n\n\t@property({type: Boolean, reflect: true})\n\tnoGuideLine = false;\n\t\n\tpublic get resizing() { return this._resizing }\n\n\t\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mouseleave', this._onMouseLeave);\n\t\tthis.addEventListener('mousedown', this._onMouseDown);\n\t}\n\n\tshow = () => {\n\t\tthis.classList.add('visible');\n\t\tdom.showElement(this);\n\t}\n\n\thide = () => {\n\t\tthis.classList.remove('visible');\n\t\tdom.hideElement(this);\n\t\tdom.hideElement(this.lineElm);\n\t}\n\n\t_onMouseLeave = () => {\n\t\tif (!this._resizing) this.hide();\n\t} \n\n\t_onMouseDown = (e: MouseEvent) => {\n\t\te.stopPropagation();\n\t\tconst lastTime = this.mouseDownTime;\n\t\tthis.mouseDownTime = performance.now();\n\t\tif (this.mouseDownTime - lastTime < 500) {\n\t\t\tthis.dispatchEvent(new Event('dblclick'));\n\t\t\treturn;\n\t\t}\n\t\t\n\t\tthis.startX = e.pageX;\n\t\tthis.startY = e.pageY;\n\t\tthis._resizing = true;\n\t\tthis.startResize = true;\n\t\tthis.offset = dom.getElementOffset(this.snappedTo, this.offsetElement);\n\t\tthis.startWidth = this.snappedTo.clientWidth;\n\t\tthis.startHeight = this.snappedTo.clientHeight;\n\t\tdocument.addEventListener('mousemove', this._onMouseMove);\n\t\tdocument.addEventListener('mouseup', this._onMouseUp, {once: true});\n\t}\n\n\tprivate startResizing() {\n\t\tthis.dispatchEvent(new ResizeEvent('resizestart', {\n\t\t\tdeltaX: 0,\n\t\t\tdeltaY: 0,\n\t\t\tmouseX: this.startX,\n\t\t\tmouseY: this.startY,\n\t\t}));\n\n\t\tif (!this.noGuideLine) {\n\t\t\tdom.showElement(this.lineElm);\n\t\t\tdom.setSize(this.lineElm, this.orientation == 'horizontal' ? {\n\t\t\t\tw: 1, \n\t\t\t\th: this.offsetElement.clientHeight\n\t\t\t} : {\n\t\t\t\tw: this.offsetElement.clientWidth, \n\t\t\t\th: 1\n\t\t\t});\n\t\n\t\t\tdom.setPosition(this.lineElm, this.orientation == 'horizontal' ? {\n\t\t\t\tt: 0, \n\t\t\t\tr: -1\n\t\t\t} : {\n\t\t\t\tb: -1, \n\t\t\t\tl: 0\n\t\t\t});\n\t\t}\n\n\t\tthis.startResize = false;\n\t}\n\n\t_onMouseMove = (e: MouseEvent) => {\n\t\tif (this.startResize) this.startResizing();\n\n\t\tdom.setPosition(this, this.orientation == 'horizontal' ? {\n\t\t\tl: this.offset.left + this.startWidth - constants.SIZER_SIZE / 2 + e.pageX - this.startX\n\t\t} : {\n\t\t\tt: this.offset.top + this.startHeight - constants.SIZER_SIZE / 2 + e.pageY - this.startY\n\t\t});\n\n\t\tthis.dispatchEvent(new ResizeEvent('resize', {\n\t\t\tdeltaX: e.pageX - this.startX,\n\t\t\tdeltaY: e.pageY - this.startY,\n\t\t\tmouseX: e.pageX,\n\t\t\tmouseY: e.pageY,\n\t\t}));\n\t};\n\n\t_onMouseUp = (e: MouseEvent) => {\n\t\tdocument.removeEventListener('mousemove', this._onMouseMove);\n\t\tthis._resizing = false;\n\t\tif (this.startResize) {\n\t\t\tthis.startResize = false;\n\t\t\treturn;\n\t\t}\n\t\tthis.hide();\n\t\tthis.dispatchEvent(new ResizeEvent('resizestop', {\n\t\t\tdeltaX: e.pageX - this.startX,\n\t\t\tdeltaY: e.pageY - this.startY,\n\t\t\tmouseX: e.pageX,\n\t\t\tmouseY: e.pageY,\n\t\t}));\n\t}\n\n\trender() {\n\t\tthis.shadowRoot.innerHTML = '';\n\t\tthis.lineElm = dom.createElement('div');\n\t\tthis.lineElm.className = 'sizer-line';\n\t\tthis.shadowRoot.appendChild(this.lineElm);\n\t}\n\n\tsnap(elm: HTMLElement, offsetElement = this.parentElement) {\n\t\tthis.snappedTo = elm;\n\t\tthis.offsetElement = offsetElement;\n\t\tthis.show();\n\t\tconst offset = dom.getElementOffset(elm, offsetElement);\n\n\t\tif (this.orientation == 'horizontal') {\n\t\t\tdom.setSize(this, {w: constants.SIZER_SIZE, h: elm.offsetHeight});\n\t\t\tdom.setPosition(this, {l: offset.left + elm.offsetWidth - constants.SIZER_SIZE / 2, t: offset.top});\n\t\t} else {\n\t\t\tdom.setSize(this, {w: elm.offsetWidth, h: constants.SIZER_SIZE});\n\t\t\tdom.setPosition(this, {l: offset.left, t: offset.top + elm.offsetHeight - constants.SIZER_SIZE / 2});\n\t\t}\n\t}\n\n}"]}