Compare commits

...

3 Commits

Author SHA1 Message Date
99c62bf0f0 Revert "Switch projects fix (#3310)"
This reverts commit dff3848a00.
2024-08-07 13:50:59 +02:00
ee20d4781f Revert "Don't set firstRender from within a routeLoader (#3311)"
This reverts commit 4bfbecd3e7.
2024-08-07 13:50:40 +02:00
1e80738b2a Revert "Persist theme - Reload everything on a disconnect (#3250)"
This reverts commit 3f082c8222.
2024-08-07 13:50:26 +02:00
15 changed files with 719 additions and 999 deletions

View File

@ -1,5 +1,4 @@
import { useState, useEffect } from 'react'
import { EngineCommandManagerEvents } from 'lang/std/engineConnection'
import { engineCommandManager, sceneInfra } from 'lib/singletons'
import { throttle, isReducedMotion } from 'lib/utils'
@ -14,12 +13,9 @@ export const CamToggle = () => {
const [enableRotate, setEnableRotate] = useState(true)
useEffect(() => {
engineCommandManager.addEventListener(
EngineCommandManagerEvents.SceneReady,
async () => {
sceneInfra.camControls.dollyZoom(fov)
}
)
engineCommandManager.waitForReady.then(async () => {
sceneInfra.camControls.dollyZoom(fov)
})
}, [])
const toggleCamera = () => {

View File

@ -176,7 +176,6 @@ const FileTreeItem = ({
)
codeManager.writeToFile()
// Prevent seeing the model built one piece at a time when changing files
kclManager.isFirstRender = true
kclManager.executeCode(true).then(() => {
kclManager.isFirstRender = false

View File

@ -47,7 +47,7 @@ const Loading = ({ children }: React.PropsWithChildren) => {
onConnectionStateChange as EventListener
)
}
}, [engineCommandManager, engineCommandManager.engineConnection])
}, [])
useEffect(() => {
// Don't set long loading time if there's a more severe error

View File

@ -78,12 +78,7 @@ import { err, trap } from 'lib/trap'
import { useCommandsContext } from 'hooks/useCommandsContext'
import { modelingMachineEvent } from 'editor/manager'
import { hasValidFilletSelection } from 'lang/modifyAst/addFillet'
import {
ExportIntent,
EngineConnectionState,
EngineConnectionStateType,
EngineConnectionEvents,
} from 'lang/std/engineConnection'
import { ExportIntent } from 'lang/std/engineConnection'
type MachineContext<T extends AnyStateMachine> = {
state: StateFrom<T>
@ -159,10 +154,7 @@ export const ModelingMachineProvider = ({
sceneInfra.camControls.syncDirection = 'engineToClient'
store.videoElement?.pause()
kclManager.isFirstRender = true
kclManager.executeCode().then(() => {
kclManager.isFirstRender = false
if (engineCommandManager.engineConnection?.idleMode) return
store.videoElement?.play().catch((e) => {
@ -917,19 +909,15 @@ export const ModelingMachineProvider = ({
}
)
useSetupEngineManager(
streamRef,
useSetupEngineManager(streamRef, token, {
pool: pool,
theme: theme.current,
highlightEdges: highlightEdges.current,
enableSSAO: enableSSAO.current,
modelingSend,
modelingState.context,
{
pool: pool,
theme: theme.current,
highlightEdges: highlightEdges.current,
enableSSAO: enableSSAO.current,
showScaleGrid: showScaleGrid.current,
},
token
)
modelingContext: modelingState.context,
showScaleGrid: showScaleGrid.current,
})
useEffect(() => {
kclManager.registerExecuteCallback(() => {
@ -957,25 +945,17 @@ export const ModelingMachineProvider = ({
}, [modelingState.context.selectionRanges])
useEffect(() => {
const onConnectionStateChanged = ({ detail }: CustomEvent) => {
const offlineCallback = () => {
// If we are in sketch mode we need to exit it.
// TODO: how do i check if we are in a sketch mode, I only want to call
// this then.
if (detail.type === EngineConnectionStateType.Disconnecting) {
modelingSend({ type: 'Cancel' })
}
modelingSend({ type: 'Cancel' })
}
engineCommandManager.engineConnection?.addEventListener(
EngineConnectionEvents.ConnectionStateChanged,
onConnectionStateChanged as EventListener
)
window.addEventListener('offline', offlineCallback)
return () => {
engineCommandManager.engineConnection?.removeEventListener(
EngineConnectionEvents.ConnectionStateChanged,
onConnectionStateChanged as EventListener
)
window.removeEventListener('offline', offlineCallback)
}
}, [engineCommandManager.engineConnection, modelingSend])
}, [modelingSend])
// Allow using the delete key to delete solids
useHotkeys(['backspace', 'delete', 'del'], () => {

View File

@ -64,6 +64,13 @@ export const KclEditorPane = () => {
: context.app.theme.current
const { copilotLSP, kclLSP } = useLspContext()
useEffect(() => {
if (typeof window === 'undefined') return
const onlineCallback = () => kclManager.executeCode(true)
window.addEventListener('online', onlineCallback)
return () => window.removeEventListener('online', onlineCallback)
}, [])
// Since these already exist in the editor, we don't need to define them
// with the wrapper.
useHotkeys('mod+z', (e) => {

View File

@ -191,7 +191,6 @@ export const SettingsAuthProviderBase = ({
allSettingsIncludesUnitChange ||
resetSettingsIncludesUnitChange
) {
// Unit changes requires a re-exec of code
kclManager.isFirstRender = true
kclManager.executeCode(true).then(() => {
kclManager.isFirstRender = false

View File

@ -11,27 +11,21 @@ import { sendSelectEventToEngine } from 'lib/selections'
import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
import { useAppStream } from 'AppState'
import {
EngineCommandManagerEvents,
EngineConnectionStateType,
DisconnectingType,
} from 'lang/std/engineConnection'
enum StreamState {
Playing = 'playing',
Paused = 'paused',
Resuming = 'resuming',
Unset = 'unset',
}
export const Stream = () => {
const [isLoading, setIsLoading] = useState(true)
const [isFirstRender, setIsFirstRender] = useState(kclManager.isFirstRender)
const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
const videoRef = useRef<HTMLVideoElement>(null)
const { settings } = useSettingsAuthContext()
const { state, send, context } = useModelingContext()
const { mediaStream } = useAppStream()
const { overallState, immediateState } = useNetworkContext()
const [streamState, setStreamState] = useState(StreamState.Unset)
const [isFreezeFrame, setIsFreezeFrame] = useState(false)
const [isPaused, setIsPaused] = useState(false)
const IDLE = settings.context.app.streamIdleMode.current
@ -44,7 +38,10 @@ export const Stream = () => {
immediateState.type === EngineConnectionStateType.Disconnecting &&
immediateState.value.type === DisconnectingType.Pause
) {
setStreamState(StreamState.Paused)
setIsPaused(true)
}
if (immediateState.type === EngineConnectionStateType.Connecting) {
setIsPaused(false)
}
}, [immediateState])
@ -79,11 +76,8 @@ export const Stream = () => {
let timeoutIdIdleA: ReturnType<typeof setTimeout> | undefined = undefined
const teardown = () => {
// Already paused
if (streamState === StreamState.Paused) return
videoRef.current?.pause()
setStreamState(StreamState.Paused)
setIsFreezeFrame(true)
sceneInfra.modelingSend({ type: 'Cancel' })
// Give video time to pause
window.requestAnimationFrame(() => {
@ -97,7 +91,7 @@ export const Stream = () => {
timeoutIdIdleA = setTimeout(teardown, IDLE_TIME_MS)
} else if (!engineCommandManager.engineConnection?.isReady()) {
clearTimeout(timeoutIdIdleA)
setStreamState(StreamState.Resuming)
engineCommandManager.engineConnection?.connect(true)
}
}
@ -112,15 +106,10 @@ export const Stream = () => {
let timeoutIdIdleB: ReturnType<typeof setTimeout> | undefined = undefined
const onAnyInput = () => {
if (streamState === StreamState.Playing) {
// Clear both timers
clearTimeout(timeoutIdIdleA)
clearTimeout(timeoutIdIdleB)
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
}
if (streamState === StreamState.Paused) {
setStreamState(StreamState.Resuming)
}
// Clear both timers
clearTimeout(timeoutIdIdleA)
clearTimeout(timeoutIdIdleB)
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
}
if (IDLE) {
@ -135,27 +124,7 @@ export const Stream = () => {
timeoutIdIdleB = setTimeout(teardown, IDLE_TIME_MS)
}
const onSceneReady = () => {
kclManager.isFirstRender = true
setStreamState(StreamState.Playing)
kclManager.executeCode(true).then(() => {
videoRef.current?.play().catch((e) => {
console.warn('Video playing was prevented', e, videoRef.current)
})
kclManager.isFirstRender = false
})
}
engineCommandManager.addEventListener(
EngineCommandManagerEvents.SceneReady,
onSceneReady
)
return () => {
engineCommandManager.removeEventListener(
EngineCommandManagerEvents.SceneReady,
onSceneReady
)
globalThis?.window?.document?.removeEventListener('paste', handlePaste, {
capture: true,
})
@ -183,11 +152,10 @@ export const Stream = () => {
)
}
}
}, [IDLE, streamState])
}, [IDLE])
// HOT FIX: for https://github.com/KittyCAD/modeling-app/pull/3250
// TODO review if there's a better way to play the stream again.
useEffect(() => {
setIsFirstRender(kclManager.isFirstRender)
if (!kclManager.isFirstRender)
setTimeout(() =>
// execute in the next event loop
@ -195,6 +163,7 @@ export const Stream = () => {
console.warn('Video playing was prevented', e, videoRef.current)
})
)
setIsFreezeFrame(!kclManager.isFirstRender)
}, [kclManager.isFirstRender])
useEffect(() => {
@ -319,8 +288,7 @@ export const Stream = () => {
<ClientSideScene
cameraControls={settings.context.modeling.mouseControls.current}
/>
{(streamState === StreamState.Paused ||
streamState === StreamState.Resuming) && (
{isPaused && (
<div className="text-center absolute inset-0">
<div
className="flex flex-col items-center justify-center h-screen"
@ -342,19 +310,16 @@ export const Stream = () => {
/>
</svg>
</div>
<p className="text-base mt-2 text-primary bold">
{streamState === StreamState.Paused && 'Paused'}
{streamState === StreamState.Resuming && 'Resuming'}
</p>
<p className="text-base mt-2 text-primary bold">Paused</p>
</div>
</div>
)}
{(!isNetworkOkay || isLoading || kclManager.isFirstRender) && (
{(!isNetworkOkay || isLoading || isFirstRender) && !isFreezeFrame && (
<div className="text-center absolute inset-0">
<Loading>
{!isNetworkOkay && !isLoading && !kclManager.isFirstRender ? (
{!isNetworkOkay && !isLoading ? (
<span data-testid="loading-stream">Stream disconnected...</span>
) : !isLoading && kclManager.isFirstRender ? (
) : !isLoading && isFirstRender ? (
<span data-testid="loading-stream">Building scene...</span>
) : (
<span data-testid="loading-stream">Loading stream...</span>

View File

@ -4,30 +4,29 @@ import { deferExecution } from 'lib/utils'
import { Themes } from 'lib/theme'
import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
import { useModelingContext } from './useModelingContext'
import { useNetworkContext } from 'hooks/useNetworkContext'
import { useAppState, useAppStream } from 'AppState'
import { SettingsViaQueryString } from 'lib/settings/settingsTypes'
import {
EngineConnectionStateType,
EngineConnectionEvents,
DisconnectingType,
} from 'lang/std/engineConnection'
export function useSetupEngineManager(
streamRef: React.RefObject<HTMLDivElement>,
modelingSend: ReturnType<typeof useModelingContext>['send'],
modelingContext: ReturnType<typeof useModelingContext>['context'],
token?: string,
settings = {
pool: null,
theme: Themes.System,
highlightEdges: true,
enableSSAO: true,
modelingSend: (() => {}) as any,
modelingContext: {} as any,
showScaleGrid: false,
} as SettingsViaQueryString,
token?: string
} as {
pool: string | null
theme: Themes
highlightEdges: boolean
enableSSAO: boolean
modelingSend: ReturnType<typeof useModelingContext>['send']
modelingContext: ReturnType<typeof useModelingContext>['context']
showScaleGrid: boolean
}
) {
const networkContext = useNetworkContext()
const { pingPongHealth, immediateState } = networkContext
const { setAppState } = useAppState()
const { setMediaStream } = useAppStream()
@ -36,10 +35,10 @@ export function useSetupEngineManager(
if (settings.pool) {
// override the pool param (?pool=) to request a specific engine instance
// from a particular pool.
engineCommandManager.settings.pool = settings.pool
engineCommandManager.pool = settings.pool
}
const startEngineInstance = () => {
const startEngineInstance = (restart: boolean = false) => {
// Load the engine command manager once with the initial width and height,
// then we do not want to reload it.
const { width: quadWidth, height: quadHeight } = getDimensions(
@ -51,6 +50,14 @@ export function useSetupEngineManager(
setIsStreamReady: (isStreamReady) => setAppState({ isStreamReady }),
width: quadWidth,
height: quadHeight,
executeCode: () => {
// We only want to execute the code here that we already have set.
// Nothing else.
kclManager.isFirstRender = true
return kclManager.executeCode(true).then(() => {
kclManager.isFirstRender = false
})
},
token,
settings,
makeDefaultPlanes: () => {
@ -60,7 +67,7 @@ export function useSetupEngineManager(
return modifyGrid(kclManager.engineCommandManager, hidden)
},
})
modelingSend({
settings.modelingSend({
type: 'Set context',
data: {
streamDimensions: {
@ -83,27 +90,9 @@ export function useSetupEngineManager(
}, [
streamRef?.current?.offsetWidth,
streamRef?.current?.offsetHeight,
modelingSend,
settings.modelingSend,
])
useEffect(() => {
if (pingPongHealth === 'TIMEOUT') {
engineCommandManager.tearDown()
}
}, [pingPongHealth])
useEffect(() => {
const intervalId = setInterval(() => {
if (immediateState.type === EngineConnectionStateType.Disconnected) {
engineCommandManager.engineConnection = undefined
startEngineInstance()
}
}, 3000)
return () => {
clearInterval(intervalId)
}
}, [immediateState])
useEffect(() => {
const handleResize = deferExecution(() => {
const { width, height } = getDimensions(
@ -111,14 +100,14 @@ export function useSetupEngineManager(
streamRef?.current?.offsetHeight ?? 0
)
if (
modelingContext.store.streamDimensions.streamWidth !== width ||
modelingContext.store.streamDimensions.streamHeight !== height
settings.modelingContext.store.streamDimensions.streamWidth !== width ||
settings.modelingContext.store.streamDimensions.streamHeight !== height
) {
engineCommandManager.handleResize({
streamWidth: width,
streamHeight: height,
})
modelingSend({
settings.modelingSend({
type: 'Set context',
data: {
streamDimensions: {
@ -131,7 +120,7 @@ export function useSetupEngineManager(
}, 500)
const onOnline = () => {
startEngineInstance()
startEngineInstance(true)
}
const onVisibilityChange = () => {
@ -147,18 +136,10 @@ export function useSetupEngineManager(
window.document.addEventListener('visibilitychange', onVisibilityChange)
const onAnyInput = () => {
const isEngineNotReadyOrConnecting =
if (
!engineCommandManager.engineConnection?.isReady() &&
!engineCommandManager.engineConnection?.isConnecting()
const conn = engineCommandManager.engineConnection
const isStreamPaused =
conn?.state.type === EngineConnectionStateType.Disconnecting &&
conn?.state.value.type === DisconnectingType.Pause
if (isEngineNotReadyOrConnecting || isStreamPaused) {
engineCommandManager.engineConnection = undefined
) {
startEngineInstance()
}
}
@ -169,6 +150,7 @@ export function useSetupEngineManager(
window.document.addEventListener('touchstart', onAnyInput)
const onOffline = () => {
kclManager.isFirstRender = true
engineCommandManager.tearDown()
}

View File

@ -211,6 +211,7 @@ export class KclManager {
type: string
}
): Promise<void> {
await this?.engineCommandManager?.waitForReady
const currentExecutionId = executionId || Date.now()
this._cancelTokens.set(currentExecutionId, false)
@ -300,6 +301,7 @@ export class KclManager {
codeManager.updateCodeEditor(newCode)
// Write the file to disk.
await codeManager.writeToFile()
await this?.engineCommandManager?.waitForReady
this._ast = { ...newAst }
const { logs, errors, programMemory } = await executeAst({

View File

@ -14,10 +14,6 @@ import {
} from './artifactGraph'
import { err } from 'lib/trap'
import { engineCommandManager, kclManager } from 'lib/singletons'
import {
EngineCommandManagerEvents,
EngineConnectionEvents,
} from 'lang/std/engineConnection'
import { CI, VITE_KC_DEV_TOKEN } from 'env'
import fsp from 'fs/promises'
import fs from 'fs'
@ -117,44 +113,42 @@ beforeAll(async () => {
}
// THESE TEST WILL FAIL without VITE_KC_DEV_TOKEN set in .env.development.local
await new Promise((resolve) => {
engineCommandManager.start({
// disableWebRTC: true,
token: VITE_KC_DEV_TOKEN,
// there does seem to be a minimum resolution, not sure what it is but 256 works ok.
width: 256,
height: 256,
makeDefaultPlanes: () => makeDefaultPlanes(engineCommandManager),
setMediaStream: () => {},
setIsStreamReady: () => {},
modifyGrid: async () => {},
callbackOnEngineLiteConnect: async () => {
const cacheEntries = Object.entries(codeToWriteCacheFor) as [
CodeKey,
string
][]
const cacheToWriteToFileTemp: Partial<CacheShape> = {}
for (const [codeKey, code] of cacheEntries) {
const ast = parse(code)
if (err(ast)) {
console.error(ast)
return Promise.reject(ast)
}
const result = await kclManager.executeAst(ast)
cacheToWriteToFileTemp[codeKey] = {
orderedCommands: engineCommandManager.orderedCommands,
responseMap: engineCommandManager.responseMap,
}
}
const cache = JSON.stringify(cacheToWriteToFileTemp)
await fsp.mkdir(pathStart, { recursive: true })
await fsp.writeFile(fullPath, cache)
resolve(true)
},
})
engineCommandManager.start({
disableWebRTC: true,
token: VITE_KC_DEV_TOKEN,
// there does seem to be a minimum resolution, not sure what it is but 256 works ok.
width: 256,
height: 256,
executeCode: () => {},
makeDefaultPlanes: () => makeDefaultPlanes(engineCommandManager),
setMediaStream: () => {},
setIsStreamReady: () => {},
modifyGrid: async () => {},
})
await engineCommandManager.waitForReady
const cacheEntries = Object.entries(codeToWriteCacheFor) as [
CodeKey,
string
][]
const cacheToWriteToFileTemp: Partial<CacheShape> = {}
for (const [codeKey, code] of cacheEntries) {
const ast = parse(code)
if (err(ast)) {
console.error(ast)
throw ast
}
await kclManager.executeAst(ast)
cacheToWriteToFileTemp[codeKey] = {
orderedCommands: engineCommandManager.orderedCommands,
responseMap: engineCommandManager.responseMap,
}
}
const cache = JSON.stringify(cacheToWriteToFileTemp)
await fsp.mkdir(pathStart, { recursive: true })
await fsp.writeFile(fullPath, cache)
}, 20_000)
afterAll(() => {

File diff suppressed because it is too large Load Diff

View File

@ -63,7 +63,7 @@ export class CoreDumpManager {
// Get the backend pool we've requested.
pool(): string {
return this.engineCommandManager.settings.pool || ''
return this.engineCommandManager.pool || ''
}
// Get the os information.

View File

@ -104,9 +104,11 @@ export const fileLoader: LoaderFunction = async ({
// the file system and not the editor.
codeManager.updateCurrentFilePath(current_file_path)
codeManager.updateCodeStateEditor(code)
// We don't want to call await on execute code since we don't want to block the UI
kclManager.executeCode(true)
kclManager.isFirstRender = true
kclManager.executeCode(true).then(() => {
kclManager.isFirstRender = false
})
// Set the file system manager to the project path
// So that WASM gets an updated path for operations

View File

@ -2,15 +2,6 @@ import { type Models } from '@kittycad/lib'
import { Setting, settings } from './initialSettings'
import { AtLeast, PathValue, Paths } from 'lib/types'
import { CommandArgumentConfig } from 'lib/commandTypes'
import { Themes } from 'lib/theme'
export interface SettingsViaQueryString {
pool: string | null
theme: Themes
highlightEdges: boolean
enableSSAO: boolean
showScaleGrid: boolean
}
export enum UnitSystem {
Imperial = 'imperial',

View File

@ -1,8 +1,5 @@
import { Program, ProgramMemory, _executor, SourceRange } from '../lang/wasm'
import {
EngineCommandManager,
EngineCommandManagerEvents,
} from 'lang/std/engineConnection'
import { EngineCommandManager } from 'lang/std/engineConnection'
import { EngineCommand } from 'lang/std/artifactGraph'
import { Models } from '@kittycad/lib'
import { v4 as uuidv4 } from 'uuid'
@ -85,6 +82,7 @@ export async function enginelessExecutor(
setIsStreamReady: () => {},
setMediaStream: () => {},
}) as any as EngineCommandManager
await mockEngineCommandManager.waitForReady
mockEngineCommandManager.startNewSession()
const programMemory = await _executor(ast, pm, mockEngineCommandManager, true)
await mockEngineCommandManager.waitForAllCommands()
@ -101,6 +99,7 @@ export async function executor(
setMediaStream: () => {},
width: 0,
height: 0,
executeCode: () => {},
makeDefaultPlanes: () => {
return new Promise((resolve) => resolve(defaultPlanes))
},
@ -108,21 +107,9 @@ export async function executor(
return new Promise((resolve) => resolve())
},
})
return new Promise((resolve) => {
engineCommandManager.addEventListener(
EngineCommandManagerEvents.SceneReady,
async () => {
engineCommandManager.startNewSession()
const programMemory = await _executor(
ast,
pm,
engineCommandManager,
false
)
await engineCommandManager.waitForAllCommands()
Promise.resolve(programMemory)
}
)
})
await engineCommandManager.waitForReady
engineCommandManager.startNewSession()
const programMemory = await _executor(ast, pm, engineCommandManager, false)
await engineCommandManager.waitForAllCommands()
return programMemory
}