Feature/variable browser rework

gui-js/apps/minsky-electron/src/app/managers/ApplicationMenuManager.ts

@@ -435,9 +435,10 @@ export class ApplicationMenuManager {
           click() {
             WindowManager.createPopupWindowWithRouting({
               title: 'Variables',
-              url: "#/headless/variable-pane",
+              url: '#/headless/variable-pane',
               width: 400,
               height: 450,
+              minWidth: 350,
               alwaysOnTop: true,
               modal: false,
             });

gui-js/apps/minsky-web/src/index.html

@@ -7,6 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico" />
 
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
+
     <style>
       .loader {
         border: 8px solid #f3f3f3;

gui-js/libs/ui-components/src/lib/svg-canvas/classes/connector.ts

@@ -0,0 +1,4 @@
+export class Connector {
+    type: string;
+    position: (x: number, y: number, width: number, height: number) => [number,number];
+}

gui-js/libs/ui-components/src/lib/svg-canvas/classes/datapoint.ts

@@ -0,0 +1,22 @@
+import { ElementType } from './elementtype';
+import { Connector } from './connector';
+import { Dimensions } from './dimensions';
+
+export class DataPoint {
+    label: string;
+    x?: number;
+    y?: number;
+    fx?: number;
+    fy?: number;
+    value: number;
+    exponent: number;
+    rotation: number;
+    anchorx?: number;
+    anchory?: number;
+    type: ElementType;
+    connectors: Connector[];
+    canvasPosition;
+    symbol;
+    dimensions: Dimensions;
+    hidden = false;
+}

gui-js/libs/ui-components/src/lib/svg-canvas/classes/dimensions.ts

@@ -0,0 +1,8 @@
+export class Dimensions {
+    length: number;
+    boundingbox: number[];
+    labelbox: number[];
+    valuebox: number[];
+    exponentbox: number[];
+    valueline?: number[][];
+}

gui-js/libs/ui-components/src/lib/svg-canvas/classes/elementtype.ts

@@ -0,0 +1,10 @@
+import { Connector } from './connector';
+import { Dimensions } from './dimensions';
+
+export class ElementType {
+    name: string;
+    points: (x: number, y: number, width: number, height: number) => string;
+    size: number[];
+    connectors: Connector[];
+    getDimensions: (length: number) => Dimensions;
+}

gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.html

@@ -0,0 +1,7 @@
+<svg:path #linepath [style.display]="invisibleLine ? 'none' : 'inherit'"></svg:path>
+
+<svg:circle #startpoint [attr.cx]="start[0]" [attr.cy]="start[1]" r="0.00001"></svg:circle>
+<svg:circle #endpoint [attr.cx]="end[0]" [attr.cy]="end[1]" r="0.00001"></svg:circle>
+
+<svg:circle #midpoint dragdrop *ngFor="let p of dotPositions; let i = index"
+[dragfunctions]="dragfunctions(p, i)" [attr.cx]="p.x" [attr.cy]="p.y" r="7"></svg:circle>

gui-js/libs/ui-components/src/lib/svg-canvas/components/d3line.component.ts

@@ -0,0 +1,113 @@
+import { CommonModule } from '@angular/common';
+import { ElementRef, Input, OnChanges, ViewChild, Component, SimpleChanges, Output, EventEmitter, ViewChildren } from '@angular/core';
+import * as d3 from 'd3';
+
+@Component({
+  selector: '[d3line]',
+  templateUrl: './d3line.component.html',
+    styleUrls: ['./d3line.component.css'],
+    imports: [CommonModule]
+})
+export class D3LineComponent implements OnChanges {
+    @ViewChild('linepath', {static: true})
+    linepath: ElementRef;
+
+    @ViewChild('startpoint', {static: true})
+    startpoint: ElementRef;
+
+    @ViewChild('endpoint', {static: true})
+    endpoint: ElementRef;
+
+    @ViewChildren('midpoint')
+    midpoints;
+
+    @Input()
+    start: [number,number,number];
+
+    @Input()
+    end: [number,number,number];
+
+    @Input()
+    dotsAt: number[];
+
+    dotPositions: any[] = [];
+
+    @Input()
+    invisibleLine = false;
+
+    @Input()
+    draggable = true;
+
+    @Output()
+    pointMoved = new EventEmitter<any>();
+
+    constructor() {
+
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if(this.start && this.end && (changes.start || changes.end)) {
+            const points: any = [this.start];
+
+            const pointDistance = Math.sqrt(Math.pow(this.end[0] - this.start[0], 2) + Math.pow(this.end[1] - this.start[1], 2)) / 4;
+            if(this.start[2] !== undefined) {
+                points.push([this.start[0] + Math.cos(this.start[2]) * pointDistance, this.start[1] + Math.sin(this.start[2]) * pointDistance]);
+            }
+            if(this.end[2] !== undefined) {
+                points.push([this.end[0] + Math.cos(this.end[2]) * pointDistance, this.end[1] + Math.sin(this.end[2]) * pointDistance]);
+            }
+            points.push(this.end);
+
+            this.linepath.nativeElement.setAttribute('d', d3.line().curve(d3.curveBasis)(points));
+        }
+
+        if(changes.dotsAt) {
+            this.handleDotsChange();
+        }
+    }
+
+    handleDotsChange() {
+        const path = this.linepath.nativeElement;
+        const length = path.getTotalLength();
+        this.dotPositions = this.dotsAt.map(percentage => {
+            return path.getPointAtLength(percentage * length);
+        });
+    }
+
+    dragfunctions(p, i) {
+        const startBox = this.startpoint.nativeElement.getBBox();
+        const endBox = this.endpoint.nativeElement.getBBox();
+        const start = [startBox.x + startBox.width / 2, startBox.y + startBox.height / 2];
+        const end = [endBox.x + endBox.width / 2, endBox.y + endBox.height / 2];
+
+        return {
+          dragstarted: () => {
+          },
+          dragged: () => {
+            if(this.draggable) {
+                const x = d3.event.x;
+                const y = d3.event.y;
+                const point = [x,1000];
+
+                const a1 = Math.max(0, Math.PI / 2 - this.getAngle(end, start, point));
+                const a2 = Math.max(0, Math.PI / 2 - this.getAngle(start, end, point));
+
+                this.dotsAt[i] = a1 / (a1 + a2);
+                this.pointMoved.emit(this.dotsAt[i]);
+            }
+          },
+          dragended: () => {
+
+          }
+        };
+    }
+
+    getAngle(x, y, z) {
+        const a = [z[0] - y[0], z[1] - y[1]];
+        const b = [x[0] - y[0], x[1] - y[1]];
+        const al = Math.sqrt(Math.pow(a[0],2)+Math.pow(a[1],2));
+        const bl = Math.sqrt(Math.pow(b[0],2)+Math.pow(b[1],2));
+        const dotproduct = a[0] * b[0] + a[1] * b[1];
+        return Math.acos(dotproduct / (al * bl));
+    }
+}

gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.css

@@ -0,0 +1,24 @@
+:host {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    overflow: visible;
+}
+
+.namelabel, .descriptionlabel, .valuelabel {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-align: center;
+}
+
+.descriptionlabel {
+    flex-grow: 6;
+}

gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.html

@@ -0,0 +1,14 @@
+<div class="latex" latex [equation]="data.symbol" [style.fontSize]="fontSize">
+</div>
+
+<div *ngIf="lines > 1" class="valuelabel" [style.fontSize]="fontSize">
+    {{data.value.toFixed(4)}}
+</div>
+
+<div *ngIf="lines > 2" class="namelabel" [style.fontSize]="fontSize">
+    {{data.name}}
+</div>
+
+<div *ngIf="lines > 3" class="descriptionlabel" [style.fontSize]="fontSize">
+    {{data.description}}
+</div>

gui-js/libs/ui-components/src/lib/svg-canvas/components/elementlabel.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import { LatexDirective } from '../../directives/latex.directive';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'elementlabel',
+    templateUrl: './elementlabel.component.html',
+    styleUrls: ['./elementlabel.component.css'],
+    standalone: true,
+    imports: [LatexDirective, CommonModule]
+  })
+  export class ElementLabelComponent {
+    @Input()
+    data;
+
+    @Input()
+    lines: number;
+
+    get fontSize() {
+        return `${20 / this.lines}px`;
+    }
+  }