ng-cw-v12
Version:
Angular UI Component Library
221 lines (212 loc) • 10.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rough-notation')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/highlighter', ['exports', '@angular/core', 'rough-notation'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].highlighter = {}), global.ng.core, global.roughNotation));
})(this, (function (exports, i0, roughNotation) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var HighlighterDirective = /** @class */ (function () {
function HighlighterDirective(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;
}
Object.defineProperty(HighlighterDirective.prototype, "ncAnimate", {
get: function () {
return this._animate;
},
set: function (val) {
this._animate = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(HighlighterDirective.prototype, "ncRtl", {
get: function () {
return this._rtl;
},
set: function (val) {
this._rtl = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(HighlighterDirective.prototype, "ncEnabled", {
get: function () {
return this._enabled;
},
set: function (val) {
this._enabled = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
HighlighterDirective.prototype.ngOnInit = function () {
this.create();
this.isInitialized = true;
if (this.ncEnabled) {
this.show();
}
};
HighlighterDirective.prototype.ngOnDestroy = function () {
if (this.annotation) {
this.annotation.remove();
}
};
HighlighterDirective.prototype.ngOnChanges = function (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();
}
}
}
};
HighlighterDirective.prototype.create = function () {
//svg会生成在宿主的同级。这里设置宿主的父级为相对定位。使svg相对于宿主父级定位，防止svg在向上查找定位父级时出现一些不可控的问题
var elementPosition = getComputedStyle(this.el.nativeElement.parentElement).position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement.parentElement, 'position', 'relative');
}
this.annotation = roughNotation.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,
});
};
HighlighterDirective.prototype.show = function () {
this.annotation.show();
};
HighlighterDirective.prototype.hide = function () {
this.annotation.hide();
};
return HighlighterDirective;
}());
HighlighterDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HighlighterDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
HighlighterDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: HighlighterDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncHighlighter]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncType: [{
type: i0.Input
}], ncAnimate: [{
type: i0.Input
}], ncAnimationDuration: [{
type: i0.Input
}], ncColor: [{
type: i0.Input
}], ncStrokeWidth: [{
type: i0.Input
}], ncPadding: [{
type: i0.Input
}], ncIterations: [{
type: i0.Input
}], ncBrackets: [{
type: i0.Input
}], ncRtl: [{
type: i0.Input
}], ncEnabled: [{
type: i0.Input
}] } });
var NcHighlighterModule = /** @class */ (function () {
function NcHighlighterModule() {
}
return NcHighlighterModule;
}());
NcHighlighterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHighlighterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcHighlighterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHighlighterModule, declarations: [HighlighterDirective], exports: [HighlighterDirective] });
NcHighlighterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHighlighterModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcHighlighterModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
HighlighterDirective
],
imports: [],
exports: [
HighlighterDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.HighlighterDirective = HighlighterDirective;
exports.NcHighlighterModule = NcHighlighterModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-highlighter.umd.js.map