@leapfrog/interactive-canvas 0.1.0 → 0.1.1

package/dist/interactive-canvas.nomin.js

@@ -56891,177 +56891,215 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addImageObject = function (imageUrl) {
-            var _this = this;
-            var response$ = new rxjs_1.ReplaySubject(1);
-            //Don't let the image be more than half the canvas in size.
-            var maxSizeScale = 2;
-            var maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
-            var options = { crossOrigin: "anonymous" };
-            fabric_1.fabric.Image.fromURL(imageUrl, function (fabricImage) {
-                var id = _this.randomId();
-                var newScale = 1;
-                var curWidth = newScale * fabricImage.width;
-                if (curWidth > maxWidth) {
-                    newScale = maxWidth / curWidth;
-                }
-                fabricImage.set({
-                    id: id,
-                    scaleX: newScale,
-                    scaleY: newScale
+            return __awaiter(this, void 0, void 0, function () {
+                var maxSizeScale, maxWidth, options;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            maxSizeScale = 2;
+                            maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+                            options = { crossOrigin: "anonymous" };
+                            return [4 /*yield*/, new Promise(function (resolve) {
+                                    fabric_1.fabric.Image.fromURL(imageUrl, function (fabricImage) {
+                                        var id = _this.randomId();
+                                        var newScale = 1;
+                                        var curWidth = newScale * fabricImage.width;
+                                        if (curWidth > maxWidth) {
+                                            newScale = maxWidth / curWidth;
+                                        }
+                                        fabricImage.set({
+                                            id: id,
+                                            scaleX: newScale,
+                                            scaleY: newScale
+                                        });
+                                        _this.fabricCanvas.add(fabricImage);
+                                        var object = new image_1.Image(_this, fabricImage);
+                                        _this.trackNewObject(object);
+                                        _this.fabricCanvas.setActiveObject(fabricImage);
+                                        _this.syncObjectList();
+                                        resolve(object);
+                                    }, options);
+                                })];
+                        case 1: return [2 /*return*/, _a.sent()];
+                    }
                 });
-                _this.fabricCanvas.add(fabricImage);
-                var object = new image_1.Image(_this, fabricImage);
-                _this.trackNewObject(object);
-                _this.fabricCanvas.setActiveObject(fabricImage);
-                _this.syncObjectList();
-                response$.next(object);
-            }, options);
-            return response$;
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addTextObject = function () {
-            var profile = this.profile$.value;
-            var id = this.randomId();
-            var fontSizePx = profile.defaultFontSize;
-            var canvasWidthPx = this.getDimensions().widthPx;
-            var lowestTextPointPx = this.getLowestTextPoint();
-            var topPx = Math.min(lowestTextPointPx, this.getDimensions().heightPx - fontSizePx);
-            var textOptions = {
-                id: id,
-                top: topPx,
-                left: 5,
-                width: canvasWidthPx - 10,
-                fill: profile.defaultFontColor,
-                fontSize: fontSizePx,
-                fontFamily: profile.defaultFont,
-                textAlign: profile.defaultTextAlignment,
-                multiLine: true,
-                lineHeight: profile.defaultLineHeight,
-                charSpacing: profile.defaultCharacterSpacing
-            };
-            var fabricTextbox = new fabric_1.fabric.Textbox("Text goes here", textOptions);
-            this.fabricCanvas.add(fabricTextbox);
-            var object = new text_1.Text(this, fabricTextbox);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricTextbox);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var profile, id, fontSizePx, canvasWidthPx, lowestTextPointPx, topPx, textOptions, fabricTextbox, object;
+                return __generator(this, function (_a) {
+                    profile = this.profile$.value;
+                    id = this.randomId();
+                    fontSizePx = profile.defaultFontSize;
+                    canvasWidthPx = this.getDimensions().widthPx;
+                    lowestTextPointPx = this.getLowestTextPoint();
+                    topPx = Math.min(lowestTextPointPx, this.getDimensions().heightPx - fontSizePx);
+                    textOptions = {
+                        id: id,
+                        top: topPx,
+                        left: 5,
+                        width: canvasWidthPx - 10,
+                        fill: profile.defaultFontColor,
+                        fontSize: fontSizePx,
+                        fontFamily: profile.defaultFont,
+                        textAlign: profile.defaultTextAlignment,
+                        multiLine: true,
+                        lineHeight: profile.defaultLineHeight,
+                        charSpacing: profile.defaultCharacterSpacing
+                    };
+                    fabricTextbox = new fabric_1.fabric.Textbox("Text goes here", textOptions);
+                    this.fabricCanvas.add(fabricTextbox);
+                    object = new text_1.Text(this, fabricTextbox);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricTextbox);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addRectangleObject = function () {
-            var canvasWidth = this.getDimensions().widthPx;
-            var canvasHeight = this.getDimensions().heightPx;
-            var rectWidth = canvasWidth / 2;
-            var rectHeight = canvasHeight / 2;
-            var rectangleOptions = {
-                id: this.randomId(),
-                width: canvasWidth / 2,
-                height: 2,
-                top: canvasHeight / 2 - rectHeight / 2,
-                left: canvasWidth / 2 - rectWidth / 2,
-                fill: "#000000"
-            };
-            var fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
-            this.fabricCanvas.add(fabricRect);
-            var object = new rectangle_1.Rectangle(this, fabricRect);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricRect);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var canvasWidth, canvasHeight, rectWidth, rectHeight, rectangleOptions, fabricRect, object;
+                return __generator(this, function (_a) {
+                    canvasWidth = this.getDimensions().widthPx;
+                    canvasHeight = this.getDimensions().heightPx;
+                    rectWidth = canvasWidth / 2;
+                    rectHeight = canvasHeight / 2;
+                    rectangleOptions = {
+                        id: this.randomId(),
+                        width: canvasWidth / 2,
+                        height: 2,
+                        top: canvasHeight / 2 - rectHeight / 2,
+                        left: canvasWidth / 2 - rectWidth / 2,
+                        fill: "#000000"
+                    };
+                    fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
+                    this.fabricCanvas.add(fabricRect);
+                    object = new rectangle_1.Rectangle(this, fabricRect);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricRect);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addCutoffObject = function () {
-            var profile = this.profile$.value;
-            var initialThickness = profile.defaultCutoffWidth;
-            var canvasWidth = this.getDimensions().widthPx;
-            var canvasHeight = this.getDimensions().heightPx;
-            var rectangleOptions = {
-                id: this.randomId(),
-                width: canvasWidth,
-                height: initialThickness,
-                top: canvasHeight - initialThickness,
-                left: 0,
-                fill: profile.defaultCutoffColor
-            };
-            var fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
-            this.fabricCanvas.add(fabricRect);
-            var object = new cutoff_1.Cutoff(this, fabricRect);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricRect);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var profile, initialThickness, canvasWidth, canvasHeight, rectangleOptions, fabricRect, object;
+                return __generator(this, function (_a) {
+                    profile = this.profile$.value;
+                    initialThickness = profile.defaultCutoffWidth;
+                    canvasWidth = this.getDimensions().widthPx;
+                    canvasHeight = this.getDimensions().heightPx;
+                    rectangleOptions = {
+                        id: this.randomId(),
+                        width: canvasWidth,
+                        height: initialThickness,
+                        top: canvasHeight - initialThickness,
+                        left: 0,
+                        fill: profile.defaultCutoffColor
+                    };
+                    fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
+                    this.fabricCanvas.add(fabricRect);
+                    object = new cutoff_1.Cutoff(this, fabricRect);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricRect);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addBorderObject = function () {
-            var profile = this.profile$.value;
-            var initialThickness = profile.defaultBorderWidth;
-            var rectangleOptions = {
-                id: this.randomId(),
-                fill: null,
-                stroke: profile.defaultBorderColor,
-                strokeWidth: initialThickness
-            };
-            var fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
-            this.fabricCanvas.add(fabricRect);
-            var object = new border_1.Border(this, fabricRect);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricRect);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var profile, initialThickness, rectangleOptions, fabricRect, object;
+                return __generator(this, function (_a) {
+                    profile = this.profile$.value;
+                    initialThickness = profile.defaultBorderWidth;
+                    rectangleOptions = {
+                        id: this.randomId(),
+                        fill: null,
+                        stroke: profile.defaultBorderColor,
+                        strokeWidth: initialThickness
+                    };
+                    fabricRect = new fabric_1.fabric.Rect(rectangleOptions);
+                    this.fabricCanvas.add(fabricRect);
+                    object = new border_1.Border(this, fabricRect);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricRect);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addVerticalRuleObject = function () {
-            var rectOptions = {
-                id: this.randomId(),
-                width: 2,
-                height: 10,
-                top: 0,
-                left: 0,
-                fill: "#000000"
-            };
-            var fabricRect = new fabric_1.fabric.Rect(rectOptions);
-            this.fabricCanvas.add(fabricRect);
-            var object = new vertical_rule_1.VerticalRule(this, fabricRect);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricRect);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var rectOptions, fabricRect, object;
+                return __generator(this, function (_a) {
+                    rectOptions = {
+                        id: this.randomId(),
+                        width: 2,
+                        height: 10,
+                        top: 0,
+                        left: 0,
+                        fill: "#000000"
+                    };
+                    fabricRect = new fabric_1.fabric.Rect(rectOptions);
+                    this.fabricCanvas.add(fabricRect);
+                    object = new vertical_rule_1.VerticalRule(this, fabricRect);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricRect);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override
          * @inheritDoc
          */
         InteractiveCanvas.prototype.addHorizontalRuleObject = function () {
-            var rectOptions = {
-                id: this.randomId(),
-                width: 10,
-                height: 2,
-                top: 0,
-                left: 0,
-                fill: "#000000"
-            };
-            var fabricRect = new fabric_1.fabric.Rect(rectOptions);
-            this.fabricCanvas.add(fabricRect);
-            var object = new horizontal_rule_1.HorizontalRule(this, fabricRect);
-            this.trackNewObject(object);
-            this.fabricCanvas.setActiveObject(fabricRect);
-            this.syncObjectList();
-            return new rxjs_1.BehaviorSubject(object);
+            return __awaiter(this, void 0, void 0, function () {
+                var rectOptions, fabricRect, object;
+                return __generator(this, function (_a) {
+                    rectOptions = {
+                        id: this.randomId(),
+                        width: 10,
+                        height: 2,
+                        top: 0,
+                        left: 0,
+                        fill: "#000000"
+                    };
+                    fabricRect = new fabric_1.fabric.Rect(rectOptions);
+                    this.fabricCanvas.add(fabricRect);
+                    object = new horizontal_rule_1.HorizontalRule(this, fabricRect);
+                    this.trackNewObject(object);
+                    this.fabricCanvas.setActiveObject(fabricRect);
+                    this.syncObjectList();
+                    return [2 /*return*/, object];
+                });
+            });
         };
         /**
          * @override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"

package/readme.md

@@ -21,7 +21,7 @@ Add the following lines to the `package.json` `scripts` config in the project th
 {
   "scripts": {
     "link:lic": "npm link @leapfrog/interactive-canvas",
-    "upgrade:lic": "npm install @leapfrog/interactive-canvas@latest"
+    "upgrade:lic": "npm install @leapfrog/interactive-canvas@latest --save"
   }
 }
 ```