add popup menus, track selection

hlorenzi · Oct 29, 2020 · b231177 · b231177
1 parent 0b90aca
commit b231177
Show file tree

Hide file tree

Showing 25 changed files with 600 additions and 138 deletions.
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
 
 		.popupButton
 		{
-			background-color: #111;
+			background-color: transparent;
 			color: #fff;
 		}
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,8 @@ import React, { useRef } from "react"
 import * as Dockable from "./dockable"
 import * as Project from "./project"
 import * as Prefs from "./prefs"
+import * as Popup from "./popup"
+import * as Menubar from "./menubar"
 import { useRefState } from "./util/refState"
 import EditorWindow from "./windows/EditorWindow"
 import WindowTest from "./windows/WindowTest"
@@ -27,15 +29,48 @@ export default function App()
 
     const projectCtx = useRefState(() => Project.Root.getDefault())
     const prefsCtx = useRefState(() => Prefs.getDefault())
+    const popupCtx = useRefState(() => Popup.getDefaultCtx())
 
     return <>
         <Project.ProjectContext.Provider value={ projectCtx }>
         <Prefs.PrefsContext.Provider value={ prefsCtx }>
-            <Dockable.Container
-                state={ dockableState }
-                setState={ (state: Dockable.State) => setDockableState(state) }
-                contentIdToComponent={ contentIdToComponent }
-            />
+        <Popup.PopupContext.Provider value={ popupCtx }>
+            <div style={{
+                display: "grid",
+                gridTemplate: "auto 1fr / 1fr",
+                width: "100vw",
+                height: "100vh",
+            }}>
+
+                <Menubar.Root>
+                    <Menubar.Item label="File">
+                        <Popup.Root>
+                            <Popup.Button label="New"/>
+                            <Popup.Button label="Open..."/>
+                        </Popup.Root>
+                    </Menubar.Item>
+                    <Menubar.Item label="Edit">
+                        <Popup.Root>
+                        </Popup.Root>
+                    </Menubar.Item>
+                    <Menubar.Item label="View">
+                        <Popup.Root>
+                        </Popup.Root>
+                    </Menubar.Item>
+                </Menubar.Root>
+
+                <Dockable.Container
+                    state={ dockableState }
+                    setState={ (state: Dockable.State) => setDockableState(state) }
+                    contentIdToComponent={ contentIdToComponent }
+                />
+
+            </div>
+
+            { !popupCtx.ref.current.elem ? null :
+                <popupCtx.ref.current.elem/>
+            }
+        </Popup.PopupContext.Provider>
         </Prefs.PrefsContext.Provider>
         </Project.ProjectContext.Provider>
     </>

diff --git a/src/dockable/Container.tsx b/src/dockable/Container.tsx
@@ -67,7 +67,7 @@ export function Container(props: DockableProps)
 
     return <div style={{
         width: "100%",
-        height: "100vh",
+        height: "100%",
         backgroundColor: colorVoid,
     }}>
 
@@ -120,7 +120,7 @@ export function Container(props: DockableProps)
         }
 
         <div ref={ rootRef } style={{
-            position: "absolute",
+            position: "relative",
             top: "0px",
             left: "0px",
             width: "100%",

diff --git a/src/editor/EditorElement.tsx b/src/editor/EditorElement.tsx
@@ -2,9 +2,11 @@ import React from "react"
 import * as Editor from "./index"
 import * as Project from "../project"
 import * as Prefs from "../prefs"
+import * as Popup from "../popup"
 import { useRefState } from "../util/refState"
 import Rect from "../util/rect"
 import { EditorUpdateData } from "./state"
+import styled from "styled-components"
 
 
 declare class ResizeObserver
@@ -15,6 +17,21 @@ declare class ResizeObserver
 }
 
 
+const StyledTrackButton = styled.button`
+    pointer-events: auto;
+    color: #fff;
+    border: 1px solid #888;
+    border-radius: 0.5em;
+    background-color: #2f3136;
+    padding: 0.5em 1em;
+
+    &:hover
+    {
+        border: 1px solid #fff;
+    }
+`
+
+
 export function EditorElement()
 {
     const refDiv = React.useRef<HTMLDivElement | null>(null)
@@ -23,13 +40,15 @@ export function EditorElement()
     const editorState = useRefState(() => Editor.init())
     const project = Project.useProject()
     const prefs = Prefs.usePrefs()
+    const popup = Popup.usePopup()
 
     const makeUpdateData: () => EditorUpdateData = () =>
     {
         return {
             state: editorState.ref.current,
             project: project.ref.current,
             prefs: prefs.ref.current,
+            popup,
             ctx: null!,
         }
     }
@@ -115,7 +134,7 @@ export function EditorElement()
 
             /*if (contentCtx.contentState.tracks.some((tr: any) => !!tr.draw) || mouseAction & (Editor.actionDraw))
                 refCanvas.current!.style.cursor = "crosshair"
-            else*/ if (mouseAction & (Editor.EditorAction.DragTime))
+            else*/ if (mouseAction & (Editor.EditorAction.DragTime | Editor.EditorAction.DragTrack))
                 cursor = (state.mouse.down ? "grabbing" : "grab")
             else if (mouseAction & (Editor.EditorAction.Pan))
                 cursor = "move"
@@ -186,6 +205,13 @@ export function EditorElement()
             const updateData = makeUpdateData()
 			Editor.keyUp(updateData, ev.key.toLowerCase())
         }
+
+		const onRefreshProjectTracks = (ev: Event) =>
+		{
+            const updateData = makeUpdateData()
+            Editor.refreshTracks(updateData)
+            render()
+        }
 
         refCanvas.current!.addEventListener("mousemove", onMouseMove)
         refCanvas.current!.addEventListener("mousedown", onMouseDown)
@@ -196,6 +222,8 @@ export function EditorElement()
         window.addEventListener("keydown", onKeyDown)
         window.addEventListener("keyup", onKeyUp)
 
+        window.addEventListener("refreshProjectTracks", onRefreshProjectTracks)
+
         return () =>
         {
             refCanvas.current!.removeEventListener("mousemove", onMouseMove)
@@ -206,11 +234,41 @@ export function EditorElement()
 
             window.removeEventListener("keydown", onKeyDown)
             window.removeEventListener("keyup", onKeyUp)
+
+            window.removeEventListener("refreshProjectTracks", onRefreshProjectTracks)
         }
 
     }, [refCanvas.current])
 
 
+    const yTrackEnd =
+        editorState.ref.current.tracks.length == 0 ?
+            0 :
+            editorState.ref.current.tracks[editorState.ref.current.tracks.length - 1].renderRect.y2
+
+    const onAddTrack = () =>
+    {
+        let proj = project.ref.current
+        proj = Project.Root.upsertTrack(proj, new Project.TrackNotes())
+        project.ref.current = proj
+        project.commit()
+
+        const ev = new Event("refreshProjectTracks")
+        window.dispatchEvent(ev)
+    }
+
+    const onTrackOptions = (ev: React.MouseEvent, trackIndex: number) =>
+    {
+        popup.ref.current.elem = () =>
+        {
+            return <Popup.Root>
+                <Popup.Button label="Delete"/>
+            </Popup.Root>
+        }
+        popup.ref.current.rect = Rect.fromElement(ev.target as HTMLElement)
+        popup.commit()
+    }
+
 	return (
 		<div ref={ refDiv } style={{
 			width: "100%",
@@ -223,19 +281,51 @@ export function EditorElement()
                 height: "100%",
 			}}/>
 
-			{ /*contentCtx.contentState.tracks.map((track, i) =>
+			{ editorState.ref.current.tracks.map((track, i) =>
 				<div key={ i } style={{
 					position: "absolute",
 					left: 0,
-					top: track.y - contentCtx.contentState.trackScroll,
-					width: contentCtx.contentState.trackHeaderW,
-					height: track.h,
-					padding: "0.1em 0.25em",
-					pointerEvents: "none",
+					top: track.renderRect.y - editorState.ref.current.trackScroll,
+					width: editorState.ref.current.trackHeaderW,
+                    height: track.renderRect.h,
+                    boxSizing: "border-box",
+					padding: "1em 1em",
+                    userSelect: "none",
+                    pointerEvents: "none",
+
+                    display: "grid",
+                    gridTemplate: "1fr / 1fr auto",
+                    alignItems: "center",
 				}}>
-					Track Name
+					<div>Track Name</div>
+                    <StyledTrackButton
+                        onClick={ ev => onTrackOptions(ev, i) }
+                    >
+                        ...{/*🔧*/}
+                    </StyledTrackButton>
 				</div>
-			)*/ }
+			)}
+
+            <div style={{
+                position: "absolute",
+                left: 0,
+                top: yTrackEnd - editorState.ref.current.trackScroll,
+                width: editorState.ref.current.trackHeaderW,
+                height: 100,
+                boxSizing: "border-box",
+                padding: "1em 1em",
+                userSelect: "none",
+                pointerEvents: "none",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "start",
+            }}>
+                <StyledTrackButton
+                    onClick={ onAddTrack }
+                >
+                    +{/*➕*/}
+                </StyledTrackButton>
+            </div>
 		</div>
 	)
 }