ng-cw-v12/fesm2015/ng-cw-v12-highlighter.js

Angular UI Component Library

import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
import { annotate } from 'rough-notation';

class HighlighterDirective {
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
        /** 荧光笔类型 */
        this.ncType = 'highlight';
        /** 是否开启动画效果 */
        this._animate = true;
        /** 动画持续时间，单位ms */
        this.ncAnimationDuration = 800;
        /** 荧光笔颜色 */
        this.ncColor = "#ffd1dc";
        /** 荧光笔宽度，单位px */
        this.ncStrokeWidth = 1.5;
        /** 荧光笔内边距，单位px */
        this.ncPadding = 2;
        /** 动画迭代次数 */
        this.ncIterations = 2;
        /** 括号类型，仅当ncType为bracket时有效 */
        this.ncBrackets = ['left', 'right'];
        /** 动画默认从左往右绘制，若要从右往左绘制请设置成true */
        this._rtl = false;
        /** 可手动切换该值来显示或隐藏荧光笔 */
        this._enabled = true;
        this.isInitialized = false;
    }
    set ncAnimate(val) {
        this._animate = val !== null && val !== undefined && val !== false && val !== 'false';
    }
    get ncAnimate() {
        return this._animate;
    }
    set ncRtl(val) {
        this._rtl = val !== null && val !== undefined && val !== false && val !== 'false';
    }
    get ncRtl() {
        return this._rtl;
    }
    set ncEnabled(val) {
        this._enabled = val !== null && val !== undefined && val !== false && val !== 'false';
    }
    get ncEnabled() {
        return this._enabled;
    }
    ngOnInit() {
        this.create();
        this.isInitialized = true;
        if (this.ncEnabled) {
            this.show();
        }
    }
    ngOnDestroy() {
        if (this.annotation) {
            this.annotation.remove();
        }
    }
    ngOnChanges(changes) {
        if (this.isInitialized) {
            if (changes['ncType']) {
                this.annotation.type = this.ncType;
            }
            if (changes['ncAnimate']) {
                this.annotation.animate = this.ncAnimate;
            }
            if (changes['ncAnimationDuration']) {
                this.annotation.animationDuration = this.ncAnimationDuration;
            }
            if (changes['ncColor']) {
                this.annotation.color = this.ncColor;
            }
            if (changes['ncStrokeWidth']) {
                this.annotation.strokeWidth = this.ncStrokeWidth;
            }
            if (changes['ncPadding']) {
                this.annotation.padding = this.ncPadding;
            }
            if (changes['ncIterations']) {
                this.annotation.iterations = this.ncIterations;
            }
            if (changes['ncBrackets']) {
                this.annotation.brackets = this.ncBrackets;
            }
            if (changes['ncRtl']) {
                this.annotation.rtl = this.ncRtl;
            }
            if (changes['ncEnabled']) {
                if (this.ncEnabled) {
                    this.show();
                }
                else {
                    this.hide();
                }
            }
        }
    }
    create() {
        //svg会生成在宿主的同级。这里设置宿主的父级为相对定位。使svg相对于宿主父级定位，防止svg在向上查找定位父级时出现一些不可控的问题
        const elementPosition = getComputedStyle(this.el.nativeElement.parentElement).position;
        if (!elementPosition || elementPosition === 'static') {
            this.renderer.setStyle(this.el.nativeElement.parentElement, 'position', 'relative');
        }
        this.annotation = annotate(this.el.nativeElement, {
            type: this.ncType,
            animate: this.ncAnimate,
            animationDuration: this.ncAnimationDuration,
            color: this.ncColor,
            strokeWidth: this.ncStrokeWidth,
            padding: this.ncPadding,
            iterations: this.ncIterations,
            brackets: this.ncBrackets,
            rtl: this.ncRtl,
        });
    }
    show() {
        this.annotation.show();
    }
    hide() {
        this.annotation.hide();
    }
}
HighlighterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HighlighterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
HighlighterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: HighlighterDirective, selector: "[ncHighlighter]", inputs: { ncType: "ncType", ncAnimate: "ncAnimate", ncAnimationDuration: "ncAnimationDuration", ncColor: "ncColor", ncStrokeWidth: "ncStrokeWidth", ncPadding: "ncPadding", ncIterations: "ncIterations", ncBrackets: "ncBrackets", ncRtl: "ncRtl", ncEnabled: "ncEnabled" }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HighlighterDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ncHighlighter]'
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncType: [{
                type: Input
            }], ncAnimate: [{
                type: Input
            }], ncAnimationDuration: [{
                type: Input
            }], ncColor: [{
                type: Input
            }], ncStrokeWidth: [{
                type: Input
            }], ncPadding: [{
                type: Input
            }], ncIterations: [{
                type: Input
            }], ncBrackets: [{
                type: Input
            }], ncRtl: [{
                type: Input
            }], ncEnabled: [{
                type: Input
            }] } });

class NcHighlighterModule {
}
NcHighlighterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHighlighterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcHighlighterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHighlighterModule, declarations: [HighlighterDirective], exports: [HighlighterDirective] });
NcHighlighterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHighlighterModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHighlighterModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        HighlighterDirective
                    ],
                    imports: [],
                    exports: [
                        HighlighterDirective
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { HighlighterDirective, NcHighlighterModule };
//# sourceMappingURL=ng-cw-v12-highlighter.js.map