Fixing colors

index.html

@@ -8,6 +8,7 @@ <h1>Examples</h1>
         <ul>
             <li><a href="ts-examples/helloWorld.html">Hello World</a> - A simple example that loads mxgraph with 2 cells and a connection between them.</li>
             <li><a href="ts-examples/bigSchema.html">Schema Designer with a big schema loaded</a> - Creates a schemaDesigner with using the world wide importers schema</li>
+            <li><a href="ts-examples/mediumSchema.html">Schema Designer with a medium schema loaded</a> - Creates a schemaDesigner with using adventure works schema</li>
             <li><a href="ts-examples/smallSchema.html">Schema Designer with an small schema</a> - Creates a small demo schema</li>
         </ul>
     </body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "azdataGraph",
   "description": "azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",
@@ -42,5 +42,8 @@
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.18.0",
     "vite": "^6.0.7"
+  },
+  "dependencies": {
+    "create-color": "^2.0.6"
   }
 }

src/ts/schemaDesigner/schemaDesigner.css

@@ -19,8 +19,8 @@
     width: fit-content;
     gap: 0.5rem;
     display: flex;
-    background-color: var(--color-toolbar-bg);
-    color: var(--color-toolbar-text);
+    background-color: var(--sd-toolbar-background-color);
+    color: var(--sd-toolbar-foreground-color);
     padding: 5px;
     border-radius: 0.8rem;
     vertical-align: middle;
@@ -43,13 +43,13 @@
   }
 
   .sd-toolbar-button:hover {
-    background-color: var(--color-toolbar-button-hover);
+    background-color: var(--sd-toolbar-hover-background-color);
   }
 
   .sd-toolbar-divider {
     height: 100%;
     width: 1px;
-    background-color: var(--color-toolbar-divider);
+    background-color: var(--sd-toolbar-divider-background-color);
   }
 
   #graphContainer {
@@ -58,21 +58,22 @@
     z-index: var(--sd-z-base);
     background-image: radial-gradient(
       circle,
-      var(--color-graph-gridLines) 10%,
+      var(--sd-graph-grid-color) 10%,
       transparent 10%
     );
     background-size: 20px 20px;
     background-repeat: repeat;
     overflow: auto;
+    background-color: var(--sd-graph-background-color);
   }
-  
+
   .sd-outline {
     position: fixed;
     right: 10px;
     bottom: 10px;
-    border-radius: 0.3rem;
+    border-radius: 0.2rem;
     z-index: var(--sd-z-toolbar);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--sd-border-color);
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
       inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
       inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
@@ -85,26 +86,26 @@
     width: 260px;
     height: 100%;
     border-radius: 2px;
+    color: var(--sd-cell-html-foreground);
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
     inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
     inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
     display: flex;
     flex-direction: column;
-    background-color: var(--color-graph-background);
+    background-color: var(--sd-graph-background-color);
   }
 
   .sd-table-color-indicator {
     width: 100%;
     height: 6px;
-    background-color: var(--color-graph-table-indicator);
     border-radius: 2px 2px 0 0;
   }
 
   .sd-table-header {
     display: flex;
     gap: 10px;
     height: 40px;
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--sd-border-color);
   }
 
 
@@ -120,7 +121,6 @@
   .sd-table-header-text {
     font-size: 14px;
     font-weight: 500;
-    color: var(--color-table-header-text);
     align-self: center;
     text-align: left;
     flex: 1;

src/ts/schemaDesigner/schemaDesigner.ts

@@ -2,7 +2,7 @@ import './schemaDesigner.css';
 import '../../css/common.css';
 
 import { IColumn, IEntity, IRelationship, ISchema, OnAction, SchemaDesignerConfig } from './schemaDesignerInterfaces';
-import { mxCell, mxEditor, mxGraph, mxGraphModel, mxHierarchicalLayout } from 'mxgraph';
+import { mxCell, mxEditor, mxGraph, mxGraphLayout, mxGraphModel } from 'mxgraph';
 
 import { mxGraphFactory as mx } from '../mx';
 import { SchemaDesignerToolbar } from './schemaDesignerToolbar';
@@ -18,7 +18,7 @@ export class SchemaDesigner {
     public _graph!: mxGraph;
     private _model!: mxGraphModel;
     private _toolbar!: SchemaDesignerToolbar;
-    private _layout!: mxHierarchicalLayout;
+    private _layout!: mxGraphLayout;
 
     private cellClickListeners: ((cell: mxCell) => void)[] = [];
 
@@ -31,38 +31,99 @@ export class SchemaDesigner {
 
     private initializeGraph() {
         this.overwriteMxGraphDefaults();
+        this.addCustomEdgeTerminals();
         this._editor = new mx.mxEditor();
-        const graphContainer = document.createElement("div");
-        graphContainer.classList.add("sd-graph-container");
-        this._container.appendChild(graphContainer);
-        this._editor.setGraphContainer(graphContainer);
+        this._editor.setGraphContainer(this._container);
         this._graph = this._editor.graph;
         this._model = this._graph.getModel();
         this.setupEditorOptions();
         this.setupGraphOptions();
+        this.setupColors();
         this.setupGraphOutlineOptions();
         this.setupToolbar();
     }
 
+    private setupColors() {
+        this._container.style.setProperty("--sd-toolbar-background-color", this._config.colors.toolbarBackground);
+        this._container.style.setProperty("--sd-toolbar-foreground-color", this._config.colors.toolbarForeground);
+        this._container.style.setProperty("--sd-toolbar-hover-background-color", this._config.colors.toolbarHoverBackground);
+        this._container.style.setProperty("--sd-toolbar-divider-background-color", this._config.colors.toolbarDividerBackground);
+
+        this._container.style.setProperty("--sd-graph-background-color", this._config.colors.graphBackground);
+        this._container.style.setProperty("--sd-graph-grid-color", this._config.colors.graphGrid);
+        this._container.style.setProperty("--sd-border-color", this._config.colors.cellBorder);
+
+        this._container.style.setProperty("--sd-cell-html-foreground", this._config.colors.cellForeground);
+
+        this._graph.getStylesheet().getDefaultVertexStyle()["fillColor"] = this._config.colors.cellBackground;
+        this._graph.getStylesheet().getDefaultEdgeStyle()["strokeColor"] = this._config.colors.edge;
+        this._graph.getStylesheet().getDefaultVertexStyle()['cellHighlightColor'] = this._config.colors.cellHighlight;
+        this._graph.getStylesheet().getDefaultVertexStyle()['cellHightlightStrokeWidth'] = 3;
+
+
+        this._graph.getStylesheet().getDefaultEdgeStyle()['cellHighlightColor'] = this._config.colors.cellHighlight;        
+        mx.mxConstants.OUTLINE_HANDLE_FILLCOLOR = this._config.colors.cellHighlight
+        mx.mxConstants.OUTLINE_HANDLE_STROKECOLOR = this._config.colors.cellHighlight;
+        mx.mxConstants.OUTLINE_COLOR = this._config.colors.cellHighlight;
+    }
+
     private overwriteMxGraphDefaults() {
         mx.mxClient.NO_FO = true;
         mx.mxEvent.disableContextMenu(this._container);
-        mx.mxConstants.DEFAULT_VALID_COLOR = this._config.color.validColor;
-        mx.mxConstants.VALID_COLOR = this._config.color.validColor;
-        mx.mxConstants.INVALID_COLOR = this._config.color.invalidColor;
+    }
+
+    private addCustomEdgeTerminals() {
+        mx.mxMarker.addMarker("one", (canvas, _shape, _type, pe, unitX, unitY, size, _source, _sw, _filled) => {
+            return () => {
+                const endX = pe.x - unitX * size;
+                const endY = pe.y - unitY * size;
+
+                const midX = endX - unitY * size;
+                const midY = endY + unitX * size;
+
+                const startX = endX + unitY * size;
+                const startY = endY - unitX * size;
+
+                canvas.begin();
+                canvas.moveTo(startX, startY);
+                canvas.lineTo(midX, midY);
+                canvas.stroke();
+            };
+        });
+
+        mx.mxMarker.addMarker("many", (canvas, _shape, _type, pe, unitX, unitY, size, _source, _sw, _filled) => {
+            return () => {
+                const arrowSize = 1.5;
+                const startX = pe.x - unitX * size * arrowSize;
+                const startY = pe.y - unitY * size * arrowSize;
+
+                const Y1 = pe.y + unitX * size * arrowSize;
+                const X1 = pe.x;
+                const Y2 = pe.y - unitX * size * arrowSize;
+                const X2 = pe.x;
+
+                canvas.begin();
+                canvas.moveTo(startX, startY);
+                canvas.lineTo(X1, Y1);
+                canvas.stroke();
+
+                canvas.begin();
+                canvas.moveTo(startX, startY);
+                canvas.lineTo(X2, Y2);
+                canvas.stroke();
+            };
+        });
     }
 
     private setupEditorOptions() {
         this._editor.layoutSwimlanes = true;
     }
 
     private setupGraphOptions() {
-        this._graph.setResizeContainer(true);
         this._graph.tooltipHandler.setEnabled(false);
         this._graph.setConnectable(true);
         this._graph.setAllowDanglingEdges(false);
         this._graph.setHtmlLabels(true);
-        this._graph.allowLoops = false;
         this._graph.connectionHandler.enabled = false;
         this._graph.connectionHandler.movePreviewAway = false;
         this._graph.connectionHandler.moveIconFront = true;
@@ -73,10 +134,12 @@ export class SchemaDesigner {
         );
         this._graph.connectionHandler.factoryMethod = null!;
         this._layout = new SchemaDesignerLayout(this._graph);
-        this._layout.intraCellSpacing = 30;
+
         this._graph.setCellsDisconnectable(false);
-        this._graph.autoExtend = true;
-        new mx.mxRubberband(this._graph);
+        this._graph.autoSizeCellsOnAdd = true;
+        this._graph.getSelectionModel().setSingleSelection(true);
+        this._graph.setPanning(true);
+        this._graph.panningHandler.useLeftButtonForPanning = true;
 
         this._graph.view.updateFloatingTerminalPoint = function (edge, start, end, source) {
             const next = this.getNextPoint(edge, end, source);
@@ -402,10 +465,7 @@ export class SchemaDesigner {
                 this.cellClickListeners.forEach((listener) => listener(cell));
             }
         });
-
-        this._graph.getStylesheet().getDefaultVertexStyle()['cellHighlightColor'] = "red";
         this._graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = mx.mxEdgeStyle.ElbowConnector;
-        this._graph.stylesheet.getDefaultEdgeStyle()[mx.mxConstants.STYLE_EDGE] = mx.mxConstants.EDGESTYLE_ENTITY_RELATION;
     }
 
     private setupGraphOutlineOptions() {
@@ -490,6 +550,14 @@ export class SchemaDesigner {
             }
         );
 
+        this._toolbar.addButton(
+            this._config.icons.zoomFitIcon,
+            "Fit",
+            () => {
+                this._graph.fit(undefined!);
+            }
+        )
+
         this._toolbar.addDivider();
 
         this._toolbar.addButton(
@@ -644,45 +712,10 @@ export class SchemaDesigner {
     public autoArrange() {
         this._model.beginUpdate();
         this._layout.execute(this._graph.getDefaultParent());
-        const cells = this._graph.getChildCells(this._graph.getDefaultParent());
-        this._graph.center();
-
-        const mostNegativeX = this.mostNegativeX();
-        console.log('-x', mostNegativeX);
-
-        const mostNegativeY = this.mostNegativeY();
-        console.log('-y', mostNegativeY);
-
-        this._graph.moveCells(cells, -mostNegativeX + 100, -mostNegativeY + 100, false);
-        this._graph.sizeDidChange();
 
         this._model.endUpdate();
     }
 
-    private mostNegativeX() {
-        let mostNegativeX = 0;
-        const cells = this._graph.getChildCells(this._graph.getDefaultParent());
-        for (let i = 0; i < cells.length; i++) {
-            const cell = cells[i];
-            if (cell.geometry.x < mostNegativeX) {
-                mostNegativeX = cell.geometry.x;
-            }
-        }
-        return mostNegativeX;
-    }
-
-    private mostNegativeY() {
-        let mostNegativeY = 0;
-        const cells = this._graph.getChildCells(this._graph.getDefaultParent());
-        for (let i = 0; i < cells.length; i++) {
-            const cell = cells[i];
-            if (cell.geometry.y < mostNegativeY) {
-                mostNegativeY = cell.geometry.y;
-            }
-        }
-        return mostNegativeY;
-    }
-
     public addCellClickListener(listener: (cell: mxCell) => void) {
         this.cellClickListeners.push(listener);
     }

src/ts/schemaDesigner/schemaDesignerEntity.ts

@@ -1,5 +1,6 @@
 import { mxGraph } from "mxgraph";
 import { IColumn, IEntity, SchemaDesignerConfig } from "./schemaDesignerInterfaces";
+import createColor from "create-color";
 
 export class SchemaDesignerEntity implements IEntity {
     public div!: HTMLElement;
@@ -14,11 +15,13 @@ export class SchemaDesignerEntity implements IEntity {
     }
 
     render(): HTMLElement {
+        const color = createColor(this.schema, { format: "hex" });
         const parent = document.createElement("div");
         parent.classList.add("sd-table");
         const colorIndicator = document.createElement("div");
         colorIndicator.classList.add("sd-table-color-indicator");
         parent.appendChild(colorIndicator);
+        colorIndicator.style.backgroundColor = color;
         const header = document.createElement("div");
         header.classList.add("sd-table-header");
         const headerIcon = document.createElement("div");
@@ -38,7 +41,11 @@ export class SchemaDesignerEntity implements IEntity {
             columnDiv.classList.add("sd-table-column");
             const columnIcon = document.createElement("div");
             columnIcon.classList.add("sd-table-column-icon");
-            columnIcon.style.backgroundImage = `url(${this._config.icons.dataTypeIcons![column.dataType]})`;
+            if(this._config.icons.dataTypeIcons[column.dataType]){
+                columnIcon.style.backgroundImage = `url(${this._config.icons.dataTypeIcons[column.dataType]})`;
+            } else {
+                columnIcon.style.backgroundImage = `url(${this._config.icons.customDataTypeIcon})`;
+            }
             columnDiv.appendChild(columnIcon);
             const columnText = document.createElement("div");
             columnText.classList.add("sd-table-column-text");