From b16a3192c792e7d8793b5a9b1cddecf40fe4d979 Mon Sep 17 00:00:00 2001 From: "Grant J. Butler" Date: Fri, 11 Feb 2022 19:32:29 -0500 Subject: [PATCH] Migrate from Vuex to Pinia. --- package-lock.json | 94 +++++++++--- package.json | 4 +- .../src/components/ConnectionState.vue | 8 +- packages/renderer/src/components/Controls.vue | 33 +--- .../Controls/FlexComponentControls.vue | 10 +- .../Controls/InsetComponentControls.vue | 13 +- .../Controls/SourceComponentControls.vue | 10 +- packages/renderer/src/components/Preview.vue | 6 +- packages/renderer/src/components/Sidebar.vue | 6 +- .../src/components/Sidebar/TreeControl.vue | 15 +- .../renderer/src/components/SyncPopover.vue | 12 +- packages/renderer/src/index.ts | 7 +- packages/renderer/src/integration/obs.ts | 31 ++-- packages/renderer/src/store/app.ts | 144 ------------------ .../renderer/src/store/components/flex.ts | 32 ++++ .../renderer/src/store/components/inset.ts | 13 ++ .../renderer/src/store/components/source.ts | 13 ++ packages/renderer/src/store/layout.ts | 62 ++++++++ packages/renderer/src/store/mutation-types.ts | 29 ---- packages/renderer/src/store/obs.ts | 30 ++++ 20 files changed, 281 insertions(+), 291 deletions(-) delete mode 100644 packages/renderer/src/store/app.ts create mode 100644 packages/renderer/src/store/components/flex.ts create mode 100644 packages/renderer/src/store/components/inset.ts create mode 100644 packages/renderer/src/store/components/source.ts create mode 100644 packages/renderer/src/store/layout.ts delete mode 100644 packages/renderer/src/store/mutation-types.ts create mode 100644 packages/renderer/src/store/obs.ts diff --git a/package-lock.json b/package-lock.json index 4731c73..b610936 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,9 +18,9 @@ "lodash": "^4.17.21", "obs-websocket-js": "^4.0.3", "on-change": "^4.0.0", + "pinia": "^2.0.11", "uuid": "^8.3.2", - "vue": "3.2.30", - "vuex": "^4.0.2" + "vue": "3.2.30" }, "devDependencies": { "@tailwindcss/forms": "^0.4.0", @@ -5281,6 +5281,56 @@ "node": ">=4" } }, + "node_modules/pinia": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.11.tgz", + "integrity": "sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==", + "dependencies": { + "@vue/devtools-api": "^6.0.0-beta.21", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz", + "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/playwright": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.18.1.tgz", @@ -6729,7 +6779,7 @@ "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", - "dev": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -7212,17 +7262,6 @@ "typescript": "*" } }, - "node_modules/vuex": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz", - "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==", - "dependencies": { - "@vue/devtools-api": "^6.0.0-beta.11" - }, - "peerDependencies": { - "vue": "^3.0.2" - } - }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -11468,6 +11507,23 @@ "dev": true, "optional": true }, + "pinia": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.11.tgz", + "integrity": "sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==", + "requires": { + "@vue/devtools-api": "^6.0.0-beta.21", + "vue-demi": "*" + }, + "dependencies": { + "vue-demi": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz", + "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==", + "requires": {} + } + } + }, "playwright": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.18.1.tgz", @@ -12571,7 +12627,7 @@ "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", - "dev": true + "devOptional": true }, "unique-string": { "version": "2.0.0", @@ -12951,14 +13007,6 @@ "vscode-vue-languageservice": "0.31.2" } }, - "vuex": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz", - "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==", - "requires": { - "@vue/devtools-api": "^6.0.0-beta.11" - } - }, "webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/package.json b/package.json index 5aea6d2..2e98ebb 100644 --- a/package.json +++ b/package.json @@ -63,8 +63,8 @@ "lodash": "^4.17.21", "obs-websocket-js": "^4.0.3", "on-change": "^4.0.0", + "pinia": "^2.0.11", "uuid": "^8.3.2", - "vue": "3.2.30", - "vuex": "^4.0.2" + "vue": "3.2.30" } } diff --git a/packages/renderer/src/components/ConnectionState.vue b/packages/renderer/src/components/ConnectionState.vue index 74211c7..10a9424 100644 --- a/packages/renderer/src/components/ConnectionState.vue +++ b/packages/renderer/src/components/ConnectionState.vue @@ -7,14 +7,14 @@ diff --git a/packages/renderer/src/components/Controls/FlexComponentControls.vue b/packages/renderer/src/components/Controls/FlexComponentControls.vue index e752931..5db318f 100644 --- a/packages/renderer/src/components/Controls/FlexComponentControls.vue +++ b/packages/renderer/src/components/Controls/FlexComponentControls.vue @@ -35,8 +35,7 @@ diff --git a/packages/renderer/src/components/Controls/InsetComponentControls.vue b/packages/renderer/src/components/Controls/InsetComponentControls.vue index 063265c..604f6ec 100644 --- a/packages/renderer/src/components/Controls/InsetComponentControls.vue +++ b/packages/renderer/src/components/Controls/InsetComponentControls.vue @@ -22,8 +22,7 @@ diff --git a/packages/renderer/src/components/Controls/SourceComponentControls.vue b/packages/renderer/src/components/Controls/SourceComponentControls.vue index 9e739d8..0c8d9c9 100644 --- a/packages/renderer/src/components/Controls/SourceComponentControls.vue +++ b/packages/renderer/src/components/Controls/SourceComponentControls.vue @@ -16,8 +16,8 @@ diff --git a/packages/renderer/src/components/Preview.vue b/packages/renderer/src/components/Preview.vue index f5421e7..254c9d1 100644 --- a/packages/renderer/src/components/Preview.vue +++ b/packages/renderer/src/components/Preview.vue @@ -15,16 +15,16 @@ diff --git a/packages/renderer/src/components/Sidebar/TreeControl.vue b/packages/renderer/src/components/Sidebar/TreeControl.vue index 493b11a..711e65b 100644 --- a/packages/renderer/src/components/Sidebar/TreeControl.vue +++ b/packages/renderer/src/components/Sidebar/TreeControl.vue @@ -77,8 +77,7 @@ import { DisclosurePanel, } from '@headlessui/vue'; import { ChevronRightIcon } from '@heroicons/vue/solid'; -import { useStore } from '/@/store/app'; -import { ADD_CHILD, SELECT_COMPONENT, EMBED_IN_COMPONENT, DELETE_COMPONENT } from '/@/store/mutation-types'; +import { useLayoutStore } from '/@/store/layout'; interface ContainerAction { title: string @@ -96,14 +95,14 @@ const props = defineProps({ }, }); -const store = useStore(); +const store = useLayoutStore(); const isSelected = computed(() => { - return store.state.selectedComponent?.id == props.component.id; + return store.selectedComponent?.id == props.component.id; }); const isContainerComponent = computed(() => props.component instanceof ContainerComponent); const selectComponent = () => { - store.commit(SELECT_COMPONENT, props.component); + store.selectComponent(props.component); }; const containerActions = computed((): ContainerAction[] => { @@ -120,7 +119,7 @@ const containerActions = computed((): ContainerAction[] => { } actions.push({ title: LayoutComponents[property].displayName, - action: () => { store.commit(ADD_CHILD, { parentId: props.component.id, component: new LayoutComponents[property]()}); }, + action: () => { store.addChild(new LayoutComponents[property](), props.component.id); }, }); } return actions; @@ -132,7 +131,7 @@ const embedActions = computed((): ContainerAction[] => { actions.push({ title: LayoutComponents[property].displayName, action: () => { - store.commit(EMBED_IN_COMPONENT, { id: props.component.id, container: new LayoutComponents[property]() }); + store.embedInComponent(props.component.id, new LayoutComponents[property]() as ContainerComponent); }, }); } @@ -140,6 +139,6 @@ const embedActions = computed((): ContainerAction[] => { }); const deleteComponent = () => { - store.commit(DELETE_COMPONENT, { id: props.component.id }); + store.deleteComponent(props.component.id); }; diff --git a/packages/renderer/src/components/SyncPopover.vue b/packages/renderer/src/components/SyncPopover.vue index 3c11588..df5aa28 100644 --- a/packages/renderer/src/components/SyncPopover.vue +++ b/packages/renderer/src/components/SyncPopover.vue @@ -29,14 +29,16 @@ diff --git a/packages/renderer/src/index.ts b/packages/renderer/src/index.ts index 171cc77..52ecd4a 100644 --- a/packages/renderer/src/index.ts +++ b/packages/renderer/src/index.ts @@ -1,14 +1,15 @@ import { createApp } from 'vue'; +import { createPinia } from 'pinia'; import App from '/@/App.vue'; -import { store, key } from '/@/store/app'; import observeResize from '/@/directives/observe-resize'; import { ContextMenu, ContextMenuProviding, MenuItem, MenuSeparator, Submenu, } from '/@/components/ContextMenu'; import './../assets/style.css'; +import { useObs } from './integration/obs'; createApp(App) - .use(store, key) + .use(createPinia()) .directive( 'observe-resize', observeResize, ) @@ -19,5 +20,7 @@ createApp(App) .component('Submenu', Submenu) .mount('#app'); +useObs(); + document.getElementsByTagName('html')[0] .classList.add(window.platform); diff --git a/packages/renderer/src/integration/obs.ts b/packages/renderer/src/integration/obs.ts index f594e8c..adb89ae 100644 --- a/packages/renderer/src/integration/obs.ts +++ b/packages/renderer/src/integration/obs.ts @@ -1,12 +1,9 @@ import type { LayoutNode } from '/@/layout'; import { ContainerLayoutNode, Frame, SourceLayoutNode } from '/@/layout'; -import type { Source } from '../../../shared/src/obs'; import { OBSConnectionState } from '../../../shared/src/obs'; -import type { State } from '/@/store/app'; -import { SET_OBS_CONNECTION_STATE, SET_OBS_SOURCES, SET_OBS_SCENES } from '/@/store/mutation-types'; import type { Ref} from 'vue'; import { ref } from 'vue'; -import type { Store } from 'vuex'; +import { useObsStore } from '/@/store/obs'; export function useObsConnectionState(): Ref { const state = ref(OBSConnectionState.Disconnected); @@ -21,25 +18,21 @@ export function useObsConnectionState(): Ref { return state; } -export function obsWebSocketPlugin() { - return (store: Store): void => { - const setObsConnectionState = (state: OBSConnectionState) => store.commit(SET_OBS_CONNECTION_STATE, state); - const setSources = (sources: Source[]) => store.commit(SET_OBS_SOURCES, sources); - const setScenes = (scenes: string[]) => store.commit(SET_OBS_SCENES, scenes); +export function useObs() { + const obsStore = useObsStore(); - window.obs.getConnectionStatus() - .then(setObsConnectionState); + window.obs.getConnectionStatus() + .then(obsStore.setConnectionState); - window.obs.getSources() - .then(setSources); + window.obs.getSources() + .then(obsStore.setSources); - window.obs.getScenes() - .then(setScenes); + window.obs.getScenes() + .then(obsStore.setScenes); - window.obs.onConnectionStateChanged(setObsConnectionState); - window.obs.onSourcesChanged(setSources); - window.obs.onScenesChanged(setScenes); - }; + window.obs.onConnectionStateChanged(obsStore.setConnectionState); + window.obs.onSourcesChanged(obsStore.setSources); + window.obs.onScenesChanged(obsStore.setScenes); } export function syncLayout(rootNode: LayoutNode, sceneName: string): void { diff --git a/packages/renderer/src/store/app.ts b/packages/renderer/src/store/app.ts deleted file mode 100644 index 276b185..0000000 --- a/packages/renderer/src/store/app.ts +++ /dev/null @@ -1,144 +0,0 @@ -import { obsWebSocketPlugin } from '/@/integration/obs'; -import type { Component, LayoutNode, Insets} from '/@/layout'; -import { FlexComponent, SourceComponent, LayoutExerciser, Size, ContainerComponent, InsetComponent } from '/@/layout'; -import { OBSConnectionState } from '../../../shared/src/obs'; -import type { Source } from '../../../shared/src/obs'; -import type { InjectionKey } from '@vue/runtime-core'; -import type { Store } from 'vuex'; -import { createStore, useStore as baseUseStore } from 'vuex'; - -import { - SELECT_COMPONENT, - ADD_CHILD, - EMBED_IN_COMPONENT, - DELETE_COMPONENT, - EXERCISE_LAYOUT, - FLEX_SET_DIRECTION, - FLEX_SET_DISTRIBUTION, - FLEX_SET_SPACING, - INSET_SET_INSETS, - SOURCE_SET_SOURCE, - layoutExercisingMutations, - SET_OBS_CONNECTION_STATE, - SET_OBS_SOURCES, - SET_OBS_SCENES, -} from './mutation-types'; - -export interface State { - rootComponent: ContainerComponent - rootNode: LayoutNode | null - selectedComponent: Component | null, - connectionState: OBSConnectionState, - sources: Source[], - scenes: string[] -} - -export const key: InjectionKey> = Symbol(); - -export const store = createStore({ - state: { - rootComponent: new FlexComponent(), - rootNode: null, - selectedComponent: null, - connectionState: OBSConnectionState.Disconnected, - sources: [], - scenes: [], - }, - mutations: { - [SELECT_COMPONENT](state: State, component: Component) { - state.selectedComponent = component; - }, - [EXERCISE_LAYOUT](state: State) { - state.rootNode = new LayoutExerciser().execute(state.rootComponent, new Size(1920, 1080)); - }, - [ADD_CHILD](state: State, payload: { component: Component, parentId: string }) { - const parent = state.rootComponent.childWithId(payload.parentId); - if (!parent || !(parent instanceof ContainerComponent)) { return; } - parent.addChild(payload.component); - }, - [DELETE_COMPONENT](state: State, payload: { id: string }) { - const component = state.rootComponent.childWithId(payload.id); - if (!component || !component.parent) { return; } - component.removeFromParent(); - - if (state.selectedComponent == component) { - state.selectedComponent = null; - } - }, - [EMBED_IN_COMPONENT](state: State, payload: { id: string, container: ContainerComponent }) { - if (state.rootComponent.id == payload.id) { - payload.container.addChild(state.rootComponent); - state.rootComponent = payload.container; - } else { - const child = state.rootComponent.childWithId(payload.id); - if (!child) { return; } - const parent = child.parent; - if (!parent) { return; } - - child.removeFromParent(); - parent.addChild(payload.container); - payload.container.addChild(child); - } - }, - [FLEX_SET_DIRECTION](state: State, direction: 'horizontal' | 'vertical') { - if (!state.selectedComponent || !(state.selectedComponent instanceof FlexComponent)) { - return; - } - state.selectedComponent.direction = direction; - }, - [FLEX_SET_DISTRIBUTION](state: State, distribution: 'leading' | 'center' | 'trailing') { - if (!state.selectedComponent || !(state.selectedComponent instanceof FlexComponent)) { - return; - } - state.selectedComponent.distribution = distribution; - }, - [FLEX_SET_SPACING](state: State, spacing: number) { - if (!state.selectedComponent || !(state.selectedComponent instanceof FlexComponent)) { - return; - } - state.selectedComponent.spacing = spacing; - }, - [INSET_SET_INSETS](state: State, insets: Insets) { - if (!state.selectedComponent || !(state.selectedComponent instanceof InsetComponent)) { - return; - } - state.selectedComponent.insets = insets; - }, - [SOURCE_SET_SOURCE](state: State, source: Source | undefined) { - if (!state.selectedComponent || !(state.selectedComponent instanceof SourceComponent)) { - return; - } - state.selectedComponent.source = source; - }, - [SET_OBS_CONNECTION_STATE](state: State, connectionState: OBSConnectionState) { - state.connectionState = connectionState; - }, - [SET_OBS_SOURCES](state: State, sources: Source[]) { - state.sources = sources; - }, - [SET_OBS_SCENES](state: State, scenes: string[]) { - state.scenes = scenes; - }, - }, - actions: { - }, - modules: { - }, - plugins: [ - obsWebSocketPlugin(), - (store) => { - store.commit(EXERCISE_LAYOUT); - - store.subscribe(mutation => { - if (!layoutExercisingMutations.includes(mutation.type)) { - return; - } - store.commit(EXERCISE_LAYOUT); - }); - }, - ], -}); - -export function useStore(): Store { - return baseUseStore(key); -} diff --git a/packages/renderer/src/store/components/flex.ts b/packages/renderer/src/store/components/flex.ts new file mode 100644 index 0000000..f485a5f --- /dev/null +++ b/packages/renderer/src/store/components/flex.ts @@ -0,0 +1,32 @@ +import { useLayoutStore } from '/@/store/layout'; +import { FlexComponent } from '/@/layout'; + +export const setDirection = (direction: 'horizontal' | 'vertical') => { + const store = useLayoutStore(); + if (!store.selectedComponent || !(store.selectedComponent instanceof FlexComponent)) { + return; + } + store.selectedComponent.direction = direction; + + store.exerciseLayout(); +}; + +export const setDistribution = (distribution: 'leading' | 'center' | 'trailing') => { + const store = useLayoutStore(); + if (!store.selectedComponent || !(store.selectedComponent instanceof FlexComponent)) { + return; + } + store.selectedComponent.distribution = distribution; + + store.exerciseLayout(); +}; + +export const setSpacing = (spacing: number) => { + const store = useLayoutStore(); + if (!store.selectedComponent || !(store.selectedComponent instanceof FlexComponent)) { + return; + } + store.selectedComponent.spacing = spacing; + + store.exerciseLayout(); +}; diff --git a/packages/renderer/src/store/components/inset.ts b/packages/renderer/src/store/components/inset.ts new file mode 100644 index 0000000..6d469ad --- /dev/null +++ b/packages/renderer/src/store/components/inset.ts @@ -0,0 +1,13 @@ +import { useLayoutStore } from '/@/store/layout'; +import type { Insets } from '/@/layout'; +import { InsetComponent } from '/@/layout'; + +export const setInsets = (insets: Insets) => { + const store = useLayoutStore(); + if (!store.selectedComponent || !(store.selectedComponent instanceof InsetComponent)) { + return; + } + store.selectedComponent.insets = insets; + + store.exerciseLayout(); +}; diff --git a/packages/renderer/src/store/components/source.ts b/packages/renderer/src/store/components/source.ts new file mode 100644 index 0000000..539d0db --- /dev/null +++ b/packages/renderer/src/store/components/source.ts @@ -0,0 +1,13 @@ +import { useLayoutStore } from '/@/store/layout'; +import { SourceComponent } from '/@/layout'; +import type { Source } from '../../../../shared/src/obs'; + +export const setSource = (source?: Source) => { + const store = useLayoutStore(); + if (!store.selectedComponent || !(store.selectedComponent instanceof SourceComponent)) { + return; + } + store.selectedComponent.source = source; + + store.exerciseLayout(); +}; diff --git a/packages/renderer/src/store/layout.ts b/packages/renderer/src/store/layout.ts new file mode 100644 index 0000000..81a1fae --- /dev/null +++ b/packages/renderer/src/store/layout.ts @@ -0,0 +1,62 @@ +import { defineStore } from 'pinia'; +import type { LayoutNode, Component } from '/@/layout'; +import { FlexComponent, LayoutExerciser, Size , ContainerComponent } from '/@/layout'; + +interface State { + rootComponent: ContainerComponent + rootNode?: LayoutNode + selectedComponent?: Component, +} + +export const useLayoutStore = defineStore('layout', { + state: (): State => { + return { + rootComponent: new FlexComponent(), + rootNode: undefined, + selectedComponent: undefined, + }; + }, + actions: { + selectComponent(component: Component) { + this.selectedComponent = component; + }, + exerciseLayout() { + this.rootNode = new LayoutExerciser().execute(this.rootComponent, new Size(1920, 1080)); + }, + addChild(component: Component, parentId: string) { + const parent = this.rootComponent.childWithId(parentId); + if (!parent || !(parent instanceof ContainerComponent)) { return; } + parent.addChild(component); + + this.exerciseLayout(); + }, + deleteComponent(id: string) { + const component = this.rootComponent.childWithId(id); + if (!component || !component.parent) { return; } + component.removeFromParent(); + + if (this.selectedComponent == component) { + this.selectedComponent = undefined; + } + + this.exerciseLayout(); + }, + embedInComponent(id: string, container: ContainerComponent) { + if (this.rootComponent.id == id) { + container.addChild(this.rootComponent); + this.rootComponent = container; + } else { + const child = this.rootComponent.childWithId(id); + if (!child) { return; } + const parent = child.parent; + if (!parent) { return; } + + child.removeFromParent(); + parent.addChild(container); + container.addChild(child); + } + + this.exerciseLayout(); + }, + }, +}); diff --git a/packages/renderer/src/store/mutation-types.ts b/packages/renderer/src/store/mutation-types.ts deleted file mode 100644 index 88c51c4..0000000 --- a/packages/renderer/src/store/mutation-types.ts +++ /dev/null @@ -1,29 +0,0 @@ -export const SELECT_COMPONENT = 'SELECT_COMPONENT'; -export const ADD_CHILD = 'ADD_CHILD'; -export const EMBED_IN_COMPONENT = 'EMBED_IN_COMPONENT'; -export const DELETE_COMPONENT = 'DELETE_COMPONENT'; - -export const EXERCISE_LAYOUT = 'EXERCISE_LAYOUT'; - -export const FLEX_SET_DIRECTION = 'FLEX_SET_DIRECTION'; -export const FLEX_SET_DISTRIBUTION = 'FLEX_SET_DISTRIBUTION'; -export const FLEX_SET_SPACING = 'FLEX_SET_SPACING'; - -export const INSET_SET_INSETS = 'INSET_SET_INSETS'; - -export const SOURCE_SET_SOURCE = 'SOURCE_SET_SOURCE'; - -export const SET_OBS_CONNECTION_STATE = 'SET_OBS_CONNECTION_STATE'; -export const SET_OBS_SOURCES = 'SET_OBS_SOURCES'; -export const SET_OBS_SCENES = 'SET_OBS_SCENES'; - -export const layoutExercisingMutations = [ - ADD_CHILD, - EMBED_IN_COMPONENT, - DELETE_COMPONENT, - FLEX_SET_DIRECTION, - FLEX_SET_DISTRIBUTION, - FLEX_SET_SPACING, - INSET_SET_INSETS, - SOURCE_SET_SOURCE, -]; diff --git a/packages/renderer/src/store/obs.ts b/packages/renderer/src/store/obs.ts new file mode 100644 index 0000000..db6bcb9 --- /dev/null +++ b/packages/renderer/src/store/obs.ts @@ -0,0 +1,30 @@ +import { defineStore } from 'pinia'; +import type { Source } from '../../../shared/src/obs'; +import { OBSConnectionState } from '../../../shared/src/obs'; + +interface State { + connectionState: OBSConnectionState, + sources: Source[], + scenes: string[] +} + +export const useObsStore = defineStore('obs', { + state: (): State => { + return { + connectionState: OBSConnectionState.Disconnected, + sources: [], + scenes: [], + }; + }, + actions: { + setConnectionState(connectionState: OBSConnectionState) { + this.connectionState = connectionState; + }, + setSources(sources: Source[]) { + this.sources = sources; + }, + setScenes(scenes: string[]) { + this.scenes = scenes; + }, + }, +});