@daign/2d-graphics/dist/lib/styledGraphicNode.js

Two dimensional graphics library that implements the daign-2d-pipeline.

"use strict";
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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledGraphicNode = void 0;
var math_1 = require("@daign/math");
var _2d_pipeline_1 = require("@daign/2d-pipeline");
var style_sheets_1 = require("@daign/style-sheets");
/**
 * Abstract class for graphic nodes that are defined by points and to which styles apply.
 */
var StyledGraphicNode = /** @class */ (function (_super) {
    __extends(StyledGraphicNode, _super);
    /**
     * Constructor.
     */
    function StyledGraphicNode() {
        var _this = _super.call(this) || this;
        // Array of points that define the element.
        _this.points = new math_1.Vector2Array();
        // Class names assigned to the element.
        _this.classNames = new math_1.StringArray();
        // Style selector object containing all class names of the element.
        _this.styleSelector = new style_sheets_1.StyleSelector();
        // Style applied directly to the element.
        _this.elementStyle = null;
        // Callback to execute when node is clicked.
        _this.onclick = null;
        // ID property.
        _this.id = null;
        // Reference for a mask element to apply to the node.
        _this.mask = null;
        // Reference for a clip path element to apply to the node.
        _this.clipPath = null;
        // Rebuild the style selector object on every class name change.
        _this.classNames.subscribeToChanges(function () {
            _this.buildStyleSelector();
        });
        return _this;
    }
    Object.defineProperty(StyledGraphicNode.prototype, "baseClass", {
        /**
         * Setter for the base class.
         * @param baseClass - The name of the base class.
         */
        set: function (baseClass) {
            if (this.classNames.containsName('baseClass')) {
                this.classNames.getByName('baseClass').value = baseClass;
            }
            else {
                this.classNames.push(new math_1.StringValue(baseClass), 'baseClass');
            }
        },
        enumerable: false,
        configurable: true
    });
    /**
     * Get points after transformation.
     * @param transformation - The transformation to apply.
     * @returns The array of transformed points.
     */
    StyledGraphicNode.prototype.getPointsTransformed = function (transformation) {
        return this.points.cloneDeep().transform(transformation).elements;
    };
    /**
     * Get the transformed bounding box of all points of the element.
     * @returns The transformed bounding box.
     */
    StyledGraphicNode.prototype.getBoxTransformed = function () {
        return this.getBox().transform(this.transformation.transformMatrix);
    };
    /**
     * Get the bounding box of all points of the element.
     * @returns The bounding box.
     */
    StyledGraphicNode.prototype.getBox = function () {
        return this.points.getBox();
    };
    /**
     * Add a class name.
     * @param className - The class name.
     */
    StyledGraphicNode.prototype.addClass = function (className) {
        this.classNames.push(new math_1.StringValue(className));
    };
    /**
     * Add or overwrite a class name by identifier.
     * @param identifier - The identifier.
     * @param className - The class name.
     */
    StyledGraphicNode.prototype.setVariableClass = function (identifier, className) {
        if (identifier === 'baseClass') {
            throw new Error('baseClass is a protected identifier.');
        }
        if (this.classNames.containsName(identifier)) {
            this.classNames.getByName(identifier).value = className;
        }
        else {
            this.classNames.push(new math_1.StringValue(className), identifier);
        }
    };
    /**
     * Construct the style selector object.
     */
    StyledGraphicNode.prototype.buildStyleSelector = function () {
        var selectorString = this.classNames.elements.map(function (s) {
            return ".".concat(s.value);
        }).join('');
        this.styleSelector = new style_sheets_1.StyleSelector(selectorString);
    };
    return StyledGraphicNode;
}(_2d_pipeline_1.GraphicNode));
exports.StyledGraphicNode = StyledGraphicNode;