Skip to content

Commit b790fab

Browse files
pomberpomber
authored
Merge pull request #98 from code-hike/editor-height
Smarter editor height
2 parents 4164562 + d32feb5 commit b790fab

File tree

9 files changed

+238
-162
lines changed

9 files changed

+238
-162
lines changed

‎packages/mini-editor/src/editor-frame.tsx‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React from "react"
2-
import {
3-
MiniFrame,
4-
FrameButtons,
5-
} from "@code-hike/mini-frame"
2+
import { FrameButtons } from "@code-hike/mini-frame"
63
import { useClasser, Classes } from "@code-hike/classer"
74
import { EditorTheme } from "@code-hike/smooth-code/dist/themes"
85
import { getColor, ColorName } from "./theme-colors"
@@ -58,20 +55,21 @@ export const EditorFrame = React.forwardRef<
5855
ref
5956
) {
6057
const c = useClasser("ch-editor")
58+
6159
return (
62-
<MiniFrame
60+
<div
6361
ref={ref}
62+
{...rest}
63+
className="ch-frame ch-editor-frame"
6464
style={{
65-
height,
66-
["--ch-content-background" as any]: getColor(
65+
background: getColor(
6766
theme,
6867
ColorName.EditorGroupHeaderBackground
6968
),
7069
...style,
7170
}}
72-
className={c("frame") + " " + className}
73-
overflow="unset"
74-
titleBar={
71+
>
72+
<div className={"ch-frame-title-bar"}>
7573
<TabsContainer
7674
tabs={northPanel.tabs}
7775
showFrameButtons={true}
@@ -80,27 +78,19 @@ export const EditorFrame = React.forwardRef<
8078
theme={theme}
8179
onTabClick={onTabClick}
8280
/>
83-
}
84-
{...rest}
85-
>
81+
</div>
8682
<div
8783
data-ch-panel="north"
88-
className={c("body")}
8984
style={northPanel.style}
9085
children={northPanel.children}
9186
/>
9287
{southPanel && (
93-
<div
94-
data-ch-panel="south"
95-
style={{
96-
display: "flex",
97-
flexDirection: "column",
98-
...southPanel.style,
99-
}}
100-
>
88+
<>
10189
<div
10290
className={"ch-frame-title-bar"}
103-
style={{ background: "none" }}
91+
style={{
92+
transform: southPanel.style?.transform,
93+
}}
10494
>
10595
<TabsContainer
10696
tabs={southPanel.tabs}
@@ -112,18 +102,13 @@ export const EditorFrame = React.forwardRef<
112102
/>
113103
</div>
114104
<div
115-
className={c("body")}
105+
data-ch-panel="south"
116106
children={southPanel.children}
117-
style={{
118-
flexGrow: 1,
119-
flexShrink: 1,
120-
minHeight: 0,
121-
}}
107+
style={southPanel.style}
122108
/>
123-
</div>
109+
</>
124110
)}
125-
{terminalPanel}
126-
</MiniFrame>
111+
</div>
127112
)
128113
})
129114

‎packages/mini-editor/src/editor-shift.tsx‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -61,20 +61,25 @@ export function useTransition(
6161
backward: boolean,
6262
codeConfig: CodeConfig
6363
): Transition {
64+
// prevSnapshot has the dimensions of the editor for t=0
65+
// nextSnapshot has the dimensions of the editor for t=1
6466
const { prevSnapshot, nextSnapshot } = useSnapshots(
6567
ref,
6668
prev,
6769
next
6870
)
6971

72+
// we return the default styles for t=0 until we measure the dimensions
7073
if (!prevSnapshot) {
7174
return startingPosition(prev, next, codeConfig)
7275
}
7376

77+
// and the same for t=1
7478
if (!nextSnapshot) {
7579
return endingPosition(prev, next, codeConfig)
7680
}
7781

82+
// TODO this should be commented
7883
// if (t === 0) {
7984
// return startingPosition(prev, next, codeConfig)
8085
// }
@@ -114,7 +119,10 @@ export function useTransition(
114119
prevFile={prevNorthFile}
115120
nextFile={nextNorthFile}
116121
t={t}
117-
parentHeight={northStyle.height as string}
122+
parentHeight={
123+
(northStyle.height ||
124+
northStyle.minHeight) as string
125+
}
118126
/>
119127
),
120128
},
@@ -127,7 +135,10 @@ export function useTransition(
127135
prevFile={prevSouthFile!}
128136
nextFile={nextSouthFile!}
129137
t={t}
130-
parentHeight={southStyle?.height as string}
138+
parentHeight={
139+
(southStyle?.height ||
140+
southStyle?.minHeight) as string
141+
}
131142
/>
132143
),
133144
},
@@ -150,12 +161,6 @@ function startingPosition(
150161
nextSouthFile,
151162
} = getStepFiles(prev, next, true)
152163

153-
const northHeight = inputSouthPanel
154-
? `calc((100% - var(--ch-title-bar-height)) * ${inputNorthPanel.heightRatio})`
155-
: "100%"
156-
157-
const southHeight = `calc((100% - var(--ch-title-bar-height)) * ${inputSouthPanel?.heightRatio} + var(--ch-title-bar-height))`
158-
159164
return {
160165
northPanel: {
161166
tabs: inputNorthPanel.tabs.map(title => ({
@@ -164,15 +169,16 @@ function startingPosition(
164169
style: {},
165170
})),
166171
style: {
167-
height: northHeight,
172+
flexGrow: 1,
173+
overflow: "hidden",
168174
},
169175
children: (
170176
<CodeTransition
171177
codeConfig={codeConfig}
172178
prevFile={prevNorthFile}
173-
nextFile={nextNorthFile}
179+
nextFile={prevNorthFile}
174180
t={0}
175-
parentHeight={northHeight}
181+
parentHeight={"0"}
176182
/>
177183
),
178184
},
@@ -183,15 +189,16 @@ function startingPosition(
183189
style: {},
184190
})),
185191
style: {
186-
height: `calc((100% - var(--ch-title-bar-height)) * ${inputSouthPanel.heightRatio} + var(--ch-title-bar-height))`,
192+
flexGrow: 1,
193+
overflow: "hidden",
187194
},
188195
children: (
189196
<CodeTransition
190197
codeConfig={codeConfig}
191198
prevFile={prevSouthFile!}
192-
nextFile={nextSouthFile!}
199+
nextFile={prevSouthFile!}
193200
t={0}
194-
parentHeight={southHeight}
201+
parentHeight={"0"}
195202
/>
196203
),
197204
},
@@ -221,12 +228,6 @@ function endingPosition(
221228
nextNorthFile = nextSouthFile!
222229
}
223230

224-
const northHeight = inputSouthPanel
225-
? `calc((100% - var(--ch-title-bar-height)) * ${inputNorthPanel.heightRatio})`
226-
: "100%"
227-
228-
const southHeight = `calc((100% - var(--ch-title-bar-height)) * ${inputSouthPanel?.heightRatio} + var(--ch-title-bar-height))`
229-
230231
return {
231232
northPanel: {
232233
tabs: inputNorthPanel.tabs.map(title => ({
@@ -235,15 +236,16 @@ function endingPosition(
235236
style: {},
236237
})),
237238
style: {
238-
height: northHeight,
239+
flexGrow: 1,
240+
overflow: "hidden",
239241
},
240242
children: (
241243
<CodeTransition
242244
codeConfig={codeConfig}
243-
prevFile={prevNorthFile}
245+
prevFile={nextNorthFile}
244246
nextFile={nextNorthFile}
245247
t={1}
246-
parentHeight={northHeight}
248+
parentHeight={"1"}
247249
/>
248250
),
249251
},
@@ -254,15 +256,16 @@ function endingPosition(
254256
style: {},
255257
})),
256258
style: {
257-
height: southHeight,
259+
flexGrow: 1,
260+
overflow: "hidden",
258261
},
259262
children: (
260263
<CodeTransition
261264
codeConfig={codeConfig}
262-
prevFile={prevSouthFile!}
265+
prevFile={nextSouthFile!}
263266
nextFile={nextSouthFile!}
264267
t={1}
265-
parentHeight={southHeight}
268+
parentHeight={"1"}
266269
/>
267270
),
268271
},
@@ -285,7 +288,7 @@ function CodeTransition({
285288
const htmlProps = {
286289
...codeConfig?.htmlProps,
287290
style: {
288-
height: "unset",
291+
height: "100%",
289292
...codeConfig?.htmlProps?.style,
290293
},
291294
}
@@ -403,7 +406,7 @@ function getPanelStyles(
403406
) {
404407
return {
405408
northStyle: {
406-
height: prev.northHeight,
409+
minHeight: prev.northHeight,
407410
},
408411
}
409412
}
@@ -420,14 +423,14 @@ function getPanelStyles(
420423
) {
421424
return {
422425
northStyle: {
423-
height: tween(
426+
minHeight: tween(
424427
prev.northHeight,
425428
next.northHeight,
426429
t
427430
),
428431
},
429432
southStyle: {
430-
height: prev.southHeight,
433+
minHeight: prev.southHeight,
431434
},
432435
}
433436
}
@@ -444,13 +447,13 @@ function getPanelStyles(
444447
) {
445448
return {
446449
northStyle: {
447-
height: prev.northHeight,
450+
minHeight: prev.northHeight,
448451
},
449452
southStyle: {
450453
position: "relative",
451-
height: tween(
454+
minHeight: tween(
452455
prev.southHeight,
453-
next.northHeight + next.titleBarHeight,
456+
next.northHeight,
454457
t
455458
),
456459
transform: `translateY(${tween(
@@ -474,15 +477,15 @@ function getPanelStyles(
474477
) {
475478
return {
476479
northStyle: {
477-
height: tween(
480+
minHeight: tween(
478481
prev.northHeight,
479482
next.northHeight,
480483
t
481484
),
482485
},
483486
southStyle: {
484487
position: "relative",
485-
height: next.southHeight!,
488+
minHeight: next.southHeight!,
486489
},
487490
}
488491
}
@@ -499,12 +502,12 @@ function getPanelStyles(
499502
) {
500503
return {
501504
northStyle: {
502-
height: next.northHeight,
505+
minHeight: next.northHeight,
503506
},
504507
southStyle: {
505508
position: "relative",
506-
height: tween(
507-
prev.northHeight + prev.titleBarHeight,
509+
minHeight: tween(
510+
prev.northHeight,
508511
next.southHeight!,
509512
t
510513
),
@@ -524,10 +527,14 @@ function getPanelStyles(
524527
// +---+---+
525528
return {
526529
northStyle: {
527-
height: tween(prev.northHeight, next.northHeight, t),
530+
minHeight: tween(
531+
prev.northHeight,
532+
next.northHeight,
533+
t
534+
),
528535
},
529536
southStyle: {
530-
height: tween(
537+
minHeight: tween(
531538
prev.southHeight!,
532539
next.southHeight!,
533540
t
@@ -775,6 +782,7 @@ function useSnapshots(
775782

776783
useLayoutEffect(() => {
777784
if (!prevSnapshot) {
785+
// debugger
778786
setState(s => ({
779787
...s,
780788
prevSnapshot: {
@@ -783,6 +791,7 @@ function useSnapshots(
783791
},
784792
}))
785793
} else if (!nextSnapshot) {
794+
// debugger
786795
setState(s => ({
787796
...s,
788797
nextSnapshot: {

0 commit comments

Comments
 (0)