@hpcc-js/common - npm Package Compare versions

Comparing version 0.0.43 to 0.0.44

lib-es6/CanvasWidget.d.ts

@@ -1,2 +0,2 @@
-import { Widget } from "./Widget";
+import { d3SelectionType, Widget } from "./Widget";
 export declare class CanvasWidget extends Widget {
@@ -6,5 +6,5 @@ protected _tag: any;
     resize(size: any): this;
-    target(): any;
-    target(_: any): this;
-    exit(domeNode?: any, element?: any): void;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
+    exit(domeNode: HTMLElement, element: d3SelectionType): void;
 }

lib-es6/CanvasWidget.js

@@ -13,3 +13,3 @@ import * as tslib_1 from "tslib";
         var retVal = _super.prototype.resize.call(this, size);
-        this._parentElement
+        this._placeholderElement
             .style("width", this._size.width + "px")
@@ -22,32 +22,22 @@ .style("height", this._size.height + "px");
     CanvasWidget.prototype.target = function (_) {
-        if (!arguments.length)
-            return this._target;
-        if (this._target && _) {
-            throw new Error("Target can only be assigned once.");
-        }
-        this._target = _;
-        //  Target is a DOM Node ID ---
-        if (typeof (this._target) === "string") {
-            this._target = document.getElementById(this._target);
-        }
-        if (this._target) {
-            this._parentElement = d3Select(this._target);
-            if (!this._size.width && !this._size.height) {
-                var width = parseFloat(this._parentElement.style("width"));
-                var height = parseFloat(this._parentElement.style("height"));
-                this.size({
-                    width: width,
-                    height: height
-                });
-                this.resize(this._size);
+        var retVal = _super.prototype.target.apply(this, arguments);
+        if (arguments.length) {
+            if (this._target) {
+                this._placeholderElement = d3Select(this._target);
+                if (!this._size.width && !this._size.height) {
+                    var width = parseFloat(this._placeholderElement.style("width"));
+                    var height = parseFloat(this._placeholderElement.style("height"));
+                    this.size({
+                        width: width,
+                        height: height
+                    });
+                    this.resize(this._size);
+                }
             }
         }
-        else {
-            this.exit();
-        }
-        return this;
+        return retVal;
     };
     CanvasWidget.prototype.exit = function (domeNode, element) {
-        if (this._parentElement) {
-            this._parentElement.remove();
+        if (this._placeholderElement) {
+            this._placeholderElement.remove();
         }
@@ -54,0 +44,0 @@ _super.prototype.exit.call(this, domeNode, element);

lib-es6/Class.js

 function applyMixins(derivedCtor, baseCtors) {
     baseCtors.forEach(function (baseCtor) {
         Object.getOwnPropertyNames(baseCtor).forEach(function (name) {
-            var descriptor = Object.getOwnPropertyDescriptor(baseCtor, name);
-            Object.defineProperty(derivedCtor, name, descriptor);
-            // derivedCtor[name] = baseCtor[name];
+            if (name !== "constructor") {
+                var descriptor = Object.getOwnPropertyDescriptor(baseCtor, name);
+                Object.defineProperty(derivedCtor, name, descriptor);
+            }
         });
@@ -8,0 +9,0 @@ });

lib-es6/HTMLWidget.d.ts

@@ -22,6 +22,6 @@ import { Widget } from "./Widget";
     resize(size?: any): this;
-    target(): any;
-    target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     postUpdate(domNode: any, element: any): void;
     exit(domNode?: any, element?: any): void;
 }

lib-es6/HTMLWidget.js

@@ -83,3 +83,3 @@ import * as tslib_1 from "tslib";
         var retVal = _super.prototype.resize.call(this, size);
-        this._parentElement
+        this._placeholderElement
             .style("width", this._size.width + "px")
@@ -90,48 +90,38 @@ .style("height", this._size.height + "px");
     HTMLWidget.prototype.target = function (_) {
-        if (!arguments.length)
-            return this._target;
-        if (this._target && _) {
-            throw new Error("Target can only be assigned once.");
-        }
-        this._target = _;
-        //  Target is a DOM Node ID ---
-        if (typeof (this._target) === "string") {
-            this._target = document.getElementById(this._target);
-        }
-        if (this._target instanceof SVGElement) {
-            //  Target is a SVG Node, so create an item in the Overlay and force it "over" the overlay element (cough)  ---
-            var overlay = this.locateOverlayNode();
-            this._parentElement = overlay.append("div")
-                .style("position", "absolute")
-                .style("top", 0)
-                .style("left", 0)
-                .style("overflow", "hidden");
-            this._overlayElement = d3Select(this._target);
-            var context_1 = this;
-            this._prevPos = null;
-            this.observer = new MutationObserver(function (_mutation) {
-                context_1.syncOverlay();
-            });
-            var domNode = this._overlayElement.node();
-            while (domNode) {
-                this.observer.observe(domNode, { attributes: true });
-                domNode = domNode.parentNode;
-            }
-        }
-        else if (this._target) {
-            this._parentElement = d3Select(this._target);
-            if (!this._size.width && !this._size.height) {
-                var width = parseFloat(this._parentElement.style("width"));
-                var height = parseFloat(this._parentElement.style("height"));
-                this.size({
-                    width: width,
-                    height: height
+        var _this = this;
+        var retVal = _super.prototype.target.apply(this, arguments);
+        if (arguments.length) {
+            if (this._target instanceof SVGElement) {
+                //  Target is a SVG Node, so create an item in the Overlay and force it "over" the overlay element (cough)  ---
+                var overlay = this.locateOverlayNode();
+                this._placeholderElement = overlay.append("div")
+                    .style("position", "absolute")
+                    .style("top", 0)
+                    .style("left", 0)
+                    .style("overflow", "hidden");
+                this._overlayElement = d3Select(this._target);
+                this._prevPos = null;
+                this.observer = new MutationObserver(function (_mutation) {
+                    _this.syncOverlay();
                 });
+                var domNode = this._overlayElement.node();
+                while (domNode) {
+                    this.observer.observe(domNode, { attributes: true });
+                    domNode = domNode.parentNode;
+                }
             }
-            this._parentElement = d3Select(this._target).append("div");
+            else if (this._target) {
+                this._placeholderElement = d3Select(this._target);
+                if (!this._size.width && !this._size.height) {
+                    var width = parseFloat(this._placeholderElement.style("width"));
+                    var height = parseFloat(this._placeholderElement.style("height"));
+                    this.size({
+                        width: width,
+                        height: height
+                    });
+                }
+                this._placeholderElement = d3Select(this._target).append("div");
+            }
         }
-        else {
-            this.exit();
-        }
-        return this;
+        return retVal;
     };
@@ -160,4 +150,4 @@ HTMLWidget.prototype.postUpdate = function (domNode, element) {
         this._prevPos = null;
-        if (this._parentElement) {
-            this._parentElement.remove();
+        if (this._placeholderElement) {
+            this._placeholderElement.remove();
         }
@@ -164,0 +154,0 @@ _super.prototype.exit.call(this, domNode, element);

lib-es6/ResizeSurface.js

@@ -122,3 +122,3 @@ import * as tslib_1 from "tslib";
     ResizeSurface.prototype.updateHandles = function (_domNode, _element) {
-        var sizeHandles = this._parentElement.selectAll("rect").data(this.handles, function (d) { return d.loc; });
+        var sizeHandles = this._placeholderElement.selectAll("rect").data(this.handles, function (d) { return d.loc; });
         var sizeHandlesEnter = sizeHandles.enter().append("rect")
@@ -125,0 +125,0 @@ .attr("class", function (d) { return "resize" + d.loc; })

lib-es6/SVGWidget.d.ts

@@ -18,4 +18,4 @@ import { ISize, Widget } from "./Widget";
     }): any;
-    target(): any;
-    target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     enter(domNode: any, element: any): void;
@@ -22,0 +22,0 @@ update(domNode: any, element: any): void;

lib-es6/SVGWidget.js

@@ -137,3 +137,3 @@ import * as tslib_1 from "tslib";
         }
-        this._parentElement
+        this._placeholderElement
             .attr("width", this._size.width)
@@ -144,38 +144,28 @@ .attr("height", this._size.height);
     SVGWidget.prototype.target = function (_) {
-        if (!arguments.length)
-            return this._target;
-        if (this._target && _ && (this._target.__data__.id !== _.__data__.id)) {
-            throw new Error("Target can only be assigned once.");
-        }
-        this._target = _;
-        //  Target is a DOM Node ID ---
-        if (typeof (this._target) === "string") {
-            this._target = document.getElementById(this._target);
-        }
-        if (this._target instanceof SVGElement) {
-            this._parentElement = d3Select(this._target);
-            this._parentWidget = this._parentElement.datum();
-            if (!this._parentWidget || this._parentWidget._id === this._id) {
-                this._parentWidget = this.locateParentWidget(this._target.parentNode);
+        var retVal = _super.prototype.target.apply(this, arguments);
+        if (arguments.length) {
+            if (this._target instanceof SVGElement) {
+                this._placeholderElement = d3Select(this._target);
+                this._parentWidget = this._placeholderElement.datum();
+                if (!this._parentWidget || this._parentWidget._id === this._id) {
+                    this._parentWidget = this.locateParentWidget(this._target.parentNode);
+                }
+                this._parentOverlay = this.locateOverlayNode();
             }
-            this._parentOverlay = this.locateOverlayNode();
+            else if (this._target) {
+                //  Target is a DOM Node, so create a SVG Element  ---
+                this._parentRelativeDiv = d3Select(this._target).append("div")
+                    .style("position", "relative");
+                this._placeholderElement = this._parentRelativeDiv.append("svg")
+                    .style("position", "absolute")
+                    .style("top", 0)
+                    .style("left", 0);
+                this._parentOverlay = this._parentRelativeDiv.append("div")
+                    .style("position", "absolute")
+                    .style("top", 0)
+                    .style("left", 0);
+                this.resize(this._size);
+            }
         }
-        else if (this._target) {
-            //  Target is a DOM Node, so create a SVG Element  ---
-            this._parentRelativeDiv = d3Select(this._target).append("div")
-                .style("position", "relative");
-            this._parentElement = this._parentRelativeDiv.append("svg")
-                .style("position", "absolute")
-                .style("top", 0)
-                .style("left", 0);
-            this._parentOverlay = this._parentRelativeDiv.append("div")
-                .style("position", "absolute")
-                .style("top", 0)
-                .style("left", 0);
-            this.resize(this._size);
-        }
-        else {
-            this.exit();
-        }
-        return this;
+        return retVal;
     };
@@ -200,3 +190,3 @@ SVGWidget.prototype.enter = function (domNode, element) {
             this._parentOverlay.remove();
-            this._parentElement.remove();
+            this._placeholderElement.remove();
             this._parentRelativeDiv.remove();
@@ -203,0 +193,0 @@ }

lib-es6/Widget.d.ts

@@ -31,4 +31,4 @@ import { Selection as d3Selection } from "d3-selection";
     protected _display: any;
-    protected _target: any;
-    protected _parentElement: any;
+    protected _target: null | HTMLElement | SVGElement;
+    protected _placeholderElement: any;
     protected _parentWidget: any;
@@ -69,2 +69,5 @@ protected _element: any;
     display(_: any): this;
+    private _appData;
+    appData(key: string): any;
+    appData(key: string, value: any): this;
     calcSnap(snapSize: any): ({
@@ -88,4 +91,4 @@ x: number;
     node(): any;
-    abstract target(): any;
-    abstract target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     private _prevNow;
@@ -99,3 +102,3 @@ render(callback?: (w: Widget) => void): this;
     postUpdate(_domNode: HTMLElement, _element: d3SelectionType): void;
-    exit(_domNode: HTMLElement, _element: d3SelectionType): void;
+    exit(_domNode?: HTMLElement, _element?: d3SelectionType): void;
     fields(): Field[];
@@ -102,0 +105,0 @@ fields(_: Field[]): this;

lib-es6/Widget.js

@@ -14,2 +14,3 @@ import * as tslib_1 from "tslib";
         _this._db = new Grid();
+        _this._appData = new Object({});
         //  Render  ---
@@ -28,3 +29,3 @@ _this._prevNow = 0;
         _this._target = null;
-        _this._parentElement = null;
+        _this._placeholderElement = null;
         _this._parentWidget = null;
@@ -223,4 +224,4 @@ _this._element = d3Select(null);
         this._visible = _;
-        if (this._parentElement) {
-            this._parentElement
+        if (this._placeholderElement) {
+            this._placeholderElement
                 .style("visibility", this._visible ? null : "hidden")
@@ -240,2 +241,8 @@ .style("opacity", this._visible ? null : 0);
     };
+    Widget.prototype.appData = function (key, value) {
+        if (arguments.length < 2)
+            return this._appData[key];
+        this._appData[key] = value;
+        return this;
+    };
     Widget.prototype.calcSnap = function (snapSize) {
@@ -347,3 +354,3 @@ function snap(x, gridSize) {
                 var yScale = newPos.height / this._size.height;
-                this._parentElement
+                this._placeholderElement
                     .style("left", newPos.x - (newPos.width / xScale) / 2 + "px")
@@ -354,3 +361,3 @@ .style("top", newPos.y - (newPos.height / yScale) / 2 + "px")
                 var transform = "scale(" + xScale + "," + yScale + ")";
-                this._parentElement
+                this._placeholderElement
                     .style("transform", transform)
@@ -381,2 +388,20 @@ .style("-moz-transform", transform)
     };
+    Widget.prototype.target = function (_) {
+        if (!arguments.length)
+            return this._target;
+        if (this._target && _) {
+            throw new Error("Target can only be assigned once.");
+        }
+        if (_ === null) {
+            this._target = null;
+            this.exit();
+        }
+        else if (typeof _ === "string") {
+            this._target = document.getElementById(_);
+        }
+        else if (_ instanceof HTMLElement || _ instanceof SVGElement) {
+            this._target = _;
+        }
+        return this;
+    };
     Widget.prototype.render = function (callback) {
@@ -391,10 +416,10 @@ if (window.__hpcc_debug) {
         callback = callback || function () { };
-        if (!this._parentElement || !this.visible()) {
+        if (!this._placeholderElement || !this.visible()) {
             callback(this);
             return this;
         }
-        if (this._parentElement) {
+        if (this._placeholderElement) {
             if (!this._tag)
                 throw new Error("No DOM tag specified");
-            var elements = this._parentElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
+            var elements = this._placeholderElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
             elements.enter().append(this._tag)
@@ -401,0 +426,0 @@ .classed(this._class, true)

lib-es6/WidgetArray.d.ts

@@ -1,9 +0,6 @@
-import { PropertyExt } from "./PropertyExt";
+import { PropertyExt, publish } from "./PropertyExt";
 import { Widget } from "./Widget";
 export declare class WidgetArray extends PropertyExt {
+    content: publish<this, Widget[]>;
     constructor();
-    content: {
-        (): Widget[];
-        (_): WidgetArray;
-    };
 }

lib-es6/WidgetArray.js

 import * as tslib_1 from "tslib";
-import { PropertyExt } from "./PropertyExt";
+import { PropertyExt, publish } from "./PropertyExt";
 var WidgetArray = /** @class */ (function (_super) {
@@ -8,2 +8,5 @@ tslib_1.__extends(WidgetArray, _super);
     }
+    tslib_1.__decorate([
+        publish(null, "widgetArray", "Widget Array")
+    ], WidgetArray.prototype, "content", void 0);
     return WidgetArray;
@@ -13,3 +16,2 @@ }(PropertyExt));
 WidgetArray.prototype._class += " common_WidgetArray";
-WidgetArray.prototype.publish("content", [], "widgetArray", "Widget Array");
 //# sourceMappingURL=WidgetArray.js.map

lib/CanvasWidget.d.ts

@@ -1,2 +0,2 @@
-import { Widget } from "./Widget";
+import { d3SelectionType, Widget } from "./Widget";
 export declare class CanvasWidget extends Widget {
@@ -6,5 +6,5 @@ protected _tag: any;
     resize(size: any): this;
-    target(): any;
-    target(_: any): this;
-    exit(domeNode?: any, element?: any): void;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
+    exit(domeNode: HTMLElement, element: d3SelectionType): void;
 }

lib/CanvasWidget.js

@@ -24,3 +24,3 @@ (function (factory) {
             var retVal = _super.prototype.resize.call(this, size);
-            this._parentElement
+            this._placeholderElement
                 .style("width", this._size.width + "px")
@@ -33,32 +33,22 @@ .style("height", this._size.height + "px");
         CanvasWidget.prototype.target = function (_) {
-            if (!arguments.length)
-                return this._target;
-            if (this._target && _) {
-                throw new Error("Target can only be assigned once.");
-            }
-            this._target = _;
-            //  Target is a DOM Node ID ---
-            if (typeof (this._target) === "string") {
-                this._target = document.getElementById(this._target);
-            }
-            if (this._target) {
-                this._parentElement = d3_selection_1.select(this._target);
-                if (!this._size.width && !this._size.height) {
-                    var width = parseFloat(this._parentElement.style("width"));
-                    var height = parseFloat(this._parentElement.style("height"));
-                    this.size({
-                        width: width,
-                        height: height
-                    });
-                    this.resize(this._size);
+            var retVal = _super.prototype.target.apply(this, arguments);
+            if (arguments.length) {
+                if (this._target) {
+                    this._placeholderElement = d3_selection_1.select(this._target);
+                    if (!this._size.width && !this._size.height) {
+                        var width = parseFloat(this._placeholderElement.style("width"));
+                        var height = parseFloat(this._placeholderElement.style("height"));
+                        this.size({
+                            width: width,
+                            height: height
+                        });
+                        this.resize(this._size);
+                    }
                 }
             }
-            else {
-                this.exit();
-            }
-            return this;
+            return retVal;
         };
         CanvasWidget.prototype.exit = function (domeNode, element) {
-            if (this._parentElement) {
-                this._parentElement.remove();
+            if (this._placeholderElement) {
+                this._placeholderElement.remove();
             }
@@ -65,0 +55,0 @@ _super.prototype.exit.call(this, domeNode, element);

lib/Class.js

@@ -15,5 +15,6 @@ (function (factory) {
             Object.getOwnPropertyNames(baseCtor).forEach(function (name) {
-                var descriptor = Object.getOwnPropertyDescriptor(baseCtor, name);
-                Object.defineProperty(derivedCtor, name, descriptor);
-                // derivedCtor[name] = baseCtor[name];
+                if (name !== "constructor") {
+                    var descriptor = Object.getOwnPropertyDescriptor(baseCtor, name);
+                    Object.defineProperty(derivedCtor, name, descriptor);
+                }
             });
@@ -20,0 +21,0 @@ });

lib/HTMLWidget.d.ts

@@ -22,6 +22,6 @@ import { Widget } from "./Widget";
     resize(size?: any): this;
-    target(): any;
-    target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     postUpdate(domNode: any, element: any): void;
     exit(domNode?: any, element?: any): void;
 }

lib/HTMLWidget.js

@@ -94,3 +94,3 @@ (function (factory) {
             var retVal = _super.prototype.resize.call(this, size);
-            this._parentElement
+            this._placeholderElement
                 .style("width", this._size.width + "px")
@@ -101,48 +101,38 @@ .style("height", this._size.height + "px");
         HTMLWidget.prototype.target = function (_) {
-            if (!arguments.length)
-                return this._target;
-            if (this._target && _) {
-                throw new Error("Target can only be assigned once.");
-            }
-            this._target = _;
-            //  Target is a DOM Node ID ---
-            if (typeof (this._target) === "string") {
-                this._target = document.getElementById(this._target);
-            }
-            if (this._target instanceof SVGElement) {
-                //  Target is a SVG Node, so create an item in the Overlay and force it "over" the overlay element (cough)  ---
-                var overlay = this.locateOverlayNode();
-                this._parentElement = overlay.append("div")
-                    .style("position", "absolute")
-                    .style("top", 0)
-                    .style("left", 0)
-                    .style("overflow", "hidden");
-                this._overlayElement = d3_selection_1.select(this._target);
-                var context_1 = this;
-                this._prevPos = null;
-                this.observer = new MutationObserver(function (_mutation) {
-                    context_1.syncOverlay();
-                });
-                var domNode = this._overlayElement.node();
-                while (domNode) {
-                    this.observer.observe(domNode, { attributes: true });
-                    domNode = domNode.parentNode;
-                }
-            }
-            else if (this._target) {
-                this._parentElement = d3_selection_1.select(this._target);
-                if (!this._size.width && !this._size.height) {
-                    var width = parseFloat(this._parentElement.style("width"));
-                    var height = parseFloat(this._parentElement.style("height"));
-                    this.size({
-                        width: width,
-                        height: height
+            var _this = this;
+            var retVal = _super.prototype.target.apply(this, arguments);
+            if (arguments.length) {
+                if (this._target instanceof SVGElement) {
+                    //  Target is a SVG Node, so create an item in the Overlay and force it "over" the overlay element (cough)  ---
+                    var overlay = this.locateOverlayNode();
+                    this._placeholderElement = overlay.append("div")
+                        .style("position", "absolute")
+                        .style("top", 0)
+                        .style("left", 0)
+                        .style("overflow", "hidden");
+                    this._overlayElement = d3_selection_1.select(this._target);
+                    this._prevPos = null;
+                    this.observer = new MutationObserver(function (_mutation) {
+                        _this.syncOverlay();
                     });
+                    var domNode = this._overlayElement.node();
+                    while (domNode) {
+                        this.observer.observe(domNode, { attributes: true });
+                        domNode = domNode.parentNode;
+                    }
                 }
-                this._parentElement = d3_selection_1.select(this._target).append("div");
+                else if (this._target) {
+                    this._placeholderElement = d3_selection_1.select(this._target);
+                    if (!this._size.width && !this._size.height) {
+                        var width = parseFloat(this._placeholderElement.style("width"));
+                        var height = parseFloat(this._placeholderElement.style("height"));
+                        this.size({
+                            width: width,
+                            height: height
+                        });
+                    }
+                    this._placeholderElement = d3_selection_1.select(this._target).append("div");
+                }
             }
-            else {
-                this.exit();
-            }
-            return this;
+            return retVal;
         };
@@ -171,4 +161,4 @@ HTMLWidget.prototype.postUpdate = function (domNode, element) {
             this._prevPos = null;
-            if (this._parentElement) {
-                this._parentElement.remove();
+            if (this._placeholderElement) {
+                this._placeholderElement.remove();
             }
@@ -175,0 +165,0 @@ _super.prototype.exit.call(this, domNode, element);

lib/ResizeSurface.js

@@ -133,3 +133,3 @@ (function (factory) {
         ResizeSurface.prototype.updateHandles = function (_domNode, _element) {
-            var sizeHandles = this._parentElement.selectAll("rect").data(this.handles, function (d) { return d.loc; });
+            var sizeHandles = this._placeholderElement.selectAll("rect").data(this.handles, function (d) { return d.loc; });
             var sizeHandlesEnter = sizeHandles.enter().append("rect")
@@ -136,0 +136,0 @@ .attr("class", function (d) { return "resize" + d.loc; })

lib/SVGWidget.d.ts

@@ -18,4 +18,4 @@ import { ISize, Widget } from "./Widget";
     }): any;
-    target(): any;
-    target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     enter(domNode: any, element: any): void;
@@ -22,0 +22,0 @@ update(domNode: any, element: any): void;

lib/SVGWidget.js

@@ -148,3 +148,3 @@ (function (factory) {
             }
-            this._parentElement
+            this._placeholderElement
                 .attr("width", this._size.width)
@@ -155,38 +155,28 @@ .attr("height", this._size.height);
         SVGWidget.prototype.target = function (_) {
-            if (!arguments.length)
-                return this._target;
-            if (this._target && _ && (this._target.__data__.id !== _.__data__.id)) {
-                throw new Error("Target can only be assigned once.");
-            }
-            this._target = _;
-            //  Target is a DOM Node ID ---
-            if (typeof (this._target) === "string") {
-                this._target = document.getElementById(this._target);
-            }
-            if (this._target instanceof SVGElement) {
-                this._parentElement = d3_selection_1.select(this._target);
-                this._parentWidget = this._parentElement.datum();
-                if (!this._parentWidget || this._parentWidget._id === this._id) {
-                    this._parentWidget = this.locateParentWidget(this._target.parentNode);
+            var retVal = _super.prototype.target.apply(this, arguments);
+            if (arguments.length) {
+                if (this._target instanceof SVGElement) {
+                    this._placeholderElement = d3_selection_1.select(this._target);
+                    this._parentWidget = this._placeholderElement.datum();
+                    if (!this._parentWidget || this._parentWidget._id === this._id) {
+                        this._parentWidget = this.locateParentWidget(this._target.parentNode);
+                    }
+                    this._parentOverlay = this.locateOverlayNode();
                 }
-                this._parentOverlay = this.locateOverlayNode();
+                else if (this._target) {
+                    //  Target is a DOM Node, so create a SVG Element  ---
+                    this._parentRelativeDiv = d3_selection_1.select(this._target).append("div")
+                        .style("position", "relative");
+                    this._placeholderElement = this._parentRelativeDiv.append("svg")
+                        .style("position", "absolute")
+                        .style("top", 0)
+                        .style("left", 0);
+                    this._parentOverlay = this._parentRelativeDiv.append("div")
+                        .style("position", "absolute")
+                        .style("top", 0)
+                        .style("left", 0);
+                    this.resize(this._size);
+                }
             }
-            else if (this._target) {
-                //  Target is a DOM Node, so create a SVG Element  ---
-                this._parentRelativeDiv = d3_selection_1.select(this._target).append("div")
-                    .style("position", "relative");
-                this._parentElement = this._parentRelativeDiv.append("svg")
-                    .style("position", "absolute")
-                    .style("top", 0)
-                    .style("left", 0);
-                this._parentOverlay = this._parentRelativeDiv.append("div")
-                    .style("position", "absolute")
-                    .style("top", 0)
-                    .style("left", 0);
-                this.resize(this._size);
-            }
-            else {
-                this.exit();
-            }
-            return this;
+            return retVal;
         };
@@ -211,3 +201,3 @@ SVGWidget.prototype.enter = function (domNode, element) {
                 this._parentOverlay.remove();
-                this._parentElement.remove();
+                this._placeholderElement.remove();
                 this._parentRelativeDiv.remove();
@@ -214,0 +204,0 @@ }

lib/Widget.d.ts

@@ -31,4 +31,4 @@ import { Selection as d3Selection } from "d3-selection";
     protected _display: any;
-    protected _target: any;
-    protected _parentElement: any;
+    protected _target: null | HTMLElement | SVGElement;
+    protected _placeholderElement: any;
     protected _parentWidget: any;
@@ -69,2 +69,5 @@ protected _element: any;
     display(_: any): this;
+    private _appData;
+    appData(key: string): any;
+    appData(key: string, value: any): this;
     calcSnap(snapSize: any): ({
@@ -88,4 +91,4 @@ x: number;
     node(): any;
-    abstract target(): any;
-    abstract target(_: any): this;
+    target(): null | HTMLElement | SVGElement;
+    target(_: null | string | HTMLElement | SVGElement): this;
     private _prevNow;
@@ -99,3 +102,3 @@ render(callback?: (w: Widget) => void): this;
     postUpdate(_domNode: HTMLElement, _element: d3SelectionType): void;
-    exit(_domNode: HTMLElement, _element: d3SelectionType): void;
+    exit(_domNode?: HTMLElement, _element?: d3SelectionType): void;
     fields(): Field[];
@@ -102,0 +105,0 @@ fields(_: Field[]): this;

lib/Widget.js

@@ -25,2 +25,3 @@ (function (factory) {
             _this._db = new Database_1.Grid();
+            _this._appData = new Object({});
             //  Render  ---
@@ -39,3 +40,3 @@ _this._prevNow = 0;
             _this._target = null;
-            _this._parentElement = null;
+            _this._placeholderElement = null;
             _this._parentWidget = null;
@@ -234,4 +235,4 @@ _this._element = d3_selection_1.select(null);
             this._visible = _;
-            if (this._parentElement) {
-                this._parentElement
+            if (this._placeholderElement) {
+                this._placeholderElement
                     .style("visibility", this._visible ? null : "hidden")
@@ -251,2 +252,8 @@ .style("opacity", this._visible ? null : 0);
         };
+        Widget.prototype.appData = function (key, value) {
+            if (arguments.length < 2)
+                return this._appData[key];
+            this._appData[key] = value;
+            return this;
+        };
         Widget.prototype.calcSnap = function (snapSize) {
@@ -358,3 +365,3 @@ function snap(x, gridSize) {
                     var yScale = newPos.height / this._size.height;
-                    this._parentElement
+                    this._placeholderElement
                         .style("left", newPos.x - (newPos.width / xScale) / 2 + "px")
@@ -365,3 +372,3 @@ .style("top", newPos.y - (newPos.height / yScale) / 2 + "px")
                     var transform = "scale(" + xScale + "," + yScale + ")";
-                    this._parentElement
+                    this._placeholderElement
                         .style("transform", transform)
@@ -392,2 +399,20 @@ .style("-moz-transform", transform)
         };
+        Widget.prototype.target = function (_) {
+            if (!arguments.length)
+                return this._target;
+            if (this._target && _) {
+                throw new Error("Target can only be assigned once.");
+            }
+            if (_ === null) {
+                this._target = null;
+                this.exit();
+            }
+            else if (typeof _ === "string") {
+                this._target = document.getElementById(_);
+            }
+            else if (_ instanceof HTMLElement || _ instanceof SVGElement) {
+                this._target = _;
+            }
+            return this;
+        };
         Widget.prototype.render = function (callback) {
@@ -402,10 +427,10 @@ if (window.__hpcc_debug) {
             callback = callback || function () { };
-            if (!this._parentElement || !this.visible()) {
+            if (!this._placeholderElement || !this.visible()) {
                 callback(this);
                 return this;
             }
-            if (this._parentElement) {
+            if (this._placeholderElement) {
                 if (!this._tag)
                     throw new Error("No DOM tag specified");
-                var elements = this._parentElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
+                var elements = this._placeholderElement.selectAll("#" + this._id).data([this], function (d) { return d._id; });
                 elements.enter().append(this._tag)
@@ -412,0 +437,0 @@ .classed(this._class, true)

lib/WidgetArray.d.ts

@@ -1,9 +0,6 @@
-import { PropertyExt } from "./PropertyExt";
+import { PropertyExt, publish } from "./PropertyExt";
 import { Widget } from "./Widget";
 export declare class WidgetArray extends PropertyExt {
+    content: publish<this, Widget[]>;
     constructor();
-    content: {
-        (): Widget[];
-        (_): WidgetArray;
-    };
 }

lib/WidgetArray.js

@@ -19,2 +19,5 @@ (function (factory) {
         }
+        tslib_1.__decorate([
+            PropertyExt_1.publish(null, "widgetArray", "Widget Array")
+        ], WidgetArray.prototype, "content", void 0);
         return WidgetArray;
@@ -24,4 +27,3 @@ }(PropertyExt_1.PropertyExt));
     WidgetArray.prototype._class += " common_WidgetArray";
-    WidgetArray.prototype.publish("content", [], "widgetArray", "Widget Array");
 });
 //# sourceMappingURL=WidgetArray.js.map

package.json

 {
   "name": "@hpcc-js/common",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "hpcc-js - Viz Common",
@@ -8,2 +8,3 @@ "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "unpkg": "dist/common.min.js",
   "files": [
@@ -18,6 +19,9 @@ "lib/*",
     "clean": "rimraf lib* && rimraf dist* && rimraf fonts",
-    "copy-resources": "cpx ../../node_modules/font-awesome/fonts/* ./font-awesome/fonts && cpx ../../node_modules/font-awesome/css/* ./font-awesome/css",
+    "copy-resources": "cpx \"../../node_modules/font-awesome/fonts/*\" \"./font-awesome/fonts\" && cpx \"../../node_modules/font-awesome/css/*\" \"./font-awesome/css\"",
     "build": "tsc",
     "build-es6": "tsc --module esnext --outDir ./lib-es6",
+    "watch-es6": "tsc -w --module esnext --outDir ./lib-es6",
     "bundle": "npm run copy-resources && node ./node_modules/@hpcc-js/bundle/lib/rollup",
+    "watch-bundle": "npm run copy-resources && node ./node_modules/@hpcc-js/bundle/lib/watch",
+    "watch": "concurrently --kill-others \"npm run watch-es6\" \"npm run watch-bundle\"",
     "docs": "typedoc --options tdoptions.json ."
@@ -43,3 +47,4 @@ },
   "devDependencies": {
-    "@hpcc-js/bundle": "^0.0.14",
+    "@hpcc-js/bundle": "^0.0.15",
+    "concurrently": "3.5.0",
     "cpx": "1.5.0",
@@ -46,0 +51,0 @@ "rimraf": "2.6.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

4435714

decreased by-4.39%

Dev dependency count

6

increased by20%

Lines of code

27204

decreased by-3.78%

No dependency changes