@ng-blue-duct-tape/svg-draw-stroke/esm2015/lib/svg-draw-stroke.directive.js

Angular library that allows you to access elements inside SVG for further animation

import { Directive, ElementRef, Input, Renderer2, } from '@angular/core';
import * as i0 from "@angular/core";
export class SvgDrawStrokeDirective {
    constructor(_element, _renderer) {
        this._element = _element;
        this._renderer = _renderer;
        this.manualInit = false;
        this.strokeLinecap = 'round';
        this.strokeLinecapAll = false;
        this._isSvgElement = false;
        this._isInit = false;
        this.stokeElements = [];
    }
    ngAfterViewInit() {
        if (!this.manualInit) {
            this.init();
        }
    }
    init() {
        if (this._isInit) {
            console.warn(`bdtSvgDrawStroke already initialized!`);
            return;
        }
        this._checkElementType();
        if (this._isSvgElement) {
            this._setNativeElement();
            this._getStrokeNodes(this._element.nativeElement.childNodes);
            this._isInit = true;
        }
    }
    _checkElementType() {
        if (this._element.nativeElement instanceof SVGElement) {
            this._isSvgElement = true;
        }
        else {
            console.error(`Element type is not SVGElement`, {
                element: this._element.nativeElement,
            });
        }
    }
    _getStrokeNodes(nodes) {
        if (nodes.length) {
            nodes.forEach((node) => {
                if (node.childNodes.length) {
                    this._getStrokeNodes(node.childNodes);
                }
                if (node instanceof SVGGeometryElement) {
                    if (node.getAttribute('stroke-width')) {
                        if (this.strokeLinecapAll && this.strokeLinecap) {
                            this._setStrokeLinecap(node);
                        }
                        else if (!node.getAttribute('stroke-linecap') &&
                            this.strokeLinecap) {
                            this._setStrokeLinecap(node);
                        }
                        const strokeTotal = Math.ceil(node.getTotalLength()) + 1;
                        this.stokeElements.push({
                            element: node,
                            strokeTotal,
                        });
                        this._setStrokeDasharray(node, strokeTotal);
                    }
                    else {
                        console.warn(`SVGGeometryElement has no attribute stroke-width`, {
                            element: node,
                        });
                    }
                }
            });
        }
        else {
            console.warn(`SVGElement has no childes`, {
                element: this._element.nativeElement,
            });
        }
    }
    _setNativeElement() {
        this.nativeElement = this._element.nativeElement;
    }
    _setStrokeDasharray(node, strokeTotal) {
        this._renderer.setStyle(node, 'stroke-dasharray', strokeTotal);
    }
    _setStrokeLinecap(node) {
        this._renderer.setStyle(node, 'stroke-linecap', this.strokeLinecap);
    }
}
SvgDrawStrokeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SvgDrawStrokeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
SvgDrawStrokeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.4", type: SvgDrawStrokeDirective, selector: "[bdtSvgDrawStroke]", inputs: { manualInit: "manualInit", strokeLinecap: "strokeLinecap", strokeLinecapAll: "strokeLinecapAll" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: SvgDrawStrokeDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[bdtSvgDrawStroke]',
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { manualInit: [{
                type: Input
            }], strokeLinecap: [{
                type: Input
            }], strokeLinecapAll: [{
                type: Input
            }] } });
//# sourceMappingURL=svg-draw-stroke.directive.js.map