ngx-ace-icy
Version:
angular9+版本以上ace语法编辑器
451 lines (445 loc) • 11.7 kB
JavaScript
import { EventEmitter, Component, forwardRef, ElementRef, NgZone, Output, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxAceComponent {
/**
* @param {?} elementRef
* @param {?} zone
*/
constructor(elementRef, zone) {
this.elementRef = elementRef;
this.zone = zone;
this.textChanged = new EventEmitter();
this.textChange = new EventEmitter();
this.placeholder = '请输入内容';
this.style = {};
// tslint:disable-next-line:variable-name
this._options = {};
// tslint:disable-next-line:variable-name
this._readOnly = false;
// tslint:disable-next-line:variable-name
this._theme = 'monokai';
// tslint:disable-next-line:variable-name
this._mode = 'sql';
// tslint:disable-next-line:variable-name
this._autoUpdateContent = true;
// tslint:disable-next-line:variable-name
this._durationBeforeCallback = 0;
// tslint:disable-next-line:variable-name
this._text = '';
// tslint:disable-next-line:variable-name
// private _onChange = (_: any) => {
// }
this.onChange = (/**
* @return {?}
*/
() => null);
// tslint:disable-next-line:variable-name
// private _onTouched = () => {
// }
this.onTouched = (/**
* @return {?}
*/
() => null);
/** @type {?} */
const el = elementRef.nativeElement;
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
// tslint:disable-next-line:no-string-literal
this._editor = ace['edit'](el);
}));
this._editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 1,
maxLines: Infinity,
});
this._editor.$blockScrolling = Infinity;
this._editor.setShowPrintMargin(false);
}
/**
* @return {?}
*/
ngOnInit() {
this.init();
this.initEvents();
}
/**
* @return {?}
*/
ngOnDestroy() {
this._editor.destroy();
}
/**
* @return {?}
*/
init() {
this.setOptions(this._options || {});
this.setTheme(this._theme);
this.setMode(this._mode);
this.setReadOnly(this._readOnly);
}
/**
* @return {?}
*/
initEvents() {
this._editor.on('change', (/**
* @return {?}
*/
() => this.updateText()));
this._editor.on('paste', (/**
* @return {?}
*/
() => this.updateText()));
}
/**
* @return {?}
*/
updateText() {
/** @type {?} */
const newVal = this._editor.getValue();
if (newVal === this.oldText) {
return;
}
if (!this._durationBeforeCallback) {
this._text = newVal;
this.zone.run((/**
* @return {?}
*/
() => {
this.textChange.emit(newVal);
this.textChanged.emit(newVal);
this.onChange(newVal);
}));
}
else {
if (this.timeoutSaving) {
clearTimeout(this.timeoutSaving);
}
this.timeoutSaving = setTimeout((/**
* @return {?}
*/
() => {
this._text = newVal;
this.zone.run((/**
* @return {?}
*/
() => {
this.textChange.emit(newVal);
this.textChanged.emit(newVal);
}));
this.timeoutSaving = null;
}), this._durationBeforeCallback);
}
this.oldText = newVal;
this.emptyMessage();
}
/**
* @param {?} options
* @return {?}
*/
set options(options) {
this.setOptions(options);
}
/**
* @param {?} options
* @return {?}
*/
setOptions(options) {
this._options = options;
this._editor.setOptions(options || {});
}
/**
* @param {?} readOnly
* @return {?}
*/
set readOnly(readOnly) {
this.setReadOnly(readOnly);
}
/**
* @param {?} readOnly
* @return {?}
*/
setReadOnly(readOnly) {
this._readOnly = readOnly;
this._editor.setReadOnly(readOnly);
}
/**
* @param {?} theme
* @return {?}
*/
set theme(theme) {
this.setTheme(theme);
}
/**
* @param {?} theme
* @return {?}
*/
setTheme(theme) {
this._theme = theme;
this._editor.setTheme(`ace/theme/${theme}`);
}
/**
* @param {?} mode
* @return {?}
*/
set mode(mode) {
this.setMode(mode);
}
/**
* @param {?} mode
* @return {?}
*/
setMode(mode) {
this._mode = mode;
if (typeof this._mode === 'object') {
this._editor.getSession().setMode(this._mode);
}
else {
this._editor.getSession().setMode(`ace/mode/${this._mode}`);
}
}
/**
* @return {?}
*/
get value() {
return this.text;
}
/**
* @param {?} value
* @return {?}
*/
set value(value) {
this.setText(value);
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
this.setText(value);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @return {?}
*/
get text() {
return this._text;
}
/**
* @param {?} text
* @return {?}
*/
set text(text) {
this.setText(text);
}
/**
* @param {?} text
* @return {?}
*/
setText(text) {
if (text === null || text === undefined) {
text = '';
}
if (this._text !== text && this._autoUpdateContent === true) {
this._text = text;
this._editor.setValue(text);
this.onChange(text);
this._editor.clearSelection();
}
this.emptyMessage();
}
/**
* @param {?} status
* @return {?}
*/
set autoUpdateContent(status) {
this.setAutoUpdateContent(status);
}
/**
* @param {?} status
* @return {?}
*/
setAutoUpdateContent(status) {
this._autoUpdateContent = status;
}
/**
* @param {?} num
* @return {?}
*/
set durationBeforeCallback(num) {
this.setDurationBeforeCallback(num);
}
/**
* @param {?} num
* @return {?}
*/
setDurationBeforeCallback(num) {
this._durationBeforeCallback = num;
}
/**
* 为空时增加placeholder提示信息
* @private
* @return {?}
*/
emptyMessage() {
/** @type {?} */
const shouldShow = !this._text.length;
/** @type {?} */
let node = this._editor.renderer.emptyMessageNode;
if (!shouldShow && node) {
this._editor.renderer.scroller.removeChild(this._editor.renderer.emptyMessageNode);
this._editor.renderer.emptyMessageNode = null;
}
else if (shouldShow && !node) {
node = this._editor.renderer.emptyMessageNode = document.createElement('div');
node.textContent = this.placeholder;
node.className = 'ace_emptyMessage';
node.style.padding = '0 9px';
node.style.position = 'absolute';
node.style.zIndex = 9;
node.style.opacity = 0.5;
this._editor.renderer.scroller.appendChild(node);
}
}
/**
* @return {?}
*/
getEditor() {
return this._editor;
}
}
NgxAceComponent.decorators = [
{ type: Component, args: [{
selector: 'c-ngx-ace',
template: '',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => NgxAceComponent)),
multi: true
}],
styles: [':host { display:block;box-sizing: content-box;}']
}] }
];
/** @nocollapse */
NgxAceComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone }
];
NgxAceComponent.propDecorators = {
textChanged: [{ type: Output }],
textChange: [{ type: Output }],
placeholder: [{ type: Input }],
style: [{ type: Input }],
options: [{ type: Input }],
readOnly: [{ type: Input }],
theme: [{ type: Input }],
mode: [{ type: Input }],
value: [{ type: Input }],
text: [{ type: Input }],
autoUpdateContent: [{ type: Input }],
durationBeforeCallback: [{ type: Input }]
};
if (false) {
/** @type {?} */
NgxAceComponent.prototype.textChanged;
/** @type {?} */
NgxAceComponent.prototype.textChange;
/** @type {?} */
NgxAceComponent.prototype.placeholder;
/** @type {?} */
NgxAceComponent.prototype.style;
/** @type {?} */
NgxAceComponent.prototype._options;
/** @type {?} */
NgxAceComponent.prototype._readOnly;
/** @type {?} */
NgxAceComponent.prototype._theme;
/** @type {?} */
NgxAceComponent.prototype._mode;
/** @type {?} */
NgxAceComponent.prototype._autoUpdateContent;
/** @type {?} */
NgxAceComponent.prototype._editor;
/** @type {?} */
NgxAceComponent.prototype._durationBeforeCallback;
/** @type {?} */
NgxAceComponent.prototype._text;
/** @type {?} */
NgxAceComponent.prototype.oldText;
/** @type {?} */
NgxAceComponent.prototype.timeoutSaving;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.zone;
}
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxAceModule {
}
NgxAceModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgxAceComponent
],
imports: [],
exports: [
NgxAceComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace-icy.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxAceComponent, NgxAceModule };
//# sourceMappingURL=ngx-ace-icy.js.map