nzk-react-components 0.4.2 → 0.4.5

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"], ["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'LANDSCAPE' ? props.buttonSize + props.buttonSize * 0.2 + "px" : 'auto'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '4px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '4px' : '0px'; });
+var OpacityButton = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"])), function (props) { return props.buttonSize; }, function (props) { return props.buttonSize; });
+var templateObject_1, templateObject_2;
+
+exports.Container = Container;
+exports.OpacityButton = OpacityButton;
+//# sourceMappingURL=OpacityToggle.styles.js.map

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpacityToggle.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/OpacityToggle/index.d.ts

@@ -0,0 +1,2 @@
+import OpacityToggle from "./OpacityToggle";
+export default OpacityToggle;

package/dist/components/DrawingTool/components/OpacityToggle/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var OpacityToggle = require('./OpacityToggle.js');
+
+
+
+module.exports = OpacityToggle;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/OpacityToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Placeable/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MoveableManagerInterface, Renderer } from "react-moveable";
+declare const _default: {
+    readonly name: "placeable";
+    readonly props: {};
+    readonly events: {};
+    readonly render: (moveable: MoveableManagerInterface<any, any>, React: Renderer) => JSX.Element;
+};
+export default _default;

package/dist/components/DrawingTool/components/Placeable/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var Icon = require('../../../Icon/Icon.js');
+
+var Placeable = {
+    name: "placeable",
+    props: {},
+    events: {},
+    render: function (moveable, React) {
+        var rect = moveable.getRect();
+        var _a = moveable.state, pos1 = _a.pos1, pos2 = _a.pos2;
+        var Placeable = moveable.useCSS("div", "\n        {\n            position: absolute;\n            left: 0px;\n            top: 0px;\n            will-change: transform;\n            transform-origin: 0px 0px;\n            pointer-events: none;\n        }\n        .placeable-icon {\n            width: 24px;\n            height: 24px;\n            background: #4af;\n            border-radius: 100%;\n        }\n        ");
+        return React.createElement(Placeable, { key: "placeable", className: "moveable-placeable", style: {
+                transform: "translate(" + (pos2[0] - (pos2[0] - pos1[0]) / 2) + "px, " + (pos2[1] - (pos2[1] - pos1[1]) / 2) + "px) rotate(" + rect.rotation + "deg) translateY(-54px) translateX(-12px)",
+            } },
+            React.createElement("div", { className: 'placeable-icon' },
+                React.createElement(Icon, { name: 'refresh' })));
+    }
+};
+
+module.exports = Placeable;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/Placeable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/index.d.ts

@@ -0,0 +1,2 @@
+import DrawingTool from "./DrawingTool";
+export default DrawingTool;

package/dist/components/DrawingTool/lib/Sketch.d.ts

@@ -0,0 +1,90 @@
+import SketchLayer from './SketchLayer';
+import { Point } from './createInteractionSurface';
+import SketchModel, { SketchAction, SketchActionMergeData, SketchModelData } from './SketchModel';
+export interface SketchProps {
+    containerEl: HTMLDivElement;
+    template?: string;
+    onChange?: Function;
+    sketchData?: SketchModelData;
+    onReady?: Function;
+}
+interface ExportProps {
+    crop?: boolean;
+}
+export default class Sketch {
+    readonly containerEl: HTMLDivElement;
+    readonly width: number;
+    readonly height: number;
+    readonly naturalWidth: number;
+    readonly naturalHeight: number;
+    readonly pixelRatioScale: number;
+    readonly model: SketchModel;
+    readonly drawingLayer: SketchLayer;
+    readonly bufferLayer: SketchLayer;
+    readonly cacheLayer: SketchLayer;
+    readonly templateLayer?: SketchLayer;
+    template?: string;
+    interactionSurface: HTMLDivElement;
+    isDrawing: boolean;
+    onChange?: Function;
+    sketchData?: SketchModelData;
+    drawUndo?: any;
+    drawFinished?: any;
+    drawAnimation?: any;
+    reqStroke?: any;
+    constructor(props: SketchProps);
+    setBrush({ colour, size, opacity, fill, eraser }: {
+        colour: any;
+        size: any;
+        opacity: any;
+        fill: any;
+        eraser: any;
+    }): void;
+    mergeImage(data: SketchActionMergeData, saveAction?: boolean, callback?: () => void): void;
+    export(props?: ExportProps): any;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    restart(): void;
+    serialize(): {
+        colour: number[];
+        opacity: number;
+        size: number;
+        lastActionIndex: number;
+        actions: SketchAction[];
+        currentStroke: import("./SketchStrokeModel").SketchStrokeModelData | null;
+    };
+    deserialize(serialized: any): void;
+    getNumberOfActions(): number;
+    initDrawAnimations(): void;
+    startDraw(point: Point): void;
+    continueDraw(point: Point): boolean;
+    endDraw(): void;
+    drawExistingSketch(callback?: Function): void;
+    drawAction(action: SketchAction, callback?: () => void): void;
+    strokeAnimation(): void;
+    drawAnimationStroke(stroke: any): void;
+    endStrokeAnimation(): void;
+    drawUndoStroke(stroke: any): void;
+    drawFinishedStroke(stroke: any): void;
+    drawExistingStroke(stroke: any): void;
+    drawTransparentFillFinal(stroke: any): void;
+    drawStrokeFinal(stroke: any): void;
+    drawFillFinal(stroke: any): void;
+    drawFillAndStroke(stroke: any): void;
+    drawEraserUndoingFinal(stroke: any): void;
+    drawEraserUndoingFillFinal(stroke: any): void;
+    drawEraser(stroke: any, copy?: boolean): void;
+    drawEraserFillFinal(stroke: any, copy?: boolean): void;
+    findBoundingBox(ctx: any): {
+        topLeftX: number;
+        topLeftY: number;
+        bottomRightX: number;
+        bottomRightY: number;
+        width: number;
+        height: number;
+    };
+    getLayerToExport(): SketchLayer;
+}
+export {};

package/dist/components/DrawingTool/lib/Sketch.js

@@ -0,0 +1,414 @@
+'use strict';
+
+var tslib = require('tslib');
+var after = require('lodash.after');
+var SketchLayer = require('./SketchLayer.js');
+var createInteractionSurface = require('./createInteractionSurface.js');
+var SketchModel = require('./SketchModel.js');
+var trace = require('./trace.js');
+var trimCanvas = require('./trimCanvas.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var after__default = /*#__PURE__*/_interopDefaultLegacy(after);
+
+var setDrawingStyle = function (style, ctx) {
+    if (style) {
+        var colour = "rgba(" + style.colour[0] + ", " + style.colour[1] + ", " + style.colour[2] + ", " + style.opacity + ")";
+        ctx.strokeStyle = colour;
+        ctx.fillStyle = colour;
+        ctx.lineWidth = style.size;
+    }
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+};
+var Sketch = (function () {
+    function Sketch(props) {
+        this.isDrawing = false;
+        this.containerEl = props.containerEl;
+        this.naturalWidth = props.containerEl.offsetWidth;
+        this.naturalHeight = props.containerEl.offsetHeight;
+        this.pixelRatioScale = window.devicePixelRatio > 1.5 ? 2 : 1;
+        this.width = this.naturalWidth * this.pixelRatioScale;
+        this.height = this.naturalHeight * this.pixelRatioScale;
+        this.template = props.template;
+        this.model = new SketchModel({
+            pixelRatioScale: this.pixelRatioScale
+        });
+        var defaultLayerProps = {
+            pixelRatioScale: this.pixelRatioScale,
+            width: props.containerEl.offsetWidth,
+            height: props.containerEl.offsetHeight
+        };
+        if (this.template) {
+            this.templateLayer = new SketchLayer(defaultLayerProps);
+            this.templateLayer.drawImageToFill(this.template);
+            this.containerEl.appendChild(this.templateLayer.canvas);
+        }
+        this.drawingLayer = new SketchLayer(defaultLayerProps);
+        this.drawingLayer.canvas.style.zIndex = '1';
+        this.containerEl.appendChild(this.drawingLayer.canvas);
+        this.bufferLayer = new SketchLayer(defaultLayerProps);
+        this.bufferLayer.canvas.style.zIndex = '2';
+        this.containerEl.appendChild(this.bufferLayer.canvas);
+        this.cacheLayer = new SketchLayer(defaultLayerProps);
+        this.cacheLayer.hide();
+        this.containerEl.appendChild(this.cacheLayer.canvas);
+        this.interactionSurface = createInteractionSurface({
+            width: this.containerEl.offsetWidth,
+            height: this.containerEl.offsetHeight,
+            scale: this.pixelRatioScale,
+            onTouchStart: this.startDraw.bind(this),
+            onTouchMove: this.continueDraw.bind(this),
+            onTouchEnd: this.endDraw.bind(this),
+            onTouchLeave: this.endDraw.bind(this),
+            onTouchEnter: this.startDraw.bind(this)
+        });
+        this.interactionSurface.style.zIndex = '100';
+        this.containerEl.appendChild(this.interactionSurface);
+        this.initDrawAnimations();
+        if (this.bufferLayer.ctx) {
+            setDrawingStyle(this.model.getStyle(), this.bufferLayer.ctx);
+        }
+        if (props.onChange)
+            this.onChange = props.onChange;
+        if (props.sketchData) {
+            this.deserialize(props.sketchData);
+            this.drawExistingSketch(props.onReady);
+        }
+        else if (props.onReady) {
+            props.onReady();
+        }
+    }
+    Sketch.prototype.setBrush = function (_a) {
+        var colour = _a.colour, size = _a.size, opacity = _a.opacity, fill = _a.fill, eraser = _a.eraser;
+        if (colour !== undefined) {
+            this.model.colour = colour;
+        }
+        if (size !== undefined) {
+            this.model.size = size;
+        }
+        if (opacity !== undefined) {
+            this.model.opacity = opacity;
+        }
+        if (fill !== undefined) {
+            this.model.fill = fill;
+        }
+        if (eraser !== undefined) {
+            this.model.eraser = eraser;
+        }
+    };
+    Sketch.prototype.mergeImage = function (data, saveAction, callback) {
+        var _this = this;
+        if (saveAction === void 0) { saveAction = true; }
+        if (callback === void 0) { callback = function () { }; }
+        var doMerge = function (img) {
+            var scale = (data.width / img.width) * _this.pixelRatioScale;
+            _this.drawingLayer.ctx.globalCompositeOperation = "source-over";
+            _this.drawingLayer.ctx.save();
+            _this.drawingLayer.ctx.translate(data.origin[0] * _this.pixelRatioScale, data.origin[1] * _this.pixelRatioScale);
+            _this.drawingLayer.ctx.rotate(data.rotation * Math.PI / 180);
+            _this.drawingLayer.ctx.translate(-data.x - img.width * scale / 2, -data.y - img.height * scale / 2);
+            _this.drawingLayer.ctx.drawImage(img, data.x, data.y, img.width * scale, img.height * scale);
+            _this.drawingLayer.ctx.restore();
+            if (saveAction) {
+                _this.model.saveMergeImage(data);
+                if (_this.onChange) {
+                    _this.onChange();
+                }
+            }
+            callback();
+        };
+        if (data.image) {
+            doMerge(data.image);
+        }
+        else if (data.imageSrc) {
+            var img_1 = new Image;
+            img_1.onload = function () { doMerge(img_1); };
+            img_1.src = data.imageSrc;
+        }
+    };
+    Sketch.prototype.export = function (props) {
+        if (this.templateLayer) {
+            this.templateLayer.drawImageToFit(this.drawingLayer.canvas);
+        }
+        var layerToExport = this.getLayerToExport();
+        var exportCanvas = (props && props.crop) ? trimCanvas(layerToExport.canvas) : layerToExport.canvas;
+        return exportCanvas.toDataURL();
+    };
+    Sketch.prototype.undo = function () {
+        if (!this.model.canUndo())
+            return;
+        this.model.lastActionIndex -= 1;
+        this.drawingLayer.clear();
+        console.log('Last action Index before undo', this.model.lastActionIndex);
+        for (var i = 0; i <= this.model.lastActionIndex; i += 1) {
+            console.log('I=', i);
+            if (this.model.actions[i].type === 'STROKE' && this.model.actions[i].model) {
+                console.log('draw stroke');
+                this.drawUndoStroke(this.model.actions[i].model);
+            }
+            else if (this.model.actions[i].type === 'IMAGE_MERGE' && this.model.actions[i]) {
+                console.log('merge image');
+                this.mergeImage(this.model.actions[i].data, false);
+            }
+        }
+        if (this.onChange)
+            this.onChange();
+    };
+    Sketch.prototype.redo = function () {
+        if (!this.model.canRedo())
+            return;
+        this.model.lastActionIndex += 1;
+        var action = this.model.actions[this.model.lastActionIndex];
+        if (action.type === 'STROKE' && action.model) {
+            this.drawUndoStroke(action.model);
+        }
+        else if (action.type === 'IMAGE_MERGE' && action.data) {
+            this.mergeImage(action.data, false);
+        }
+        if (this.onChange)
+            this.onChange();
+    };
+    Sketch.prototype.canUndo = function () {
+        return this.model.canUndo();
+    };
+    Sketch.prototype.canRedo = function () {
+        return this.model.canRedo();
+    };
+    Sketch.prototype.restart = function () {
+        this.model.reset();
+        this.drawingLayer.clear();
+        if (this.onChange) {
+            this.onChange();
+        }
+    };
+    Sketch.prototype.serialize = function () {
+        return this.model.serialize();
+    };
+    Sketch.prototype.deserialize = function (serialized) {
+        this.model.deserialize(serialized);
+    };
+    Sketch.prototype.getNumberOfActions = function () {
+        return this.model.lastActionIndex + 1;
+    };
+    Sketch.prototype.initDrawAnimations = function () {
+        this.drawUndo = {
+            transparentEraserFill: this.drawTransparentFillFinal,
+            transparentEraserStroke: this.drawStrokeFinal,
+            transparentColourFill: this.drawTransparentFillFinal,
+            transparentColourStroke: this.drawStrokeFinal,
+            opaqueEraserFill: this.drawEraserUndoingFillFinal,
+            opaqueEraserStroke: this.drawEraserUndoingFinal,
+            opaqueColourFill: this.drawFillFinal,
+            opaqueColourStroke: this.drawStrokeFinal
+        };
+        this.drawFinished = {
+            transparentEraserFill: this.drawTransparentFillFinal,
+            transparentEraserStroke: this.drawStrokeFinal,
+            transparentColourFill: this.drawTransparentFillFinal,
+            transparentColourStroke: this.drawStrokeFinal,
+            opaqueEraserFill: this.drawEraserFillFinal,
+            opaqueEraserStroke: this.drawEraser,
+            opaqueColourFill: this.drawFillFinal,
+            opaqueColourStroke: this.drawStrokeFinal
+        };
+        this.drawAnimation = {
+            transparentEraserFill: this.drawFillAndStroke,
+            transparentEraserStroke: this.drawFillAndStroke,
+            transparentColourFill: this.drawFillAndStroke,
+            transparentColourStroke: this.drawFillAndStroke,
+            opaqueEraserFill: this.drawEraser,
+            opaqueEraserStroke: this.drawEraser,
+            opaqueColourFill: this.drawFillAndStroke,
+            opaqueColourStroke: this.drawFillAndStroke
+        };
+    };
+    Sketch.prototype.startDraw = function (point) {
+        this.isDrawing = true;
+        this.model.initStroke(point);
+        if (this.model.currentStroke && this.model.currentStroke.style && this.cacheLayer.ctx && this.drawingLayer.ctx) {
+            if (this.model.currentStroke.style.eraser && this.model.currentStroke.style.opacity === 1.0) {
+                this.cacheLayer.ctx.globalCompositeOperation = "copy";
+                this.cacheLayer.ctx.drawImage(this.drawingLayer.ctx.canvas, 0, 0, this.width, this.height);
+                setDrawingStyle(this.model.currentStroke.style, this.drawingLayer.ctx);
+            }
+        }
+        if (this.model.currentStroke && this.bufferLayer.ctx) {
+            setDrawingStyle(this.model.currentStroke.style, this.bufferLayer.ctx);
+        }
+        this.strokeAnimation();
+    };
+    Sketch.prototype.continueDraw = function (point) {
+        if (!this.isDrawing)
+            return false;
+        this.model.continueStroke(point);
+        return false;
+    };
+    Sketch.prototype.endDraw = function () {
+        if (!(this.model.currentStroke && this.model.currentStroke.style))
+            return;
+        this.isDrawing = false;
+        this.endStrokeAnimation();
+        this.bufferLayer.clear();
+        this.drawFinishedStroke(this.model.currentStroke);
+        this.model.saveStroke();
+        if (this.onChange) {
+            this.onChange();
+        }
+    };
+    Sketch.prototype.drawExistingSketch = function (callback) {
+        if (this.model.lastActionIndex === -1) {
+            if (callback)
+                callback();
+            return;
+        }
+        var done = after__default['default'](Math.min(this.model.lastActionIndex, this.model.actions.length), function () {
+            if (callback)
+                callback();
+        });
+        for (var i = 0; i <= this.model.lastActionIndex; i += 1) {
+            this.drawAction(this.model.actions[i], done);
+        }
+    };
+    Sketch.prototype.drawAction = function (action, callback) {
+        if (callback === void 0) { callback = function () { }; }
+        if (action.type === 'STROKE' && action.model) {
+            this.drawExistingStroke(action.model);
+            callback();
+        }
+        else if (action.type === 'IMAGE_MERGE') {
+            this.mergeImage(action.data, false, callback);
+        }
+    };
+    Sketch.prototype.strokeAnimation = function () {
+        var _this = this;
+        this.drawAnimationStroke(this.model.currentStroke);
+        this.reqStroke = window.requestAnimationFrame(function () { return _this.strokeAnimation.apply(_this); });
+    };
+    Sketch.prototype.drawAnimationStroke = function (stroke) {
+        this.drawAnimation[stroke.style.type].apply(this, [stroke]);
+    };
+    Sketch.prototype.endStrokeAnimation = function () {
+        window.cancelAnimationFrame(this.reqStroke);
+        this.reqStroke = 0;
+    };
+    Sketch.prototype.drawUndoStroke = function (stroke) {
+        setDrawingStyle(stroke.style, this.drawingLayer.ctx);
+        this.drawUndo[stroke.style.type].apply(this, [stroke]);
+    };
+    Sketch.prototype.drawFinishedStroke = function (stroke) {
+        setDrawingStyle(stroke.style, this.drawingLayer.ctx);
+        this.drawFinished[stroke.style.type].apply(this, [stroke]);
+    };
+    Sketch.prototype.drawExistingStroke = function (stroke) {
+        setDrawingStyle(stroke.style, this.drawingLayer.ctx);
+        this.drawFinished[stroke.style.type].apply(this, [stroke, false]);
+    };
+    Sketch.prototype.drawTransparentFillFinal = function (stroke) {
+        this.cacheLayer.clear();
+        this.cacheLayer.ctx.globalCompositeOperation = "source-over";
+        setDrawingStyle(tslib.__assign(tslib.__assign({}, stroke.style), { opacity: 1 }), this.cacheLayer.ctx);
+        trace(stroke, this.cacheLayer.ctx);
+        this.cacheLayer.ctx.closePath();
+        this.cacheLayer.ctx.stroke();
+        this.cacheLayer.ctx.fill();
+        this.drawingLayer.ctx.globalCompositeOperation = "source-over";
+        this.drawingLayer.ctx.globalAlpha = stroke.style.opacity;
+        this.drawingLayer.ctx.drawImage(this.cacheLayer.ctx.canvas, 0, 0, this.width, this.height);
+        this.drawingLayer.ctx.globalAlpha = 1.0;
+    };
+    Sketch.prototype.drawStrokeFinal = function (stroke) {
+        this.drawingLayer.ctx.globalCompositeOperation = "source-over";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawFillFinal = function (stroke) {
+        this.drawingLayer.ctx.globalCompositeOperation = "source-over";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.closePath();
+        this.drawingLayer.ctx.fill();
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawFillAndStroke = function (stroke) {
+        this.bufferLayer.clear();
+        trace(stroke, this.bufferLayer.ctx);
+        setDrawingStyle(tslib.__assign(tslib.__assign({}, stroke.style), { opacity: 1 }), this.bufferLayer.ctx);
+        this.bufferLayer.ctx.globalAlpha = stroke.style.opacity;
+        if (this.model.fill) {
+            this.bufferLayer.ctx.closePath();
+            this.bufferLayer.ctx.fill();
+        }
+        this.bufferLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawEraserUndoingFinal = function (stroke) {
+        this.drawingLayer.ctx.globalCompositeOperation = "destination-out";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawEraserUndoingFillFinal = function (stroke) {
+        this.drawingLayer.ctx.globalCompositeOperation = "destination-out";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.closePath();
+        this.drawingLayer.ctx.fill();
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawEraser = function (stroke, copy) {
+        if (copy === void 0) { copy = true; }
+        if (copy) {
+            this.drawingLayer.ctx.globalCompositeOperation = "copy";
+            this.drawingLayer.ctx.drawImage(this.cacheLayer.ctx.canvas, 0, 0, this.width, this.height);
+        }
+        this.drawingLayer.ctx.globalCompositeOperation = "destination-out";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.drawEraserFillFinal = function (stroke, copy) {
+        if (copy === void 0) { copy = true; }
+        if (copy) {
+            this.drawingLayer.ctx.globalCompositeOperation = "copy";
+            this.drawingLayer.ctx.drawImage(this.cacheLayer.ctx.canvas, 0, 0, this.width, this.height);
+        }
+        this.drawingLayer.ctx.globalCompositeOperation = "destination-out";
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.closePath();
+        this.drawingLayer.ctx.fill();
+        this.drawingLayer.ctx.stroke();
+    };
+    Sketch.prototype.findBoundingBox = function (ctx) {
+        var imageData = ctx.getImageData(0, 0, this.width, this.height);
+        var box = {
+            topLeftX: this.width,
+            topLeftY: this.height,
+            bottomRightX: 0,
+            bottomRightY: 0,
+            width: 0,
+            height: 0
+        };
+        for (var x = 0; x < this.width; x += 1) {
+            for (var y = 0; y < this.height; y += 1) {
+                var pixelPosition = (((y * this.width) + x) * 4) + 3;
+                if (imageData.data[pixelPosition] > 0) {
+                    if (x < box.topLeftX)
+                        box.topLeftX = x;
+                    if (y < box.topLeftY)
+                        box.topLeftY = y;
+                    if (x > box.bottomRightX)
+                        box.bottomRightX = x;
+                    if (y > box.bottomRightY)
+                        box.bottomRightY = y;
+                }
+            }
+        }
+        box.width = box.bottomRightX - box.topLeftX;
+        box.height = box.bottomRightY - box.topLeftY;
+        return box;
+    };
+    Sketch.prototype.getLayerToExport = function () {
+        return this.templateLayer || this.drawingLayer;
+    };
+    return Sketch;
+}());
+
+module.exports = Sketch;
+//# sourceMappingURL=Sketch.js.map

package/dist/components/DrawingTool/lib/Sketch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sketch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/lib/SketchCut.d.ts

@@ -0,0 +1,22 @@
+import Sketch, { SketchProps } from "./Sketch";
+import SketchCutModel from "./SketchCutModel";
+import SketchLayer from "./SketchLayer";
+import SketchStrokeModel from "./SketchStrokeModel";
+export interface SketchCutProps extends SketchProps {
+    imageToCut: HTMLImageElement;
+    onImageCut?: () => void;
+}
+export default class SketchCut extends Sketch {
+    readonly model: SketchCutModel;
+    readonly imageToCut: HTMLImageElement;
+    cutLayer: SketchLayer;
+    uiLayer: SketchLayer;
+    onImageCut?: () => void;
+    constructor(props: SketchCutProps);
+    initDrawAnimations(): void;
+    drawCutStroke(stroke: any): void;
+    drawCutFinal(stroke: any): void;
+    resetCut(): void;
+    drawOutline(stroke: SketchStrokeModel): void;
+    getLayerToExport(): SketchLayer;
+}