medsurf-draw/dist/lib/elements/basics/QuadraticCurve.js

Draw annotations on jpg/zoomify images, based on PIXI.js

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as PIXI from "pixi.js-legacy";
import { BaseGraphics, BaseGraphicsModel } from '../../bases/elements/BaseGraphics';
import { StraightLinePointsModel } from "./StraightLine";
import { Design } from "../../config/design";
import { debounce } from "debounce";
var QuadraticCurvePointsModel = (function (_super) {
    __extends(QuadraticCurvePointsModel, _super);
    function QuadraticCurvePointsModel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return QuadraticCurvePointsModel;
}(StraightLinePointsModel));
export { QuadraticCurvePointsModel };
var QuadraticCurveModel = (function (_super) {
    __extends(QuadraticCurveModel, _super);
    function QuadraticCurveModel() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return QuadraticCurveModel;
}(BaseGraphicsModel));
export { QuadraticCurveModel };
var QuadraticCurve = (function (_super) {
    __extends(QuadraticCurve, _super);
    function QuadraticCurve(model) {
        var _this = _super.call(this, model) || this;
        _this._debounceUpdateHitAreaMethod = debounce(_this.updateHitArea.bind(_this), 50).bind(_this);
        _this.on("added", function () {
            _this.on("debouncedUpdateHitArea", _this._debounceUpdateHitAreaMethod);
        });
        _this.on("removed", function () {
            _this.off("debouncedUpdateHitArea", _this._debounceUpdateHitAreaMethod);
        });
        return _this;
    }
    QuadraticCurve.prototype.init = function () {
        this.sortChildren();
        this.emit("debounceDraw");
    };
    QuadraticCurve.prototype.draw = function () {
        if (!this._geometry) {
            return;
        }
        this.clear();
        if (this.options.hasLine) {
            this.lineStyle(this.lineWidth, this.options.lineColor, this.options.lineAlpha);
        }
        else {
            this.lineStyle(this.lineWidth, this.options.lineColor, 0.00000001);
        }
        this.moveTo(this.points.start.x, this.points.start.y);
        if (this.points.start.x == this.points.end.x && this.points.end.x == this.points.controlPoint.x
            || this.points.start.y == this.points.end.y && this.points.end.y == this.points.controlPoint.y
            || Math.abs(Math.round((this.points.start.x * (this.points.end.y - this.points.controlPoint.y) + this.points.end.x * (this.points.controlPoint.y - this.points.start.y) + this.points.controlPoint.x * (this.points.start.y - this.points.end.y)) * 100000) / 100000) == 0) {
            this.lineTo(this.points.end.x, this.points.end.y);
        }
        else {
            this.quadraticCurveTo(this.points.controlPointsPrevious.c2.x, this.points.controlPointsPrevious.c2.y, this.points.end.x, this.points.end.y);
        }
        this.emit("debouncedUpdateHitArea");
    };
    QuadraticCurve.prototype.updateHitArea = function () {
        if (!this._destroyed && this.geometry.graphicsData.length > 0) {
            this.hitArea = this.lineToPolygon(this.lineWidth * Design.line.hitboxLineWidthAddition, this.geometry.graphicsData[0].shape.points);
        }
    };
    QuadraticCurve.prototype.lineToPolygon = function (distance, points) {
        var numPoints = points.length / 2;
        var output = new Array(points.length * 2);
        for (var i = 0; i < numPoints; i++) {
            var j = i * 2;
            var x = points[j];
            var y = points[j + 1];
            var x0 = points[j - 2] !== undefined ? points[j - 2] : x;
            var y0 = points[j - 1] !== undefined ? points[j - 1] : y;
            var x1 = points[j + 2] !== undefined ? points[j + 2] : x;
            var y1 = points[j + 3] !== undefined ? points[j + 3] : y;
            var a = Math.atan2(-x1 + x0, y1 - y0);
            var deltaX = distance * Math.cos(a);
            var deltaY = distance * Math.sin(a);
            output[j] = x + deltaX;
            output[j + 1] = y + deltaY;
            output[(output.length - 1) - j - 1] = x - deltaX;
            output[(output.length - 1) - j] = y - deltaY;
        }
        output.push(output[0], output[1]);
        return new PIXI.Polygon(output);
    };
    Object.defineProperty(QuadraticCurve.prototype, "points", {
        get: function () {
            return this.data.points;
        },
        set: function (value) {
            this.data.points = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(QuadraticCurve.prototype, "options", {
        get: function () {
            return this.data.options;
        },
        set: function (value) {
            this.data.options = value;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(QuadraticCurve.prototype, "lineWidth", {
        get: function () {
            return this.data.lineWidth;
        },
        set: function (value) {
            this.data.lineWidth = value;
        },
        enumerable: false,
        configurable: true
    });
    return QuadraticCurve;
}(BaseGraphics));
export { QuadraticCurve };
//# sourceMappingURL=QuadraticCurve.js.map