v2.3.7

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bridge",
-	"version": "2.3.6",
+	"version": "2.3.7",
 	"private": true,
 	"scripts": {
 		"dev": "vite",
@@ -15,7 +15,7 @@
 		"@mdi/font": "^6.9.96",
 		"@types/lz-string": "^1.3.34",
 		"bridge-common-utils": "^0.3.3",
-		"bridge-iframe-api": "^0.4.7",
+		"bridge-iframe-api": "^0.4.11",
 		"bridge-js-runtime": "^0.3.6",
 		"bridge-model-viewer": "^0.7.7",
 		"buffer": "^6.0.3",

src/App.vue

@@ -1,13 +1,14 @@
 <template>
 	<v-app
+		ref="appContainer"
 		:style="{ fontFamily }"
 		@contextmenu.native="$event.preventDefault()"
 	>
 		<!-- We need access to native menus in order to hide the custom one on MacOS -->
 		<!-- <Toolbar v-if="!isMacOs" /> -->
-		<Toolbar />
+		<Toolbar v-if="!isInFullScreen" />
 
-		<Sidebar app />
+		<Sidebar v-if="!isInFullScreen" app />
 
 		<v-btn
 			v-if="!sidebarNavigationVisible"
@@ -23,7 +24,11 @@
 			<v-icon>mdi-table-column</v-icon>
 		</v-btn>
 
-		<v-main :style="{ 'padding-top': appToolbarHeight }">
+		<v-main
+			:style="{
+				'padding-top': isInFullScreen ? 0 : appToolbarHeight,
+			}"
+		>
 			<WindowRenderer />
 
 			<v-row
@@ -111,6 +116,10 @@ import WelcomeScreen from '/@/components/TabSystem/WelcomeScreen.vue'
 import SidebarContent from './components/Sidebar/Content/Main.vue'
 import { settingsState } from './components/Windows/Settings/SettingsState'
 import { useTabSystem } from './components/Composables/UseTabSystem'
+import {
+	setFullscreenElement,
+	useFullScreen,
+} from './components/TabSystem/TabContextMenu/Fullscreen'
 
 export default {
 	name: 'App',
@@ -119,11 +128,13 @@ export default {
 	setup() {
 		const { tabSystem, tabSystems, shouldRenderWelcomeScreen } =
 			useTabSystem()
+		const { isInFullScreen } = useFullScreen()
 
 		return {
 			tabSystem,
 			tabSystems,
 			shouldRenderWelcomeScreen,
+			isInFullScreen,
 		}
 	},
 
@@ -132,6 +143,8 @@ export default {
 			this.contextMenu = app.contextMenu
 			this.windowSize = app.windowResize.state
 		})
+
+		setFullscreenElement(this.$refs.appContainer.$el)
 	},
 
 	components: {
@@ -156,6 +169,8 @@ export default {
 
 	computed: {
 		isSidebarContentVisible() {
+			if (this.isInFullScreen) return false
+
 			return (
 				this.sidebarNavigationVisible &&
 				App.sidebar.isContentVisible.value

src/components/CommandBar/CommandBar.vue

@@ -133,9 +133,8 @@ export default {
 					color: packType?.color ?? 'primary',
 
 					onTrigger: async () => {
-						const fileHandle = await project.app.fileSystem.getFileHandle(
-							filePath
-						)
+						const fileHandle =
+							await project.app.fileSystem.getFileHandle(filePath)
 
 						project.openFile(fileHandle)
 					},

src/components/Editors/IframeTab/API/IframeApi.ts

@@ -13,6 +13,10 @@ import { IframeTab } from '../IframeTab'
 import { OpenFileEvent } from './Events/Tab/OpenFile'
 import { openedFileReferenceName } from './Requests/FileSystem/ResolveFileReference'
 import { GetItemPreviewRequest } from './Requests/Project/GetItemPreview'
+import { ReadAsDataUrlRequest } from './Requests/FileSystem/ReadAsDataUrl'
+import { FindRequest } from './Requests/PackIndexer/Find'
+import { GetFileRequest } from './Requests/PackIndexer/GetFile'
+import { wait } from '/@/utils/wait'
 
 export class IframeApi {
 	didSetup = false
@@ -28,10 +32,15 @@ export class IframeApi {
 		// FileSystem
 		new ReadFileRequest(this),
 		new ReadTextFileRequest(this),
+		new ReadAsDataUrlRequest(this),
 		new WriteFileRequest(this),
 
 		// Project
 		new GetItemPreviewRequest(this),
+
+		// PackIndexer,
+		new FindRequest(this),
+		new GetFileRequest(this),
 	]
 
 	constructor(protected tab: IframeTab, protected iframe: HTMLIFrameElement) {
@@ -41,6 +50,7 @@ export class IframeApi {
 			this._channel = new Channel(this.iframe.contentWindow)
 			this.channelSetup.dispatch()
 
+			await wait(20)
 			await this.channel.open()
 
 			this.loaded.dispatch()

src/components/Editors/IframeTab/API/Requests/FileSystem/ReadAsDataUrl.ts

@@ -0,0 +1,16 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+import { resolveFileReference } from './ResolveFileReference'
+import { loadHandleAsDataURL } from '/@/utils/loadAsDataUrl'
+
+export class ReadAsDataUrlRequest extends GenericRequest<string, string> {
+	constructor(api: IframeApi) {
+		super('fs.readAsDataUrl', api)
+	}
+
+	async handle(filePath: string, origin: string): Promise<string> {
+		const fileHandle = await resolveFileReference(filePath, this.api)
+
+		return await loadHandleAsDataURL(fileHandle)
+	}
+}

src/components/Editors/IframeTab/API/Requests/FileSystem/ResolveFileReference.ts

@@ -4,7 +4,8 @@ export const openedFileReferenceName = '~bridge://OPENED-FILE'
 
 export async function resolveFileReference(
 	fileReference: string,
-	api: IframeApi
+	api: IframeApi,
+	createFile = false
 ) {
 	if (fileReference === openedFileReferenceName) {
 		const fileHandle = api.openedFileHandle
@@ -14,5 +15,5 @@ export async function resolveFileReference(
 		return fileHandle
 	}
 
-	return await api.app.fileSystem.getFileHandle(fileReference)
+	return await api.app.fileSystem.getFileHandle(fileReference, createFile)
 }

src/components/Editors/IframeTab/API/Requests/FileSystem/WriteFile.ts

@@ -19,7 +19,7 @@ export class WriteFileRequest extends GenericRequest<IWriteFilePayload, void> {
 	): Promise<void> {
 		const app = await App.getApp()
 
-		const fileHandle = await resolveFileReference(filePath, this.api)
+		const fileHandle = await resolveFileReference(filePath, this.api, true)
 
 		await app.fileSystem.write(fileHandle, data)
 	}

src/components/Editors/IframeTab/API/Requests/PackIndexer/Find.ts

@@ -0,0 +1,30 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+
+interface IRequestData {
+	findFileType: string
+	whereCacheKey: string
+	matchesOneOf: string[]
+	fetchAll?: boolean
+}
+
+export class FindRequest extends GenericRequest<IRequestData, string[]> {
+	constructor(api: IframeApi) {
+		super('packIndexer.find', api)
+	}
+
+	async handle(
+		{ findFileType, whereCacheKey, matchesOneOf, fetchAll }: IRequestData,
+		origin: string
+	) {
+		const packIndexer = this.api.app.project.packIndexer
+		await packIndexer.fired
+
+		return await packIndexer.service.find(
+			findFileType,
+			whereCacheKey,
+			matchesOneOf,
+			fetchAll
+		)
+	}
+}

src/components/Editors/IframeTab/API/Requests/PackIndexer/GetFile.ts

@@ -0,0 +1,21 @@
+import { IframeApi } from '../../IframeApi'
+import { GenericRequest } from '../GenericRequest'
+import { App } from '/@/App'
+
+export class GetFileRequest extends GenericRequest<
+	string,
+	Record<string, unknown>
+> {
+	constructor(api: IframeApi) {
+		super('packIndexer.getFile', api)
+	}
+
+	async handle(filePath: string, origin: string) {
+		const packIndexer = this.api.app.project.packIndexer
+		await packIndexer.fired
+
+		const fileType = App.fileType.getId(filePath)
+
+		return await packIndexer.service.getCacheDataFor(fileType, filePath)
+	}
+}

src/components/Editors/IframeTab/IframeTab.ts

@@ -4,6 +4,7 @@ import { Tab } from '../../TabSystem/CommonTab'
 import { IframeApi } from './API/IframeApi'
 import { markRaw } from 'vue'
 import { AnyFileHandle } from '../../FileSystem/Types'
+import { getFullScreenElement } from '../../TabSystem/TabContextMenu/Fullscreen'
 
 interface IIframeTabOptions {
 	icon?: string
@@ -46,7 +47,7 @@ export class IframeTab extends Tab {
 		this.iframe.classList.add('outlined')
 		this.iframe.style.borderRadius = '12px'
 		this.iframe.style.margin = '8px'
-		document.body.appendChild(this.iframe)
+		getFullScreenElement()?.appendChild(this.iframe)
 	}
 
 	getOptions() {
@@ -71,7 +72,7 @@ export class IframeTab extends Tab {
 		this.iframe.style.display = 'none'
 	}
 	onDestroy() {
-		document.body.removeChild(this.iframe)
+		getFullScreenElement()?.removeChild(this.iframe)
 		this.api.dispose()
 	}
 

src/components/Mixins/AppToolbarHeight.ts

@@ -1,16 +1,20 @@
 // @ts-nocheck
 
 import { WindowControlsOverlayMixin } from './WindowControlsOverlay'
+import { isInFullScreen } from '/@/components/TabSystem/TabContextMenu/Fullscreen'
 
 export const AppToolbarHeightMixin = {
 	mixins: [WindowControlsOverlayMixin],
 	computed: {
 		appToolbarHeight() {
+			if (isInFullScreen.value) return `0px`
+
 			return `env(titlebar-area-height, ${
 				this.$vuetify.breakpoint.mobile ? 0 : 24
 			}px)`
 		},
 		appToolbarHeightNumber() {
+			if (isInFullScreen.value) return 0
 			if (this.windowControlsOverlay) return 33
 
 			return this.$vuetify.breakpoint.mobile ? 0 : 24

src/components/TabSystem/CommonTab.ts

@@ -9,6 +9,7 @@ import { AnyFileHandle } from '../FileSystem/Types'
 import { shareFile } from '../StartParams/Action/openRawFile'
 import { getDefaultFileIcon } from '/@/utils/file/getIcon'
 import { settingsState } from '../Windows/Settings/SettingsState'
+import { fullScreenAction } from './TabContextMenu/Fullscreen'
 
 export abstract class Tab<TRestoreData = any> extends Signal<Tab> {
 	abstract component: Vue.Component
@@ -210,6 +211,7 @@ export abstract class Tab<TRestoreData = any> extends Signal<Tab> {
 			additionalItems.push(<const>{ type: 'divider' })
 
 		await showContextMenu(event, [
+			fullScreenAction(false),
 			...additionalItems,
 			{
 				name: 'actions.closeTab.name',

src/components/TabSystem/TabActions/ActionBar.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="d-inline-flex mb-1"
-		style="height: 21px; width: 100%; overflow-x: auto; overflow-y: hidden"
-	>
+	<div class="d-inline-flex mb-1 tab-action-bar" style="">
 		<Action
 			v-for="action in actions"
 			:key="action.id"
@@ -22,3 +19,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.tab-action-bar {
+	height: 21px;
+	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+</style>

src/components/TabSystem/TabBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="tab-bar">
 		<Draggable
 			v-if="tabSystem && tabSystem.shouldRender"
 			v-model="tabSystem.tabs.value"
@@ -84,4 +84,7 @@ export default {
 .inactive-action-bar {
 	opacity: 0.5;
 }
+.tab-bar {
+	background: var(--v-background-base);
+}
 </style>