@webspatial/builder 0.0.6 → 0.0.8

package/template/visionOSApp/web-spatial/views/SpatialWebViewUI.swift

@@ -34,108 +34,32 @@ struct SpatialWebViewUI: View {
             let childEntities = ent.getEntities()
 
             // Display child entities of the webview
-            VStack(alignment: .trailing, spacing: 20) {
-                if wv.isRootWebview() {
-                    NavView(swc: wv)
-                }
-
-                ZStack {
-                    OptionalClip(clipEnabled: ent.coordinateSpace != .ROOT && wv.isScrollEnabled()) {
-                        ZStack {
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
-                                    let _ = e.forceUpdate ? 0 : 0
-                                    if let childWindowcomponent = e.getComponent(SpatialWindowComponent.self) {
-                                        if e.coordinateSpace == .DOM {
-                                            let view = childWindowcomponent
-                                            let x = CGFloat(e.modelEntity.position.x)
-                                            let y = CGFloat(e.modelEntity.position.y - (view.scrollWithParent ? parentYOffset : 0))
-                                            let z = CGFloat(e.modelEntity.position.z)
-                                            let width = CGFloat(view.resolutionX)
-                                            let height = CGFloat(view.resolutionY)
-                                            let anchor = view.rotationAnchor
-
-                                            // Matrix = MTranslate X MRotate X MScale
-                                            SpatialWebViewUI().environment(e)
-                                                .frame(width: width, height: height)
-                                                // use .offset(smallVal) to workaround for glassEffect not working and small width/height spatialDiv not working
-                                                .offset(z: 0.0001)
-                                                .scaleEffect(
-                                                    x: CGFloat(e.modelEntity.scale.x),
-                                                    y: CGFloat(e.modelEntity.scale.y),
-                                                    z: CGFloat(e.modelEntity.scale.z),
-                                                    anchor: anchor
-                                                )
-                                                .rotation3DEffect(
-                                                    Rotation3D(simd_quatf(
-                                                        ix: e.modelEntity.orientation.vector.x,
-                                                        iy: e.modelEntity.orientation.vector.y,
-                                                        iz: e.modelEntity.orientation.vector.z,
-                                                        r: e.modelEntity.orientation.vector.w
-                                                    )),
-                                                    anchor: anchor
-                                                )
-
-                                                .position(x: x, y: y)
-                                                .offset(z: z)
-                                                .zIndex(e.zIndex)
-                                                .gesture(
-                                                    DragGesture()
-                                                        .onChanged { gesture in
-                                                            let scrollEnabled = view.isScrollEnabled()
-                                                            if !scrollEnabled, wv.isScrollEnabled() {
-                                                                if !view.dragStarted {
-                                                                    view.dragStarted = true
-                                                                    view.dragStart = (gesture.translation.height)
-                                                                }
-
-                                                                // TODO: this should have velocity
-                                                                let delta = view.dragStart - gesture.translation.height
-                                                                view.dragStart = gesture.translation.height
-                                                                wv.updateScrollOffset(delta: delta)
-                                                            }
-                                                        }
-                                                        .onEnded { _ in
-                                                            let scrollEnabled = view.isScrollEnabled()
-                                                            if !scrollEnabled, wv.isScrollEnabled() {
-                                                                view.dragStarted = false
-                                                                view.dragStart = 0
-
-                                                                wv.stopScrolling()
-                                                            }
-                                                        }
-                                                )
-                                        }
-                                    }
-                                }
-                            }
-
-                            // Model3D content
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
-                                    let _ = e.forceUpdate ? 0 : 0
-                                    SpatialModel3DView(parentYOffset: parentYOffset)
-                                        .environment(e)
-                                }
-                            }
-
-                            // SpatialView content
-                            ForEach(Array(childEntities.keys), id: \.self) { key in
-                                if let e = childEntities[key] {
+            ZStack {
+                OptionalClip(clipEnabled: ent.coordinateSpace != .ROOT && wv.isScrollEnabled()) {
+                    ZStack {
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                if let childWindowcomponent = e.getComponent(SpatialWindowComponent.self) {
                                     if e.coordinateSpace == .DOM {
-                                        if let viewComponent = e.getComponent(SpatialViewComponent.self) {
-                                            let _ = e.forceUpdate ? 0 : 0
-                                            let x = CGFloat(e.modelEntity.position.x)
-                                            let y = CGFloat(e.modelEntity.position.y - parentYOffset)
-                                            let z = CGFloat(e.modelEntity.position.z)
-
-                                            let width = CGFloat(viewComponent.resolutionX)
-                                            let height = CGFloat(viewComponent.resolutionY)
-
-                                            SpatialViewUI().environment(e).frame(width: width, height: height).scaleEffect(
+                                        let view = childWindowcomponent
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - (view.scrollWithParent ? parentYOffset : 0))
+                                        let z = CGFloat(e.modelEntity.position.z)
+                                        let width = CGFloat(view.resolutionX)
+                                        let height = CGFloat(view.resolutionY)
+                                        let anchor = view.rotationAnchor
+
+                                        // Matrix = MTranslate X MRotate X MScale
+                                        SpatialWebViewUI().environment(e)
+                                            .frame(width: width, height: height)
+                                            // use .offset(smallVal) to workaround for glassEffect not working and small width/height spatialDiv not working
+                                            .offset(z: 0.0001)
+                                            .scaleEffect(
                                                 x: CGFloat(e.modelEntity.scale.x),
                                                 y: CGFloat(e.modelEntity.scale.y),
-                                                z: CGFloat(e.modelEntity.scale.z)
+                                                z: CGFloat(e.modelEntity.scale.z),
+                                                anchor: anchor
                                             )
                                             .rotation3DEffect(
                                                 Rotation3D(simd_quatf(
@@ -143,44 +67,119 @@ struct SpatialWebViewUI: View {
                                                     iy: e.modelEntity.orientation.vector.y,
                                                     iz: e.modelEntity.orientation.vector.z,
                                                     r: e.modelEntity.orientation.vector.w
-                                                ))
-                                            ).position(x: x, y: y)
+                                                )),
+                                                anchor: anchor
+                                            )
+
+                                            .position(x: x, y: y)
                                             .offset(z: z)
-                                        }
+                                            .zIndex(e.zIndex)
+                                            .gesture(
+                                                DragGesture()
+                                                    .onChanged { gesture in
+                                                        let scrollEnabled = view.isScrollEnabled()
+                                                        if !scrollEnabled, wv.isScrollEnabled() {
+                                                            if !view.dragStarted {
+                                                                view.dragStarted = true
+                                                                view.dragStart = (gesture.translation.height)
+                                                            }
+
+                                                            // TODO: this should have velocity
+                                                            let delta = view.dragStart - gesture.translation.height
+                                                            view.dragStart = gesture.translation.height
+                                                            wv.updateScrollOffset(delta: delta)
+                                                        }
+                                                    }
+                                                    .onEnded { _ in
+                                                        let scrollEnabled = view.isScrollEnabled()
+                                                        if !scrollEnabled, wv.isScrollEnabled() {
+                                                            view.dragStarted = false
+                                                            view.dragStart = 0
+
+                                                            wv.stopScrolling()
+                                                        }
+                                                    }
+                                            )
                                     }
                                 }
                             }
-                        }.frame(maxWidth: .infinity, maxHeight: .infinity).frame(maxDepth: 0, alignment: .back).offset(z: 0)
-                    }
+                        }
 
-                    // Display the main webview
-                    if wv.didFailLoad {
-                        VStack {
-                            Text("Failed to load webpage. Is the server running?")
-                                .foregroundColor(.white)
-                            Button("Reload") {
-                                if let url = wv.getURL() {
-                                    wv.navigateToURL(url: url)
-                                } else {
-                                    logger.warning("Unable to reload URL")
+                        // Model3D content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                let _ = e.forceUpdate ? 0 : 0
+                                SpatialModel3DView(parentYOffset: parentYOffset)
+                                    .environment(e)
+                            }
+                        }
+
+                        // SpatialView content
+                        ForEach(Array(childEntities.keys), id: \.self) { key in
+                            if let e = childEntities[key] {
+                                if e.coordinateSpace == .DOM {
+                                    if let viewComponent = e.getComponent(SpatialViewComponent.self) {
+                                        let _ = e.forceUpdate ? 0 : 0
+                                        let x = CGFloat(e.modelEntity.position.x)
+                                        let y = CGFloat(e.modelEntity.position.y - parentYOffset)
+                                        let z = CGFloat(e.modelEntity.position.z)
+
+                                        let width = CGFloat(viewComponent.resolutionX)
+                                        let height = CGFloat(viewComponent.resolutionY)
+
+                                        SpatialViewUI().environment(e).frame(width: width, height: height).scaleEffect(
+                                            x: CGFloat(e.modelEntity.scale.x),
+                                            y: CGFloat(e.modelEntity.scale.y),
+                                            z: CGFloat(e.modelEntity.scale.z)
+                                        )
+                                        .rotation3DEffect(
+                                            Rotation3D(simd_quatf(
+                                                ix: e.modelEntity.orientation.vector.x,
+                                                iy: e.modelEntity.orientation.vector.y,
+                                                iz: e.modelEntity.orientation.vector.z,
+                                                r: e.modelEntity.orientation.vector.w
+                                            ))
+                                        ).position(x: x, y: y)
+                                        .offset(z: z)
+                                    }
                                 }
                             }
+                        }
+                    }.frame(maxWidth: .infinity, maxHeight: .infinity).frame(maxDepth: 0, alignment: .back).offset(z: 0)
+                }
+
+                // Display the main webview
+                if wv.didFailLoad {
+                    VStack {
+                        Text("Failed to load webpage. Is the server running?")
                             .foregroundColor(.white)
+                        Button("Reload") {
+                            if let url = wv.getURL() {
+                                wv.navigateToURL(url: url)
+                            } else {
+                                logger.warning("Unable to reload URL")
+                            }
                         }
-                        .frame(maxWidth: .infinity, maxHeight: .infinity).glassBackgroundEffect()
+                        .foregroundColor(.white)
+                    }
+                    .frame(maxWidth: .infinity, maxHeight: .infinity).glassBackgroundEffect()
 
-                    } else {
-                        wv.getView()
-                            .materialWithBorderCorner(
-                                wv.backgroundMaterial,
-                                wv.cornerRadius
-                            )
+                } else {
+                    wv.getView()
+                        .materialWithBorderCorner(
+                            wv.backgroundMaterial,
+                            wv.cornerRadius
+                        )
 
-                            .frame(maxWidth: .infinity, maxHeight: .infinity)
-                    }
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                }
+            }
+            .opacity(wv.opacity)
+            .hidden(!ent.visible)
+            .ornament(attachmentAnchor: .scene(.bottomTrailing), contentAlignment: .bottomTrailing) {
+                if wv.isRootWebview() {
+                    NavView(swc: wv)
                 }
-                .opacity(wv.opacity)
-                .hidden(!ent.visible)
             }
         }
     }

package/template/visionOSApp/web-spatial/views/VolumetricWindowContainerView.swift

@@ -1,3 +1,4 @@
+
 //
 //  VolumetricWindowContainerView.swift
 //  web-spatial
@@ -19,7 +20,10 @@ struct VolumetricWindowContainerView: View {
 
     var body: some View {
         OpenDismissHandlerUI().environment(windowContainerContent).onDisappear {
-            windowContainerContent.destroy()
+            // Don't destroy immersive space content as it is reused next time its opened
+            if windowContainerContent.id != SpatialWindowContainer.ImmersiveID {
+                windowContainerContent.destroy()
+            }
         }
 
         let entities = windowContainerContent.getEntities().filter { _, entity in

package/template/visionOSApp/web-spatial/views/ui/NavView.swift

@@ -10,79 +10,116 @@ import WebKit
 
 struct NavView: View {
     @State var swc: SpatialWindowComponent?
-    @State var showUrl: Bool = false
+    @State var showUrl: Bool = true
     @State private var showCopyTip = false
+    @State private var navWidth: CGFloat = 0
+    @State private var navHeight: CGFloat = 0
+    @State private var texWidth: CGFloat = 0
+    @State private var firstGetSize: Bool = true
 
     var body: some View {
         ZStack(alignment: .bottomTrailing) {
-            VStack(alignment: .trailing, spacing: 0) {
-                HStack(spacing: 10) {
-                    Text(pwaManager.name).padding(.trailing, 10)
+            ZStack {}.frame(width: navWidth, height: navHeight)
+            VStack(alignment: .trailing, spacing: 5) {
+                if showUrl {
+                    Text(pwaManager.name).padding(10)
                     if pwaManager.display == .minimal {
-                        Button(action: {
-                            swc?.goBack()
-                        }, label: {
-                            Image(systemName: "arrow.left")
-                        })
-                        .disabled(!swc!.canGoBack)
-                        Button(action: {
-                            swc?.goForward()
-                        }, label: {
-                            Image(systemName: "arrow.right")
+                        HStack(spacing: 5) {
+                            Button(action: {
+                                swc?.goBack()
+                            }, label: {
+                                Image(systemName: "arrow.left")
+                            })
+                            .disabled(!(swc?.canGoBack ?? false))
+                            Button(action: {
+                                swc?.goForward()
+                            }, label: {
+                                Image(systemName: "arrow.right")
+                            })
+                            .disabled(!(swc?.canGoBack ?? false))
+                            Button(action: {
+                                swc?.reload()
+                            }, label: {
+                                Image(systemName: "arrow.clockwise")
+                            })
+                            Button(
+                                action: {
+                                    swc?
+                                        .navigateToURL(
+                                            url: URL(string: pwaManager.start_url)!
+                                        )
+                                },
+                                label: {
+                                    Image(systemName: "house.fill")
+                                }
+                            )
+                        }
+                    }
+                }
+                HStack(spacing: 5) {
+                    if showUrl {
+                        Text(
+                            swc?.getURL()?.absoluteString ?? "http://localhost:5173/"
+                        )
+                        .padding()
+                        .lineLimit(1)
+                        .overlay(GeometryReader { geo -> AnyView in
+                            DispatchQueue.main.async {
+                                if geo.size.width > 0 {
+                                    texWidth = .minimum(300, geo.size.width)
+                                }
+                            }
+                            return AnyView(EmptyView())
                         })
-                        .disabled(!swc!.canGoForward)
+                        .frame(width: texWidth == 0 ? .infinity : texWidth)
                         Button(action: {
-                            swc?.reload()
+                            UIPasteboard.general.string = swc?.getURL()?.absoluteString ?? ""
+                            showCopyTip = true
+                            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
+                                showCopyTip = false
+                            }
                         }, label: {
-                            Image(systemName: "arrow.clockwise")
+                            Text("copy")
                         })
-                        Button(
-                            action: {
-                                swc?
-                                    .navigateToURL(
-                                        url: URL(string: pwaManager.start_url)!
-                                    )
-                            },
-                            label: {
-                                Image(systemName: "house.fill")
-                            }
-                        )
                     }
+
                     Button(action: {
-                        showUrl.toggle()
+                        withAnimation(.easeInOut(duration: 0.5)) {
+                            showUrl.toggle()
+                        }
                     }, label: {
-                        Image(systemName: "info.circle")
+                        Image(systemName: showUrl ? "xmark" : "info")
                     })
                 }
-            }.padding().glassBackgroundEffect(in: .rect).cornerRadius(15)
-            HStack(spacing: 0) {
-                Text(
-                    swc?.getURL()?.absoluteString ?? ""
-                )
-                .padding()
-                Button(action: {
-                    UIPasteboard.general.string = swc?.getURL()?.absoluteString ?? ""
-                    showCopyTip = true
-                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
-                        showCopyTip = false
+            }
+            .padding()
+            .glassBackgroundEffect(in: RoundedRectangle(cornerRadius: 15))
+            .popover(isPresented: $showCopyTip) {
+                Text("copied！")
+                    .padding()
+                    .cornerRadius(10)
+            }
+            .overlay(GeometryReader { geo -> AnyView in
+                DispatchQueue.main.async {
+                    if firstGetSize {
+                        navWidth = geo.size.width
+                        navHeight = geo.size.height
+                        firstGetSize.toggle()
+                        showUrl.toggle()
+                        print(navWidth)
                     }
-                }, label: {
-                    Text("copy")
-                }).padding(.trailing, 5)
-
-                Button(action: {
-                    showUrl = false
-                }, label: {
-                    Text("X")
-                })
-            }.glassBackgroundEffect(in: .rect).cornerRadius(15).offset(y: 35).opacity(showUrl ? 1 : 0).animation(.easeOut, value: 0.2)
-        }
-        .zIndex(10) // closer to user
-        .popover(isPresented: $showCopyTip) {
-            Text("copied！")
-                .padding()
-                .background(.ultraThinMaterial)
-                .cornerRadius(10)
+                }
+                return AnyView(EmptyView())
+            })
+            .opacity(firstGetSize ? 0 : 1)
         }
+        .frame(width: firstGetSize ? .infinity : navWidth, height: firstGetSize ? .infinity : navHeight)
+        .offset(z: 30)
+    }
+}
+
+struct NavView_Previews: PreviewProvider {
+    static var previews: some View {
+        NavView()
     }
 }

package/template/visionOSApp/web-spatial/web_spatialApp.swift

@@ -92,24 +92,47 @@ struct web_spatialApp: App {
                     windowData.windowContainerID, windowData
                 )
                 PlainWindowContainerView().environment(wg)
-                    // https://stackoverflow.com/questions/78567737/how-to-get-initial-windowgroup-to-reopen-on-launch-visionos
-                    .handlesExternalEvents(preferring: [], allowing: [])
+                // we no longer need the initial windowGroup to live all the time
+                // https://stackoverflow.com/questions/78567737/how-to-get-initial-windowgroup-to-reopen-on-launch-visionos
+//                    .handlesExternalEvents(preferring: [], allowing: [])
             }
-        } defaultValue: {
-            WindowContainerData(windowStyle: "Plain", windowContainerID: SpatialWindowContainer.getRootID())
-
-        }.windowStyle(.plain).onChange(of: scenePhase) { oldPhase, newPhase in
+        }
+        defaultValue: {
+            WindowContainerData(
+                windowStyle: "Plain",
+                windowContainerID: SpatialWindowContainer.getRootID()
+            )
+        }
+        .windowStyle(.plain).onChange(of: scenePhase) {
+            oldPhase,
+                newPhase in
             if oldPhase == .background && newPhase == .inactive {
                 if initialLaunch {
                     // App initial open
                     initialLaunch = false
                 } else {
                     // App reopened
+
                     let fileUrl = getFileUrl()
-                    root?.navigateToURL(url: fileUrl)
-                    rootWGD.setSize.send(DefaultPlainWindowContainerSize)
+                    if let awid = SpatialWindowContainer.firstActivePlainWindowContainerId,
+                       let wc = SpatialWindowContainer.getSpatialWindowContainer(
+                           awid
+                       )
+                    {
+                        let rootEntity = wc.getEntities().filter {
+                            $0.value.getComponent(SpatialWindowComponent.self) != nil && $0.value.coordinateSpace == .ROOT
+                        }.first?.value
+
+                        if let wv = rootEntity?.getComponent(SpatialWindowComponent.self) {
+                            wv.navigateToURL(url: fileUrl)
+                        }
+                        // reset to mainScene size
+                        wgm.setToMainSceneCfg()
+                        wc.setSize.send(getDefaultSize())
+                    }
                 }
             }
+
         }.defaultSize(
             getDefaultSize()
         ).windowResizability(
@@ -123,8 +146,9 @@ struct web_spatialApp: App {
         }.windowStyle(.volumetric).defaultSize(width: 1, height: 1, depth: 1, in: .meters)
 
         ImmersiveSpace(id: "ImmersiveSpace") {
-            let wg = SpatialWindowContainer.getImmersiveWindowContainer()
-            VolumetricWindowContainerView().environment(wg).handlesExternalEvents(preferring: [], allowing: [])
+            if let wg = SpatialWindowContainer.getImmersiveWindowContainer() {
+                VolumetricWindowContainerView().environment(wg).handlesExternalEvents(preferring: [], allowing: [])
+            }
         }
 
         WindowGroup(id: "loading") {