nzk-react-components 0.4.2 → 0.4.5

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

@@ -0,0 +1,98 @@
+'use strict';
+
+var tslib = require('tslib');
+var Sketch = require('./Sketch.js');
+var SketchCutModel = require('./SketchCutModel.js');
+var SketchLayer = require('./SketchLayer.js');
+var trace = require('./trace.js');
+
+var SketchCut = (function (_super) {
+    tslib.__extends(SketchCut, _super);
+    function SketchCut(props) {
+        var _this = _super.call(this, props) || this;
+        _this.model = new SketchCutModel({
+            pixelRatioScale: _this.pixelRatioScale
+        });
+        _this.imageToCut = props.imageToCut;
+        _this.drawingLayer.drawImageToFit(_this.imageToCut, .9);
+        if (props.onImageCut) {
+            _this.onImageCut = props.onImageCut;
+        }
+        var defaultLayerProps = {
+            pixelRatioScale: _this.pixelRatioScale,
+            width: props.containerEl.offsetWidth,
+            height: props.containerEl.offsetHeight
+        };
+        _this.cutLayer = new SketchLayer(defaultLayerProps);
+        _this.cutLayer.canvas.style.zIndex = '1';
+        _this.containerEl.appendChild(_this.cutLayer.canvas);
+        _this.uiLayer = new SketchLayer(defaultLayerProps);
+        _this.uiLayer.canvas.style.zIndex = '4';
+        _this.containerEl.appendChild(_this.uiLayer.canvas);
+        return _this;
+    }
+    SketchCut.prototype.initDrawAnimations = function () {
+        _super.prototype.initDrawAnimations.call(this);
+        this.drawFinished.cut = this.drawCutFinal;
+        this.drawAnimation.cut = this.drawCutStroke;
+    };
+    SketchCut.prototype.drawCutStroke = function (stroke) {
+        this.bufferLayer.clear();
+        trace(stroke, this.bufferLayer.ctx);
+        this.bufferLayer.ctx.closePath();
+        this.bufferLayer.ctx.stroke();
+    };
+    SketchCut.prototype.drawCutFinal = function (stroke) {
+        this.bufferLayer.clear();
+        this.drawingLayer.ctx.globalCompositeOperation = 'copy';
+        this.drawingLayer.drawImageToFit(this.imageToCut);
+        this.drawingLayer.ctx.globalCompositeOperation = 'destination-in';
+        trace(stroke, this.drawingLayer.ctx);
+        this.drawingLayer.ctx.closePath();
+        this.drawingLayer.ctx.fill();
+        this.cutLayer.hide();
+        var box = this.findBoundingBox(this.drawingLayer.ctx);
+        if (box.width < 0 || box.height < 0 || (box.width * box.height) < ((this.width * this.height) * 0.001)) {
+            this.resetCut();
+        }
+        else {
+            this.drawOutline(stroke);
+            this.cutLayer.clear();
+            this.cutLayer.ctx.drawImage(this.drawingLayer.ctx.canvas, box.topLeftX, box.topLeftY, box.width, box.height, 0, 0, box.width, box.height);
+            if (this.onImageCut) {
+                this.onImageCut();
+            }
+        }
+    };
+    SketchCut.prototype.resetCut = function () {
+        this.uiLayer.clear();
+        this.drawingLayer.ctx.globalCompositeOperation = 'copy';
+        this.drawingLayer.drawImageToFit(this.imageToCut);
+    };
+    SketchCut.prototype.drawOutline = function (stroke) {
+        this.uiLayer.ctx.strokeStyle = "rgba(252,234,63, 1)";
+        this.uiLayer.ctx.lineWidth = 7 * this.pixelRatioScale;
+        this.uiLayer.ctx.lineJoin = "round";
+        this.uiLayer.ctx.lineCap = "round";
+        if (this.uiLayer.ctx.setLineDash) {
+            this.uiLayer.ctx.setLineDash([15]);
+        }
+        else if (this.uiLayer.ctx.webkitLineDash) {
+            this.uiLayer.ctx.webkitLineDash = [15, 15];
+        }
+        else {
+            this.uiLayer.ctx.mozDash = [15, 15];
+        }
+        this.uiLayer.clear();
+        trace(stroke, this.uiLayer.ctx);
+        this.uiLayer.ctx.closePath();
+        this.uiLayer.ctx.stroke();
+    };
+    SketchCut.prototype.getLayerToExport = function () {
+        return this.cutLayer;
+    };
+    return SketchCut;
+}(Sketch));
+
+module.exports = SketchCut;
+//# sourceMappingURL=SketchCut.js.map

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

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

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

@@ -0,0 +1,6 @@
+import SketchModel from "./SketchModel";
+import { SketchStrokeType } from "./SketchStrokeModel";
+export default class SketchCutModel extends SketchModel {
+    colour: number[];
+    generateStyleType(): SketchStrokeType;
+}

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var tslib = require('tslib');
+var SketchModel = require('./SketchModel.js');
+
+var SketchCutModel = (function (_super) {
+    tslib.__extends(SketchCutModel, _super);
+    function SketchCutModel() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.colour = [252, 234, 63];
+        return _this;
+    }
+    SketchCutModel.prototype.generateStyleType = function () {
+        return 'cut';
+    };
+    return SketchCutModel;
+}(SketchModel));
+
+module.exports = SketchCutModel;
+//# sourceMappingURL=SketchCutModel.js.map

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

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

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

@@ -0,0 +1,27 @@
+interface Props {
+    width: number;
+    height: number;
+    pixelRatioScale: number;
+    x?: number;
+    y?: number;
+}
+export default class SketchLayer {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    naturalWidth: number;
+    naturalHeight: number;
+    readonly pixelRatioScale: number;
+    readonly canvas: HTMLCanvasElement;
+    readonly ctx: CanvasRenderingContext2D;
+    constructor(props: Props);
+    setSize(naturalWidth: any, naturalHeight: any, width: any, height: any): void;
+    setPosition(x: any, y: any): void;
+    hide(): void;
+    show(): void;
+    clear(): void;
+    drawImageToFit(image: any, ratio?: number): void;
+    drawImageToFill(image: any): void;
+}
+export {};

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

@@ -0,0 +1,59 @@
+'use strict';
+
+var SketchLayer = (function () {
+    function SketchLayer(props) {
+        this.x = 0;
+        this.y = 0;
+        this.pixelRatioScale = props.pixelRatioScale;
+        this.naturalWidth = props.width;
+        this.naturalHeight = props.height;
+        this.width = this.naturalWidth * this.pixelRatioScale;
+        this.height = this.naturalHeight * this.pixelRatioScale;
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.canvas.style.position = 'absolute';
+        this.canvas.style.pointerEvents = 'none';
+        this.setSize(this.naturalWidth, this.naturalHeight, this.width, this.height);
+        if (props.x)
+            this.x = props.x;
+        if (props.y)
+            this.y = props.y;
+        this.setPosition(this.x, this.y);
+    }
+    SketchLayer.prototype.setSize = function (naturalWidth, naturalHeight, width, height) {
+        this.canvas.style.width = naturalWidth + "px";
+        this.canvas.style.height = naturalHeight + "px";
+        this.canvas.width = width;
+        this.canvas.height = height;
+    };
+    SketchLayer.prototype.setPosition = function (x, y) {
+        this.canvas.style.left = x + "px";
+        this.canvas.style.top = y + "px";
+    };
+    SketchLayer.prototype.hide = function () {
+        this.canvas.style.display = 'none';
+    };
+    SketchLayer.prototype.show = function () {
+        this.canvas.style.display = 'block';
+    };
+    SketchLayer.prototype.clear = function () {
+        this.ctx.clearRect(0, 0, this.width, this.height);
+    };
+    SketchLayer.prototype.drawImageToFit = function (image, ratio) {
+        if (ratio === void 0) { ratio = 1; }
+        var scale = Math.min(this.width / image.width, this.height / image.height) * ratio;
+        var x = (this.width / 2) - (image.width / 2) * scale;
+        var y = (this.height / 2) - (image.height / 2) * scale;
+        this.ctx.drawImage(image, 0, 0, image.width, image.height, x, y, image.width * scale, image.height * scale);
+    };
+    SketchLayer.prototype.drawImageToFill = function (image) {
+        var scale = Math.max(this.width / image.width, this.height / image.height);
+        var x = (this.width / 2) - (image.width / 2) * scale;
+        var y = (this.height / 2) - (image.height / 2) * scale;
+        this.ctx.drawImage(image, 0, 0, image.width, image.height, x, y, image.width * scale, image.height * scale);
+    };
+    return SketchLayer;
+}());
+
+module.exports = SketchLayer;
+//# sourceMappingURL=SketchLayer.js.map

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

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

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

@@ -0,0 +1,65 @@
+import SketchStrokeModel, { SketchPoint, SketchStrokeModelData, SketchStrokeType } from './SketchStrokeModel';
+export declare type SketchActionType = 'STROKE' | 'IMAGE_MERGE';
+export interface SketchActionMergeData {
+    image?: HTMLImageElement;
+    imageSrc?: string;
+    x: number;
+    y: number;
+    origin: number[];
+    height: number;
+    width: number;
+    rotation: number;
+}
+export interface SketchAction {
+    type: SketchActionType;
+    data?: SketchStrokeModelData | SketchActionMergeData;
+    model?: SketchStrokeModel;
+}
+export interface SketchModelData {
+    colour: number[];
+    opacity: number;
+    size: number;
+    lastActionIndex: number;
+    actions: SketchAction[];
+    currentStroke: null | SketchStrokeModelData;
+}
+interface Props {
+    pixelRatioScale: number;
+}
+export default class SketchModel {
+    colour: number[];
+    eraser: boolean;
+    fill: boolean;
+    opacity: number;
+    size: number;
+    pixelRatioScale: number;
+    actions: SketchAction[];
+    lastActionIndex: number;
+    currentStroke: null | SketchStrokeModel;
+    constructor(props: Props);
+    generateStyleType(): SketchStrokeType;
+    getStyle(): {
+        opacity: number;
+        colour: number[];
+        eraser: boolean;
+        size: number;
+        type: SketchStrokeType;
+    };
+    initStroke(newPoint: SketchPoint): void;
+    continueStroke(newPoint: SketchPoint): void;
+    saveStroke(): void;
+    saveMergeImage(mergeParams: SketchActionMergeData): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    reset(): void;
+    serialize(): {
+        colour: number[];
+        opacity: number;
+        size: number;
+        lastActionIndex: number;
+        actions: SketchAction[];
+        currentStroke: SketchStrokeModelData | null;
+    };
+    deserialize(serialized: SketchModelData): void;
+}
+export {};

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var SketchStrokeModel = require('./SketchStrokeModel.js');
+
+var SketchModel = (function () {
+    function SketchModel(props) {
+        this.colour = [0, 0, 0];
+        this.eraser = false;
+        this.fill = false;
+        this.opacity = 1.0;
+        this.size = 7;
+        this.pixelRatioScale = 1;
+        this.actions = [];
+        this.lastActionIndex = -1;
+        this.currentStroke = null;
+        this.pixelRatioScale = props.pixelRatioScale;
+    }
+    SketchModel.prototype.generateStyleType = function () {
+        return "" + (this.eraser || this.opacity === 1.0 ? 'opaque' : 'transparent') + (this.eraser ? 'Eraser' : 'Colour') + (this.fill ? 'Fill' : 'Stroke');
+    };
+    SketchModel.prototype.getStyle = function () {
+        return {
+            opacity: this.opacity,
+            colour: this.colour,
+            eraser: this.eraser,
+            size: this.size * this.pixelRatioScale,
+            type: this.generateStyleType()
+        };
+    };
+    SketchModel.prototype.initStroke = function (newPoint) {
+        if (this.canRedo()) {
+            if (this.lastActionIndex === -1) {
+                this.actions = [];
+            }
+            else {
+                this.actions = this.actions.slice(0, this.lastActionIndex + 1);
+            }
+        }
+        this.currentStroke = new SketchStrokeModel(this.getStyle(), newPoint);
+    };
+    SketchModel.prototype.continueStroke = function (newPoint) {
+        if (this.currentStroke) {
+            this.currentStroke.addPoint(newPoint);
+        }
+    };
+    SketchModel.prototype.saveStroke = function () {
+        if (this.currentStroke) {
+            this.actions.push({
+                type: 'STROKE',
+                model: this.currentStroke
+            });
+            this.currentStroke = null;
+            this.lastActionIndex += 1;
+        }
+    };
+    SketchModel.prototype.saveMergeImage = function (mergeParams) {
+        this.currentStroke = null;
+        this.lastActionIndex += 1;
+        this.actions.push({
+            type: 'IMAGE_MERGE',
+            data: mergeParams
+        });
+    };
+    SketchModel.prototype.canUndo = function () {
+        return this.lastActionIndex > -1;
+    };
+    SketchModel.prototype.canRedo = function () {
+        return this.lastActionIndex < this.actions.length - 1;
+    };
+    SketchModel.prototype.reset = function () {
+        this.actions = [];
+        this.lastActionIndex = -1;
+        if (this.currentStroke) {
+            this.currentStroke = null;
+        }
+    };
+    SketchModel.prototype.serialize = function () {
+        var serialized = {
+            colour: this.colour,
+            opacity: this.opacity,
+            size: this.size,
+            lastActionIndex: this.lastActionIndex,
+            actions: [],
+            currentStroke: null
+        };
+        this.actions.forEach(function (action) {
+            var serializedObject;
+            if (action.type === 'STROKE') {
+                serializedObject = action.model ? action.model.serialize() : action.data || {};
+            }
+            else if (action.type === 'IMAGE_MERGE') {
+                serializedObject = action.data;
+                if (serializedObject.image) {
+                    serializedObject.imageSrc = serializedObject.image.src;
+                    serializedObject.image = undefined;
+                }
+            }
+            serialized.actions.push({
+                type: action.type,
+                data: serializedObject
+            });
+        });
+        if (this.currentStroke) {
+            serialized.currentStroke = this.currentStroke.serialize();
+        }
+        return serialized;
+    };
+    SketchModel.prototype.deserialize = function (serialized) {
+        var _this = this;
+        this.colour = serialized.colour;
+        this.opacity = serialized.opacity;
+        this.size = serialized.size;
+        this.lastActionIndex = serialized.lastActionIndex;
+        this.actions = [];
+        serialized.actions.forEach(function (action) {
+            var deserializedAction = {
+                type: action.type,
+                data: action.data,
+                model: null
+            };
+            if (action.type === 'STROKE' && action.data) {
+                var stroke = new SketchStrokeModel();
+                stroke.deserialize(action.data);
+                deserializedAction.model = stroke;
+            }
+            _this.actions.push(deserializedAction);
+        });
+        if (serialized.currentStroke !== undefined) {
+            this.currentStroke = new SketchStrokeModel();
+            this.currentStroke.deserialize(serialized.currentStroke);
+        }
+    };
+    return SketchModel;
+}());
+
+module.exports = SketchModel;
+//# sourceMappingURL=SketchModel.js.map

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

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

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

@@ -0,0 +1,33 @@
+export interface SketchPoint {
+    x: number;
+    y: number;
+}
+export declare type SketchStrokeType = 'transparentEraserFill' | 'transparentEraserStroke' | 'transparentColourFill' | 'transparentColourStroke' | 'opaqueEraserFill' | 'opaqueEraserStroke' | 'opaqueColourFill' | 'opaqueColourStroke' | 'cut';
+export interface SketchStrokeStyle {
+    opacity: number;
+    colour: number[];
+    eraser: boolean;
+    size: number;
+    type: SketchStrokeType;
+}
+export interface SketchStrokeModelPoint {
+    s: SketchPoint;
+    h: SketchPoint | null;
+}
+export interface SketchStrokeModelData {
+    style?: SketchStrokeStyle;
+    points: SketchStrokeModelPoint[];
+}
+export default class SketchStrokeModel {
+    style?: SketchStrokeStyle;
+    points: SketchStrokeModelPoint[];
+    constructor(style?: SketchStrokeStyle, firstPoint?: SketchPoint);
+    length(): number;
+    lastPoint(): SketchPoint;
+    addPoint(newPoint: any): number;
+    serialize(): {
+        points: SketchStrokeModelPoint[];
+        style: SketchStrokeStyle | undefined;
+    };
+    deserialize(serialized: any): void;
+}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var SketchStrokeModel = (function () {
+    function SketchStrokeModel(style, firstPoint) {
+        if (style) {
+            this.style = style;
+        }
+        this.points = [];
+        if (firstPoint) {
+            this.points.push({
+                s: firstPoint,
+                h: null
+            });
+        }
+    }
+    SketchStrokeModel.prototype.length = function () {
+        return this.points.length;
+    };
+    SketchStrokeModel.prototype.lastPoint = function () {
+        return this.points[this.points.length - 1].s;
+    };
+    SketchStrokeModel.prototype.addPoint = function (newPoint) {
+        this.points[this.points.length - 1].h = {
+            x: (this.points[this.points.length - 1].s.x + newPoint.x) / 2,
+            y: (this.points[this.points.length - 1].s.y + newPoint.y) / 2
+        };
+        return this.points.push({
+            s: newPoint,
+            h: null
+        });
+    };
+    SketchStrokeModel.prototype.serialize = function () {
+        return {
+            points: this.points,
+            style: this.style
+        };
+    };
+    SketchStrokeModel.prototype.deserialize = function (serialized) {
+        if (!serialized)
+            return;
+        this.style = serialized.style;
+        this.points = serialized.points || [];
+    };
+    return SketchStrokeModel;
+}());
+
+module.exports = SketchStrokeModel;
+//# sourceMappingURL=SketchStrokeModel.js.map

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

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

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

@@ -0,0 +1,16 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+interface Props {
+    width: number;
+    height: number;
+    scale: number;
+    onTouchStart?: (point: Point) => void;
+    onTouchMove?: (point: Point) => void;
+    onTouchEnd?: (point: Point) => void;
+    onTouchLeave?: (point: Point) => void;
+    onTouchEnter?: (point: Point) => void;
+}
+declare const _default: (props: Props) => HTMLDivElement;
+export default _default;

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var createInteractionSurface = (function (props) {
+    var el = document.createElement('div');
+    el.style.width = props.width + "px";
+    el.style.height = props.height + "px";
+    el.style.position = 'absolute';
+    el.style.left = '0px';
+    el.style.top = '0px';
+    var getMousePoint = function (ev) {
+        var rect = el.getBoundingClientRect();
+        return {
+            x: (ev.clientX - rect.left) * props.scale,
+            y: (ev.clientY - rect.top) * props.scale
+        };
+    };
+    var getTouchPoint = function (ev) {
+        var rect = el.getBoundingClientRect();
+        return {
+            x: (ev.touches[0].clientX - rect.left) * props.scale,
+            y: (ev.touches[0].clientY - rect.top) * props.scale
+        };
+    };
+    var wrapMouseEvent = function (ev, handler) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        handler(getMousePoint(ev));
+    };
+    var wrapTouchEvent = function (ev, handler) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (ev.touches[0]) {
+            handler(getTouchPoint(ev));
+        }
+        else {
+            handler();
+        }
+    };
+    el.addEventListener("mousedown", function (ev) { return wrapMouseEvent(ev, props.onTouchStart); });
+    el.addEventListener("mousemove", function (ev) { return wrapMouseEvent(ev, props.onTouchMove); });
+    el.addEventListener("mouseup", function (ev) { return wrapMouseEvent(ev, props.onTouchEnd); });
+    el.addEventListener("mouseleave", function (ev) { return wrapMouseEvent(ev, props.onTouchLeave); });
+    el.addEventListener("mouseenter", function (ev) {
+        if (ev.buttons > 0) {
+            wrapMouseEvent(ev, props.onTouchStart);
+        }
+    });
+    el.addEventListener("touchstart", function (ev) { return wrapTouchEvent(ev, props.onTouchStart); });
+    el.addEventListener("touchmove", function (ev) { return wrapTouchEvent(ev, props.onTouchMove); });
+    el.addEventListener("touchend", function (ev) { return wrapTouchEvent(ev, props.onTouchEnd); });
+    el.addEventListener("touchcancel", function (ev) { return wrapTouchEvent(ev, props.onTouchEnd); });
+    return el;
+});
+
+module.exports = createInteractionSurface;
+//# sourceMappingURL=createInteractionSurface.js.map

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

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

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

@@ -0,0 +1,3 @@
+import SketchStrokeModel from "./SketchStrokeModel";
+declare const _default: (stroke: SketchStrokeModel, ctx: CanvasRenderingContext2D) => void;
+export default _default;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var trace = (function (stroke, ctx) {
+    var nbPoints = stroke.length();
+    ctx.beginPath();
+    if (nbPoints < 3) {
+        ctx.moveTo(stroke.points[0].s.x, stroke.points[0].s.y);
+        ctx.lineTo(stroke.points[nbPoints - 1].s.x + 0.001, stroke.points[nbPoints - 1].s.y + 0.001);
+    }
+    else {
+        ctx.moveTo(stroke.points[0].s.x, stroke.points[0].s.y);
+        var i = void 0;
+        var len = void 0;
+        var move = void 0;
+        var ref = stroke.points.slice(1, +(nbPoints - 2) + 1 || 9e9);
+        for (i = 0, len = ref.length; i < len; i += 1) {
+            move = ref[i];
+            ctx.quadraticCurveTo(move.s.x, move.s.y, move.h.x, move.h.y);
+        }
+    }
+});
+
+module.exports = trace;
+//# sourceMappingURL=trace.js.map

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

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

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

@@ -0,0 +1,2 @@
+declare function _default(canvas: any): any;
+export default _default;

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

@@ -0,0 +1,42 @@
+'use strict';
+
+const rowBlank = (imageData, width, y) => {
+  for (let x = 0; x < width; x+=1) {
+    if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false
+  }
+  return true
+};
+
+const columnBlank = (imageData, width, x, top, bottom) => {
+  for (let y = top; y < bottom; y+=1) {
+    if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false
+  }
+  return true
+};
+
+var trimCanvas = (canvas) => {
+  const ctx = canvas.getContext("2d");
+
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  let top = 0;
+  let bottom = imageData.height;
+  let left = 0;
+  let right = imageData.width;
+
+  while (top < bottom && rowBlank(imageData, canvas.width, top)) top+=1;
+  while (bottom - 1 > top && rowBlank(imageData, canvas.width, bottom - 1)) bottom-=1;
+  while (left < right && columnBlank(imageData, canvas.width, left, top, bottom)) left+=1;
+  while (right - 1 > left && columnBlank(imageData, canvas.width, right - 1, top, bottom)) right-=1;
+
+  const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
+  const copy = canvas.ownerDocument.createElement("canvas");
+  const copyCtx = copy.getContext("2d");
+  copy.width = trimmed.width;
+  copy.height = trimmed.height;
+  copyCtx.putImageData(trimmed, 0, 0);
+
+  return copy
+};
+
+module.exports = trimCanvas;
+//# sourceMappingURL=trimCanvas.js.map