import { ref , computed } from '@vue/composition-api' ; import { BridgeEvents , Bridge } from '@vue-devtools/shared-utils' ; import { getBridge } from '@front/features/bridge' ; import { useRoute , useRouter } from '@front/util/router' ; import { fetchLayers } from '../timeline/composable' ; export interface AppRecord { id : string ; name : string ; version : string ; iframe : string ; } const apps = ref < AppRecord [ ] > ( [ ] ) ; export function useCurrentApp ( ) { const route = useRoute ( ) ; const currentAppId = computed ( ( ) => route . value . params . appId ) ; const currentApp = computed ( ( ) => apps . value . find ( a => currentAppId . value === a . id ) ) ; return { currentAppId , currentApp , } ; } export function useApps ( ) { const router = useRouter ( ) ; const { currentAppId , currentApp , } = useCurrentApp ( ) ; function selectApp ( id ) { if ( currentAppId . value !== id ) { router . push ( { params : { appId : id . toString ( ) , componentId : null , } , } ) ; } } return { apps , currentAppId , currentApp , selectApp , } ; } function addApp ( app ) { removeApp ( app . id ) ; apps . value . push ( app ) ; } function removeApp ( appId ) { const index = apps . value . findIndex ( app => app . id === appId ) ; if ( index !== - 1 ) { apps . value . splice ( index , 1 ) ; } } export function getApps ( ) { return apps . value ; } function fetchApps ( ) { getBridge ( ) . send ( BridgeEvents . TO_BACK_APP_LIST , { } ) ; } export const pendingSelectAppId = ref < string > ( null ) ; const pendingSelectPromises = [ ] ; export function waitForAppSelect ( ) { if ( ! pendingSelectAppId . value ) { return Promise . resolve ( ) ; } else { return new Promise ( resolve => { pendingSelectPromises . push ( resolve ) ; } ) ; } } export function setupAppsBridgeEvents ( bridge ) { bridge . on ( BridgeEvents . TO_FRONT_APP_ADD , ( { appRecord } ) => { addApp ( appRecord ) ; fetchLayers ( ) ; } ) ; bridge . on ( BridgeEvents . TO_FRONT_APP_REMOVE , ( { id } ) => { removeApp ( id ) ; } ) ; bridge . on ( BridgeEvents . TO_FRONT_APP_LIST , ( { apps : list } ) => { apps . value = list ; } ) ; bridge . on ( BridgeEvents . TO_FRONT_APP_SELECTED , ( { id } ) => { if ( pendingSelectAppId . value === id ) { pendingSelectAppId . value = null ; for ( const resolve of pendingSelectPromises ) { resolve ( ) ; } } } ) ; fetchApps ( ) ; }