@quandis/qbo4.ui 4.0.1-CI-20240919-212536 → 4.0.1-CI-20240925-135339

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240919-212536",
+  "version": "4.0.1-CI-20240925-135339",
   "workspaces": [
     "code"
   ],
@@ -26,7 +26,7 @@
     "@codemirror/commands": "^6.5.0",
     "@codemirror/lang-html": "^6.4.9",
     "@joint/core": "^4.0.4",
-    "@quandis/qbo4.logging": "^4.0.1-CI-20240528-220411",
+    "@quandis/qbo4.logging": "*",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "6.0.1",

package/readme.md

@@ -1,6 +1,6 @@
 # Overview
 
-The `qbo4.ui` package comprises the following features:
+The `qbo4.ui` package comprises the following features::
 
 # Api Endpoint Registration
 

package/src/qbo/Program.d.ts

@@ -17,6 +17,7 @@ export * from './qbo-microphone.js';
 export * from './qbo-popover.js';
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
+export * from './qbo-resize.js';
 export * from './qbo-select.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';

package/src/qbo/Program.js

@@ -18,6 +18,7 @@ export * from './qbo-microphone.js';
 export * from './qbo-popover.js';
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
+export * from './qbo-resize.js';
 export * from './qbo-select.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';

package/src/qbo/Program.ts

@@ -20,6 +20,7 @@ export * from './qbo-microphone.js'
 export * from './qbo-popover.js'
 export * from './qbo-popup.js';
 export * from './qbo-popup-listener.js';
+export * from './qbo-resize.js';
 export * from './qbo-select.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';

package/src/qbo/qbo-resize.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare enum ResizeType {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export declare class QboResize extends LitElement {
+    static styles: import("lit").CSSResult;
+    private isResizing;
+    type: ResizeType;
+    private startX;
+    private startY;
+    private startWidth;
+    private startHeight;
+    private previous;
+    private next;
+    xcreateRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    clear(): void;
+    onMouseDown(event: MouseEvent): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo/qbo-resize.js

@@ -0,0 +1,108 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+export var ResizeType;
+(function (ResizeType) {
+    ResizeType["Horizontal"] = "horizontal";
+    ResizeType["Vertical"] = "vertical";
+})(ResizeType || (ResizeType = {}));
+let QboResize = class QboResize extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isResizing = false;
+        this.type = ResizeType.Horizontal;
+        this.startX = 0;
+        this.startY = 0;
+        this.startWidth = 0;
+        this.startHeight = 0;
+        this.previous = null;
+        this.next = null;
+    }
+    static { this.styles = css `
+  `; }
+    xcreateRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(this.type === ResizeType.Horizontal ? 'horizontal' : 'vertical');
+        this.previous = this.previousElementSibling;
+        this.next = this.nextElementSibling;
+        this.addEventListener('mousedown', this.onMouseDown);
+        this.addEventListener('dblclick', this.clear);
+        document.addEventListener('qbo-reset', this.clear.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mousedown', this.onMouseDown);
+        this.removeEventListener('dblclick', this.clear);
+        document.removeEventListener('qbo-reset', this.clear.bind(this));
+    }
+    clear() {
+        this.next?.classList.toggle('qbo-resize', false);
+        this.previous.style.removeProperty('height');
+        this.previous.style.removeProperty('width');
+        this.next.style.removeProperty('height');
+        this.next.style.removeProperty('width');
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        //this.startWidth = this.leftElement?.offsetWidth || this.topElement?.offsetWidth || 0;
+        //this.startHeight = this.topElement?.offsetHeight || this.leftElement?.offsetHeight || 0;
+        this.startWidth = this.previous?.offsetWidth || 0;
+        this.startHeight = this.previous?.offsetHeight || 0;
+        const onMouseMove = (event) => {
+            if (this.isResizing) {
+                const deltaX = event.clientX - this.startX;
+                const deltaY = event.clientY - this.startY;
+                const newWidth = Math.max(this.startWidth + deltaX, 50);
+                const newHeight = Math.max(this.startHeight + deltaY, 50);
+                if (deltaX !== 0)
+                    this.next?.classList.toggle('qbo-resize', true);
+                if (this.type === ResizeType.Vertical) {
+                    this.previous.style.height = `${newHeight}px`;
+                    this.next.style.height = `calc(100% - ${newHeight}px - ${this.offsetHeight}px)`;
+                    // console.log('resized ', this.previous, this.previous?.style.height, this.next, this.next?.style.height);
+                }
+                else {
+                    this.previous.style.width = `${newWidth}px`;
+                    this.next.style.width = `calc(100% - ${newWidth}px - ${this.offsetWidth}px)`;
+                    // console.log('resized ', this.previous, this.previous?.style.width, this.next, this.next?.style.width);
+                }
+            }
+        };
+        const onMouseUp = () => {
+            this.isResizing = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    render() {
+        return html `<slot><span></span></slot>`;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], QboResize.prototype, "isResizing", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboResize.prototype, "type", void 0);
+QboResize = __decorate([
+    customElement('qbo-resize')
+], QboResize);
+export { QboResize };

package/src/qbo/qbo-resize.ts

@@ -0,0 +1,103 @@
+import { LitElement, html, css, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+export enum ResizeType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical'
+}
+
+
+@customElement('qbo-resize')
+export class QboResize extends LitElement {
+    static styles = css`
+  `;
+
+    @state()
+    private isResizing = false;
+
+    @property()
+    type: ResizeType = ResizeType.Horizontal;
+
+    private startX = 0;
+    private startY = 0;
+    private startWidth = 0;
+    private startHeight = 0;
+    private previous: HTMLElement | null = null;
+    private next: HTMLElement | null = null;
+
+    xcreateRenderRoot() {
+        return this;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(this.type === ResizeType.Horizontal ? 'horizontal' : 'vertical');
+        this.previous = this.previousElementSibling as HTMLElement;
+        this.next = this.nextElementSibling as HTMLElement;
+        this.addEventListener('mousedown', this.onMouseDown);
+        this.addEventListener('dblclick', this.clear);
+        document.addEventListener('qbo-reset', this.clear.bind(this));
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mousedown', this.onMouseDown);
+        this.removeEventListener('dblclick', this.clear);
+        document.removeEventListener('qbo-reset', this.clear.bind(this));
+    }
+
+    clear() {
+        this.next?.classList.toggle('qbo-resize', false);
+
+        this.previous!.style.removeProperty('height');
+        this.previous!.style.removeProperty('width');
+        this.next!.style.removeProperty('height');
+        this.next!.style.removeProperty('width');
+    }
+
+    onMouseDown(event: MouseEvent) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        //this.startWidth = this.leftElement?.offsetWidth || this.topElement?.offsetWidth || 0;
+        //this.startHeight = this.topElement?.offsetHeight || this.leftElement?.offsetHeight || 0;
+        this.startWidth = this.previous?.offsetWidth || 0;
+        this.startHeight = this.previous?.offsetHeight || 0;
+
+        const onMouseMove = (event: MouseEvent) => {
+            if (this.isResizing) {
+                const deltaX = event.clientX - this.startX;
+                const deltaY = event.clientY - this.startY;
+                const newWidth = Math.max(this.startWidth + deltaX, 50);
+                const newHeight = Math.max(this.startHeight + deltaY, 50);
+
+                if (deltaX !== 0)
+                    this.next?.classList.toggle('qbo-resize', true);
+
+                if (this.type === ResizeType.Vertical) {
+                    this.previous!.style.height = `${newHeight}px`;
+                    this.next!.style.height = `calc(100% - ${newHeight}px - ${this.offsetHeight}px)`;
+                    // console.log('resized ', this.previous, this.previous?.style.height, this.next, this.next?.style.height);
+                } else {
+                    this.previous!.style.width = `${newWidth}px`;
+                    this.next!.style.width = `calc(100% - ${newWidth}px - ${this.offsetWidth}px)`;
+                    // console.log('resized ', this.previous, this.previous?.style.width, this.next, this.next?.style.width);
+                }
+            }
+        };
+
+        const onMouseUp = () => {
+            this.isResizing = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        };
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+
+    render() {
+        return html`<slot><span></span></slot>`;
+    }
+}