Skip to content

Commit

Permalink
add window titles and preferred sizes
Browse files Browse the repository at this point in the history
  • Loading branch information
@hlorenzi
hlorenzi committed Nov 21, 2020
1 parent 6c6232a commit 0c56217
Show file tree
Hide file tree
Showing 12 changed files with 198 additions and 105 deletions.
46 changes: 1 addition & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<head>
<meta charset="utf-8"/>
<title>Music Analysis</title>
<title>TheoryTracker</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap">
</head>

Expand Down Expand Up @@ -42,50 +42,6 @@
background-color: #08f;
color: #fff;
}

#canvasMain
{
width: 100vw;
height: calc(100vh - 16em);
}

#divToolbox
{
width: 100vw;
height: 16em;
}

.ribbonButton
{
background-color: #fff;
transition: background-color 0.2s, opacity 0.2s;
}

.ribbonButton:hover
{
background-color: #eee;
}

.ribbonButton:active
{
background-color: #ccc;
}

.ribbonSlot
{
background-color: #fff;
transition: background-color 0.2s, opacity 0.2s;
}

.ribbonSlot:hover
{
background-color: #eee;
}

.ribbonButtonSelected
{
background-color: #f75 !important;
}
</style>


Expand Down
6 changes: 1 addition & 5 deletions src/MenuWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@ export default function MenuWindow()

const onOpenWindow = (elem: any, data: any) =>
{
dockable.ref.current.createFloating(
elem, data,
new Rect(
100, 100,
1, 1))
dockable.ref.current.createFloating(elem, data)
}


Expand Down
86 changes: 70 additions & 16 deletions src/dockable/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@ const StyledCloseButton = styled.button`
{
border: 1px solid #fff;
}
&:active
{
border: 1px solid #fff;
background-color: #000;
}
`


Expand Down Expand Up @@ -62,14 +68,37 @@ export function Container()


const layoutRef = React.useRef<Dockable.Layout>(null!)
const rectRef = React.useRef<Rect>(null!)
rectRef.current = rect
layoutRef.current = React.useMemo(() =>
{
return DockableData.getLayout(dockable.ref.current.state, rect)

}, [rect, dockable.update])


React.useEffect(() =>
{
let refreshed = false
for (const panel of dockable.ref.current.state.floatingPanels)
{
if (panel.justOpened)
{
panel.justOpened = false
panel.rect.w = panel.preferredFloatingSize.w
panel.rect.h = panel.preferredFloatingSize.h
Dockable.clampFloatingPanels(dockable.ref.current.state, rectRef.current)
refreshed = true
}
}

if (refreshed)
dockable.commit()

}, [dockable.update])


const mouseData = useMouseHandler(layoutRef)
const mouseData = useMouseHandler(layoutRef, rectRef)

const anchorSize = 5
const anchorColor = "#0bf"
Expand Down Expand Up @@ -223,7 +252,7 @@ function Panel(props: any)
borderTopRightRadius: "0.5em",
borderTopLeftRadius: "0.5em",
}}>
{ "Content " + cId }
{ panelRect.panel.windowTitles[idx] || "New Window" }
<StyledCloseButton
onClick={ ((ev: MouseEvent) => mouseHandler.onPanelTabClose(ev, panelRect.panel, idx)) as any }
>
Expand All @@ -242,9 +271,33 @@ function Panel(props: any)
const data = !dockable.ref.current.contentIdToData ? null :
dockable.ref.current.contentIdToData(cId)

const setTitle = (title: string) =>
{
if (panelRect.panel.windowTitles[idx] != title)
{
panelRect.panel.windowTitles[idx] = title
dockable.commit()
}
}

const setPreferredSize = (w: number, h: number) =>
{
if (idx == panelRect.panel.curWindowIndex &&
(w != panelRect.panel.preferredFloatingSize.w ||
h != panelRect.panel.preferredFloatingSize.h))
{
panelRect.panel.preferredFloatingSize = new Rect(0, 0, w, h)
dockable.commit()
}
}

return <WindowContext.Provider key={ cId } value={{
panel: panelRect.panel,
contentId: cId,
data,

setTitle,
setPreferredSize,
}}>
<div style={{
display: panelRect.panel.curWindowIndex == idx ? "block" : "none",
Expand Down Expand Up @@ -334,7 +387,10 @@ interface MouseHandlerData
}


function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): MouseHandlerData
function useMouseHandler(
layoutRef: React.MutableRefObject<Dockable.Layout>,
rectRef: React.MutableRefObject<Rect>)
: MouseHandlerData
{
const dockableRef = Dockable.useDockable()

Expand Down Expand Up @@ -415,7 +471,7 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo

if (state.mouseAction == MouseAction.MoveHeader)
{
if (state.grabbedTab === null)
if (state.grabbedTab === null || state.grabbedPanel!.windowIds.length == 1)
{
if (!state.grabbedPanel!.floating)
{
Expand All @@ -430,12 +486,10 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
Dockable.coallesceEmptyPanels(dockable)

state.grabbedPanel!.rect = new Rect(
state.mousePos.x - 150, state.mousePos.y,
300, 200)

state.grabbedPanel!.rect = new Rect(
state.mousePos.x - 150, state.mousePos.y,
300, 200)
state.mousePos.x - state.grabbedPanel!.preferredFloatingSize.w / 2,
state.mousePos.y,
state.grabbedPanel!.preferredFloatingSize.w,
state.grabbedPanel!.preferredFloatingSize.h)
}
}
else
Expand All @@ -447,8 +501,10 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
Dockable.coallesceEmptyPanels(dockable)

state.grabbedPanel!.rect = new Rect(
state.mousePos.x - 150, state.mousePos.y,
300, 200)
state.mousePos.x - state.grabbedPanel!.preferredFloatingSize.w / 2,
state.mousePos.y,
state.grabbedPanel!.preferredFloatingSize.w,
state.grabbedPanel!.preferredFloatingSize.h)
}

bringToFront(state.grabbedPanel!)
Expand Down Expand Up @@ -501,6 +557,8 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
state.nearestAnchor.panel,
state.nearestAnchor.mode)
}

Dockable.clampFloatingPanels(dockable, rectRef.current)
}

state.mouseDown = false
Expand Down Expand Up @@ -528,7 +586,6 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
const onPanelHeaderMouseDown = (ev: MouseEvent, panel: Dockable.Panel) =>
{
ev.preventDefault()
ev.stopPropagation()
const state = stateRef.ref.current
state.grabbedPanel = panel
state.grabbedTab = null
Expand Down Expand Up @@ -562,7 +619,6 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
const onPanelResize = (ev: MouseEvent, panel: Dockable.Panel) =>
{
ev.preventDefault()
ev.stopPropagation()
const state = stateRef.ref.current
state.grabbedPanel = panel
state.grabbedTab = null
Expand All @@ -578,7 +634,6 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
const onDividerResize = (ev: MouseEvent, divider: Dockable.Divider) =>
{
ev.preventDefault()
ev.stopPropagation()
const state = stateRef.ref.current
state.grabbedDivider = divider
state.mouseDown = true
Expand All @@ -591,7 +646,6 @@ function useMouseHandler(layoutRef: React.MutableRefObject<Dockable.Layout>): Mo
const onPanelTabClose = (ev: MouseEvent, panel: Dockable.Panel, tab: number) =>
{
ev.preventDefault()
ev.stopPropagation()
const dockable = dockableRef.ref.current.state
const window = panel.windowIds[tab]
Dockable.removeWindow(dockable, panel, window)
Expand Down
49 changes: 47 additions & 2 deletions src/dockable/state.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Root } from "../project"
import Rect from "../util/rect"


Expand Down Expand Up @@ -41,6 +42,11 @@ export interface Panel
splitPanels: Panel[]
splitMode: SplitMode
splitSize: number

windowTitles: string[]
preferredFloatingSize: Rect

justOpened: boolean
}


Expand Down Expand Up @@ -94,6 +100,11 @@ export function makeRoot(): State
splitPanels: [],
splitMode: SplitMode.LeftRight,
splitSize: 0.5,

windowTitles: [],
preferredFloatingSize: new Rect(0, 0, 300, 250),

justOpened: false,
},
floatingPanels: [],
}
Expand All @@ -113,6 +124,11 @@ export function makePanel(root: State): Panel
splitPanels: [],
splitMode: SplitMode.LeftRight,
splitSize: 0.5,

windowTitles: [],
preferredFloatingSize: new Rect(0, 0, 300, 250),

justOpened: true,
}
root.floatingPanels.push(panel)
return panel
Expand All @@ -132,14 +148,20 @@ export function detachPanel(root: State, panel: Panel)
export function addWindow(root: State, toPanel: Panel, window: WindowId)
{
toPanel.windowIds.push(window)
toPanel.windowTitles.push("")
toPanel.curWindowIndex = toPanel.windowIds.length - 1
}


export function removeWindow(root: State, fromPanel: Panel, window: WindowId)
{
fromPanel.windowIds = fromPanel.windowIds.filter(w => w !== window)
fromPanel.curWindowIndex = 0
const windowIndex = fromPanel.windowIds.findIndex(w => w === window)
if (windowIndex < 0)
return

fromPanel.windowIds.splice(windowIndex, 1)
fromPanel.windowTitles.splice(windowIndex, 1)
fromPanel.curWindowIndex = Math.max(0, Math.min(fromPanel.windowIds.length - 1, fromPanel.curWindowIndex))
}


Expand Down Expand Up @@ -180,6 +202,7 @@ export function dock(root: State, panel: Panel, dockIntoPanel: Panel, mode: Dock

detachPanel(root, panel)
panel.windowIds = []
panel.windowTitles = []
root.floatingPanels = root.floatingPanels.filter(p => p !== panel)
}
else if (mode == DockMode.Right ||
Expand All @@ -199,11 +222,14 @@ export function dock(root: State, panel: Panel, dockIntoPanel: Panel, mode: Dock

const newSubpanel = makePanel(root)
newSubpanel.windowIds = dockIntoPanel.windowIds
newSubpanel.windowTitles = dockIntoPanel.windowTitles
newSubpanel.curWindowIndex = dockIntoPanel.curWindowIndex
newSubpanel.splitMode = dockIntoPanel.splitMode
newSubpanel.splitPanels = dockIntoPanel.splitPanels
newSubpanel.splitSize = dockIntoPanel.splitSize

dockIntoPanel.windowIds = []
dockIntoPanel.windowTitles = []
dockIntoPanel.splitPanels = newSubpanels
dockIntoPanel.splitMode = subdivMode
dockIntoPanel.splitSize = subdivOriginalFirst ? 0.75 : 0.25
Expand All @@ -225,6 +251,25 @@ export function dock(root: State, panel: Panel, dockIntoPanel: Panel, mode: Dock
}


export function clampFloatingPanels(root: State, rect: Rect)
{
const margin = 10

for (const panel of root.floatingPanels)
{
panel.rect.x =
Math.max(rect.x + margin,
Math.min(rect.x2 - margin - panel.rect.w,
panel.rect.x))

panel.rect.y =
Math.max(rect.y + margin,
Math.min(rect.y2 - margin - panel.rect.h,
panel.rect.y))
}
}


export function traverseLayout(panel: Panel, rect: Rect, layout: Layout)
{
const xMid = (rect.x1 + rect.x2) / 2
Expand Down
Loading

0 comments on commit 0c56217

Please sign in to comment.