Fixing more examples (#189)

* Update examples * Fixing more examples
microsoft · Jan 23, 2025 · b4da709 · b4da709
1 parent ff3e28b
commit b4da709
Show file tree

Hide file tree

Showing 8 changed files with 6,724 additions and 5,969 deletions.
diff --git a/index.html b/index.html
@@ -7,6 +7,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/ecommerceDemoSchema.html"> Schema Designer (Ecommerce Demo):</a> - Creates a schemaDesigner with using the ecommerce demo schema</li>
             <li><a href="ts-examples/worldWideImporters.html">Schema Designer (World Wide Importers): </a> - Creates a schemaDesigner with using the world wide importers schema</li>
             <li><a href="ts-examples/adventureWorks.html">Schema Designer (Adventure Works):</a> - Creates a schemaDesigner with using adventure works schema</li>
             <li><a href="ts-examples/smallSchema.html">Schema Designer (Small test schema):</a> - Creates a small demo schema</li>

diff --git a/package.json b/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.74",
+  "version": "0.0.75",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",

diff --git a/src/ts/schemaDesigner/schemaDesigner.ts b/src/ts/schemaDesigner/schemaDesigner.ts
@@ -666,8 +666,8 @@ export class SchemaDesigner {
 
     private renderRelationship(relationship: IRelationship) {
         const cells = this._model.getChildCells(this._graph.getDefaultParent());
-        const source = cells.find((cell) => cell.value.name === relationship.entity);
-        const target = cells.find((cell) => cell.value.name === relationship.referencedEntity);
+        const source = cells.find((cell) => cell.value.name === relationship.entity && cell.value.schema === relationship.schemaName);
+        const target = cells.find((cell) => cell.value.name === relationship.referencedEntity && cell.value.schema === relationship.referencedSchema);
         if (source === undefined || target === undefined) {
             return;
         }
@@ -704,8 +704,10 @@ export class SchemaDesigner {
                     onUpdateAction: OnAction.CASCADE,
                     column: cell.target.value.columns[cell.value.sourceRow - 1].name,
                     entity: cell.target.value.name,
+                    schemaName: cell.target.value.schema,
                     referencedEntity: cell.source.value.name,
-                    referencedColumn: cell.source.value.columns[cell.value.targetRow - 1].name
+                    referencedColumn: cell.source.value.columns[cell.value.targetRow - 1].name,
+                    referencedSchema: cell.source.value.schema,
                 };
                 schema.relationships.push(relationship);
             }

diff --git a/src/ts/schemaDesigner/schemaDesignerInterfaces.ts b/src/ts/schemaDesigner/schemaDesignerInterfaces.ts
@@ -43,6 +43,10 @@ export interface IRelationship {
      * Name of the relationship
      */
     foreignKeyName: string;
+    /**
+     * Schema of the relationship
+     */
+    schemaName: string;
     /**
      * Parent entity of the relationship
      */
@@ -51,6 +55,10 @@ export interface IRelationship {
      * Parent column of the relationship
      */
     column: string;
+    /**
+     * Referenced schema of the relationship
+     */
+    referencedSchema: string;
     /**
      * Referenced entity of the relationship
      */

diff --git a/ts-examples/ecommerceDemoSchema.html b/ts-examples/ecommerceDemoSchema.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Big Schema Designer</title>
+    <link rel="stylesheet" href="../dist/index.css" />
+    <script type="module">
+      import { SchemaDesigner } from "../dist/index.js";
+      import { schemaDesignerConfig } from "./schemas/schema_designer_config.js";
+      import { ecommerceDemoSchema } from "./schemas/schema_ecommerce_demo.js";
+      window.onload = () => {
+        const targetDiv1 = document.getElementById("graphContainer");
+        if (targetDiv1) {
+          const schemaDesigner = new SchemaDesigner(targetDiv1, schemaDesignerConfig);
+          schemaDesigner.renderModel(ecommerceDemoSchema);
+          schemaDesigner.addCellClickListener((cell) => {
+            console.log(cell);
+          })
+        }
+      };
+    </script>
+    <style>
+      :root {
+        --graph-font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        --color-outline-color: #0c8ce9;
+        --color-graph-outline-background: #fff;
+        --color-graph-cell-highlight: #0c8ce9;
+        --color-graph-outline-tableCell: #1e272e;
+        --color-graph-outline-columnCell: #bdc3c7;
+        --color-graph-background: #ffffff;
+        --color-graph-table-indicator: #00a2ad;
+        --color-graph-column-indicator: #f0f0f0;
+        --color-graph-node-hover: #f0f0f0;
+      }
+      .body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+      }
+      #graphContainer {
+        position: absolute;
+        width: 100%;
+        height: calc(100vh - 20px);
+        min-width: 100%;
+        min-height: calc(100vh - 20px);
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="graphContainer"></div>
+  </body>
+</html>