|
@@ -29,43 +29,71 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
|
|
+ import { defineComponent, PropType } from 'vue';
|
|
|
|
|
+
|
|
|
import { Variable } from 'apps/editor/components/variableSubstitution/types';
|
|
import { Variable } from 'apps/editor/components/variableSubstitution/types';
|
|
|
import { IdentifierLocation } from 'parse/types';
|
|
import { IdentifierLocation } from 'parse/types';
|
|
|
import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/sqlWorkerHandler';
|
|
import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/sqlWorkerHandler';
|
|
|
- import Vue from 'vue';
|
|
|
|
|
- import Component from 'vue-class-component';
|
|
|
|
|
- import { Prop } from 'vue-property-decorator';
|
|
|
|
|
- import { wrap } from 'vue/webComponentWrapper';
|
|
|
|
|
|
|
+ import { wrap } from 'vue/webComponentWrap';
|
|
|
|
|
|
|
|
import PresentationMode from './PresentationMode.vue';
|
|
import PresentationMode from './PresentationMode.vue';
|
|
|
import Executable from 'apps/editor/execution/executable';
|
|
import Executable from 'apps/editor/execution/executable';
|
|
|
import Executor from 'apps/editor/execution/executor';
|
|
import Executor from 'apps/editor/execution/executor';
|
|
|
import SubscriptionTracker from 'components/utils/SubscriptionTracker';
|
|
import SubscriptionTracker from 'components/utils/SubscriptionTracker';
|
|
|
|
|
|
|
|
- @Component({
|
|
|
|
|
- components: { PresentationMode }
|
|
|
|
|
- })
|
|
|
|
|
- export default class PresentationModeKoBridge extends Vue {
|
|
|
|
|
- @Prop()
|
|
|
|
|
- executor: Executor | null = null;
|
|
|
|
|
- @Prop()
|
|
|
|
|
- titleObservable!: KnockoutObservable<string | undefined>;
|
|
|
|
|
- @Prop()
|
|
|
|
|
- descriptionObservable!: KnockoutObservable<string | undefined>;
|
|
|
|
|
- @Prop()
|
|
|
|
|
- initialVariables?: Variable[];
|
|
|
|
|
|
|
+ const PresentationModeKoBridge = defineComponent({
|
|
|
|
|
+ components: {
|
|
|
|
|
+ PresentationMode
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ props: {
|
|
|
|
|
+ executor: {
|
|
|
|
|
+ type: Object as PropType<Executor | null>,
|
|
|
|
|
+ default: null
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ titleObservable: {
|
|
|
|
|
+ type: Object as PropType<KnockoutObservable<string | undefined>>,
|
|
|
|
|
+ default: undefined
|
|
|
|
|
+ },
|
|
|
|
|
+ descriptionObservable: {
|
|
|
|
|
+ type: Object as PropType<KnockoutObservable<string | undefined>>,
|
|
|
|
|
+ default: undefined
|
|
|
|
|
+ },
|
|
|
|
|
+ initialVariables: {
|
|
|
|
|
+ type: Object as PropType<Variable[]>,
|
|
|
|
|
+ default: undefined
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ setup(): {
|
|
|
|
|
+ subTracker: SubscriptionTracker;
|
|
|
|
|
+ } {
|
|
|
|
|
+ return {
|
|
|
|
|
+ subTracker: new SubscriptionTracker()
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ data(): {
|
|
|
|
|
+ locations: IdentifierLocation[];
|
|
|
|
|
|
|
|
- locations: IdentifierLocation[] = [];
|
|
|
|
|
|
|
+ title: string | null;
|
|
|
|
|
+ description: string | null;
|
|
|
|
|
|
|
|
- title: string | null = null;
|
|
|
|
|
- description: string | null = null;
|
|
|
|
|
|
|
+ initialized: boolean;
|
|
|
|
|
+ } {
|
|
|
|
|
+ return {
|
|
|
|
|
+ locations: [],
|
|
|
|
|
|
|
|
- initialized = false;
|
|
|
|
|
|
|
+ title: null,
|
|
|
|
|
+ description: null,
|
|
|
|
|
|
|
|
- subTracker = new SubscriptionTracker();
|
|
|
|
|
|
|
+ initialized: false
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
updated(): void {
|
|
updated(): void {
|
|
|
- if (!this.initialized) {
|
|
|
|
|
|
|
+ if (!this.initialized && this.titleObservable && this.descriptionObservable) {
|
|
|
this.title = this.titleObservable() || null;
|
|
this.title = this.titleObservable() || null;
|
|
|
this.subTracker.subscribe(this.titleObservable, (title?: string) => {
|
|
this.subTracker.subscribe(this.titleObservable, (title?: string) => {
|
|
|
this.title = title || null;
|
|
this.title = title || null;
|
|
@@ -87,31 +115,35 @@
|
|
|
|
|
|
|
|
this.initialized = true;
|
|
this.initialized = true;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- destroyed(): void {
|
|
|
|
|
|
|
+ unmounted(): void {
|
|
|
this.subTracker.dispose();
|
|
this.subTracker.dispose();
|
|
|
- }
|
|
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- onBeforeExecute(executable: Executable): void {
|
|
|
|
|
- this.$el.dispatchEvent(
|
|
|
|
|
- new CustomEvent<Executable>('before-execute', { bubbles: true, detail: executable })
|
|
|
|
|
- );
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ onBeforeExecute(executable: Executable): void {
|
|
|
|
|
+ this.$el.dispatchEvent(
|
|
|
|
|
+ new CustomEvent<Executable>('before-execute', { bubbles: true, detail: executable })
|
|
|
|
|
+ );
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- onClose(): void {
|
|
|
|
|
- this.$el.dispatchEvent(
|
|
|
|
|
- new CustomEvent<void>('close', { bubbles: true })
|
|
|
|
|
- );
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ onClose(): void {
|
|
|
|
|
+ this.$el.dispatchEvent(
|
|
|
|
|
+ new CustomEvent<void>('close', { bubbles: true })
|
|
|
|
|
+ );
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
- onVariablesChanged(variables: Variable[]): void {
|
|
|
|
|
- this.$el.dispatchEvent(
|
|
|
|
|
- new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
|
|
|
|
|
- );
|
|
|
|
|
|
|
+ onVariablesChanged(variables: Variable[]): void {
|
|
|
|
|
+ this.$el.dispatchEvent(
|
|
|
|
|
+ new CustomEvent<Variable[]>('variables-changed', { bubbles: true, detail: variables })
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ });
|
|
|
|
|
|
|
|
export const COMPONENT_NAME = 'presentation-mode-ko-bridge';
|
|
export const COMPONENT_NAME = 'presentation-mode-ko-bridge';
|
|
|
wrap(COMPONENT_NAME, PresentationModeKoBridge);
|
|
wrap(COMPONENT_NAME, PresentationModeKoBridge);
|
|
|
|
|
+
|
|
|
|
|
+ export default PresentationModeKoBridge;
|
|
|
</script>
|
|
</script>
|