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

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

@@ -0,0 +1,320 @@
+import 'reflect-metadata';
+// import 'jointjs/dist/joint.css';
+import { html, css, PropertyValues, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dia, elementTools, linkTools, shapes } from '@joint/core';
+import { TemplateContentDirective } from 'lit/directives/template-content.js';
+
+
+interface TemplateOptions {
+    label: string,
+    position: number,
+    height: number,
+    width: number,
+    spacing: number,
+    color?: string | null,
+    bgcolor?: string | null,
+    element?: string | null
+}
+
+/**
+  * Renders JointJs flowchart.
+  */
+@customElement('qbo-flowchart')
+export class QboFlowchart extends LitElement {
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    @property({ type: Object })
+    paper: dia.Paper | null = null;
+
+    @property({ type: Object })
+    graph: dia.Graph;
+
+    @property({ type: Object })
+    namespace: any = shapes;
+
+    @property({ type: String })
+    height: string = '600px';
+
+    @property({ type: String })
+    width: string = '100%';
+
+    @property({ type: Number })
+    portRadius: Number = 3;
+
+    @property({ type: String })
+    router: String | any = 'manhattan';
+
+    @property({ type: Number })
+    templateHeight: number = 30;
+
+    @property({ type: Number })
+    templateWidth: number = 80;
+
+    @property({ type: Number })
+    templateSpacing: number = 20;
+
+    @property({ type: Number })
+    gridSize: number = 10;
+
+    @property({ type: String })
+    gridColor: string = 'lightgrey';
+
+    draggedElement: any | null = null;
+
+    static styles = css`
+.available-magnet {
+    fill: green;
+}
+.available-cell rect {
+    stroke-dasharray: 5, 2;
+}`;
+
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    constructor() {
+        super();
+        this.graph = this.createGraph();
+    }
+
+    firstUpdated(changedProperties: PropertyValues) {
+        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: Object[] = [
+            { 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: TemplateOptions = {
+            label: "New",
+            position: 0,
+            height: this.templateHeight,
+            width: this.templateWidth,
+            spacing: this.templateSpacing,
+            color: 'white',
+            bgcolor: 'blue',
+            element: 'Rectangle'
+        }
+
+        templates.forEach((template: Object, index: number) => {
+            // this.createTemplate({}template, ((index + 1) * this.templateSpacing) + (index * this.templateHeight));
+            const position = ((index + 1) * this.templateSpacing) + (index * this.templateHeight);
+            const options: TemplateOptions = Object.assign(defaultOptions, { position: position }, template);
+            this.createTemplate(options);
+        });
+    }
+
+    createGraph() {
+        const graph = new dia.Graph({}, { cellNamespace: this.namespace });
+        return graph;
+    }
+
+    createPaper(target: HTMLElement | null) {
+        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()]
+            }));
+
+
+        });
+    }
+
+    shapeFactory: Record<string, (options: Object) => dia.Element> = {
+        'Rectangle': (options: Object) => {
+            return new shapes.standard.Rectangle(options);
+        },
+        'Polygon': (options: Object) => {
+            options['transform'] = { rotate: 45 };
+            return new shapes.standard.Rectangle(options);
+        },
+        'Ellipse': (options: Object) => {
+            return new shapes.standard.Ellipse(options);
+        },
+        'Circle': (options: Object) => {
+            return new shapes.standard.Circle(options);
+        }
+    };
+
+    createTemplate(options: TemplateOptions) {
+        // 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: String, radius: Number = this.portRadius, tagName: String = 'circle', fill: String = 'orange', stroke: String = 'blue'): Object {
+        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>`;
+    }
+}
+

package/src/qbo-flowchart/readme.md

@@ -0,0 +1,2 @@
+The qbo-flowchart web component is based on JointJS, and provides a flowchart editor.
+