@aire-ux/aire-designer - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

.rollup.cache/home/josiah/dev/src/github.com/aire-ux/aire-components/aire-ux/controls/aire-designer-component/dist/src/AireCanvas.d.ts

@@ -0,22 +1,12 @@
+import * as mx from '@aire-ux/mxgraph';
 import { LitElement, PropertyValues } from 'lit-element';
-/**
- * the html contents of this canvas
- */
-export declare const HtmlContents: import("lit-element").TemplateResult<1>;
+export declare const HtmlContents: import("lit-html").TemplateResult<1>;
 export declare class AireCanvas extends LitElement {
-    private mx;
+    private _graph;
     static get styles(): import("lit-element").CSSResult;
-    /**
-     * the base path to use
-     * @private
-     */
     private basePath;
-    /**
-     * the client source location to use.  Useful for debugging
-     * @private
-     */
     private clientSource;
-    render(): import("lit-element").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    get graph(): mx.mxGraph;
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
 }

.rollup.cache/home/josiah/dev/src/github.com/aire-ux/aire-components/aire-ux/controls/aire-designer-component/dist/src/AireCanvas.js

 import { __decorate } from "tslib";
+import * as mx from '@aire-ux/mxgraph';
 import { css, customElement, html, LitElement, property, } from 'lit-element';
-import factory from './mxgraph';
-/**
- * the html contents of this canvas
- */
 export const HtmlContents = html ` <div class="aire-canvas-container"></div> `;
@@ -19,32 +16,9 @@ let AireCanvas = class AireCanvas extends LitElement {
     }
+    get graph() {
+        return this._graph;
+    }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        const { mx } = this;
-        /* eslint-disable */
-        const graph = new mx.mxGraph(this.renderRoot.firstElementChild);
-        // Enables rubberband selection
-        new mx.mxRubberband(graph);
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        const parent = graph.getDefaultParent();
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try {
-            const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-            const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-            graph.insertEdge(parent, null, '', v1, v2);
-        }
-        finally {
-            // Updates the display
-            graph.getModel().endUpdate();
-        }
+        this._graph = new mx.mxGraph(this.renderRoot.firstElementChild);
     }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        if (name === 'base-path' && value) {
-            this.mx = factory({
-                mxBasePath: value,
-            });
-        }
-    }
 };
@@ -51,0 +25,0 @@ __decorate([

.rollup.cache/home/josiah/dev/src/github.com/aire-ux/aire-components/aire-ux/controls/aire-designer-component/dist/src/AireDesigner.d.ts

 import { LitElement } from 'lit-element';
 export declare class AireDesigner extends LitElement {
     static get styles(): import("lit-element").CSSResult;
-    protected render(): import("lit-element").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

.rollup.cache/home/josiah/dev/src/github.com/aire-ux/aire-components/aire-ux/controls/aire-designer-component/dist/src/mxgraph.d.ts

@@ -1,11 +0,12 @@
-import '@aire-ux/mxgraph';
-export declare type mxConfiguration = {
-    mxLoadResources: boolean;
-    mxForceIncludes: boolean;
-    mxLoadStylesheets: boolean;
-    mxResourceExtension: string;
-    mxProductionMode: boolean;
-    mxBasePath: string;
-};
-declare const factory: (cfg: Partial<mxConfiguration>) => any;
-export default factory;
+import { mxGraphExportObject, mxGraphOptions } from '@aire-ux/mxgraph';
+import GraphConfiguration from '@aire-designer/transfer/configuration/GraphConfiguration';
+export declare type aireCanvasOptions = Partial<mxGraphOptions>;
+declare global {
+    interface Window {
+        mx: mxGraphExportObject;
+    }
+}
+export declare class MxGraphManager {
+    readonly configuration: GraphConfiguration;
+    constructor(configuration: GraphConfiguration);
+}

.rollup.cache/home/josiah/dev/src/github.com/aire-ux/aire-components/aire-ux/controls/aire-designer-component/dist/src/mxgraph.js

@@ -1,15 +0,30 @@
-import '@aire-ux/mxgraph';
+import { __decorate, __param } from "tslib";
+import { Receive, Remotable } from '@aire-ux/aire-condensation';
+import GraphConfiguration from '@aire-designer/transfer/configuration/GraphConfiguration';
 /* eslint-disable */
-const factory = (cfg) => 
-// @ts-ignore
-mxgraph({
-    mxLoadResources: cfg.mxLoadResources || false,
-    mxForceIncludes: cfg.mxForceIncludes || false,
-    mxLoadStylesheets: cfg.mxLoadStylesheets || true,
-    mxResourceExtension: cfg.mxResourceExtension || '.txt',
-    mxProductionMode: cfg.mxProductionMode || true,
-    mxBasePath: cfg.mxBasePath,
-});
+function construct(cfg) {
+    // @ts-ignore
+    return mxgraph({
+        mxLoadResources: cfg.loadResources || true,
+        mxForceIncludes: cfg.forceIncludes || false,
+        mxLoadStylesheets: cfg.loadStylesheets || true,
+        mxResourceExtension: cfg.resourceExtension || '.txt',
+        mxProductionMode: cfg.productionMode || true,
+        mxBasePath: cfg.basePath,
+    });
+}
 /* eslint-enable */
-export default factory;
+let MxGraphManager = class MxGraphManager {
+    constructor(configuration) {
+        this.configuration = configuration;
+        if (!window.mx) {
+            window.mx = construct(configuration);
+        }
+    }
+};
+MxGraphManager = __decorate([
+    Remotable,
+    __param(0, Receive(GraphConfiguration))
+], MxGraphManager);
+export { MxGraphManager };
 //# sourceMappingURL=mxgraph.js.map

dist/src/AireCanvas.d.ts

@@ -0,22 +1,12 @@
+import * as mx from '@aire-ux/mxgraph';
 import { LitElement, PropertyValues } from 'lit-element';
-/**
- * the html contents of this canvas
- */
-export declare const HtmlContents: import("lit-element").TemplateResult<1>;
+export declare const HtmlContents: import("lit-html").TemplateResult<1>;
 export declare class AireCanvas extends LitElement {
-    private mx;
+    private _graph;
     static get styles(): import("lit-element").CSSResult;
-    /**
-     * the base path to use
-     * @private
-     */
     private basePath;
-    /**
-     * the client source location to use.  Useful for debugging
-     * @private
-     */
     private clientSource;
-    render(): import("lit-element").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    get graph(): mx.mxGraph;
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
 }

dist/src/AireCanvas.js

 import { __decorate } from "tslib";
+import * as mx from '@aire-ux/mxgraph';
 import { css, customElement, html, LitElement, property, } from 'lit-element';
-import factory from './mxgraph';
-/**
- * the html contents of this canvas
- */
 export const HtmlContents = html ` <div class="aire-canvas-container"></div> `;
@@ -19,32 +16,9 @@ let AireCanvas = class AireCanvas extends LitElement {
     }
+    get graph() {
+        return this._graph;
+    }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        const { mx } = this;
-        /* eslint-disable */
-        const graph = new mx.mxGraph(this.renderRoot.firstElementChild);
-        // Enables rubberband selection
-        new mx.mxRubberband(graph);
-        // Gets the default parent for inserting new cells. This
-        // is normally the first child of the root (ie. layer 0).
-        const parent = graph.getDefaultParent();
-        // Adds cells to the model in a single step
-        graph.getModel().beginUpdate();
-        try {
-            const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-            const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-            graph.insertEdge(parent, null, '', v1, v2);
-        }
-        finally {
-            // Updates the display
-            graph.getModel().endUpdate();
-        }
+        this._graph = new mx.mxGraph(this.renderRoot.firstElementChild);
     }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        if (name === 'base-path' && value) {
-            this.mx = factory({
-                mxBasePath: value,
-            });
-        }
-    }
 };
@@ -51,0 +25,0 @@ __decorate([

dist/src/AireDesigner.d.ts

 import { LitElement } from 'lit-element';
 export declare class AireDesigner extends LitElement {
     static get styles(): import("lit-element").CSSResult;
-    protected render(): import("lit-element").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }

dist/src/index.d.ts

@@ -0,2 +1,3 @@
+import "./manager/AireCanvasManager";
 export { AireDesigner } from './AireDesigner.js';
 export { AireCanvas } from './AireCanvas.js';

dist/src/index.js

@@ -0,3 +1,13 @@
+var _a;
+import "./manager/AireCanvasManager";
+import { AireCanvasManager } from "./manager/AireCanvasManager";
+import { Condensation } from "../node_modules/@aire-ux/aire-condensation/dist/condensation";
 export { AireDesigner } from './AireDesigner.js';
 export { AireCanvas } from './AireCanvas.js';
+if (!window.context) {
+    window.GlobalContext = Condensation.newContext();
+}
+if (!window.GlobalAireCanvasManager) {
+    window.GlobalAireCanvasManager = (_a = window.GlobalContext) === null || _a === void 0 ? void 0 : _a.create(AireCanvasManager);
+}
 //# sourceMappingURL=index.js.map

dist/src/mxgraph.d.ts

@@ -1,11 +0,12 @@
-import '@aire-ux/mxgraph';
-export declare type mxConfiguration = {
-    mxLoadResources: boolean;
-    mxForceIncludes: boolean;
-    mxLoadStylesheets: boolean;
-    mxResourceExtension: string;
-    mxProductionMode: boolean;
-    mxBasePath: string;
-};
-declare const factory: (cfg: Partial<mxConfiguration>) => any;
-export default factory;
+import { mxGraphExportObject, mxGraphOptions } from '@aire-ux/mxgraph';
+import GraphConfiguration from "./transfer/configuration/GraphConfiguration";
+export declare type aireCanvasOptions = Partial<mxGraphOptions>;
+declare global {
+    interface Window {
+        mx: mxGraphExportObject;
+    }
+}
+export declare class MxGraphManager {
+    readonly configuration: GraphConfiguration;
+    constructor(configuration: GraphConfiguration);
+}

dist/src/mxgraph.js

@@ -1,15 +0,30 @@
-import '@aire-ux/mxgraph';
+import { __decorate, __param } from "tslib";
+import { Receive, Remotable } from '@aire-ux/aire-condensation';
+import GraphConfiguration from "./transfer/configuration/GraphConfiguration";
 /* eslint-disable */
-const factory = (cfg) => 
-// @ts-ignore
-mxgraph({
-    mxLoadResources: cfg.mxLoadResources || false,
-    mxForceIncludes: cfg.mxForceIncludes || false,
-    mxLoadStylesheets: cfg.mxLoadStylesheets || true,
-    mxResourceExtension: cfg.mxResourceExtension || '.txt',
-    mxProductionMode: cfg.mxProductionMode || true,
-    mxBasePath: cfg.mxBasePath,
-});
+function construct(cfg) {
+    // @ts-ignore
+    return mxgraph({
+        mxLoadResources: cfg.loadResources || true,
+        mxForceIncludes: cfg.forceIncludes || false,
+        mxLoadStylesheets: cfg.loadStylesheets || true,
+        mxResourceExtension: cfg.resourceExtension || '.txt',
+        mxProductionMode: cfg.productionMode || true,
+        mxBasePath: cfg.basePath,
+    });
+}
 /* eslint-enable */
-export default factory;
+let MxGraphManager = class MxGraphManager {
+    constructor(configuration) {
+        this.configuration = configuration;
+        if (!window.mx) {
+            window.mx = construct(configuration);
+        }
+    }
+};
+MxGraphManager = __decorate([
+    Remotable,
+    __param(0, Receive(GraphConfiguration))
+], MxGraphManager);
+export { MxGraphManager };
 //# sourceMappingURL=mxgraph.js.map

package.json

 {
   "name": "@aire-ux/aire-designer",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Webcomponent aire-designer following open-wc recommendations",
@@ -14,22 +14,22 @@ "author": "Aire-UX",
     "clean": "rimraf dist",
-    "start": "concurrently --kill-others --names build,web-dev-server \"tsc --watch --preserveWatchOutput\" \"web-dev-server --node-resolve --open --watch\" --config web-dev-server.config.mjs",
-    "build": "tsc",
+    "start": "concurrently --kill-others --names build,web-dev-server \"ttsc --watch --preserveWatchOutput\" \"web-dev-server --node-resolve --open --watch\" --config web-dev-server.config.mjs",
+    "build": "ttsc",
     "bundle": "npx rollup -c",
-    "build:watch": "tsc && concurrently -k -r  \"gulp themes:build:watch\" \"tsc --watch --preserveWatchOutput\" \"wtr --watch\" ",
-    "prepublish": "tsc && gulp build:themes",
+    "build:watch": "ttsc && concurrently -k -r  \"gulp themes:build:watch\" \"ttsc --watch --preserveWatchOutput\" \"wtr --watch\" ",
+    "prepublish": "ttsc && gulp build:themes",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
-    "storybook": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
-    "storybook:build": "tsc && build-storybook"
+    "test": "ttsc && wtr --coverage",
+    "test:watch": "ttsc && concurrently -k -r \"ttsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "ttsc && concurrently -k -r \"ttsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "ttsc && build-storybook"
   },
   "dependencies": {
-    "@aire-ux/mxgraph": "^4.2.5",
+    "@aire-ux/aire-condensation": "^0.0.4",
+    "@aire-ux/mxgraph": "^4.2.6",
     "lit-element": "^3.0.0",
-    "lit-html": "^1.4.1"
+    "lit-html": "^2.0.0"
   },
   "devDependencies": {
     "@aire-ux/aire-theme-manager": "^0.0.21",
-    "@aire-ux/typed-mxgraph": "^1.0.4",
     "@open-wc/building-rollup": "^1.10.0",
@@ -40,2 +40,3 @@ "@open-wc/eslint-config": "^4.3.0",
     "@rollup/plugin-typescript": "^8.3.0",
+    "@types/mocha": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
@@ -47,2 +48,3 @@ "@typescript-eslint/parser": "^4.28.0",
     "@web/test-runner": "^0.12.20",
+    "@zerollup/ts-transform-paths": "^1.7.18",
     "autoprefixer": "^10.3.1",
@@ -81,2 +83,3 @@ "bootstrap": "^5.0.2",
     "tslib": "^2.3.0",
+    "ttypescript": "^1.5.13",
     "typescript": "^4.3.4"
@@ -98,2 +101,3 @@ },
       ],
+      "new-cap": "off",
       "import/no-unresolved": "off",
@@ -100,0 +104,0 @@ "import/extensions": [

src/AireCanvas.ts

@@ -0,1 +1,2 @@
+import * as mx from '@aire-ux/mxgraph';
 import {
@@ -9,7 +10,3 @@ css,
 } from 'lit-element';
-import factory from './mxgraph';
 
-/**
- * the html contents of this canvas
- */
 export const HtmlContents = html` <div class="aire-canvas-container"></div> `;
@@ -19,3 +16,3 @@
 export class AireCanvas extends LitElement {
-  private mx: any;
+  private _graph: mx.mxGraph;
 
@@ -30,6 +27,2 @@ static get styles() {
 
-  /**
-   * the base path to use
-   * @private
-   */
   @property({
@@ -40,6 +33,2 @@ attribute: 'base-path',
 
-  /**
-   * the client source location to use.  Useful for debugging
-   * @private
-   */
   @property({
@@ -54,40 +43,12 @@ attribute: 'client-source',
 
+  public get graph(): mx.mxGraph {
+    return this._graph;
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
-    const { mx } = this;
-    /* eslint-disable */
-    const graph = new mx.mxGraph(this.renderRoot.firstElementChild);
-
-    // Enables rubberband selection
-    new mx.mxRubberband(graph);
-
-    // Gets the default parent for inserting new cells. This
-    // is normally the first child of the root (ie. layer 0).
-    const parent = graph.getDefaultParent();
-
-    // Adds cells to the model in a single step
-    graph.getModel().beginUpdate();
-    try {
-      const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
-      const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
-      graph.insertEdge(parent, null, '', v1, v2);
-    } finally {
-      // Updates the display
-      graph.getModel().endUpdate();
-    }
+    this._graph = new mx.mxGraph(
+      this.renderRoot.firstElementChild as HTMLElement
+    );
   }
-
-  attributeChangedCallback(
-    name: string,
-    _old: string | null,
-    value: string | null
-  ) {
-    super.attributeChangedCallback(name, _old, value);
-
-    if (name === 'base-path' && value) {
-      this.mx = factory({
-        mxBasePath: value,
-      });
-    }
-  }
 }

src/index.ts

@@ -1,2 +0,15 @@
-export { AireDesigner } from './AireDesigner.js';
-export { AireCanvas } from './AireCanvas.js';
+import '@aire-designer/manager/AireCanvasManager';
+import {AireCanvasManager} from "@aire-designer/manager/AireCanvasManager";
+import {Condensation} from "@condensation/condensation";
+
+export {AireDesigner} from './AireDesigner.js';
+export {AireCanvas} from './AireCanvas.js';
+
+if (!window.context) {
+  window.GlobalContext = Condensation.newContext();
+}
+
+if (!window.GlobalAireCanvasManager) {
+  window.GlobalAireCanvasManager = window.GlobalContext?.create(AireCanvasManager);
+}
+

src/mxgraph.ts

@@ -1,25 +0,36 @@
-import '@aire-ux/mxgraph';
+import { mxGraphExportObject, mxGraphOptions } from '@aire-ux/mxgraph';
+import { Receive, Remotable } from '@aire-ux/aire-condensation';
+import GraphConfiguration from '@aire-designer/transfer/configuration/GraphConfiguration';
 
-export type mxConfiguration = {
-  mxLoadResources: boolean;
-  mxForceIncludes: boolean;
-  mxLoadStylesheets: boolean;
-  mxResourceExtension: string;
-  mxProductionMode: boolean;
-  mxBasePath: string;
-};
+export type aireCanvasOptions = Partial<mxGraphOptions>;
 
+declare global {
+  interface Window {
+    mx: mxGraphExportObject;
+  }
+}
+
 /* eslint-disable */
-const factory = (cfg: Partial<mxConfiguration>) =>
-// @ts-ignore
-  mxgraph({
-    mxLoadResources: cfg.mxLoadResources || false,
-    mxForceIncludes: cfg.mxForceIncludes || false,
-    mxLoadStylesheets: cfg.mxLoadStylesheets || true,
-    mxResourceExtension: cfg.mxResourceExtension || '.txt',
-    mxProductionMode: cfg.mxProductionMode || true,
-    mxBasePath: cfg.mxBasePath,
+function construct(cfg: GraphConfiguration) {
+  // @ts-ignore
+  return mxgraph({
+    mxLoadResources: cfg.loadResources || true,
+    mxForceIncludes: cfg.forceIncludes || false,
+    mxLoadStylesheets: cfg.loadStylesheets || true,
+    mxResourceExtension: cfg.resourceExtension || '.txt',
+    mxProductionMode: cfg.productionMode || true,
+    mxBasePath: cfg.basePath,
   });
+}
 /* eslint-enable */
 
-export default factory;
+@Remotable
+export class MxGraphManager {
+  constructor(
+    @Receive(GraphConfiguration) readonly configuration: GraphConfiguration
+  ) {
+    if (!window.mx) {
+      window.mx = construct(configuration);
+    }
+  }
+}

tsconfig.json

 {
   "compilerOptions": {
+    "baseUrl": "./",
     "target": "es2018",
@@ -21,9 +22,21 @@ "module": "esnext",
     "typeRoots": [
-      "node_modules/@types"
+      "typings",
+      "node_modules/@types",
+      "node_modules/@aire-ux/typed-mxgraph"
     ],
-
+    "paths": {
+      "@aire-designer/*": ["src/*"],
+      "@condensation/*": ["node_modules/@aire-ux/aire-condensation/dist/*"]
+    },
+    "plugins": [
+      {
+        "transform": "@zerollup/ts-transform-paths",
+        "exclude": ["*"],
+        "include": ["src/**/*.ts", "test/**/*.ts"]
+      }
+    ]
   },
   "include": [
     "src/**/*.ts",
-    "node_modules/@aire-ux/typed-mxgraph/**/*.d.ts"
+    "test/**/*.ts"
   ],
@@ -30,0 +43,0 @@ "exclude": ["node_modules"]

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

115

increased by7.48%

Worsened metrics

Total package byte prevSize

3109852

decreased by-60.57%

Dependency count

4

increased by33.33%

Dev dependency count

49

increased by4.26%

Lines of code

1793

decreased by-69.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@aire-ux/aire-condensation@^0.0.4

• + Added@aire-ux/aire-condensation@0.0.4(transitive)

• + Addedreflect-metadata@0.1.14(transitive)

• - Removedlit-html@1.4.1(transitive)

• Updated@aire-ux/mxgraph@^4.2.6

• Updatedlit-html@^2.0.0