Release v0.0.97

Author: github-actions[bot]

dist/index.css

@@ -43277,6 +43277,7 @@ var SchemaDesignerToolbar = class {
     this._container = _container;
     this._graph = _graph;
     this._config = _config;
+    this.buttons = /* @__PURE__ */ new Map();
     this._toolbarDiv = document.createElement("div");
     this._container.appendChild(this._toolbarDiv);
     this._toolbarDiv.classList.add("sd-toolbar");
@@ -43287,7 +43288,11 @@ var SchemaDesignerToolbar = class {
     this._toolbarDiv.appendChild(button);
     button.classList.add("sd-toolbar-button");
     button.innerHTML = icon;
-    button.onclick = callback;
+    button.onclick = () => {
+      if (!this.isButtonDisabled(title)) {
+        callback();
+      }
+    };
     button.title = title;
     if (onDragEndCallback) {
       const dragImage = button.cloneNode(true);
@@ -43300,6 +43305,16 @@ var SchemaDesignerToolbar = class {
       );
       ds.highlightDropTargets = true;
     }
+    this.buttons.set(title, button);
+  }
+  disableButton(title) {
+    this.buttons.get(title)?.classList.add("sd-toolbar-button-disabled");
+  }
+  enableButton(title) {
+    this.buttons.get(title)?.classList.remove("sd-toolbar-button-disabled");
+  }
+  isButtonDisabled(title) {
+    return this.buttons.get(title)?.classList.contains("sd-toolbar-button-disabled");
   }
   addDivider() {
     const divider = document.createElement("div");
@@ -44252,6 +44267,15 @@ var SchemaDesigner = class {
           }
         }
       );
+      this.toolbar.addDivider();
+      this.toolbar.addButton(
+        this.config.icons.exportIcon,
+        "Export",
+        () => {
+          const schema = this.schema;
+          this.config.publish(schema);
+        }
+      );
     }
   }
   /**

dist/index.css.map

@@ -510,6 +510,11 @@ class SchemaDesigner {
                     this.mxEditor.execute("delete", cell);
                 }
             });
+            this.toolbar.addDivider();
+            this.toolbar.addButton(this.config.icons.exportIcon, "Export", () => {
+                const schema = this.schema;
+                this.config.publish(schema);
+            });
         }
     }
     /**

dist/index.js

@@ -200,6 +200,11 @@ export interface SchemaDesignerConfig {
      * @param scale scale of the graph
      */
     updateEditorPosition: (x: number, y: number, scale: number) => void;
+    /**
+     * Callback to publish the schema
+     * @param model schema model
+     */
+    publish: (model: ISchema) => void;
 }
 /**
  * Interface for edge cells in schema designer

dist/index.js.map

@@ -5,7 +5,11 @@ export declare class SchemaDesignerToolbar {
     private _graph;
     private _config;
     private _toolbarDiv;
+    buttons: Map<string, HTMLElement>;
     constructor(_container: HTMLElement, _graph: mxGraph, _config: SchemaDesignerConfig);
     addButton(icon: string, title: string, callback: () => void, onDragEndCallback?: (graph: mxGraph, evt: MouseEvent, cell: mxCellState) => void): void;
+    disableButton(title: string): void;
+    enableButton(title: string): void;
+    isButtonDisabled(title: string): boolean | undefined;
     addDivider(): void;
 }

dist/src/ts/schemaDesigner/schemaDesigner.js

@@ -7,6 +7,7 @@ class SchemaDesignerToolbar {
         this._container = _container;
         this._graph = _graph;
         this._config = _config;
+        this.buttons = new Map();
         this._toolbarDiv = document.createElement("div");
         this._container.appendChild(this._toolbarDiv);
         this._toolbarDiv.classList.add("sd-toolbar");
@@ -17,14 +18,31 @@ class SchemaDesignerToolbar {
         this._toolbarDiv.appendChild(button);
         button.classList.add("sd-toolbar-button");
         button.innerHTML = icon;
-        button.onclick = callback;
+        button.onclick = () => {
+            if (!this.isButtonDisabled(title)) {
+                callback();
+            }
+        };
         button.title = title;
         if (onDragEndCallback) {
             const dragImage = button.cloneNode(true);
             dragImage.style.backgroundColor = this._config.colors.toolbarBackground;
             const ds = mx_1.mxGraphFactory.mxUtils.makeDraggable(button, this._graph, onDragEndCallback, dragImage);
             ds.highlightDropTargets = true;
         }
+        this.buttons.set(title, button);
+    }
+    disableButton(title) {
+        var _a;
+        (_a = this.buttons.get(title)) === null || _a === void 0 ? void 0 : _a.classList.add("sd-toolbar-button-disabled");
+    }
+    enableButton(title) {
+        var _a;
+        (_a = this.buttons.get(title)) === null || _a === void 0 ? void 0 : _a.classList.remove("sd-toolbar-button-disabled");
+    }
+    isButtonDisabled(title) {
+        var _a;
+        return (_a = this.buttons.get(title)) === null || _a === void 0 ? void 0 : _a.classList.contains("sd-toolbar-button-disabled");
     }
     addDivider() {
         const divider = document.createElement("div");

dist/src/ts/schemaDesigner/schemaDesignerInterfaces.d.ts

@@ -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.96",
+  "version": "0.0.97",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",

dist/src/ts/schemaDesigner/schemaDesignerToolbar.d.ts

@@ -47,6 +47,11 @@
   align-items: center;
 }
 
+.sd-toolbar-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .sd-toolbar-button:hover {
   background-color: var(--sd-toolbar-hover-background-color);
 }

dist/src/ts/schemaDesigner/schemaDesignerToolbar.js

@@ -641,6 +641,15 @@ export class SchemaDesigner {
                     }
                 }
             );
+            this.toolbar.addDivider();
+            this.toolbar.addButton(
+                this.config.icons.exportIcon,
+                "Export",
+                () => {
+                    const schema = this.schema;
+                    this.config.publish(schema);
+                }
+            );
         }
     }
 

dist/tsconfig.tsbuildinfo

@@ -207,6 +207,11 @@ export interface SchemaDesignerConfig {
      * @param scale scale of the graph
      */
     updateEditorPosition: (x: number, y: number, scale: number) => void;
+    /**
+     * Callback to publish the schema
+     * @param model schema model
+     */
+    publish: (model: ISchema) => void;
 }
 
 /**

package.json

@@ -4,6 +4,9 @@ import { SchemaDesignerConfig } from "./schemaDesignerInterfaces";
 
 export class SchemaDesignerToolbar {
     private _toolbarDiv: HTMLElement;
+
+    public buttons: Map<string, HTMLElement> = new Map();
+
     constructor(private _container: HTMLElement, private _graph: mxGraph, private _config: SchemaDesignerConfig) {
         this._toolbarDiv = document.createElement("div");
         this._container.appendChild(this._toolbarDiv);
@@ -20,7 +23,11 @@ export class SchemaDesignerToolbar {
         this._toolbarDiv.appendChild(button);
         button.classList.add("sd-toolbar-button");
         button.innerHTML = icon;
-        button.onclick = callback;
+        button.onclick = () => {
+            if (!this.isButtonDisabled(title)) {
+                callback();
+            }
+        }
         button.title = title;
         if (onDragEndCallback) {
             const dragImage = button.cloneNode(true) as HTMLElement;
@@ -33,6 +40,19 @@ export class SchemaDesignerToolbar {
             );
             ds.highlightDropTargets = true;
         }
+        this.buttons.set(title, button);
+    }
+
+    public disableButton(title: string) {
+        this.buttons.get(title)?.classList.add("sd-toolbar-button-disabled");
+    }
+
+    public enableButton(title: string) {
+        this.buttons.get(title)?.classList.remove("sd-toolbar-button-disabled");
+    }
+
+    public isButtonDisabled(title: string) {
+        return this.buttons.get(title)?.classList.contains("sd-toolbar-button-disabled");
     }
 
     public addDivider() {