11 | {toasts
12 | .filter((current) => current.visible)
13 | .map((current) => (
14 |
39 | );
40 | }
--------------------------------------------------------------------------------
/src/components/modal/ModalCommands.tsx:
--------------------------------------------------------------------------------
1 | import { useCommandsStore } from '../../store/commands'
2 | import useModal from '../../hooks/useModal'
3 |
4 | import {
5 | Dialog,
6 | DialogContent,
7 | DialogHeader,
8 | DialogTitle,
9 | } from "@/components/ui/dialog"
10 |
11 | export default function ModalCommands() {
12 | const { isOpenedCommandsModal, closeCommandsModal } = useModal()
13 | const { commands } = useCommandsStore()
14 |
15 | return (
16 |
43 | )
44 | }
--------------------------------------------------------------------------------
/src/components/modal/ModalExport.tsx:
--------------------------------------------------------------------------------
1 | import useModal from "../../hooks/useModal"
2 | import { JSONTree } from 'react-json-tree'
3 | import CONSTANTS from "../../constants"
4 | import { useDocumentStore } from "../../store/document"
5 |
6 | import {
7 | Dialog,
8 | DialogContent,
9 | DialogHeader,
10 | DialogTitle,
11 | } from "@/components/ui/dialog"
12 | import { ScrollArea } from "@/components/ui/scroll-area"
13 | import { Button } from "@/components/ui/button"
14 | import { useFilesStore } from "@/store/files"
15 | import { useGraphStore } from "@/store/graph"
16 | import { useLayoutStore } from "@/store/layout"
17 | import { useHistoryStore } from "@/store/history"
18 | import { useSettingsStore } from "@/store/settings"
19 | import { useCommandsStore } from "@/store/commands"
20 | import { useElementsStore } from "@/store/elements"
21 |
22 | export default function ModalExport() {
23 | const { isOpenedExportModal, closeExportModal } = useModal()
24 | const { document: documentStore } = useDocumentStore()
25 | const { files } = useFilesStore()
26 | const { graph, graphLock } = useGraphStore()
27 | const { layout, footer } = useLayoutStore()
28 | const { history } = useHistoryStore()
29 | const { loadingView, settings } = useSettingsStore()
30 | const { commands } = useCommandsStore()
31 | const { elements, current, contextElementId } = useElementsStore()
32 |
33 | const data = {
34 | document: documentStore,
35 | files,
36 | graph,
37 | graphLock,
38 | layout,
39 | footer,
40 | history,
41 | loadingView,
42 | settings,
43 | commands,
44 | elements,
45 | current,
46 | contextElementId,
47 | }
48 |
49 | function download(){
50 | const element = document.createElement("a");
51 | const textFile = new Blob([JSON.stringify(data, null, 2)]);
52 | element.href = URL.createObjectURL(textFile);
53 | element.download = `${documentStore.title}-${Date.now()}-threed-studio.json`;
54 | document.body.appendChild(element);
55 | element.click();
56 | }
57 |
58 | return (
59 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/modal/ModalNewFile.tsx:
--------------------------------------------------------------------------------
1 | import { FormEvent, useEffect, useRef } from "react";
2 | import useModal from "../../hooks/useModal";
3 | import { nanoid } from 'nanoid';
4 | import { useLayoutStore } from "../../store/layout";
5 | import { useFilesStore } from "../../store/files";
6 |
7 | import {
8 | Dialog,
9 | DialogContent,
10 | DialogHeader,
11 | DialogTitle,
12 | } from "@/components/ui/dialog"
13 | import { Button } from "@/components/ui/button"
14 | import { Input } from "@/components/ui/input"
15 |
16 | export default function ModalNewFile() {
17 | const { isOpeneNewFileModal, closeNewFileModal } = useModal()
18 | const { setModalOpen } = useLayoutStore()
19 | const { updateFiles } = useFilesStore()
20 |
21 | const titleRef = useRef
15 |
16 | {current.type === 'loading' ? (
36 |
37 | ))}
38 |
20 |
21 | {String(current?.message).split('\n')[0]}
22 |
23 | {String(current?.message).split('\n')[1] && (
24 |
25 | {String(current?.message).split('\n')[1]}
26 |
27 | )}
28 |
29 |
30 | {current.type !== 'loading' && (
31 |
34 | )}
35 |
21 |
39 | )
40 | }
--------------------------------------------------------------------------------
/src/components/resources/CodePicker.tsx:
--------------------------------------------------------------------------------
1 | import { useElementsStore } from "@/store/elements"
2 | import { useFilesStore } from "@/store/files"
3 | import { IconFile, IconFileOff } from "@tabler/icons-react"
4 |
5 | export default function CodePicker() {
6 | const { current, updateElement } = useElementsStore()
7 | const { files } = useFilesStore()
8 |
9 | const handleChange = (value:string) => {
10 | updateElement({
11 | id: current.id,
12 | fileId: value
13 | })
14 | }
15 |
16 | if(!current) {
17 | return null
18 | }
19 |
20 | return (
21 |
22 | {CONSTANTS.sounds.map((item:string) => (
23 |
38 |
24 |
36 | ))}
37 | handleChange(item)}
26 | style={{
27 | borderColor: current.soundUrl !== item ?'#1d283a':'white'
28 | }}>
29 |
35 |
30 |
32 |
33 | {item}
34 |
22 |
52 | )
53 | }
--------------------------------------------------------------------------------
/src/components/resources/EnvironmentPicker.tsx:
--------------------------------------------------------------------------------
1 | import CONSTANTS from "@/constants"
2 | import { useElementsStore } from "@/store/elements"
3 |
4 | export default function EnvironmentPicker() {
5 | const { current, updateElement } = useElementsStore()
6 |
7 | const handleChange = (value:string) => {
8 | updateElement({
9 | id: current.id,
10 | environment: value
11 | })
12 | }
13 |
14 | if(!current || !current.environment) {
15 | return null
16 | }
17 |
18 | return (
19 |
23 |
51 |
24 |
35 | {files.map((item) => (
36 | handleChange('')}
26 | style={{
27 | borderColor: current.fileId !== '' ?'#1d283a':'white'
28 | }}>
29 |
34 |
30 |
32 | none
33 |
37 |
49 | ))}
50 | handleChange(item.id)}
39 | style={{
40 | borderColor: current.fileId !== item.id ?'#1d283a':'white'
41 | }}>
42 |
48 |
43 |
45 |
46 | {item.name}
47 |
20 |
36 | )
37 | }
--------------------------------------------------------------------------------
/src/components/resources/ImagePicker.tsx:
--------------------------------------------------------------------------------
1 | import CONSTANTS from "@/constants"
2 | import { useElementsStore } from "@/store/elements"
3 |
4 | const images = [
5 | 'react-threejs.png',
6 | 'threejs-react.png',
7 | ]
8 |
9 | export default function ImagePicker() {
10 | const { current, updateElement } = useElementsStore()
11 |
12 | const handleChange = (value:string) => {
13 | updateElement({
14 | id: current.id,
15 | file: value
16 | })
17 | }
18 |
19 | if(!current || !current.file) {
20 | return null
21 | }
22 |
23 | return (
24 |
21 | {CONSTANTS.environment.map((item:string) => (
22 |
35 |
23 |
33 | ))}
34 | handleChange(item)}
25 | style={{
26 | borderColor: current.environment !== item ?'#1d283a':'white'
27 | }}>
28 | 
29 |
30 |
32 |
29 |
30 | {item}
31 |
25 |
41 | )
42 | }
--------------------------------------------------------------------------------
/src/components/resources/MaterialPicker.tsx:
--------------------------------------------------------------------------------
1 | import CONSTANTS from "@/constants"
2 | import { useElementsStore } from "@/store/elements"
3 |
4 | export default function MaterialPicker() {
5 | const { current, updateElement } = useElementsStore()
6 |
7 | const handleChange = (value:string) => {
8 | updateElement({
9 | id: current.id,
10 | material_type: value
11 | })
12 | }
13 |
14 | const isDisable = (value: string) => JSON.stringify(CONSTANTS.materials[value]) === '{}'
15 |
16 | if(!current || !current.material_type) {
17 | return null
18 | }
19 |
20 | return (
21 |
26 | {images.map((item:string) => (
27 |
40 |
28 |
38 | ))}
39 | handleChange(item)}
30 | style={{
31 | borderColor: current.file !== item ?'#1d283a':'white'
32 | }}>
33 | 
34 |
35 |
37 |
34 |
35 | {item}
36 |
22 |
37 | )
38 | }
--------------------------------------------------------------------------------
/src/components/resources/Resources.tsx:
--------------------------------------------------------------------------------
1 | import MaterialPicker from "./MaterialPicker";
2 | import TexturePicker from "./TexturePicker";
3 | import CodePicker from "./CodePicker";
4 | import EnvironmentPicker from "./EnvironmentPicker";
5 | import ImagePicker from "./ImagePicker";
6 | import AudioPicker from "./AudioPicker";
7 | import { useSettingsStore } from "@/store/settings";
8 | import { Button } from "../ui/button";
9 | import { IconArrowLeft } from "@tabler/icons-react";
10 |
11 | export default function Resources() {
12 | const {settings, setPicker} = useSettingsStore()
13 |
14 | if(settings.picker === '') {
15 | return null
16 | }
17 |
18 | return (
19 |
23 | {Object.keys(CONSTANTS.materials).filter((itm) => !isDisable(itm)).map((item:string) => (
24 |
36 |
25 |
34 | ))}
35 | handleChange(item)}
27 | style={{
28 | borderColor: current.material_type !== item ?'#1d283a':'white'
29 | }}>
30 | 
31 |
33 |
31 | {item}
32 |
20 |
33 | )
34 | }
--------------------------------------------------------------------------------
/src/components/resources/TexturePicker.tsx:
--------------------------------------------------------------------------------
1 | import CONSTANTS from "@/constants"
2 | import { useElementsStore } from "@/store/elements"
3 |
4 | export default function TexturePicker() {
5 | const { current, updateElement } = useElementsStore()
6 |
7 | const handleChange = (value:string) => {
8 | updateElement({
9 | id: current.id,
10 | texture: value
11 | })
12 | }
13 |
14 | if(!current || !current.texture) {
15 | return null
16 | }
17 |
18 | return (
19 |
21 |
24 |
26 | {(settings.picker === 'material') && {settings.picker}
25 |
20 |
46 | )
47 | }
--------------------------------------------------------------------------------
/src/components/screens/CodeEditor.tsx:
--------------------------------------------------------------------------------
1 | import { Editor, useMonaco } from '@monaco-editor/react'
2 | import { IconX } from '@tabler/icons-react';
3 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
4 |
5 | import getEditorLang from '../../utils/getEditorLang'
6 | import useCodeEditor from '../../hooks/useCodeEditor'
7 | import { useCommandsStore } from '../../store/commands'
8 | import { Button } from '@/components/ui/button'
9 |
10 | function EmptyScreen() {
11 | const { commands } = useCommandsStore()
12 |
13 | return (
14 |
21 |
45 |
22 |
31 | {CONSTANTS.textures.map((item:string) => (
32 | handleChange('none')}
24 | style={{
25 | borderColor: current.texture !== 'none' ?'#1d283a':'white'
26 | }}>
27 |
28 |
30 | none
29 |
33 |
43 | ))}
44 | handleChange(item)}
35 | style={{
36 | borderColor: current.texture !== item ?'#1d283a':'white'
37 | }}>
38 | 
39 |
40 |
42 |
39 |
40 | {item}
41 |
15 | {commands.map((item, index) => (
16 |
29 | )
30 | }
31 |
32 | export default function CodeEditor() {
33 | const {
34 | openedObjects,
35 | closeFile,
36 | updateCode,
37 | openFile
38 | } = useCodeEditor()
39 |
40 | const monaco = useMonaco()
41 | monaco?.editor.defineTheme('my-theme', {
42 | base: 'vs-dark',
43 | inherit: true,
44 | rules: [],
45 | colors: {
46 | 'editor.background': '#000000',
47 | 'minimap.background': '#060606',
48 | },
49 | });
50 |
51 |
52 | if(openedObjects.length < 1) {
53 | return
17 | {item.label}
18 |
27 | ))}
28 |
19 | {item.data.map((subitem, subindex) => (
20 |
21 | {subindex === 0 ? '' : ' + '}
22 | {subitem}
23 |
24 | ))}
25 |
26 |
58 | item.selected)[0]?.id} className="h-full bg-transparent">
59 |
60 | {openedObjects.map((item) => (
61 | item.selected)[0]?.id ? 'border' : ''}`}>
62 | <>
63 |
73 | ))}
74 |
75 | {openedObjects.map((item) => (
76 |
77 | updateCode(item.id, e)}
82 | />
83 |
84 | ))}
85 |
86 |
87 | )
88 | }
--------------------------------------------------------------------------------
/src/components/screens/Mesa.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas } from '@react-three/fiber'
2 |
3 | import EditorControls from '../general/EditorControls'
4 | import ElementsRender from '../general/ElementsRender'
5 | import CameraControls from '../general/CameraControls'
6 | import Helpers from '../general/Helpers'
7 | import { useDocumentStore } from '../../store/document'
8 | import { useElementsStore } from '../../store/elements'
9 | import { useSettingsStore } from '@/store/settings'
10 |
11 | export default function Mesa() {
12 | const { document } = useDocumentStore()
13 | const { setCurrent } = useElementsStore()
14 | const { loadingView } = useSettingsStore()
15 |
16 | const canvas = document.canvas
17 | const onPointerMissed = () => setCurrent(null)
18 |
19 | return (
20 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/toolbar/ToolbarBottom.tsx:
--------------------------------------------------------------------------------
1 | import Actions from '../general/Actions'
2 | import useToolbar from '../../hooks/useToolbar'
3 | import mountToolbarActions from '../../utils/mountToolbarActions'
4 | import CONSTANTS from '../../constants'
5 | import { useElementsStore } from '../../store/elements'
6 | import { useLayoutStore } from '../../store/layout'
7 | import { Badge } from "@/components/ui/badge"
8 | export default function ToolbarBottom() {
9 | const { showHorizontalBottom } = useToolbar()
10 | const { current } = useElementsStore()
11 | const { footer, setFooter } = useLayoutStore()
12 |
13 | const toolbarHorizontalBottom = mountToolbarActions(
14 | CONSTANTS.toolbar.bottom,
15 | {
16 | log: { onClick: () => setFooter(footer === 'log' ? null : 'log') },
17 | previus_change: { onClick: null },
18 | next_change: { onClick: null },
19 | studio: { onClick: () => setFooter(footer === 'studio' ? null : 'studio') },
20 | })
21 |
22 | if(!showHorizontalBottom) {
23 | return
24 | }
25 |
26 | return (
27 | <>
28 | openFile(item.id)}>{item.name}
64 |
71 |
72 |
29 | <>
30 |
31 |
32 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/toolbar/ToolbarRight.tsx:
--------------------------------------------------------------------------------
1 | import Actions from '../general/Actions'
2 | import Properties from '../window/Properties'
3 | import Layers from '../window/Layers'
4 | import History from '../window/History'
5 | import useToolbar from '../../hooks/useToolbar'
6 | import { useState } from 'react'
7 | import mountToolbarActions from '../../utils/mountToolbarActions'
8 | import CONSTANTS from '../../constants'
9 |
10 | import {
11 | Accordion,
12 | AccordionContent,
13 | AccordionItem,
14 | AccordionTrigger,
15 | } from "@/components/ui/accordion"
16 |
17 |
18 | import Icon from '../general/Icon'
19 |
20 | export default function ToolbarRight() {
21 | const [opened, setOpen] = useState('0')
22 |
23 | const {
24 | toggleOpenRight,
25 | showVerticalRight,
26 | isRightOpen
27 | } = useToolbar()
28 |
29 | const setOpenNumber = (value: number) => {
30 | toggleOpenRight();
31 | setOpen(String(value));
32 | }
33 |
34 | const toolbarVerticalRight = mountToolbarActions(
35 | CONSTANTS.toolbar.right,
36 | {
37 | properties: {
38 | onClick: () => setOpenNumber(0),
39 | component:
33 |
34 | {current
35 | ? (
36 | <>
37 |
38 | {current.id}
39 |
40 |
41 | {current.type}
42 |
43 |
44 | )
45 | : 'No item selected'}
46 |
47 |
48 |
49 |
58 | {!isRightOpen ? (
59 |
60 | ) : (
61 |
92 | )
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
5 | import { ChevronDown } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Accordion = AccordionPrimitive.Root
10 |
11 | const AccordionItem = React.forwardRef<
12 | React.ElementRef
62 |
63 |
64 | {toolbarVerticalRight.map((item, index:number) => (
65 |
66 | {
69 | if(String(index)===opened) {
70 | toggleOpenRight()
71 | } else {
72 | setOpen(String(index))
73 | }
74 | }}
75 | >
76 |
81 |
82 |
86 |
87 | ))}
88 |
89 |
90 | )}
91 |
77 |
78 | {item.label}
79 |
80 |
83 | {item.component}
84 |
85 | {children}
56 |
16 |
20 | )
21 | }
22 | return (
23 | 17 | No change identified 18 |
19 |
24 |
31 | )
32 | }
--------------------------------------------------------------------------------
/src/components/window/Layers.tsx:
--------------------------------------------------------------------------------
1 | import { IconCopyOff } from '@tabler/icons-react'
2 | import { useElementsStore } from '../../store/elements'
3 | import elementsBase from '@/elements'
4 |
5 | import {
6 | Tooltip,
7 | TooltipContent,
8 | TooltipTrigger,
9 | } from "@/components/ui/tooltip"
10 | import Icon from '../general/Icon'
11 | import { Button } from '@/components/ui/button'
12 |
13 | function TooltipCopy() {
14 | return (
15 | Unique element cannot be duplicated
21 |
20 |
22 | )
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/window/MediaMaker.tsx:
--------------------------------------------------------------------------------
1 | import { useHotkeys, useMouse } from "@mantine/hooks";
2 | import { useEffect, useState } from "react";
3 | import { useInterval } from "@mantine/hooks";
4 |
5 | const TIMES = 24
6 |
7 | export default function MediaMaker() {
8 | const { ref, x } = useMouse();
9 |
10 | const [seconds, setSeconds] = useState(0);
11 | const interval = useInterval(() => setSeconds((s) => s + 1), 10);
12 |
13 | useEffect(() => {
14 | if(seconds > 60*TIMES) {
15 | setSeconds(0)
16 | }
17 | }, [seconds])
18 |
19 |
20 | useHotkeys([
21 | ['Space', (event) => {
22 | event.preventDefault();
23 | interval.toggle()
24 | }],
25 | ]);
26 |
27 | return (
28 | setSeconds(x)}
32 | >
33 |
48 | )
49 | }
--------------------------------------------------------------------------------
/src/components/window/ProjectFiles.tsx:
--------------------------------------------------------------------------------
1 | import TreeView, { flattenTree } from "react-accessible-treeview";
2 | import { IconPlus } from "@tabler/icons-react";
3 | import useModal from "../../hooks/useModal";
4 | import useProjectFiles from "../../hooks/useProjectFiles";
5 | import FolderIcon from "../general/FolderIcon";
6 | import FileIcon from "../general/FileIcon";
7 | import "../../styles/SidebarCode.css";
8 | import { useDocumentStore } from "../../store/document";
9 | import { useFilesStore } from "../../store/files";
10 |
11 | import { Button } from "@/components/ui/button";
12 |
13 | export default function ProjectFiles() {
14 | const { openNewFileModal } = useModal()
15 | const { openFile } = useProjectFiles()
16 | const { document } = useDocumentStore()
17 | const { files } = useFilesStore()
18 |
19 | const data = flattenTree({
20 | name: "",
21 | children: [
22 | {
23 | name: document.title,
24 | children: files,
25 | },
26 | ]
27 | });
28 |
29 | const selectedFile = files.find(({selected}) => selected)
30 |
31 | return (
32 |
34 | {Array.from(Array(TIMES).keys()).map((item) => (
35 |
40 |
36 | {item+1}s
37 |
38 | ))}
39 |
41 |
45 |
46 | {seconds}
47 |
33 |
34 |
68 | );
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/window/Properties.tsx:
--------------------------------------------------------------------------------
1 | // import PropertiesForm from '@/components/form/PropertiesForm';
2 | // import { useDocumentStore } from '@/store/document';
3 | // import React from 'react';
4 | import { useElementsStore } from '@/store/elements';
5 | // import { ElementType } from '@/types';
6 | // import { Leva, useControls } from "leva";
7 | import DocumentProps from '@/components/properties/DocumentProps';
8 | import { elementControls } from '@/elements';
9 | import Resources from '../resources/Resources';
10 | import { useSettingsStore } from '@/store/settings';
11 | import { useEffect } from 'react';
12 | import { Leva } from 'leva';
13 |
14 | function CurrentProperties() {
15 | const { current } = useElementsStore()
16 | const CurrentPropsComponent = elementControls[current.type]
17 | return
35 | e.element.name.includes('.') && openFile(String(e.element.id))}
41 | nodeRenderer={({
42 | element,
43 | isBranch,
44 | isExpanded,
45 | getNodeProps,
46 | level,
47 | }) => (
48 |
67 |
49 | {isBranch || !element.name.includes('.') ? (
50 |
59 | )}
60 | />
61 |
62 |
63 |
66 |
56 | {element.name}
57 |
58 |
36 |
38 |
39 | )
40 | // return (
41 | //
58 |
60 |
61 | )
62 |
63 | // const {
64 | // eventObject,
65 | // object,
66 | // id,
67 | // type,
68 | // editable,
69 | // ...restOfCurrent
70 | // } = current
71 |
72 | // return (
73 | //
11 |
13 |