Franknoirot/multi file (#844)
* Fix unrelated bug, settings button in the home sidebar
doesn't go to the home settings after my previous fixes to routes
* Turn on "Replay Onboarding" button in home settings
* Add icons
* Add Tooltip component
* Rough-in of sidebar styling and add initial File Tree
* Polish basic styling
* Show nested files and directories
* Add tests
* use camelCase for entrypointMetadata
* Add ability to switch files via links
* Revert "Improve Prop Typings for Modals. Remove instances of `any`. (… (#813)
Revert "Improve Prop Typings for Modals. Remove instances of `any`. (#792)"
This reverts commit 629f326f4c.
* ffmpeg instructions (#814)
* Formatting
* Remove folder names from display in app header
* Highlight current file, open folders it's within
* Navigate on double click, delete on Cmd + Esc
+ highlight focused folders
* Migrate to an XState machine, add create new file
* Add ability to create folders (with naive names)
+ remove command bar stuff for now
* Use route loader data to instantiate the kcl code
* Clean up some unused things
* Add ability to rename files
* Add ability to rename folders
* Add keyboard shortcuts for creating files/folders
* Tooltip style tweaks
* Polish + re-execute when switching files with a connection
* Reset code before navigating via file tree
* Don't invoke `readProject` if you're in a browser
* Show files and folders for projects on home page
* Don't highlight folders further down the file tree
* @jgomez720 and @jessfraz feedback:
+ indentation markers
+ proper file icon
+ bump down font size
+ touch up colors
* Tune down spacing, allow scroll overflow
* Fix formatting
* Update src/lib/tauriFS.ts
* Add a confirmation dialog when deleting
Signed-off-by: Frank Noirot <frank@kittycad.io>
---------
Signed-off-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>
This commit is contained in:
Frank Noirot
GitHub
3
public/Icon/Icon/Projects/Create File.svg
Normal file
3
public/Icon/Icon/Projects/Create File.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3H4.5H11H11.2071L11.3536 3.14645L15.8536 7.64646L16 7.7929V8.00001V11.3773C15.6992 11.1362 15.3628 10.9376 15 10.7908V8.50001H11H10.5V8.00001V4H5V16H9.79076C9.93763 16.3628 10.1362 16.6992 10.3773 17H4.5H4V16.5V3.5V3ZM11.5 4.70711L14.2929 7.50001H11.5V4.70711ZM13 12V14H11V15H13V17H14V15H16V14H14V12H13Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 475 B |
3
public/Icon/Icon/Projects/Create Folder.svg
Normal file
3
public/Icon/Icon/Projects/Create Folder.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3.5H4H7H7.16667L7.3 3.6L9.16667 5H16H16.5V5.5V7.5V10.3773C16.1992 10.1362 15.8628 9.93763 15.5 9.79076V8H4.5V15.5H10.5351C10.7529 15.8764 11.0302 16.2141 11.3542 16.5H4H3.5V16V7.5V4V3.5ZM4.5 4.5V7H15.5V6H9H8.83333L8.7 5.9L6.83333 4.5H4.5ZM13.5 11V13H11.5V14H13.5V16H14.5V14H16.5V13H14.5V11H13.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 469 B |
3
public/Icon/Icon/Projects/File.svg
Normal file
3
public/Icon/Icon/Projects/File.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 3.5H4.5V16.5H15.5V8.00001M11 3.5L15.5 8.00001M11 3.5V8.00001H15.5" stroke="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
3
public/kcl-icon.svg
Normal file
3
public/kcl-icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 0H0V40H40V0ZM7.34715 27.2143V15.6577L2.976 15.987V36.7949H7.34715V32.0645L8.00582 31.5256C8.24533 31.326 8.47487 31.1264 8.69442 30.9268L12.1075 36.7949H17.0475C16.1893 35.3978 15.311 33.9906 14.4128 32.5735C13.5346 31.1563 12.6664 29.7392 11.8081 28.3221L15.8499 24.9389C15.4308 24.4399 15.0017 23.931 14.5625 23.412L13.3051 21.8552L7.34715 27.2143ZM22.2581 26.6754C22.8769 25.9169 23.6753 25.5377 24.6533 25.5377C25.272 25.5377 25.8309 25.6175 26.3299 25.7772C26.8289 25.9169 27.4177 26.1465 28.0963 26.4658L29.3238 23.3521C28.5853 22.7933 27.7371 22.4041 26.779 22.1845C25.8409 21.9649 25.0625 21.8552 24.4437 21.8552C22.0885 21.8552 20.2223 22.5537 18.845 23.9509C17.4878 25.3281 16.8092 27.1944 16.8092 29.5496C16.8092 31.9048 17.4878 33.7611 18.845 35.1183C20.2223 36.4756 22.0885 37.1542 24.4437 37.1542C25.0625 37.1542 25.8509 37.0444 26.8089 36.8249C27.767 36.6053 28.6053 36.2161 29.3238 35.6572L28.0963 32.5435C27.4177 32.8629 26.8289 33.0924 26.3299 33.2321C25.8309 33.3718 25.272 33.4417 24.6533 33.4417C23.6753 33.4417 22.8769 33.0924 22.2581 32.3938C21.6594 31.6753 21.36 30.7272 21.36 29.5496C21.36 28.372 21.6594 27.4139 22.2581 26.6754ZM36.2796 36.7949V15.6577L31.9085 15.987V36.7949H36.2796Z" fill="#D0FF00"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
12
src/App.tsx
12
src/App.tsx
@ -35,7 +35,7 @@ import { kclManager } from 'lang/KclSinglton'
|
||||
import { useModelingContext } from 'hooks/useModelingContext'
|
||||
|
||||
export function App() {
|
||||
const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
|
||||
const { code: loadedCode, project, file } = useLoaderData() as IndexLoaderData
|
||||
|
||||
useHotKeyListener()
|
||||
const {
|
||||
@ -86,7 +86,13 @@ export function App() {
|
||||
// on mount, and overwrite any locally-stored code
|
||||
useEffect(() => {
|
||||
if (isTauri() && loadedCode !== null) {
|
||||
kclManager.setCode(loadedCode)
|
||||
if (kclManager.engineCommandManager.engineConnection?.isReady()) {
|
||||
// If the engine is ready, promptly execute the loaded code
|
||||
kclManager.setCodeAndExecute(loadedCode)
|
||||
} else {
|
||||
// Otherwise, just set the code and wait for the connection to complete
|
||||
kclManager.setCode(loadedCode)
|
||||
}
|
||||
}
|
||||
return () => {
|
||||
// Clear code on unmount if in desktop app
|
||||
@ -182,7 +188,7 @@ export function App() {
|
||||
paneOpacity +
|
||||
(buttonDownInStream ? ' pointer-events-none' : '')
|
||||
}
|
||||
project={project}
|
||||
project={{ project, file }}
|
||||
enableMenu={true}
|
||||
/>
|
||||
<ModalContainer />
|
||||
|
||||
@ -42,6 +42,7 @@ import { TEST, VITE_KC_SENTRY_DSN } from './env'
|
||||
import * as Sentry from '@sentry/react'
|
||||
import ModelingMachineProvider from 'components/ModelingMachineProvider'
|
||||
import { KclContextProvider } from 'lang/KclSinglton'
|
||||
import FileMachineProvider from 'components/FileMachineProvider'
|
||||
|
||||
if (VITE_KC_SENTRY_DSN && !TEST) {
|
||||
Sentry.init({
|
||||
@ -101,10 +102,11 @@ export const BROWSER_FILE_NAME = 'new'
|
||||
export type IndexLoaderData = {
|
||||
code: string | null
|
||||
project?: ProjectWithEntryPointMetadata
|
||||
file?: FileEntry
|
||||
}
|
||||
|
||||
export type ProjectWithEntryPointMetadata = FileEntry & {
|
||||
entrypoint_metadata: Metadata
|
||||
entrypointMetadata: Metadata
|
||||
}
|
||||
export type HomeLoaderData = {
|
||||
projects: ProjectWithEntryPointMetadata[]
|
||||
@ -143,11 +145,13 @@ const router = createBrowserRouter(
|
||||
element: (
|
||||
<Auth>
|
||||
<Outlet />
|
||||
<KclContextProvider>
|
||||
<ModelingMachineProvider>
|
||||
<App />
|
||||
</ModelingMachineProvider>
|
||||
</KclContextProvider>
|
||||
<FileMachineProvider>
|
||||
<KclContextProvider>
|
||||
<ModelingMachineProvider>
|
||||
<App />
|
||||
</ModelingMachineProvider>
|
||||
</KclContextProvider>
|
||||
</FileMachineProvider>
|
||||
{!isTauri() && import.meta.env.PROD && <DownloadAppBanner />}
|
||||
</Auth>
|
||||
),
|
||||
@ -177,21 +181,41 @@ const router = createBrowserRouter(
|
||||
)
|
||||
}
|
||||
|
||||
const defaultDir = persistedSettings.defaultDirectory || ''
|
||||
|
||||
if (params.id && params.id !== BROWSER_FILE_NAME) {
|
||||
const decodedId = decodeURIComponent(params.id)
|
||||
const projectAndFile = decodedId.replace(defaultDir + '/', '')
|
||||
const firstSlashIndex = projectAndFile.indexOf('/')
|
||||
const projectName = projectAndFile.slice(0, firstSlashIndex)
|
||||
const projectPath = defaultDir + '/' + projectName
|
||||
const currentFileName = projectAndFile.slice(firstSlashIndex + 1)
|
||||
|
||||
if (firstSlashIndex === -1 || !currentFileName)
|
||||
return redirect(
|
||||
`${paths.FILE}/${encodeURIComponent(
|
||||
`${params.id}/${PROJECT_ENTRYPOINT}`
|
||||
)}`
|
||||
)
|
||||
|
||||
// Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
|
||||
const code = await readTextFile(params.id + '/' + PROJECT_ENTRYPOINT)
|
||||
const entrypoint_metadata = await metadata(
|
||||
params.id + '/' + PROJECT_ENTRYPOINT
|
||||
const code = await readTextFile(decodedId)
|
||||
const entrypointMetadata = await metadata(
|
||||
projectPath + '/' + PROJECT_ENTRYPOINT
|
||||
)
|
||||
const children = await readDir(params.id)
|
||||
const children = await readDir(projectPath, { recursive: true })
|
||||
|
||||
return {
|
||||
code,
|
||||
project: {
|
||||
name: params.id.slice(params.id.lastIndexOf('/') + 1),
|
||||
path: params.id,
|
||||
name: projectName,
|
||||
path: projectPath,
|
||||
children,
|
||||
entrypoint_metadata,
|
||||
entrypointMetadata,
|
||||
},
|
||||
file: {
|
||||
name: currentFileName,
|
||||
path: params.id,
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -245,7 +269,7 @@ const router = createBrowserRouter(
|
||||
)
|
||||
const projects = await Promise.all(
|
||||
projectsNoMeta.map(async (p) => ({
|
||||
entrypoint_metadata: await metadata(
|
||||
entrypointMetadata: await metadata(
|
||||
p.path + '/' + PROJECT_ENTRYPOINT
|
||||
),
|
||||
...p,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Toolbar } from '../Toolbar'
|
||||
import UserSidebarMenu from './UserSidebarMenu'
|
||||
import { ProjectWithEntryPointMetadata } from '../Router'
|
||||
import { IndexLoaderData } from '../Router'
|
||||
import ProjectSidebarMenu from './ProjectSidebarMenu'
|
||||
import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
|
||||
import styles from './AppHeader.module.css'
|
||||
@ -8,7 +8,7 @@ import { NetworkHealthIndicator } from './NetworkHealthIndicator'
|
||||
|
||||
interface AppHeaderProps extends React.PropsWithChildren {
|
||||
showToolbar?: boolean
|
||||
project?: ProjectWithEntryPointMetadata
|
||||
project?: Omit<IndexLoaderData, 'code'>
|
||||
className?: string
|
||||
enableMenu?: boolean
|
||||
}
|
||||
@ -32,7 +32,13 @@ export const AppHeader = ({
|
||||
className
|
||||
}
|
||||
>
|
||||
<ProjectSidebarMenu renderAsLink={!enableMenu} project={project} />
|
||||
{project && (
|
||||
<ProjectSidebarMenu
|
||||
renderAsLink={!enableMenu}
|
||||
project={project.project}
|
||||
file={project.file}
|
||||
/>
|
||||
)}
|
||||
{/* Toolbar if the context deems it */}
|
||||
{showToolbar && (
|
||||
<div className="max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
export type CustomIconName =
|
||||
| 'createFile'
|
||||
| 'createFolder'
|
||||
| 'equal'
|
||||
| 'exit'
|
||||
| 'extrude'
|
||||
| 'file'
|
||||
| 'horizontal'
|
||||
| 'line'
|
||||
| 'move'
|
||||
@ -16,6 +19,38 @@ export const CustomIcon = ({
|
||||
name: CustomIconName
|
||||
} & React.SVGProps<SVGSVGElement>) => {
|
||||
switch (name) {
|
||||
case 'createFile':
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4 3H4.5H11H11.2071L11.3536 3.14645L15.8536 7.64646L16 7.7929V8.00001V11.3773C15.6992 11.1362 15.3628 10.9376 15 10.7908V8.50001H11H10.5V8.00001V4H5V16H9.79076C9.93763 16.3628 10.1362 16.6992 10.3773 17H4.5H4V16.5V3.5V3ZM11.5 4.70711L14.2929 7.50001H11.5V4.70711ZM13 12V14H11V15H13V17H14V15H16V14H14V12H13Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
case 'createFolder':
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3.5 3.5H4H7H7.16667L7.3 3.6L9.16667 5H16H16.5V5.5V7.5V10.3773C16.1992 10.1362 15.8628 9.93763 15.5 9.79076V8H4.5V15.5H10.5351C10.7529 15.8764 11.0302 16.2141 11.3542 16.5H4H3.5V16V7.5V4V3.5ZM4.5 4.5V7H15.5V6H9H8.83333L8.7 5.9L6.83333 4.5H4.5ZM13.5 11V13H11.5V14H13.5V16H14.5V14H16.5V13H14.5V11H13.5Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
case 'equal':
|
||||
return (
|
||||
<svg
|
||||
@ -61,6 +96,20 @@ export const CustomIcon = ({
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
case 'file':
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11 3.5H4.5V16.5H15.5V8.00001M11 3.5L15.5 8.00001M11 3.5V8.00001H15.5"
|
||||
stroke="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
case 'horizontal':
|
||||
return (
|
||||
<svg
|
||||
|
||||
@ -16,8 +16,8 @@ type StorageUnion = ExtractStorageTypes<OutputFormat>
|
||||
interface ExportButtonProps extends React.PropsWithChildren {
|
||||
className?: {
|
||||
button?: string
|
||||
// If we wanted more classname configuration of sub-elements,
|
||||
// put them here
|
||||
icon?: string
|
||||
bg?: string
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,7 +109,11 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
|
||||
<ActionButton
|
||||
onClick={openModal}
|
||||
Element="button"
|
||||
icon={{ icon: faFileExport }}
|
||||
icon={{
|
||||
icon: faFileExport,
|
||||
iconClassName: className?.icon,
|
||||
bgClassName: className?.bg,
|
||||
}}
|
||||
className={className?.button}
|
||||
>
|
||||
{children || 'Export'}
|
||||
|
||||
157
src/components/FileMachineProvider.tsx
Normal file
157
src/components/FileMachineProvider.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import { useMachine } from '@xstate/react'
|
||||
import { useNavigate, useRouteLoaderData } from 'react-router-dom'
|
||||
import { IndexLoaderData, paths } from '../Router'
|
||||
import React, { createContext } from 'react'
|
||||
import { toast } from 'react-hot-toast'
|
||||
import {
|
||||
AnyStateMachine,
|
||||
ContextFrom,
|
||||
EventFrom,
|
||||
InterpreterFrom,
|
||||
Prop,
|
||||
StateFrom,
|
||||
} from 'xstate'
|
||||
import { useCommandsContext } from 'hooks/useCommandsContext'
|
||||
import { DEFAULT_FILE_NAME, fileMachine } from 'machines/fileMachine'
|
||||
import {
|
||||
createDir,
|
||||
removeDir,
|
||||
removeFile,
|
||||
renameFile,
|
||||
writeFile,
|
||||
} from '@tauri-apps/api/fs'
|
||||
import { FILE_EXT, readProject } from 'lib/tauriFS'
|
||||
import { isTauri } from 'lib/isTauri'
|
||||
|
||||
type MachineContext<T extends AnyStateMachine> = {
|
||||
state: StateFrom<T>
|
||||
context: ContextFrom<T>
|
||||
send: Prop<InterpreterFrom<T>, 'send'>
|
||||
}
|
||||
|
||||
export const FileContext = createContext(
|
||||
{} as MachineContext<typeof fileMachine>
|
||||
)
|
||||
|
||||
export const FileMachineProvider = ({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) => {
|
||||
const navigate = useNavigate()
|
||||
const { setCommandBarOpen } = useCommandsContext()
|
||||
const { project } = useRouteLoaderData(paths.FILE) as IndexLoaderData
|
||||
|
||||
const [state, send] = useMachine(fileMachine, {
|
||||
context: {
|
||||
project,
|
||||
selectedDirectory: project,
|
||||
},
|
||||
actions: {
|
||||
navigateToFile: (
|
||||
context: ContextFrom<typeof fileMachine>,
|
||||
event: EventFrom<typeof fileMachine>
|
||||
) => {
|
||||
if (event.data && 'name' in event.data) {
|
||||
setCommandBarOpen(false)
|
||||
navigate(
|
||||
`${paths.FILE}/${encodeURIComponent(
|
||||
context.selectedDirectory + '/' + event.data.name
|
||||
)}`
|
||||
)
|
||||
}
|
||||
},
|
||||
toastSuccess: (_, event) =>
|
||||
event.data && toast.success((event.data || '') + ''),
|
||||
toastError: (_, event) => toast.error((event.data || '') + ''),
|
||||
},
|
||||
services: {
|
||||
readFiles: async (context: ContextFrom<typeof fileMachine>) => {
|
||||
const newFiles = isTauri()
|
||||
? await readProject(context.project.path)
|
||||
: []
|
||||
return {
|
||||
...context.project,
|
||||
children: newFiles,
|
||||
}
|
||||
},
|
||||
createFile: async (
|
||||
context: ContextFrom<typeof fileMachine>,
|
||||
event: EventFrom<typeof fileMachine, 'Create file'>
|
||||
) => {
|
||||
let name = event.data.name.trim() || DEFAULT_FILE_NAME
|
||||
|
||||
if (event.data.makeDir) {
|
||||
await createDir(context.selectedDirectory.path + '/' + name)
|
||||
} else {
|
||||
await writeFile(
|
||||
context.selectedDirectory.path +
|
||||
'/' +
|
||||
name +
|
||||
(name.endsWith(FILE_EXT) ? '' : FILE_EXT),
|
||||
''
|
||||
)
|
||||
}
|
||||
|
||||
return `Successfully created "${name}"`
|
||||
},
|
||||
renameFile: async (
|
||||
context: ContextFrom<typeof fileMachine>,
|
||||
event: EventFrom<typeof fileMachine, 'Rename file'>
|
||||
) => {
|
||||
const { oldName, newName, isDir } = event.data
|
||||
let name = newName ? newName : DEFAULT_FILE_NAME
|
||||
|
||||
await renameFile(
|
||||
context.selectedDirectory.path + '/' + oldName,
|
||||
context.selectedDirectory.path +
|
||||
'/' +
|
||||
name +
|
||||
(name.endsWith(FILE_EXT) || isDir ? '' : FILE_EXT)
|
||||
)
|
||||
return (
|
||||
oldName !== name && `Successfully renamed "${oldName}" to "${name}"`
|
||||
)
|
||||
},
|
||||
deleteFile: async (
|
||||
context: ContextFrom<typeof fileMachine>,
|
||||
event: EventFrom<typeof fileMachine, 'Delete file'>
|
||||
) => {
|
||||
const isDir = !!event.data.children
|
||||
|
||||
if (isDir) {
|
||||
await removeDir(event.data.path, {
|
||||
recursive: true,
|
||||
}).catch((e) => console.error('Error deleting directory', e))
|
||||
} else {
|
||||
await removeFile(event.data.path).catch((e) =>
|
||||
console.error('Error deleting file', e)
|
||||
)
|
||||
}
|
||||
return `Successfully deleted ${isDir ? 'folder' : 'file'} "${
|
||||
event.data.name
|
||||
}"`
|
||||
},
|
||||
},
|
||||
guards: {
|
||||
'Has at least 1 file': (_, event: EventFrom<typeof fileMachine>) => {
|
||||
if (event.type !== 'done.invoke.read-files') return false
|
||||
return !!event?.data?.children && event.data.children.length > 0
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<FileContext.Provider
|
||||
value={{
|
||||
send,
|
||||
state,
|
||||
context: state.context, // just a convenience, can remove if we need to save on memory
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</FileContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default FileMachineProvider
|
||||
16
src/components/FileTree.module.css
Normal file
16
src/components/FileTree.module.css
Normal file
@ -0,0 +1,16 @@
|
||||
.folder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.folder::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
z-index: -1;
|
||||
@apply absolute top-0 bottom-0;
|
||||
left: calc(var(--indent-line-left, 1rem) + 0.25rem);
|
||||
@apply bg-chalkboard-30;
|
||||
}
|
||||
|
||||
:global(.dark) .folder::after {
|
||||
@apply bg-chalkboard-80;
|
||||
}
|
||||
400
src/components/FileTree.tsx
Normal file
400
src/components/FileTree.tsx
Normal file
@ -0,0 +1,400 @@
|
||||
import { IndexLoaderData, paths } from 'Router'
|
||||
import { ActionButton } from './ActionButton'
|
||||
import Tooltip from './Tooltip'
|
||||
import { FileEntry } from '@tauri-apps/api/fs'
|
||||
import { Dispatch, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Dialog, Disclosure } from '@headlessui/react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faChevronRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
|
||||
import { useFileContext } from 'hooks/useFileContext'
|
||||
import { useHotkeys } from 'react-hotkeys-hook'
|
||||
import { kclManager } from 'lang/KclSinglton'
|
||||
import styles from './FileTree.module.css'
|
||||
import { sortProject } from 'lib/tauriFS'
|
||||
|
||||
function getIndentationCSS(level: number) {
|
||||
return `calc(1rem * ${level + 1})`
|
||||
}
|
||||
|
||||
function RenameForm({
|
||||
fileOrDir,
|
||||
setIsRenaming,
|
||||
level = 0,
|
||||
}: {
|
||||
fileOrDir: FileEntry
|
||||
setIsRenaming: Dispatch<React.SetStateAction<boolean>>
|
||||
level?: number
|
||||
}) {
|
||||
const { send } = useFileContext()
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
function handleRenameSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
setIsRenaming(false)
|
||||
send({
|
||||
type: 'Rename file',
|
||||
data: {
|
||||
oldName: fileOrDir.name || '',
|
||||
newName: inputRef.current?.value || fileOrDir.name || '',
|
||||
isDir: fileOrDir.children !== undefined,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation()
|
||||
setIsRenaming(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleRenameSubmit}>
|
||||
<label>
|
||||
<span className="sr-only">Rename file</span>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
autoFocus
|
||||
placeholder={fileOrDir.name}
|
||||
className="w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-none focus:ring-0"
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => setIsRenaming(false)}
|
||||
style={{ paddingInlineStart: getIndentationCSS(level) }}
|
||||
/>
|
||||
</label>
|
||||
<button className="sr-only" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteConfirmationDialog({
|
||||
fileOrDir,
|
||||
setIsOpen,
|
||||
}: {
|
||||
fileOrDir: FileEntry
|
||||
setIsOpen: Dispatch<React.SetStateAction<boolean>>
|
||||
}) {
|
||||
const { send } = useFileContext()
|
||||
return (
|
||||
<Dialog
|
||||
open={true}
|
||||
onClose={() => setIsOpen(false)}
|
||||
className="relative z-50"
|
||||
>
|
||||
<div className="fixed inset-0 bg-chalkboard-110/80 grid place-content-center">
|
||||
<Dialog.Panel className="rounded p-4 bg-chalkboard-10 dark:bg-chalkboard-100 border border-destroy-80 max-w-2xl">
|
||||
<Dialog.Title as="h2" className="text-2xl font-bold mb-4">
|
||||
Delete {fileOrDir.children !== undefined ? 'Folder' : 'File'}
|
||||
</Dialog.Title>
|
||||
<Dialog.Description className="my-6">
|
||||
This will permanently delete "{fileOrDir.name || 'this file'}"
|
||||
{fileOrDir.children !== undefined
|
||||
? ' and all of its contents. '
|
||||
: '. '}
|
||||
This action cannot be undone.
|
||||
</Dialog.Description>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<ActionButton
|
||||
Element="button"
|
||||
onClick={async () => {
|
||||
send({ type: 'Delete file', data: fileOrDir })
|
||||
setIsOpen(false)
|
||||
}}
|
||||
icon={{
|
||||
icon: faTrashAlt,
|
||||
bgClassName: 'bg-destroy-80',
|
||||
iconClassName:
|
||||
'text-destroy-20 group-hover:text-destroy-10 hover:text-destroy-10 dark:text-destroy-20 dark:group-hover:text-destroy-10 dark:hover:text-destroy-10',
|
||||
}}
|
||||
className="hover:border-destroy-40 dark:hover:border-destroy-40"
|
||||
>
|
||||
Delete
|
||||
</ActionButton>
|
||||
<ActionButton Element="button" onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</ActionButton>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</div>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
const FileTreeItem = ({
|
||||
project,
|
||||
currentFile,
|
||||
fileOrDir,
|
||||
closePanel,
|
||||
level = 0,
|
||||
}: {
|
||||
project?: IndexLoaderData['project']
|
||||
currentFile?: IndexLoaderData['file']
|
||||
fileOrDir: FileEntry
|
||||
closePanel: (
|
||||
focusableElement?:
|
||||
| HTMLElement
|
||||
| React.MutableRefObject<HTMLElement | null>
|
||||
| undefined
|
||||
) => void
|
||||
level?: number
|
||||
}) => {
|
||||
const { send, context } = useFileContext()
|
||||
const navigate = useNavigate()
|
||||
const [isRenaming, setIsRenaming] = useState(false)
|
||||
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
|
||||
const isCurrentFile = fileOrDir.path === currentFile?.path
|
||||
|
||||
function handleKeyUp(e: React.KeyboardEvent<HTMLButtonElement>) {
|
||||
if (e.metaKey && e.key === 'Backspace') {
|
||||
// Open confirmation dialog
|
||||
setIsConfirmingDelete(true)
|
||||
} else if (e.key === 'Enter') {
|
||||
// Show the renaming form
|
||||
setIsRenaming(true)
|
||||
} else if (e.code === 'Space') {
|
||||
openFile()
|
||||
}
|
||||
}
|
||||
|
||||
function openFile() {
|
||||
if (fileOrDir.children !== undefined) return // Don't open directories
|
||||
kclManager.setCode('')
|
||||
navigate(`${paths.FILE}/${encodeURIComponent(fileOrDir.path)}`)
|
||||
closePanel()
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{fileOrDir.children === undefined ? (
|
||||
<li
|
||||
className={
|
||||
'group m-0 p-0 border-solid border-0 text-energy-100 hover:text-energy-70 hover:bg-energy-10/50 dark:text-energy-30 dark:hover:!text-energy-20 dark:hover:bg-energy-90/50 focus-within:bg-energy-10/80 dark:focus-within:bg-energy-80/50 hover:focus-within:bg-energy-10/80 dark:hover:focus-within:bg-energy-80/50 ' +
|
||||
(isCurrentFile ? 'bg-energy-10/50 dark:bg-energy-90/50' : '')
|
||||
}
|
||||
>
|
||||
{!isRenaming ? (
|
||||
<button
|
||||
className="flex gap-1 items-center py-0.5 rounded-none border-none p-0 m-0 text-sm w-full hover:!bg-transparent text-left !text-inherit"
|
||||
style={{ paddingInlineStart: getIndentationCSS(level) }}
|
||||
onDoubleClick={openFile}
|
||||
onClick={(e) => e.currentTarget.focus()}
|
||||
onKeyUp={handleKeyUp}
|
||||
>
|
||||
<KclIcon
|
||||
className={
|
||||
'inline-block w-3 ' +
|
||||
(isCurrentFile
|
||||
? 'text-energy-90 dark:text-energy-10'
|
||||
: 'text-energy-50 dark:text-energy-50')
|
||||
}
|
||||
/>
|
||||
{fileOrDir.name}
|
||||
</button>
|
||||
) : (
|
||||
<RenameForm
|
||||
fileOrDir={fileOrDir}
|
||||
setIsRenaming={setIsRenaming}
|
||||
level={level}
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
) : (
|
||||
<Disclosure defaultOpen={currentFile?.path.includes(fileOrDir.path)}>
|
||||
{({ open }) => (
|
||||
<div className="group">
|
||||
{!isRenaming ? (
|
||||
<Disclosure.Button
|
||||
className={
|
||||
' group border-none text-sm rounded-none p-0 m-0 flex items-center justify-start w-full py-0.5 text-chalkboard-70 dark:text-chalkboard-30 hover:bg-energy-10/50 dark:hover:bg-energy-90/50' +
|
||||
(context.selectedDirectory.path.includes(fileOrDir.path)
|
||||
? ' group-focus-within:bg-chalkboard-20/50 dark:group-focus-within:bg-chalkboard-80/20 hover:group-focus-within:bg-chalkboard-20 dark:hover:group-focus-within:bg-chalkboard-80/20 group-active:bg-chalkboard-20/50 dark:group-active:bg-chalkboard-80/20 hover:group-active:bg-chalkboard-20/50 dark:hover:group-active:bg-chalkboard-80/20'
|
||||
: '')
|
||||
}
|
||||
style={{ paddingInlineStart: getIndentationCSS(level) }}
|
||||
onClick={(e) => e.currentTarget.focus()}
|
||||
onClickCapture={(e) =>
|
||||
send({ type: 'Set selected directory', data: fileOrDir })
|
||||
}
|
||||
onFocusCapture={(e) =>
|
||||
send({ type: 'Set selected directory', data: fileOrDir })
|
||||
}
|
||||
onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
|
||||
onKeyUp={handleKeyUp}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className={
|
||||
'inline-block mr-2 m-0 p-0 w-2 h-2 ' +
|
||||
(open ? 'transform rotate-90' : '')
|
||||
}
|
||||
/>
|
||||
{fileOrDir.name}
|
||||
</Disclosure.Button>
|
||||
) : (
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{ paddingInlineStart: getIndentationCSS(level) }}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronRight}
|
||||
className={
|
||||
'inline-block mr-2 m-0 p-0 w-2 h-2 ' +
|
||||
(open ? 'transform rotate-90' : '')
|
||||
}
|
||||
/>
|
||||
<RenameForm
|
||||
fileOrDir={fileOrDir}
|
||||
setIsRenaming={setIsRenaming}
|
||||
level={-1}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Disclosure.Panel
|
||||
className={styles.folder}
|
||||
style={
|
||||
{
|
||||
'--indent-line-left': getIndentationCSS(level),
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<ul
|
||||
className="m-0 p-0"
|
||||
onClickCapture={(e) => {
|
||||
send({ type: 'Set selected directory', data: fileOrDir })
|
||||
}}
|
||||
onFocusCapture={(e) =>
|
||||
send({ type: 'Set selected directory', data: fileOrDir })
|
||||
}
|
||||
>
|
||||
{fileOrDir.children?.map((child) => (
|
||||
<FileTreeItem
|
||||
fileOrDir={child}
|
||||
project={project}
|
||||
currentFile={currentFile}
|
||||
closePanel={closePanel}
|
||||
level={level + 1}
|
||||
key={level + '-' + child.path}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</Disclosure.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Disclosure>
|
||||
)}
|
||||
{isConfirmingDelete && (
|
||||
<DeleteConfirmationDialog
|
||||
fileOrDir={fileOrDir}
|
||||
setIsOpen={setIsConfirmingDelete}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
interface FileTreeProps {
|
||||
className?: string
|
||||
file?: IndexLoaderData['file']
|
||||
closePanel: (
|
||||
focusableElement?:
|
||||
| HTMLElement
|
||||
| React.MutableRefObject<HTMLElement | null>
|
||||
| undefined
|
||||
) => void
|
||||
}
|
||||
|
||||
export const FileTree = ({
|
||||
className = '',
|
||||
file,
|
||||
closePanel,
|
||||
}: FileTreeProps) => {
|
||||
const { send, context } = useFileContext()
|
||||
useHotkeys('meta + n', createFile)
|
||||
useHotkeys('meta + shift + n', createFolder)
|
||||
|
||||
async function createFile() {
|
||||
send({ type: 'Create file', data: { name: '', makeDir: false } })
|
||||
}
|
||||
|
||||
async function createFolder() {
|
||||
send({ type: 'Create file', data: { name: '', makeDir: true } })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="flex items-center gap-1 px-4 py-1 bg-chalkboard-30/50 dark:bg-chalkboard-70/50">
|
||||
<h2 className="flex-1 m-0 p-0 text-sm mono">Files</h2>
|
||||
<ActionButton
|
||||
Element="button"
|
||||
icon={{
|
||||
icon: 'createFile',
|
||||
iconClassName: '!text-energy-80 dark:!text-energy-20',
|
||||
bgClassName: 'hover:bg-energy-10/50 dark:hover:bg-transparent',
|
||||
}}
|
||||
className="!p-0 border-none bg-transparent !outline-none"
|
||||
onClick={createFile}
|
||||
>
|
||||
<Tooltip position="inlineStart" delay={750}>
|
||||
Create File
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
|
||||
<ActionButton
|
||||
Element="button"
|
||||
icon={{
|
||||
icon: 'createFolder',
|
||||
iconClassName: '!text-energy-80 dark:!text-energy-20',
|
||||
bgClassName: 'hover:bg-energy-10/50 dark:hover:bg-transparent',
|
||||
}}
|
||||
className="!p-0 border-none bg-transparent !outline-none"
|
||||
onClick={createFolder}
|
||||
>
|
||||
<Tooltip position="inlineStart" delay={750}>
|
||||
Create Folder
|
||||
</Tooltip>
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className="overflow-auto max-h-full pb-12">
|
||||
<ul
|
||||
className="m-0 p-0 text-sm"
|
||||
onClickCapture={(e) => {
|
||||
send({ type: 'Set selected directory', data: context.project })
|
||||
}}
|
||||
>
|
||||
{sortProject(context.project.children || []).map((fileOrDir) => (
|
||||
<FileTreeItem
|
||||
project={context.project}
|
||||
currentFile={file}
|
||||
fileOrDir={fileOrDir}
|
||||
closePanel={closePanel}
|
||||
key={fileOrDir.path}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function KclIcon({ className = '' }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M40 0H0V40H40V0ZM7.34715 27.2143V15.6577L2.976 15.987V36.7949H7.34715V32.0645L8.00582 31.5256C8.24533 31.326 8.47487 31.1264 8.69442 30.9268L12.1075 36.7949H17.0475C16.1893 35.3978 15.311 33.9906 14.4128 32.5735C13.5346 31.1563 12.6664 29.7392 11.8081 28.3221L15.8499 24.9389C15.4308 24.4399 15.0017 23.931 14.5625 23.412L13.3051 21.8552L7.34715 27.2143ZM22.2581 26.6754C22.8769 25.9169 23.6753 25.5377 24.6533 25.5377C25.272 25.5377 25.8309 25.6175 26.3299 25.7772C26.8289 25.9169 27.4177 26.1465 28.0963 26.4658L29.3238 23.3521C28.5853 22.7933 27.7371 22.4041 26.779 22.1845C25.8409 21.9649 25.0625 21.8552 24.4437 21.8552C22.0885 21.8552 20.2223 22.5537 18.845 23.9509C17.4878 25.3281 16.8092 27.1944 16.8092 29.5496C16.8092 31.9048 17.4878 33.7611 18.845 35.1183C20.2223 36.4756 22.0885 37.1542 24.4437 37.1542C25.0625 37.1542 25.8509 37.0444 26.8089 36.8249C27.767 36.6053 28.6053 36.2161 29.3238 35.6572L28.0963 32.5435C27.4177 32.8629 26.8289 33.0924 26.3299 33.2321C25.8309 33.3718 25.272 33.4417 24.6533 33.4417C23.6753 33.4417 22.8769 33.0924 22.2581 32.3938C21.6594 31.6753 21.36 30.7272 21.36 29.5496C21.36 28.372 21.6594 27.4139 22.2581 26.6754ZM36.2796 36.7949V15.6577L31.9085 15.987V36.7949H36.2796Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormEvent, useState } from 'react'
|
||||
import { FormEvent, useEffect, useState } from 'react'
|
||||
import { type ProjectWithEntryPointMetadata, paths } from '../Router'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ActionButton } from './ActionButton'
|
||||
@ -8,7 +8,7 @@ import {
|
||||
faTrashAlt,
|
||||
faX,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { FILE_EXT } from '../lib/tauriFS'
|
||||
import { FILE_EXT, getPartsCount, readProject } from '../lib/tauriFS'
|
||||
import { Dialog } from '@headlessui/react'
|
||||
import { useHotkeys } from 'react-hotkeys-hook'
|
||||
|
||||
@ -28,6 +28,8 @@ function ProjectCard({
|
||||
useHotkeys('esc', () => setIsEditing(false))
|
||||
const [isEditing, setIsEditing] = useState(false)
|
||||
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
|
||||
const [numberOfParts, setNumberOfParts] = useState(1)
|
||||
const [numberOfFolders, setNumberOfFolders] = useState(0)
|
||||
|
||||
function handleSave(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
@ -42,6 +44,17 @@ function ProjectCard({
|
||||
: date.toLocaleTimeString()
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
async function getNumberOfParts() {
|
||||
const { kclFileCount, kclDirCount } = getPartsCount(
|
||||
await readProject(project.path)
|
||||
)
|
||||
setNumberOfParts(kclFileCount)
|
||||
setNumberOfFolders(kclDirCount)
|
||||
}
|
||||
getNumberOfParts()
|
||||
}, [project.path])
|
||||
|
||||
return (
|
||||
<li
|
||||
{...props}
|
||||
@ -76,7 +89,7 @@ function ProjectCard({
|
||||
</form>
|
||||
) : (
|
||||
<>
|
||||
<div className="p-1 flex flex-col gap-2">
|
||||
<div className="p-1 flex flex-col h-full gap-2">
|
||||
<Link
|
||||
to={`${paths.FILE}/${encodeURIComponent(project.path)}`}
|
||||
className="flex-1 text-liquid-100"
|
||||
@ -84,7 +97,14 @@ function ProjectCard({
|
||||
{project.name?.replace(FILE_EXT, '')}
|
||||
</Link>
|
||||
<span className="text-chalkboard-60 text-xs">
|
||||
Edited {getDisplayedTime(project.entrypoint_metadata.modifiedAt)}
|
||||
{numberOfParts} part{numberOfParts === 1 ? '' : 's'}{' '}
|
||||
{numberOfFolders > 0 &&
|
||||
`/ ${numberOfFolders} folder${
|
||||
numberOfFolders === 1 ? '' : 's'
|
||||
}`}
|
||||
</span>
|
||||
<span className="text-chalkboard-60 text-xs">
|
||||
Edited {getDisplayedTime(project.entrypointMetadata.modifiedAt)}
|
||||
</span>
|
||||
<div className="absolute bottom-2 right-2 flex gap-1 items-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
|
||||
<ActionButton
|
||||
|
||||
@ -15,7 +15,7 @@ const projectWellFormed = {
|
||||
path: '/some/path/Simple Box/main.kcl',
|
||||
},
|
||||
],
|
||||
entrypoint_metadata: {
|
||||
entrypointMetadata: {
|
||||
accessedAt: now,
|
||||
blksize: 32,
|
||||
blocks: 32,
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import { Popover, Transition } from '@headlessui/react'
|
||||
import { ActionButton } from './ActionButton'
|
||||
import { faHome } from '@fortawesome/free-solid-svg-icons'
|
||||
import { ProjectWithEntryPointMetadata, paths } from '../Router'
|
||||
import { IndexLoaderData, paths } from '../Router'
|
||||
import { isTauri } from '../lib/isTauri'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { ExportButton } from './ExportButton'
|
||||
import { Fragment } from 'react'
|
||||
import { FileTree } from './FileTree'
|
||||
|
||||
const ProjectSidebarMenu = ({
|
||||
project,
|
||||
file,
|
||||
renderAsLink = false,
|
||||
}: {
|
||||
renderAsLink?: boolean
|
||||
project?: Partial<ProjectWithEntryPointMetadata>
|
||||
project?: IndexLoaderData['project']
|
||||
file?: IndexLoaderData['file']
|
||||
}) => {
|
||||
return renderAsLink ? (
|
||||
<Link
|
||||
@ -43,9 +46,18 @@ const ProjectSidebarMenu = ({
|
||||
alt="KittyCAD App"
|
||||
className="h-full w-auto"
|
||||
/>
|
||||
<span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
|
||||
{isTauri() && project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</span>
|
||||
<div className="flex flex-col items-start py-0.5">
|
||||
<span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
|
||||
{isTauri() && file?.name
|
||||
? file.name.slice(file.name.lastIndexOf('/') + 1)
|
||||
: 'KittyCAD Modeling App'}
|
||||
</span>
|
||||
{isTauri() && project?.name && (
|
||||
<span className="text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap hidden lg:block">
|
||||
{project.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
enter="duration-200 ease-out"
|
||||
@ -68,54 +80,74 @@ const ProjectSidebarMenu = ({
|
||||
leaveTo="opacity-0 -translate-x-4"
|
||||
as={Fragment}
|
||||
>
|
||||
<Popover.Panel className="fixed inset-0 right-auto z-30 w-64 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg overflow-hidden">
|
||||
<div className="flex items-center gap-4 px-4 py-3 bg-energy-100">
|
||||
<img
|
||||
src="/kitt-8bit-winking.svg"
|
||||
alt="KittyCAD App"
|
||||
className="h-9 w-auto"
|
||||
/>
|
||||
<Popover.Panel
|
||||
className="fixed inset-0 right-auto z-30 w-64 h-screen max-h-screen grid grid-cols-1 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg"
|
||||
style={{ gridTemplateRows: 'auto 1fr auto' }}
|
||||
>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<div className="flex items-center gap-4 px-4 py-3 bg-energy-10/25 dark:bg-energy-110">
|
||||
<img
|
||||
src="/kitt-8bit-winking.svg"
|
||||
alt="KittyCAD App"
|
||||
className="h-9 w-auto"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<p
|
||||
className="m-0 text-energy-10 text-mono"
|
||||
data-testid="projectName"
|
||||
>
|
||||
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</p>
|
||||
{project?.entrypoint_metadata && (
|
||||
<p
|
||||
className="m-0 text-energy-40 text-xs"
|
||||
data-testid="createdAt"
|
||||
>
|
||||
Created{' '}
|
||||
{project?.entrypoint_metadata.createdAt.toLocaleDateString()}
|
||||
</p>
|
||||
<div>
|
||||
<p
|
||||
className="m-0 text-chalkboard-100 dark:text-energy-10 text-mono"
|
||||
data-testid="projectName"
|
||||
>
|
||||
{project?.name ? project.name : 'KittyCAD Modeling App'}
|
||||
</p>
|
||||
{project?.entrypointMetadata && (
|
||||
<p
|
||||
className="m-0 text-chalkboard-100 dark:text-energy-40 text-xs"
|
||||
data-testid="createdAt"
|
||||
>
|
||||
Created{' '}
|
||||
{project.entrypointMetadata.createdAt.toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{isTauri() ? (
|
||||
<FileTree
|
||||
file={file}
|
||||
className="overflow-hidden border-0 border-y border-energy-40 dark:border-energy-70"
|
||||
closePanel={close}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex-1 overflow-hidden" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 flex flex-col gap-2">
|
||||
<ExportButton
|
||||
className={{
|
||||
button:
|
||||
'border-transparent dark:border-transparent dark:hover:border-energy-60',
|
||||
}}
|
||||
>
|
||||
Export Model
|
||||
</ExportButton>
|
||||
{isTauri() && (
|
||||
<ActionButton
|
||||
Element="link"
|
||||
to={paths.HOME}
|
||||
icon={{
|
||||
icon: faHome,
|
||||
}}
|
||||
className="border-transparent dark:border-transparent dark:hover:border-energy-60"
|
||||
>
|
||||
Go to Home
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4 flex flex-col gap-2 bg-energy-10/25 dark:bg-energy-110">
|
||||
<ExportButton
|
||||
className={{
|
||||
button:
|
||||
'border-transparent dark:border-transparent hover:border-energy-60',
|
||||
icon: 'text-energy-10 dark:text-energy-120',
|
||||
bg: 'bg-energy-120 dark:bg-energy-10',
|
||||
}}
|
||||
>
|
||||
Export Model
|
||||
</ExportButton>
|
||||
{isTauri() && (
|
||||
<ActionButton
|
||||
Element="link"
|
||||
to={paths.HOME}
|
||||
icon={{
|
||||
icon: faHome,
|
||||
iconClassName: 'text-energy-10 dark:text-energy-120',
|
||||
bgClassName: 'bg-energy-120 dark:bg-energy-10',
|
||||
}}
|
||||
className="border-transparent dark:border-transparent hover:border-energy-60"
|
||||
>
|
||||
Go to Home
|
||||
</ActionButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
|
||||
@ -117,13 +117,11 @@ export const TextEditor = ({
|
||||
if (isTauri() && pathParams.id) {
|
||||
// Save the file to disk
|
||||
// Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
|
||||
writeTextFile(pathParams.id + '/' + PROJECT_ENTRYPOINT, newCode).catch(
|
||||
(err) => {
|
||||
// TODO: add Sentry per GH issue #254 (https://github.com/KittyCAD/modeling-app/issues/254)
|
||||
console.error('error saving file', err)
|
||||
toast.error('Error saving file, please check file permissions')
|
||||
}
|
||||
)
|
||||
writeTextFile(pathParams.id, newCode).catch((err) => {
|
||||
// TODO: add Sentry per GH issue #254 (https://github.com/KittyCAD/modeling-app/issues/254)
|
||||
console.error('error saving file', err)
|
||||
toast.error('Error saving file, please check file permissions')
|
||||
})
|
||||
}
|
||||
if (editorView) {
|
||||
editorView?.dispatch({ effects: addLineHighlight.of([0, 0]) })
|
||||
|
||||
229
src/components/Tooltip.module.css
Normal file
229
src/components/Tooltip.module.css
Normal file
@ -0,0 +1,229 @@
|
||||
/* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
|
||||
|
||||
.tooltip {
|
||||
/* internal CSS vars */
|
||||
--_delay: 200ms;
|
||||
--_p-inline: 1ch;
|
||||
--_p-block: 4px;
|
||||
--_triangle-size: 7px;
|
||||
/* --_bg: hsl(0 0% 20%); */
|
||||
--_bg: var(--chalkboard-10);
|
||||
--_shadow-alpha: 20%;
|
||||
|
||||
/* Used to power spacing and layout for RTL languages */
|
||||
--isRTL: -1;
|
||||
|
||||
/* Using conic gradients to get a clear tip triangle */
|
||||
--_bottom-tip: conic-gradient(
|
||||
from -30deg at bottom,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
)
|
||||
bottom / 100% 50% no-repeat;
|
||||
--_top-tip: conic-gradient(
|
||||
from 150deg at top,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
)
|
||||
top / 100% 50% no-repeat;
|
||||
--_right-tip: conic-gradient(
|
||||
from -120deg at right,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
)
|
||||
right / 50% 100% no-repeat;
|
||||
--_left-tip: conic-gradient(
|
||||
from 60deg at left,
|
||||
#0000,
|
||||
#000 1deg 60deg,
|
||||
#0000 61deg
|
||||
)
|
||||
left / 50% 100% no-repeat;
|
||||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
/* The parts that will be transitioned */
|
||||
opacity: 0;
|
||||
transform: translate(var(--_x, 0), var(--_y, 0));
|
||||
transition: transform 0.15s ease-out, opacity 0.11s ease-out;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inline-size: max-content;
|
||||
max-inline-size: 25ch;
|
||||
text-align: start;
|
||||
font-family: var(--mono-font-family);
|
||||
text-transform: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
line-height: initial;
|
||||
letter-spacing: 0;
|
||||
padding: var(--_p-block) var(--_p-inline);
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--_bg);
|
||||
@apply text-chalkboard-110;
|
||||
will-change: filter;
|
||||
filter: drop-shadow(0 1px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
|
||||
drop-shadow(0 6px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
|
||||
}
|
||||
|
||||
:global(.dark) .tooltip {
|
||||
--_bg: var(--chalkboard-110);
|
||||
@apply text-chalkboard-10;
|
||||
}
|
||||
|
||||
/* TODO we don't support a light theme yet */
|
||||
/* @media (prefers-color-scheme: light) {
|
||||
.tooltip {
|
||||
--_bg: white;
|
||||
--_shadow-alpha: 15%;
|
||||
}
|
||||
} */
|
||||
|
||||
.tooltip:dir(rtl) {
|
||||
--isRTL: 1;
|
||||
}
|
||||
|
||||
/* :has and :is are pretty fresh CSS pseudo-selectors, may not see full support */
|
||||
:has(> .tooltip) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:is(:hover, :focus-visible, :active) > .tooltip {
|
||||
opacity: 1;
|
||||
transition-delay: var(--_delay);
|
||||
}
|
||||
|
||||
:is(:focus, :focus-visible, :focus-within) > .tooltip {
|
||||
--_delay: 0 !important;
|
||||
}
|
||||
|
||||
/* prepend some prose for screen readers only */
|
||||
.tooltip::before {
|
||||
content: '; Has tooltip: ';
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* tooltip shape is a pseudo element so we can cast a shadow */
|
||||
.tooltip::after {
|
||||
content: '';
|
||||
background: var(--_bg);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
inset: 0;
|
||||
mask: var(--_tip);
|
||||
}
|
||||
|
||||
.tooltip.top,
|
||||
.tooltip.blockStart,
|
||||
.tooltip.bottom,
|
||||
.tooltip.blockEnd {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* TOP || BLOCK-START */
|
||||
.tooltip.top,
|
||||
.tooltip.blockStart {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
}
|
||||
|
||||
.tooltip.top::after,
|
||||
.tooltip.tooltip.blockStart::after {
|
||||
--_tip: var(--_bottom-tip);
|
||||
inset-block-end: calc(var(--_triangle-size) * -1);
|
||||
border-block-end: var(--_triangle-size) solid transparent;
|
||||
}
|
||||
|
||||
/* RIGHT || INLINE-END */
|
||||
.tooltip.right,
|
||||
.tooltip.inlineEnd {
|
||||
inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.tooltip.right::after,
|
||||
.tooltip.tooltip.inlineEnd::after {
|
||||
--_tip: var(--_left-tip);
|
||||
inset-inline-start: calc(var(--_triangle-size) * -1);
|
||||
border-inline-start: var(--_triangle-size) solid transparent;
|
||||
}
|
||||
|
||||
.tooltip.right:dir(rtl)::after,
|
||||
.tooltip.inlineEnd:dir(rtl)::after {
|
||||
--_tip: var(--_right-tip);
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
.tooltip.bottom,
|
||||
.tooltip.blockEnd {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
}
|
||||
|
||||
.tooltip.bottom::after,
|
||||
.tooltip.tooltip.blockEnd::after {
|
||||
--_tip: var(--_top-tip);
|
||||
inset-block-start: calc(var(--_triangle-size) * -1);
|
||||
border-block-start: var(--_triangle-size) solid transparent;
|
||||
}
|
||||
|
||||
/* LEFT || INLINE-START */
|
||||
.tooltip.left,
|
||||
.tooltip.inlineStart {
|
||||
inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.tooltip.left::after,
|
||||
.tooltip.tooltip.inlineStart::after {
|
||||
--_tip: var(--_right-tip);
|
||||
inset-inline-end: calc(var(--_triangle-size) * -1);
|
||||
border-inline-end: var(--_triangle-size) solid transparent;
|
||||
}
|
||||
|
||||
.tooltip.left:dir(rtl)::after,
|
||||
.tooltip.inlineStart:dir(rtl)::after {
|
||||
--_tip: var(--_left-tip);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* TOP || BLOCK-START */
|
||||
:has(> :is(.tooltip.top, .tooltip.blockStart)):not(:hover, :active) .tooltip {
|
||||
--_y: 3px;
|
||||
}
|
||||
|
||||
/* RIGHT || INLINE-END */
|
||||
:has(> :is(.tooltip.right, .tooltip.inlineEnd)):not(:hover, :active)
|
||||
.tooltip {
|
||||
--_x: calc(var(--isRTL) * -3px * -1);
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(> :is(.tooltip.bottom, .tooltip.blockEnd)):not(:hover, :active)
|
||||
.tooltip {
|
||||
--_y: -3px;
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(> :is(.tooltip.left, .tooltip.inlineStart)):not(:hover, :active)
|
||||
.tooltip {
|
||||
--_x: calc(var(--isRTL) * 3px * -1);
|
||||
}
|
||||
}
|
||||
37
src/components/Tooltip.tsx
Normal file
37
src/components/Tooltip.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
// We do use all the classes in this file currently, but we
|
||||
// index into them with styles[position], which CSS Modules doesn't pick up.
|
||||
// eslint-disable-next-line css-modules/no-unused-class
|
||||
import styles from './Tooltip.module.css'
|
||||
|
||||
interface TooltipProps extends React.PropsWithChildren {
|
||||
position?:
|
||||
| 'top'
|
||||
| 'bottom'
|
||||
| 'left'
|
||||
| 'right'
|
||||
| 'blockStart'
|
||||
| 'blockEnd'
|
||||
| 'inlineStart'
|
||||
| 'inlineEnd'
|
||||
className?: string
|
||||
delay?: number
|
||||
}
|
||||
|
||||
export default function Tooltip({
|
||||
children,
|
||||
position = 'top',
|
||||
className,
|
||||
delay = 200,
|
||||
}: TooltipProps) {
|
||||
return (
|
||||
<div
|
||||
// @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
|
||||
inert="true"
|
||||
role="tooltip"
|
||||
className={styles.tooltip + ' ' + styles[position] + ' ' + className}
|
||||
style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6
src/hooks/useFileContext.ts
Normal file
6
src/hooks/useFileContext.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { FileContext } from 'components/FileMachineProvider'
|
||||
import { useContext } from 'react'
|
||||
|
||||
export const useFileContext = () => {
|
||||
return useContext(FileContext)
|
||||
}
|
||||
@ -43,15 +43,12 @@ export function getSortFunction(sortBy: string) {
|
||||
a: ProjectWithEntryPointMetadata,
|
||||
b: ProjectWithEntryPointMetadata
|
||||
) => {
|
||||
if (
|
||||
a.entrypoint_metadata?.modifiedAt &&
|
||||
b.entrypoint_metadata?.modifiedAt
|
||||
) {
|
||||
if (a.entrypointMetadata?.modifiedAt && b.entrypointMetadata?.modifiedAt) {
|
||||
return !sortBy || sortBy.includes('desc')
|
||||
? b.entrypoint_metadata.modifiedAt.getTime() -
|
||||
a.entrypoint_metadata.modifiedAt.getTime()
|
||||
: a.entrypoint_metadata.modifiedAt.getTime() -
|
||||
b.entrypoint_metadata.modifiedAt.getTime()
|
||||
? b.entrypointMetadata.modifiedAt.getTime() -
|
||||
a.entrypointMetadata.modifiedAt.getTime()
|
||||
: a.entrypointMetadata.modifiedAt.getTime() -
|
||||
b.entrypointMetadata.modifiedAt.getTime()
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
import { FileEntry } from '@tauri-apps/api/fs'
|
||||
import {
|
||||
MAX_PADDING,
|
||||
deepFileFilter,
|
||||
getNextProjectIndex,
|
||||
getPartsCount,
|
||||
interpolateProjectNameWithIndex,
|
||||
isRelevantFileOrDir,
|
||||
} from './tauriFS'
|
||||
|
||||
describe('Test file utility functions', () => {
|
||||
describe('Test project name utility functions', () => {
|
||||
it('interpolates a project name without an index', () => {
|
||||
expect(interpolateProjectNameWithIndex('test', 1)).toBe('test')
|
||||
})
|
||||
@ -46,3 +50,101 @@ describe('Test file utility functions', () => {
|
||||
expect(getNextProjectIndex('new-project-$n', testFiles)).toBe(8)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Test file tree utility functions', () => {
|
||||
const baseFiles: FileEntry[] = [
|
||||
{
|
||||
name: 'show-me.kcl',
|
||||
path: '/projects/show-me.kcl',
|
||||
},
|
||||
{
|
||||
name: 'hide-me.jpg',
|
||||
path: '/projects/hide-me.jpg',
|
||||
},
|
||||
{
|
||||
name: '.gitignore',
|
||||
path: '/projects/.gitignore',
|
||||
},
|
||||
]
|
||||
|
||||
const filteredBaseFiles: FileEntry[] = [
|
||||
{
|
||||
name: 'show-me.kcl',
|
||||
path: '/projects/show-me.kcl',
|
||||
},
|
||||
]
|
||||
|
||||
it('Only includes files relevant to the project in a flat directory', () => {
|
||||
expect(deepFileFilter(baseFiles, isRelevantFileOrDir)).toEqual(
|
||||
filteredBaseFiles
|
||||
)
|
||||
})
|
||||
|
||||
const nestedFiles: FileEntry[] = [
|
||||
...baseFiles,
|
||||
{
|
||||
name: 'show-me',
|
||||
path: '/projects/show-me',
|
||||
children: [
|
||||
{
|
||||
name: 'show-me-nested',
|
||||
path: '/projects/show-me/show-me-nested',
|
||||
children: baseFiles,
|
||||
},
|
||||
{
|
||||
name: 'hide-me',
|
||||
path: '/projects/show-me/hide-me',
|
||||
children: baseFiles.filter((file) => file.name !== 'show-me.kcl'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'hide-me',
|
||||
path: '/projects/hide-me',
|
||||
children: baseFiles.filter((file) => file.name !== 'show-me.kcl'),
|
||||
},
|
||||
]
|
||||
|
||||
const filteredNestedFiles: FileEntry[] = [
|
||||
...filteredBaseFiles,
|
||||
{
|
||||
name: 'show-me',
|
||||
path: '/projects/show-me',
|
||||
children: [
|
||||
{
|
||||
name: 'show-me-nested',
|
||||
path: '/projects/show-me/show-me-nested',
|
||||
children: filteredBaseFiles,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
it('Only includes directories that include files relevant to the project in a nested directory', () => {
|
||||
expect(deepFileFilter(nestedFiles, isRelevantFileOrDir)).toEqual(
|
||||
filteredNestedFiles
|
||||
)
|
||||
})
|
||||
|
||||
const withHiddenDir: FileEntry[] = [
|
||||
...baseFiles,
|
||||
{
|
||||
name: '.hide-me',
|
||||
path: '/projects/.hide-me',
|
||||
children: baseFiles,
|
||||
},
|
||||
]
|
||||
|
||||
it(`Hides folders that begin with a ".", even if they contain relevant files`, () => {
|
||||
expect(deepFileFilter(withHiddenDir, isRelevantFileOrDir)).toEqual(
|
||||
filteredBaseFiles
|
||||
)
|
||||
})
|
||||
|
||||
it(`Properly counts the number of relevant files and directories in a project`, () => {
|
||||
expect(getPartsCount(nestedFiles)).toEqual({
|
||||
kclFileCount: 2,
|
||||
kclDirCount: 2,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -15,6 +15,7 @@ export const FILE_EXT = '.kcl'
|
||||
export const PROJECT_ENTRYPOINT = 'main' + FILE_EXT
|
||||
const INDEX_IDENTIFIER = '$n' // $nn.. will pad the number with 0s
|
||||
export const MAX_PADDING = 7
|
||||
const RELEVANT_FILE_TYPES = ['kcl']
|
||||
|
||||
// Initializes the project directory and returns the path
|
||||
export async function initializeProjectDirectory(directory: string) {
|
||||
@ -69,7 +70,7 @@ export async function getProjectsInDir(projectDir: string) {
|
||||
|
||||
const projectsWithMetadata = await Promise.all(
|
||||
readProjects.map(async (p) => ({
|
||||
entrypoint_metadata: await metadata(p.path + '/' + PROJECT_ENTRYPOINT),
|
||||
entrypointMetadata: await metadata(p.path + '/' + PROJECT_ENTRYPOINT),
|
||||
...p,
|
||||
}))
|
||||
)
|
||||
@ -77,6 +78,135 @@ export async function getProjectsInDir(projectDir: string) {
|
||||
return projectsWithMetadata
|
||||
}
|
||||
|
||||
export const isHidden = (fileOrDir: FileEntry) =>
|
||||
!!fileOrDir.name?.startsWith('.')
|
||||
|
||||
export const isDir = (fileOrDir: FileEntry) =>
|
||||
'children' in fileOrDir && fileOrDir.children !== undefined
|
||||
|
||||
export function deepFileFilter(
|
||||
entries: FileEntry[],
|
||||
filterFn: (f: FileEntry) => boolean
|
||||
): FileEntry[] {
|
||||
const filteredEntries: FileEntry[] = []
|
||||
for (const fileOrDir of entries) {
|
||||
if ('children' in fileOrDir && fileOrDir.children !== undefined) {
|
||||
const filteredChildren = deepFileFilter(fileOrDir.children, filterFn)
|
||||
if (filterFn(fileOrDir)) {
|
||||
filteredEntries.push({
|
||||
...fileOrDir,
|
||||
children: filteredChildren,
|
||||
})
|
||||
}
|
||||
} else if (filterFn(fileOrDir)) {
|
||||
filteredEntries.push(fileOrDir)
|
||||
}
|
||||
}
|
||||
return filteredEntries
|
||||
}
|
||||
|
||||
export function deepFileFilterFlat(
|
||||
entries: FileEntry[],
|
||||
filterFn: (f: FileEntry) => boolean
|
||||
): FileEntry[] {
|
||||
const filteredEntries: FileEntry[] = []
|
||||
for (const fileOrDir of entries) {
|
||||
if ('children' in fileOrDir && fileOrDir.children !== undefined) {
|
||||
const filteredChildren = deepFileFilterFlat(fileOrDir.children, filterFn)
|
||||
if (filterFn(fileOrDir)) {
|
||||
filteredEntries.push({
|
||||
...fileOrDir,
|
||||
children: filteredChildren,
|
||||
})
|
||||
}
|
||||
filteredEntries.push(...filteredChildren)
|
||||
} else if (filterFn(fileOrDir)) {
|
||||
filteredEntries.push(fileOrDir)
|
||||
}
|
||||
}
|
||||
return filteredEntries
|
||||
}
|
||||
|
||||
// Read the contents of a project directory
|
||||
// and return all relevant files and sub-directories recursively
|
||||
export async function readProject(projectDir: string) {
|
||||
const readFiles = await readDir(projectDir, {
|
||||
recursive: true,
|
||||
})
|
||||
|
||||
return deepFileFilter(readFiles, isRelevantFileOrDir)
|
||||
}
|
||||
|
||||
// Given a read project, return the number of .kcl files,
|
||||
// both in the root directory and in sub-directories,
|
||||
// and folders that contain at least one .kcl file
|
||||
export function getPartsCount(project: FileEntry[]) {
|
||||
const flatProject = deepFileFilterFlat(project, isRelevantFileOrDir)
|
||||
|
||||
const kclFileCount = flatProject.filter((f) =>
|
||||
f.name?.endsWith(FILE_EXT)
|
||||
).length
|
||||
const kclDirCount = flatProject.filter((f) => f.children !== undefined).length
|
||||
|
||||
return {
|
||||
kclFileCount,
|
||||
kclDirCount,
|
||||
}
|
||||
}
|
||||
|
||||
// Determines if a file or directory is relevant to the project
|
||||
// i.e. not a hidden file or directory, and is a relevant file type
|
||||
// or contains at least one relevant file (even if it's nested)
|
||||
// or is a completely empty directory
|
||||
export function isRelevantFileOrDir(fileOrDir: FileEntry) {
|
||||
let isRelevantDir = false
|
||||
if ('children' in fileOrDir && fileOrDir.children !== undefined) {
|
||||
isRelevantDir =
|
||||
!isHidden(fileOrDir) &&
|
||||
(fileOrDir.children.some(isRelevantFileOrDir) ||
|
||||
fileOrDir.children.length === 0)
|
||||
}
|
||||
const isRelevantFile =
|
||||
!isHidden(fileOrDir) &&
|
||||
RELEVANT_FILE_TYPES.some((ext) => fileOrDir.name?.endsWith(ext))
|
||||
|
||||
return (
|
||||
(isDir(fileOrDir) && isRelevantDir) || (!isDir(fileOrDir) && isRelevantFile)
|
||||
)
|
||||
}
|
||||
|
||||
// Deeply sort the files and directories in a project like VS Code does:
|
||||
// The main.kcl file is always first, then files, then directories
|
||||
// Files and directories are sorted alphabetically
|
||||
export function sortProject(project: FileEntry[]): FileEntry[] {
|
||||
const sortedProject = project.sort((a, b) => {
|
||||
if (a.name === PROJECT_ENTRYPOINT) {
|
||||
return -1
|
||||
} else if (b.name === PROJECT_ENTRYPOINT) {
|
||||
return 1
|
||||
} else if (a.children === undefined && b.children !== undefined) {
|
||||
return -1
|
||||
} else if (a.children !== undefined && b.children === undefined) {
|
||||
return 1
|
||||
} else if (a.name && b.name) {
|
||||
return a.name.localeCompare(b.name)
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
|
||||
return sortedProject.map((fileOrDir: FileEntry) => {
|
||||
if ('children' in fileOrDir && fileOrDir.children !== undefined) {
|
||||
return {
|
||||
...fileOrDir,
|
||||
children: sortProject(fileOrDir.children),
|
||||
}
|
||||
} else {
|
||||
return fileOrDir
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Creates a new file in the default directory with the default project name
|
||||
// Returns the path to the new file
|
||||
export async function createNewProject(
|
||||
@ -104,7 +234,7 @@ export async function createNewProject(
|
||||
return {
|
||||
name: path.slice(path.lastIndexOf('/') + 1),
|
||||
path: path,
|
||||
entrypoint_metadata: m,
|
||||
entrypointMetadata: m,
|
||||
children: [
|
||||
{
|
||||
name: PROJECT_ENTRYPOINT,
|
||||
|
||||
178
src/machines/fileMachine.ts
Normal file
178
src/machines/fileMachine.ts
Normal file
@ -0,0 +1,178 @@
|
||||
import { assign, createMachine } from 'xstate'
|
||||
import { ProjectWithEntryPointMetadata } from 'Router'
|
||||
import { FileEntry } from '@tauri-apps/api/fs'
|
||||
|
||||
export const FILE_PERSIST_KEY = 'Last opened KCL files'
|
||||
export const DEFAULT_FILE_NAME = 'Untitled'
|
||||
|
||||
export const fileMachine = createMachine(
|
||||
{
|
||||
/** @xstate-layout N4IgpgJg5mDOIC5QAkD2BbMACdBDAxgBYCWAdmAHTK6xampYAOATqgFZj4AusAxAMLMwuLthbtOXANoAGALqJQjVLGJdiqUopAAPRAHYAbPooAWABwBGUwE5zAJgeGArM-MAaEAE9EN0wGYKGX97GX1nGVNDS0MbfwBfeM80TBwCEnIqGiZWDm4+ACUwUlxU8TzpeW1lVXVNbT0EcJNg02d-fzt7fU77Tx8EQ0iKCPtnfUsjGRtLGXtE5IxsPCIySmpacsk+QWFRHIluWQUkEBq1DS1TxqN7ChjzOxtXf0t7a37EcwsRibH-ZzRezA8wLEApZbpNZZTa5ba8AAiYAANmB9lsjlVTuc6ldQDdDOYKP5bm0os5TDJDJ8mlEzPpzIZHA4bO9umCIWlVpkNgcKnwAPKMYp8yTHaoqC71a6IEmBUz6BkWZzWDq2Uw0qzOIJAwz+PXWfSmeZJcFLLkZSi7ERkKCi7i8CCaShkABuqAA1pR8EIRGAALQYyonJSS3ENRDA2wUeyvd6dPVhGw0-RhGOp8IA8xGFkc80rS0Ua3qUh2oO8MDMVjMCiMZEiABmqGY6AoPr2AaD4uxYcuEYQoQpQWNNjsMnMgLGKbT3TC7TcOfsNjzqQL0KKJXQtvtXEdzoobs9lCEm87cMxIbOvel+MQqtMQRmS5ks31sZpAUsZkcIX+cQZJIrpC3KUBupTbuWlbVrW9ZcE2LYUCepRnocwYSrUfYyggbzvBQ+jMq49imLYwTUt4iCft+5i-u0-7UfoQEWtCSKoiWZbnruTqZIeXoUBAKJoihFTdqGGE3rod7UdqsQTI8hiGAqrIauRA7RvYeoqhO1jtAqjFrpkLFohBHEVlWzYwY2zatvxrFCWKWKiVKeISdh4yBJE-jGs4fhhA4zg0kRNgxhplhaW0nn4XpUKZEUuAQMZqF8FxLqkO6vG+hAgYcbAIlXmJzmNERdy0RYNiKgpthxDSEU6q8MSTJYjWGFFIEULF8WljuSX7jxx7CJlQY5ZYl44pht4IP61gyPc8njt0lIuH51UKrVVITEyMy2C1hbtQl-KmdBdaWQhGVZYluWjeJjSTf402shMEyuEyljPAFL0UNmMiuN86lWHMiSmvQ-HwKcnL6WA6FOf2k3mESMRDA4RpUm4U4qf6gSEt0QIvvqfjOCaiyrtF6zZPQXWQ+GWFlUEsbmNMf1TV9NLeXDcqRIySnNaaYPEzC5M9vl-b+IyFCjupryPF9jKWP5Kks-cbMWLERHRNt0LFntkgU2NLk4dqsz43YsTK++Kk2C+MbTOOcxzOMrhqzFxTgZ1Qba1dd6BUE1jGsLMxxK9KlDNqm3tMLUQvqYlgO5QhlsTubsFXesTTUuPTfHExshDS0RftRftGgEnTZtHbX9Zr+QJ-2S4Y3qnmTC+4tMyp1EfeOnmeQqdOhyXQrFOXXCV1hCkmLDOnBJYvRRDSsyRzGjiKj0lKdAkANAA */
|
||||
id: 'File machine',
|
||||
|
||||
initial: 'Reading files',
|
||||
|
||||
context: {
|
||||
project: {} as ProjectWithEntryPointMetadata,
|
||||
selectedDirectory: {} as FileEntry,
|
||||
},
|
||||
|
||||
on: {
|
||||
assign: {
|
||||
actions: assign((_, event) => ({
|
||||
...event.data,
|
||||
})),
|
||||
target: '.Reading files',
|
||||
},
|
||||
},
|
||||
states: {
|
||||
'Has no files': {
|
||||
on: {
|
||||
'Create file': {
|
||||
target: 'Creating file',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'Has files': {
|
||||
on: {
|
||||
'Rename file': {
|
||||
target: 'Renaming file',
|
||||
},
|
||||
|
||||
'Create file': {
|
||||
target: 'Creating file',
|
||||
},
|
||||
|
||||
'Delete file': {
|
||||
target: 'Deleting file',
|
||||
},
|
||||
|
||||
'Open file': {
|
||||
target: 'Opening file',
|
||||
},
|
||||
|
||||
'Set selected directory': {
|
||||
target: 'Has files',
|
||||
actions: ['setSelectedDirectory'],
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'Creating file': {
|
||||
invoke: {
|
||||
id: 'create-file',
|
||||
src: 'createFile',
|
||||
onDone: [
|
||||
{
|
||||
target: 'Reading files',
|
||||
actions: ['toastSuccess'],
|
||||
},
|
||||
],
|
||||
onError: [
|
||||
{
|
||||
target: 'Reading files',
|
||||
actions: ['toastError'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
'Renaming file': {
|
||||
invoke: {
|
||||
id: 'rename-file',
|
||||
src: 'renameFile',
|
||||
onDone: [
|
||||
{
|
||||
target: '#File machine.Reading files',
|
||||
actions: ['toastSuccess'],
|
||||
},
|
||||
],
|
||||
onError: [
|
||||
{
|
||||
target: '#File machine.Reading files',
|
||||
actions: ['toastError'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
'Deleting file': {
|
||||
invoke: {
|
||||
id: 'delete-file',
|
||||
src: 'deleteFile',
|
||||
onDone: [
|
||||
{
|
||||
actions: ['toastSuccess'],
|
||||
target: '#File machine.Reading files',
|
||||
},
|
||||
],
|
||||
onError: {
|
||||
actions: ['toastError'],
|
||||
target: '#File machine.Has files',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'Reading files': {
|
||||
invoke: {
|
||||
id: 'read-files',
|
||||
src: 'readFiles',
|
||||
onDone: [
|
||||
{
|
||||
cond: 'Has at least 1 file',
|
||||
target: 'Has files',
|
||||
actions: ['setFiles'],
|
||||
},
|
||||
{
|
||||
target: 'Has no files',
|
||||
actions: ['setFiles'],
|
||||
},
|
||||
],
|
||||
onError: [
|
||||
{
|
||||
target: 'Has no files',
|
||||
actions: ['toastError'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
'Opening file': {
|
||||
entry: ['navigateToFile'],
|
||||
},
|
||||
},
|
||||
|
||||
schema: {
|
||||
events: {} as
|
||||
| { type: 'Open file'; data: { name: string } }
|
||||
| {
|
||||
type: 'Rename file'
|
||||
data: { oldName: string; newName: string; isDir: boolean }
|
||||
}
|
||||
| { type: 'Create file'; data: { name: string; makeDir: boolean } }
|
||||
| { type: 'Delete file'; data: FileEntry }
|
||||
| { type: 'Set selected directory'; data: FileEntry }
|
||||
| { type: 'navigate'; data: { name: string } }
|
||||
| {
|
||||
type: 'done.invoke.read-files'
|
||||
data: ProjectWithEntryPointMetadata
|
||||
}
|
||||
| { type: 'assign'; data: { [key: string]: any } },
|
||||
},
|
||||
|
||||
predictableActionArguments: true,
|
||||
preserveActionOrder: true,
|
||||
tsTypes: {} as import('./fileMachine.typegen').Typegen0,
|
||||
},
|
||||
{
|
||||
actions: {
|
||||
setFiles: assign((_, event) => {
|
||||
return { project: event.data }
|
||||
}),
|
||||
setSelectedDirectory: assign((_, event) => {
|
||||
return { selectedDirectory: event.data }
|
||||
}),
|
||||
},
|
||||
}
|
||||
)
|
||||
96
src/machines/fileMachine.typegen.ts
Normal file
96
src/machines/fileMachine.typegen.ts
Normal file
@ -0,0 +1,96 @@
|
||||
// This file was automatically generated. Edits will be overwritten
|
||||
|
||||
export interface Typegen0 {
|
||||
'@@xstate/typegen': true
|
||||
internalEvents: {
|
||||
'done.invoke.create-file': {
|
||||
type: 'done.invoke.create-file'
|
||||
data: unknown
|
||||
__tip: 'See the XState TS docs to learn how to strongly type this.'
|
||||
}
|
||||
'done.invoke.delete-file': {
|
||||
type: 'done.invoke.delete-file'
|
||||
data: unknown
|
||||
__tip: 'See the XState TS docs to learn how to strongly type this.'
|
||||
}
|
||||
'done.invoke.read-files': {
|
||||
type: 'done.invoke.read-files'
|
||||
data: unknown
|
||||
__tip: 'See the XState TS docs to learn how to strongly type this.'
|
||||
}
|
||||
'done.invoke.rename-file': {
|
||||
type: 'done.invoke.rename-file'
|
||||
data: unknown
|
||||
__tip: 'See the XState TS docs to learn how to strongly type this.'
|
||||
}
|
||||
'error.platform.create-file': {
|
||||
type: 'error.platform.create-file'
|
||||
data: unknown
|
||||
}
|
||||
'error.platform.delete-file': {
|
||||
type: 'error.platform.delete-file'
|
||||
data: unknown
|
||||
}
|
||||
'error.platform.read-files': {
|
||||
type: 'error.platform.read-files'
|
||||
data: unknown
|
||||
}
|
||||
'error.platform.rename-file': {
|
||||
type: 'error.platform.rename-file'
|
||||
data: unknown
|
||||
}
|
||||
'xstate.init': { type: 'xstate.init' }
|
||||
}
|
||||
invokeSrcNameMap: {
|
||||
createFile: 'done.invoke.create-file'
|
||||
deleteFile: 'done.invoke.delete-file'
|
||||
readFiles: 'done.invoke.read-files'
|
||||
renameFile: 'done.invoke.rename-file'
|
||||
}
|
||||
missingImplementations: {
|
||||
actions: 'navigateToFile' | 'toastError' | 'toastSuccess'
|
||||
delays: never
|
||||
guards: 'Has at least 1 file'
|
||||
services: 'createFile' | 'deleteFile' | 'readFiles' | 'renameFile'
|
||||
}
|
||||
eventsCausingActions: {
|
||||
navigateToFile: 'Open file'
|
||||
setFiles: 'done.invoke.read-files'
|
||||
setSelectedDirectory: 'Set selected directory'
|
||||
toastError:
|
||||
| 'error.platform.create-file'
|
||||
| 'error.platform.delete-file'
|
||||
| 'error.platform.read-files'
|
||||
| 'error.platform.rename-file'
|
||||
toastSuccess:
|
||||
| 'done.invoke.create-file'
|
||||
| 'done.invoke.delete-file'
|
||||
| 'done.invoke.rename-file'
|
||||
}
|
||||
eventsCausingDelays: {}
|
||||
eventsCausingGuards: {
|
||||
'Has at least 1 file': 'done.invoke.read-files'
|
||||
}
|
||||
eventsCausingServices: {
|
||||
createFile: 'Create file'
|
||||
deleteFile: 'Delete file'
|
||||
readFiles:
|
||||
| 'assign'
|
||||
| 'done.invoke.create-file'
|
||||
| 'done.invoke.delete-file'
|
||||
| 'done.invoke.rename-file'
|
||||
| 'error.platform.create-file'
|
||||
| 'error.platform.rename-file'
|
||||
| 'xstate.init'
|
||||
renameFile: 'Rename file'
|
||||
}
|
||||
matchesStates:
|
||||
| 'Creating file'
|
||||
| 'Deleting file'
|
||||
| 'Has files'
|
||||
| 'Has no files'
|
||||
| 'Opening file'
|
||||
| 'Reading files'
|
||||
| 'Renaming file'
|
||||
tags: never
|
||||
}
|
||||
@ -174,7 +174,7 @@ const Home = () => {
|
||||
return (
|
||||
<div className="h-screen overflow-hidden relative flex flex-col">
|
||||
<AppHeader showToolbar={false} />
|
||||
<div className="my-24 overflow-y-auto max-w-5xl w-full mx-auto">
|
||||
<div className="my-24 px-4 lg:px-0 overflow-y-auto max-w-5xl w-full mx-auto">
|
||||
<section className="flex justify-between">
|
||||
<h1 className="text-3xl text-bold">Your Projects</h1>
|
||||
<div className="flex">
|
||||
|
||||
@ -33,7 +33,8 @@ import {
|
||||
import { ONBOARDING_PROJECT_NAME } from './Onboarding'
|
||||
|
||||
export const Settings = () => {
|
||||
const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData
|
||||
const loaderData =
|
||||
(useRouteLoaderData(paths.FILE) as IndexLoaderData) || undefined
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const isFileSettings = location.pathname.includes(paths.FILE)
|
||||
@ -100,7 +101,7 @@ export const Settings = () => {
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-40 overflow-auto body-bg">
|
||||
<AppHeader showToolbar={false} project={loaderData?.project}>
|
||||
<AppHeader showToolbar={false} project={loaderData}>
|
||||
<ActionButton
|
||||
Element="link"
|
||||
to={location.pathname.replace(paths.SETTINGS, '')}
|
||||
|
||||
Reference in New Issue
Block a user