|
@@ -18,7 +18,7 @@
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
|
<ace-editor
|
|
<ace-editor
|
|
|
- v-if="initialized && editorId"
|
|
|
|
|
|
|
+ v-if="editorId"
|
|
|
:id="editorId"
|
|
:id="editorId"
|
|
|
:ace-options="aceOptions"
|
|
:ace-options="aceOptions"
|
|
|
:executor="executor"
|
|
:executor="executor"
|
|
@@ -36,10 +36,9 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
- import { defineComponent, PropType } from 'vue';
|
|
|
|
|
|
|
+ import { defineComponent, PropType, ref, toRefs } from 'vue';
|
|
|
|
|
|
|
|
import { Ace } from 'ext/ace';
|
|
import { Ace } from 'ext/ace';
|
|
|
- import { noop } from 'utils/hueUtils';
|
|
|
|
|
|
|
|
|
|
import { wrap } from 'vue/webComponentWrap';
|
|
import { wrap } from 'vue/webComponentWrap';
|
|
|
|
|
|
|
@@ -76,83 +75,44 @@
|
|
|
default: undefined
|
|
default: undefined
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- setup() {
|
|
|
|
|
|
|
+ setup(props) {
|
|
|
|
|
+ const subTracker = new SubscriptionTracker();
|
|
|
|
|
+ const { cursorPositionObservable, idObservable, valueObservable } = toRefs(props);
|
|
|
|
|
+
|
|
|
|
|
+ const cursorPosition = ref<Ace.Position | null>(null);
|
|
|
|
|
+ const editorId = ref<string | null>(null);
|
|
|
|
|
+ const value = ref<string | null>(null);
|
|
|
|
|
+
|
|
|
|
|
+ subTracker.trackObservable(idObservable, editorId);
|
|
|
|
|
+ subTracker.trackObservable(cursorPositionObservable, cursorPosition);
|
|
|
|
|
+ subTracker.trackObservable(valueObservable, value);
|
|
|
|
|
+
|
|
|
return {
|
|
return {
|
|
|
|
|
+ cursorPosition,
|
|
|
|
|
+ editorId,
|
|
|
sqlParserProvider: sqlParserRepository,
|
|
sqlParserProvider: sqlParserRepository,
|
|
|
sqlReferenceProvider: sqlReferenceRepository,
|
|
sqlReferenceProvider: sqlReferenceRepository,
|
|
|
- subTracker: new SubscriptionTracker()
|
|
|
|
|
|
|
+ value
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- cursorPosition: null as Ace.Position | null,
|
|
|
|
|
- editorId: null as string | null,
|
|
|
|
|
- value: null as string | null,
|
|
|
|
|
- initialized: false
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- updated(): void {
|
|
|
|
|
- if (
|
|
|
|
|
- !this.initialized &&
|
|
|
|
|
- this.valueObservable &&
|
|
|
|
|
- this.idObservable &&
|
|
|
|
|
- this.cursorPositionObservable
|
|
|
|
|
- ) {
|
|
|
|
|
- this.value = this.valueObservable() || null;
|
|
|
|
|
- this.subTracker.subscribe(this.valueObservable, (value?: string) => {
|
|
|
|
|
- this.value = value || null;
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- this.editorId = this.idObservable() || null;
|
|
|
|
|
- if (!this.editorId) {
|
|
|
|
|
- this.subTracker
|
|
|
|
|
- .whenDefined<string>(this.idObservable)
|
|
|
|
|
- .then(id => {
|
|
|
|
|
- this.editorId = id;
|
|
|
|
|
- })
|
|
|
|
|
- .catch(noop);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- this.cursorPosition = this.cursorPositionObservable() || null;
|
|
|
|
|
- if (!this.cursorPosition) {
|
|
|
|
|
- this.subTracker
|
|
|
|
|
- .whenDefined<Ace.Position>(this.cursorPositionObservable)
|
|
|
|
|
- .then(position => {
|
|
|
|
|
- this.cursorPosition = position;
|
|
|
|
|
- })
|
|
|
|
|
- .catch(noop);
|
|
|
|
|
- }
|
|
|
|
|
- this.initialized = true;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- unmounted(): void {
|
|
|
|
|
- this.subTracker.dispose();
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
aceCreated(editor: Ace.Editor): void {
|
|
aceCreated(editor: Ace.Editor): void {
|
|
|
this.$el.dispatchEvent(new CustomEvent('ace-created', { bubbles: true, detail: editor }));
|
|
this.$el.dispatchEvent(new CustomEvent('ace-created', { bubbles: true, detail: editor }));
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
createNewDoc(): void {
|
|
createNewDoc(): void {
|
|
|
this.$el.dispatchEvent(new CustomEvent('create-new-doc', { bubbles: true }));
|
|
this.$el.dispatchEvent(new CustomEvent('create-new-doc', { bubbles: true }));
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
cursorChanged(cursorPosition: Ace.Position): void {
|
|
cursorChanged(cursorPosition: Ace.Position): void {
|
|
|
this.$el.dispatchEvent(
|
|
this.$el.dispatchEvent(
|
|
|
new CustomEvent('cursor-changed', { bubbles: true, detail: cursorPosition })
|
|
new CustomEvent('cursor-changed', { bubbles: true, detail: cursorPosition })
|
|
|
);
|
|
);
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
saveDoc(): void {
|
|
saveDoc(): void {
|
|
|
this.$el.dispatchEvent(new CustomEvent('save-doc', { bubbles: true }));
|
|
this.$el.dispatchEvent(new CustomEvent('save-doc', { bubbles: true }));
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
togglePresentationMode(): void {
|
|
togglePresentationMode(): void {
|
|
|
this.$el.dispatchEvent(new CustomEvent('toggle-presentation-mode', { bubbles: true }));
|
|
this.$el.dispatchEvent(new CustomEvent('toggle-presentation-mode', { bubbles: true }));
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
valueChanged(value: string): void {
|
|
valueChanged(value: string): void {
|
|
|
this.$el.dispatchEvent(new CustomEvent('value-changed', { bubbles: true, detail: value }));
|
|
this.$el.dispatchEvent(new CustomEvent('value-changed', { bubbles: true, detail: value }));
|
|
|
}
|
|
}
|