-
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
108 changed files
with
2,516 additions
and
3,661 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,155 +1,42 @@ | ||
| import React from "react" | ||
| import DockableRoot from "./dockable/DockableRoot" | ||
| import DockableData, { DockingMode, Root, Content } from "./dockable/DockableData" | ||
| import { EditorContent } from "./editor2/EditorContent" | ||
| import { AppState, AppReducer, ContentManager, AppManager } from "./AppState" | ||
| import { AppContext } from "./AppContext" | ||
| import EditorState from "./editor2/editor" | ||
| import Project from "./project/project2" | ||
| import Immutable from "immutable" | ||
| import Rect from "./util/rect" | ||
| import MenuBar from "./popup/MenuBar" | ||
| import Popup from "./popup/Popup" | ||
| import InspectorContent from "./editor2/InspectorContent" | ||
| import TrackInstrumentContent from "./editor2/TrackInstrumentContent" | ||
| import { usePlaybackController } from "./playback/PlaybackController" | ||
| import { useSoundfontLibrary } from "./playback/library" | ||
| import React, { useRef } from "react" | ||
| import * as Dockable from "./dockable" | ||
| import * as Project from "./project" | ||
| import * as Prefs from "./prefs" | ||
| import { useRefState } from "./util/refState" | ||
| import EditorWindow from "./windows/EditorWindow" | ||
| import WindowTest from "./windows/WindowTest" | ||
|
|
||
|
|
||
| const initialAppState = AppReducer.makeNew() | ||
|
|
||
|
|
||
| export default function App(props: {}) | ||
| export default function App() | ||
| { | ||
| const rootRef = React.useRef<HTMLDivElement>(null) | ||
|
|
||
| const [, setDummy] = React.useState(0) | ||
| const appStateRef = React.useRef<AppState>(initialAppState) | ||
| const appDispatch = React.useCallback((newState: AppState) => | ||
| const [dockableState, setDockableState] = React.useState(() => | ||
| { | ||
| //console.log(newState) | ||
| appStateRef.current = newState | ||
| setDummy(dummy => dummy + 1) | ||
|
|
||
| }, []) | ||
| let root = Dockable.makeRoot() | ||
| root = Dockable.addPanel(root, 1, Dockable.DockMode.Full, 1) | ||
| root = Dockable.addPanel(root, 1, Dockable.DockMode.Full, 2) | ||
| root = Dockable.addPanel(root, 1, Dockable.DockMode.Full, 3) | ||
| root = Dockable.addPanel(root, 1, Dockable.DockMode.Full, 4) | ||
|
|
||
| const setDockableRoot = (newRoot: Root) => appDispatch({ | ||
| ...appStateRef.current, | ||
| dockableRoot: newRoot, | ||
| return root | ||
| }) | ||
|
|
||
| const appManager = new AppManager( | ||
| () => appStateRef.current, | ||
| (newState) => appStateRef.current = newState, | ||
| (newState) => appDispatch(newState)) | ||
|
|
||
| const playbackController = usePlaybackController(appManager) | ||
| const soundfontLibrary = useSoundfontLibrary(appManager) | ||
|
|
||
| React.useEffect(() => | ||
| const contentIdToComponent = (id: Dockable.WindowId) => | ||
| { | ||
| if (!rootRef.current) | ||
| return | ||
|
|
||
| const onResize = () => | ||
| { | ||
| const elemRect = rootRef.current!.getBoundingClientRect() | ||
|
|
||
| appDispatch({ | ||
| ...appStateRef.current, | ||
| dockableRect: new Rect( | ||
| elemRect.x, | ||
| elemRect.y, | ||
| elemRect.width, | ||
| elemRect.height), | ||
| }) | ||
| } | ||
|
|
||
| onResize() | ||
|
|
||
| window.addEventListener("resize", onResize) | ||
|
|
||
| return () => | ||
| { | ||
| window.removeEventListener("resize", onResize) | ||
| } | ||
|
|
||
| }, [rootRef.current]) | ||
|
|
||
|
|
||
| return <AppContext.Provider value={{ appManager }}> | ||
| <div style={{ | ||
| position: "absolute", | ||
| top: "0px", | ||
| left: "0px", | ||
| width: "100vw", | ||
| height: "100vh", | ||
| display: "grid", | ||
| gridTemplate: "auto 1fr / 1fr", | ||
| }}> | ||
| <MenuBar/> | ||
|
|
||
| <div ref={ rootRef } style={{ | ||
| width: "100%", | ||
| height: "100%", | ||
| pointerEvents: "none", | ||
| zIndex: -1000, | ||
| }}/> | ||
|
|
||
| <DockableRoot | ||
| root={ appStateRef.current.dockableRoot } | ||
| rect={ appStateRef.current.dockableRect } | ||
| setRoot={ setDockableRoot } | ||
| contents={ appStateRef.current.dockableContents } | ||
| contentTypeToComponent={ contentTypeToComponent } | ||
| contentTypeToTitle={ contentTypeToTitle } | ||
| /> | ||
|
|
||
| { !appStateRef.current.popup ? null : | ||
| <Popup | ||
| rect={ appStateRef.current.popup.rect } | ||
| isSub={ false } | ||
| popupElem={ appStateRef.current.popup.elem } | ||
| popupProps={ appStateRef.current.popup.props } | ||
| /> | ||
| } | ||
|
|
||
| <input | ||
| id="gInputFileOpen" | ||
| type="file" | ||
| accept=".mid,.json,.txt" | ||
| style={{ display: "none" }} | ||
| /> | ||
| </div> | ||
| </AppContext.Provider> | ||
| } | ||
|
|
||
|
|
||
| function contentTypeToComponent(type: string): any | ||
| { | ||
| switch (type) | ||
| { | ||
| case "editor": return EditorContent | ||
| case "editorNotes": return EditorContent | ||
| case "inspector": return InspectorContent | ||
| case "trackInstrument": return TrackInstrumentContent | ||
|
|
||
| default: | ||
| throw "invalid content type" | ||
| return EditorWindow | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function contentTypeToTitle(type: string): any | ||
| { | ||
| switch (type) | ||
| { | ||
| case "editor": return "Project" | ||
| case "editorNotes": return "Note Track" | ||
| case "inspector": return "Inspector" | ||
| case "trackInstrument": return "Instrument Select" | ||
| const projectCtx = useRefState(() => Project.Root.getDefault()) | ||
| const prefsCtx = useRefState(() => Prefs.getDefault()) | ||
|
|
||
| default: | ||
| throw "invalid content type" | ||
| } | ||
| return <> | ||
| <Project.ProjectContext.Provider value={ projectCtx }> | ||
| <Prefs.PrefsContext.Provider value={ prefsCtx }> | ||
| <Dockable.Container | ||
| state={ dockableState } | ||
| setState={ (state: Dockable.State) => setDockableState(state) } | ||
| contentIdToComponent={ contentIdToComponent } | ||
| /> | ||
| </Prefs.PrefsContext.Provider> | ||
| </Project.ProjectContext.Provider> | ||
| </> | ||
| } |
Oops, something went wrong.