@quandis/qbo4.ui 4.0.1-CI-20240403-131518

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

@@ -0,0 +1,12 @@
+import 'reflect-metadata';
+import { LitElement } from 'lit';
+import { EditorView } from "@codemirror/view";
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+export declare class QboCode extends LitElement {
+    get value(): string | undefined;
+    connectedCallback(): Promise<void>;
+    editor: EditorView | null;
+    render(): void;
+}

package/src/qbo-code/qbo-code.js

@@ -0,0 +1,54 @@
+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 'reflect-metadata';
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { basicSetup } from "codemirror";
+import { EditorView, keymap } from "@codemirror/view";
+import { html as htmlcode } from "@codemirror/lang-html";
+import { indentWithTab } from "@codemirror/commands";
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+let QboCode = class QboCode extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.editor = null;
+    }
+    get value() { return this.editor?.state.doc.toString(); }
+    ;
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        const code = this.querySelector('*[slot=code]')?.innerHTML ?? this.innerHTML;
+        this.editor ??= new EditorView({
+            doc: code.trim(),
+            extensions: [
+                basicSetup,
+                htmlcode(),
+                keymap.of([indentWithTab]),
+                EditorView.updateListener.of((e) => {
+                    this.dispatchEvent(new CustomEvent('change', { detail: { code: this.value } }));
+                })
+            ],
+            parent: this.shadowRoot,
+        });
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [])
+], QboCode.prototype, "value", null);
+QboCode = __decorate([
+    customElement('qbo-code')
+], QboCode);
+export { QboCode };

package/src/qbo-code/qbo-code.ts

@@ -0,0 +1,40 @@
+import 'reflect-metadata';
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { basicSetup } from "codemirror"
+import { EditorView, keymap } from "@codemirror/view"
+import { html as htmlcode } from "@codemirror/lang-html"
+import { indentWithTab } from "@codemirror/commands"
+
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+@customElement('qbo-code')
+export class QboCode extends LitElement
+{
+    @property()
+    get value() { return this.editor?.state.doc.toString() };
+
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+
+    editor: EditorView | null = null;
+
+    render() {
+        const code = this.querySelector('*[slot=code]')?.innerHTML ?? this.innerHTML;
+        this.editor ??= new EditorView({
+            doc: code.trim(),
+            extensions: [
+                basicSetup,
+                htmlcode(),
+                keymap.of([indentWithTab]),
+                EditorView.updateListener.of((e) => {
+                    this.dispatchEvent(new CustomEvent('change', { detail: { code: this.value } }));
+                })
+            ],
+            parent: <DocumentFragment>this.shadowRoot,
+        });
+    }
+}
+

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

@@ -0,0 +1,45 @@
+import 'reflect-metadata';
+import { PropertyValues, LitElement } from 'lit';
+import { dia } from '@joint/core';
+interface TemplateOptions {
+    label: string;
+    position: number;
+    height: number;
+    width: number;
+    spacing: number;
+    color?: string | null;
+    bgcolor?: string | null;
+    element?: string | null;
+}
+/**
+  * Renders JointJs flowchart.
+  */
+export declare class QboFlowchart extends LitElement {
+    renderInHost: boolean;
+    paper: dia.Paper | null;
+    graph: dia.Graph;
+    namespace: any;
+    height: string;
+    width: string;
+    portRadius: Number;
+    router: String | any;
+    templateHeight: number;
+    templateWidth: number;
+    templateSpacing: number;
+    gridSize: number;
+    gridColor: string;
+    draggedElement: any | null;
+    static styles: import("lit").CSSResult;
+    createRenderRoot(): Element | ShadowRoot;
+    constructor();
+    firstUpdated(changedProperties: PropertyValues): void;
+    createGraph(): dia.Graph<dia.Graph.Attributes, dia.ModelSetOptions>;
+    createPaper(target: HTMLElement | null): dia.Paper;
+    createStep(cellView: any): void;
+    shapeFactory: Record<string, (options: Object) => dia.Element>;
+    createTemplate(options: TemplateOptions): dia.Element<dia.Element.Attributes, dia.ModelSetOptions>;
+    createPort(position: String, radius?: Number, tagName?: String, fill?: String, stroke?: String): Object;
+    showLinkTools(linkView: any): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/src/qbo-flowchart/qbo-flowchart.js

@@ -0,0 +1,309 @@
+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 'reflect-metadata';
+// import 'jointjs/dist/joint.css';
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dia, elementTools, linkTools, shapes } from '@joint/core';
+/**
+  * Renders JointJs flowchart.
+  */
+let QboFlowchart = class QboFlowchart extends LitElement {
+    static { this.styles = css `
+.available-magnet {
+    fill: green;
+}
+.available-cell rect {
+    stroke-dasharray: 5, 2;
+}`; }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    constructor() {
+        super();
+        this.renderInHost = true;
+        this.paper = null;
+        this.namespace = shapes;
+        this.height = '600px';
+        this.width = '100%';
+        this.portRadius = 3;
+        this.router = 'manhattan';
+        this.templateHeight = 30;
+        this.templateWidth = 80;
+        this.templateSpacing = 20;
+        this.gridSize = 10;
+        this.gridColor = 'lightgrey';
+        this.draggedElement = null;
+        this.shapeFactory = {
+            'Rectangle': (options) => {
+                return new shapes.standard.Rectangle(options);
+            },
+            'Polygon': (options) => {
+                options['transform'] = { rotate: 45 };
+                return new shapes.standard.Rectangle(options);
+            },
+            'Ellipse': (options) => {
+                return new shapes.standard.Ellipse(options);
+            },
+            'Circle': (options) => {
+                return new shapes.standard.Circle(options);
+            }
+        };
+        this.graph = this.createGraph();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.paper = this.createPaper(this.renderRoot.querySelector('div'));
+        document.addEventListener('keydown', (event) => {
+            if (event.altKey && event.key === '+') {
+                event.preventDefault();
+                this.paper.scale(this.paper.scale().sx + 0.1, this.paper.scale().sy + 0.1);
+            }
+        });
+        document.addEventListener('keydown', (event) => {
+            if (event.altKey && event.key === '-') {
+                event.preventDefault();
+                this.paper.scale(this.paper.scale().sx - 0.1, this.paper.scale().sy - 0.1);
+            }
+        });
+        document.addEventListener('keydown', (event) => {
+            if (event.altKey && event.key === '0') {
+                event.preventDefault();
+                this.paper.scale();
+            }
+        });
+        const templates = [
+            { label: "Task", bgcolor: "#ADD8E6", color: "black" },
+            { label: "Document", bgcolor: "#90EE90", color: "black" },
+            { label: "Message", bgcolor: "#F08080", color: "black" },
+            { label: "Score", bgcolor: "#E6E6FA", color: "black" },
+            { label: "Ledger", bgcolor: "#FFA07A", color: "black" },
+            { label: "Workflow", bgcolor: "#F5FFFA", color: "black" },
+            { label: "Process", bgcolor: "#FFEBCD", color: "black" },
+            { label: "If/Then", bgcolor: "#F0F8FF", element: "Ellipse", color: "black" },
+            { label: "Poll", bgcolor: "#FFDAB9", element: "Ellipse", color: "black" },
+            { label: "Advanced", bgcolor: "#F0FFF0", color: "black" },
+        ];
+        const defaultOptions = {
+            label: "New",
+            position: 0,
+            height: this.templateHeight,
+            width: this.templateWidth,
+            spacing: this.templateSpacing,
+            color: 'white',
+            bgcolor: 'blue',
+            element: 'Rectangle'
+        };
+        templates.forEach((template, index) => {
+            // this.createTemplate({}template, ((index + 1) * this.templateSpacing) + (index * this.templateHeight));
+            const position = ((index + 1) * this.templateSpacing) + (index * this.templateHeight);
+            const options = Object.assign(defaultOptions, { position: position }, template);
+            this.createTemplate(options);
+        });
+    }
+    createGraph() {
+        const graph = new dia.Graph({}, { cellNamespace: this.namespace });
+        return graph;
+    }
+    createPaper(target) {
+        const component = this;
+        const paper = new dia.Paper({
+            el: target,
+            model: this.graph,
+            width: component.width,
+            height: component.height,
+            gridSize: component.gridSize,
+            drawGrid: true,
+            cellViewNamespace: this.namespace,
+            background: {
+                color: component.gridColor
+            },
+            defaultLink: () => new shapes.standard.Link({
+                router: {
+                    name: component.router, args: { step: 5 }
+                }
+            }),
+            interactive: {
+                linkMove: true
+                // arrowheadMove: true,
+            },
+            linkPinning: false,
+            markAvailable: true,
+            snapLinks: { radius: 20 },
+            validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
+                if (cellViewS === cellViewT)
+                    return false;
+                return magnetT !== null; // && magnetT.getAttribute('port-group') !== 'restart';
+            }
+        });
+        // Register events
+        paper.on('link:mouseenter', (linkView) => {
+            this.showLinkTools(linkView);
+        });
+        paper.on('link:mouseleave', (linkView) => {
+            linkView.removeTools();
+        });
+        paper.on('element:mouseenter', elementView => elementView.showTools());
+        paper.on('element:mouseleave', elementView => elementView.hideTools());
+        paper.on('selection:change', function (selectedModels, options) {
+            // Reset styles for all elements
+            component.graph.getCells().forEach(function (cell) {
+                cell.attr('body/stroke', 'none');
+            });
+            // Apply a distinct style to selected models
+            selectedModels.forEach(function (cell) {
+                cell.attr('body/stroke', 'red');
+                cell.attr('body/stroke-width', 2);
+            });
+        });
+        return paper;
+    }
+    createStep(cellView) {
+        const component = this;
+        cellView.on('element:pointerdown', function (evt) {
+            // Clone the element
+            component.draggedElement = cellView.model.clone();
+            // clonedRect.position(cellView.model)
+            // Set the fill color of the selected element to gray
+            cellView.model.attr('body/fill', 'gray');
+            // Add the cloned element to the paper
+            // clonedRect.position(evt.clientX, evt.clientY);
+            component.graph.addCell(component.draggedElement);
+        });
+        cellView.on('element:pointerup', function () {
+            cellView.model.attr('body/fill', component.draggedElement.attr('body/fill'));
+            // Swap positions
+            var originalPosition = cellView.model.position();
+            var clonedPosition = component.draggedElement.position();
+            cellView.model.position(clonedPosition.x, clonedPosition.y);
+            component.draggedElement.position(originalPosition.x, originalPosition.y);
+            component.draggedElement.addPorts([{ 'group': 'left' }, { 'group': 'top' }, { 'group': 'right' }, { 'group': 'bottom' }]);
+            var view = component.draggedElement.findView(component.paper);
+            view.addTools(new dia.ToolsView({
+                tools: [new elementTools.Remove()]
+            }));
+        });
+    }
+    createTemplate(options) {
+        // const left = this.renderRoot!.querySelector('div')!.clientWidth;
+        const left = this.paper['el'].clientWidth - options.spacing - options.width;
+        const template = this.shapeFactory[options.element ?? 'Rectangle']({
+            position: { x: left, y: options.position },
+            size: { width: options.width, height: options.height },
+            attrs: {
+                body: {
+                    fill: options.bgcolor ?? 'blue',
+                },
+                label: {
+                    text: options.label,
+                    fill: options.color ?? 'white',
+                }
+            },
+            ports: {
+                groups: {
+                    'left': this.createPort('left'),
+                    'top': this.createPort('top'),
+                    'right': this.createPort('right'),
+                    'bottom': this.createPort('bottom')
+                }
+            }
+        });
+        this.graph.addCell(template);
+        this.createStep(this.paper.findViewByModel(template));
+        return template;
+    }
+    createPort(position, radius = this.portRadius, tagName = 'circle', fill = 'orange', stroke = 'blue') {
+        return {
+            position: { name: position },
+            attrs: {
+                portBody: {
+                    magnet: true,
+                    r: radius,
+                    fill: fill,
+                    stroke: stroke
+                }
+            },
+            markup: [{
+                    tagName: tagName,
+                    selector: 'portBody'
+                }]
+        };
+    }
+    showLinkTools(linkView) {
+        var tools = new dia.ToolsView({
+            tools: [
+                new linkTools.SourceArrowhead(),
+                new linkTools.TargetArrowhead(),
+                new linkTools.Remove()
+            ]
+        });
+        linkView.addTools(tools);
+    }
+    render() {
+        return html `<slot><div></div></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboFlowchart.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboFlowchart.prototype, "paper", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", dia.Graph)
+], QboFlowchart.prototype, "graph", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboFlowchart.prototype, "namespace", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], QboFlowchart.prototype, "height", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], QboFlowchart.prototype, "width", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], QboFlowchart.prototype, "portRadius", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFlowchart.prototype, "router", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], QboFlowchart.prototype, "templateHeight", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], QboFlowchart.prototype, "templateWidth", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], QboFlowchart.prototype, "templateSpacing", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], QboFlowchart.prototype, "gridSize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], QboFlowchart.prototype, "gridColor", void 0);
+QboFlowchart = __decorate([
+    customElement('qbo-flowchart'),
+    __metadata("design:paramtypes", [])
+], QboFlowchart);
+export { QboFlowchart };

package/src/qbo-flowchart/qbo-flowchart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qbo-select.js","sourceRoot":"","sources":["qbo-select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;;;IAKI;AAEG,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,QAAQ;IAAhC;;QAGH,YAAO,GAAG,KAAK,CAAC;QAGhB,eAAU,GAAkB,IAAI,CAAC;QAGjC,gBAAW,GAAkB,IAAI,CAAC;QAGlC,iBAAY,GAAG,IAAI,CAAC;QAGpB,aAAQ,GAAG,IAAI,CAAC;QAGhB,YAAO,GAA4C,EAAE,CAAC;QAGtD,iBAAY,GAAG,IAAI,CAAC;IA+BxB,CAAC;aA7BU,WAAM,GAAG;QACZ,GAAG,CAAA;;;SAGF;KACJ,AALY,CAKX;IAEF,KAAK,CAAC,iBAAiB;QACnB,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,CAAC;QACrC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;IAC/D,CAAC;IAED,MAAM;QACF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAC1C,OAAO,IAAI,CAAA,mBAAmB,CAAC;QAEnC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;QAExE,OAAO,IAAI,CAAA;gCACa,IAAI,CAAC,QAAQ;sBACvB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,MAAM,CAAC,IAAI,CAAC,WAAY,CAAC,gBAAgB,MAAM,CAAC,IAAI,CAAC,WAAY,CAAC,KAAK,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,UAAW,CAAC,WAAW,CAAC;0BAC9K,CAAC;IACvB,CAAC;;AAhDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACM;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACO;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACrB;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAC4B;AAGtD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACR;AArBX,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoDrB"}