Skip to content

Commit 416ba8d

Browse files
esimkowitzesimkowitz
authored
Add settings to control the size of the magnified/ephemeral nodes and their blur (#1319)
1 parent c7d7c0a commit 416ba8d

File tree

11 files changed

+134
-199
lines changed

11 files changed

+134
-199
lines changed

‎docs/docs/config.mdx

Lines changed: 52 additions & 42 deletions
Large diffs are not rendered by default.

‎frontend/app/block/block.less

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,10 +271,13 @@
271271
}
272272
}
273273

274+
--magnified-block-opacity: 0.6;
275+
--magnified-block-blur: 10px;
276+
274277
&.magnified,
275278
&.ephemeral {
276-
background-color: rgb(from var(--block-bg-color) r g b / 60%);
277-
backdrop-filter: blur(10px);
279+
background-color: rgb(from var(--block-bg-color) r g b / var(--magnified-block-opacity));
280+
backdrop-filter: blur(var(--magnified-block-blur));
278281
}
279282

280283
.connstatus-overlay {

‎frontend/app/block/blockframe.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,10 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
444444
const connModalOpen = jotai.useAtomValue(changeConnModalAtom);
445445
const isMagnified = jotai.useAtomValue(nodeModel.isMagnified);
446446
const isEphemeral = jotai.useAtomValue(nodeModel.isEphemeral);
447-
447+
const [magnifiedBlockBlurAtom] = React.useState(() => getSettingsKeyAtom("window:magnifiedblockblurprimarypx"));
448+
const magnifiedBlockBlur = jotai.useAtomValue(magnifiedBlockBlurAtom);
449+
const [magnifiedBlockOpacityAtom] = React.useState(() => getSettingsKeyAtom("window:magnifiedblockopacity"));
450+
const magnifiedBlockOpacity = jotai.useAtomValue(magnifiedBlockOpacityAtom);
448451
const connBtnRef = React.useRef<HTMLDivElement>();
449452
React.useEffect(() => {
450453
if (!manageConnection) {
@@ -506,6 +509,12 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
506509
onClick={blockModel?.onClick}
507510
onFocusCapture={blockModel?.onFocusCapture}
508511
ref={blockModel?.blockRef}
512+
style={
513+
{
514+
"--magnified-block-opacity": magnifiedBlockOpacity,
515+
"--magnified-block-blur": `${magnifiedBlockBlur}px`,
516+
} as React.CSSProperties
517+
}
509518
>
510519
<BlockMask nodeModel={nodeModel} />
511520
{preview || viewModel == null ? null : (

‎frontend/layout/lib/TileLayout.stories.tsx.archive

Lines changed: 0 additions & 132 deletions
This file was deleted.

‎frontend/layout/lib/TileLayout.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright 2024, Command Line Inc.
22
// SPDX-License-Identifier: Apache-2.0
33

4+
import { getSettingsKeyAtom } from "@/app/store/global";
45
import clsx from "clsx";
56
import { toPng } from "html-to-image";
67
import { Atom, useAtomValue, useSetAtom } from "jotai";
@@ -133,6 +134,8 @@ function TileLayoutComponent({ tabAtom, contents, getCursorPoint }: TileLayoutPr
133134
export const TileLayout = memo(TileLayoutComponent) as typeof TileLayoutComponent;
134135

135136
function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
137+
const [blockBlurAtom] = useState(() => getSettingsKeyAtom("window:magnifiedblockblursecondarypx"));
138+
const blockBlur = useAtomValue(blockBlurAtom);
136139
const ephemeralNode = useAtomValue(layoutModel.ephemeralNode);
137140
const magnifiedNodeId = useAtomValue(layoutModel.treeStateAtom).magnifiedNodeId;
138141

@@ -159,6 +162,8 @@ function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
159162
}
160163
}, [ephemeralNode, magnifiedNodeId]);
161164

165+
const blockBlurStr = `${blockBlur}px`;
166+
162167
return (
163168
<>
164169
{showMagnifiedBackdrop && (
@@ -167,6 +172,7 @@ function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
167172
onClick={() => {
168173
layoutModel.magnifyNodeToggle(magnifiedNodeId);
169174
}}
175+
style={{ "--block-blur": blockBlurStr } as CSSProperties}
170176
/>
171177
)}
172178
{showEphemeralBackdrop && (
@@ -175,6 +181,7 @@ function NodeBackdrops({ layoutModel }: { layoutModel: LayoutModel }) {
175181
onClick={() => {
176182
layoutModel.closeNode(ephemeralNode?.id);
177183
}}
184+
style={{ "--block-blur": blockBlurStr } as CSSProperties}
178185
/>
179186
)}
180187
</>

‎frontend/layout/lib/layoutModel.ts

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright 2024, Command Line Inc.
22
// SPDX-License-Identifier: Apache-2.0
33

4+
import { getSettingsKeyAtom } from "@/app/store/global";
45
import { atomWithThrottle, boundNumber } from "@/util/util";
56
import { Atom, atom, Getter, PrimitiveAtom, Setter } from "jotai";
67
import { splitAtom } from "jotai/utils";
@@ -189,6 +190,7 @@ export class LayoutModel {
189190
* The last node to be an ephemeral node. This node should sit at a higher z-index than the others so that it floats above the other nodes as it returns to its original position.
190191
*/
191192
lastEphemeralNodeId: string;
193+
magnifiedNodeSizeAtom: Atom<number>;
192194

193195
/**
194196
* The size of the resize handles, in CSS pixels.
@@ -278,6 +280,7 @@ export class LayoutModel {
278280
});
279281

280282
this.ephemeralNode = atom();
283+
this.magnifiedNodeSizeAtom = getSettingsKeyAtom("window:magnifiedblocksize");
281284

282285
this.focusedNode = atom((get) => {
283286
const treeState = get(this.treeStateAtom);
@@ -503,12 +506,15 @@ export class LayoutModel {
503506

504507
const boundingRect = this.getBoundingRect();
505508

509+
const magnifiedNodeSize = this.getter(this.magnifiedNodeSizeAtom);
510+
506511
const callback = (node: LayoutNode) =>
507512
this.updateTreeHelper(
508513
node,
509514
newAdditionalProps,
510515
newLeafs,
511516
resizeHandleSizePx,
517+
magnifiedNodeSize,
512518
boundingRect,
513519
resizeAction
514520
);
@@ -519,7 +525,13 @@ export class LayoutModel {
519525
const ephemeralNode = this.getter(this.ephemeralNode);
520526
if (ephemeralNode) {
521527
console.log("updateTree ephemeralNode", ephemeralNode);
522-
this.updateEphemeralNodeProps(ephemeralNode, newAdditionalProps, newLeafs, boundingRect);
528+
this.updateEphemeralNodeProps(
529+
ephemeralNode,
530+
newAdditionalProps,
531+
newLeafs,
532+
magnifiedNodeSize,
533+
boundingRect
534+
);
523535
}
524536

525537
this.treeState.leafOrder = getLeafOrder(newLeafs, newAdditionalProps);
@@ -547,6 +559,7 @@ export class LayoutModel {
547559
additionalPropsMap: Record<string, LayoutNodeAdditionalProps>,
548560
leafs: LayoutNode[],
549561
resizeHandleSizePx: number,
562+
magnifiedNodeSizePct: number,
550563
boundingRect: Dimensions,
551564
resizeAction?: LayoutTreeResizeNodeAction
552565
) {
@@ -555,12 +568,13 @@ export class LayoutModel {
555568
const addlProps = additionalPropsMap[node.id];
556569
if (addlProps) {
557570
if (this.magnifiedNodeId === node.id) {
571+
const magnifiedNodeMarginPct = (1 - magnifiedNodeSizePct) / 2;
558572
const transform = setTransform(
559573
{
560-
top: boundingRect.height * 0.05,
561-
left: boundingRect.width * 0.05,
562-
width: boundingRect.width * 0.9,
563-
height: boundingRect.height * 0.9,
574+
top: boundingRect.height * magnifiedNodeMarginPct,
575+
left: boundingRect.width * magnifiedNodeMarginPct,
576+
width: boundingRect.width * magnifiedNodeSizePct,
577+
height: boundingRect.height * magnifiedNodeSizePct,
564578
},
565579
true,
566580
true,
@@ -1039,7 +1053,8 @@ export class LayoutModel {
10391053
const addlProps = this.getter(this.additionalProps);
10401054
const leafs = this.getter(this.leafs);
10411055
const boundingRect = this.getBoundingRect();
1042-
this.updateEphemeralNodeProps(ephemeralNode, addlProps, leafs, boundingRect);
1056+
const magnifiedNodeSizePct = this.getter(this.magnifiedNodeSizeAtom);
1057+
this.updateEphemeralNodeProps(ephemeralNode, addlProps, leafs, magnifiedNodeSizePct, boundingRect);
10431058
this.setter(this.additionalProps, addlProps);
10441059
this.focusNode(ephemeralNode.id);
10451060
}
@@ -1066,14 +1081,19 @@ export class LayoutModel {
10661081
node: LayoutNode,
10671082
addlPropsMap: Record<string, LayoutNodeAdditionalProps>,
10681083
leafs: LayoutNode[],
1084+
magnifiedNodeSizePct: number,
10691085
boundingRect: Dimensions
10701086
) {
1087+
const ephemeralNodeSizePct = this.magnifiedNodeId
1088+
? magnifiedNodeSizePct * magnifiedNodeSizePct
1089+
: magnifiedNodeSizePct;
1090+
const ephemeralNodeMarginPct = (1 - ephemeralNodeSizePct) / 2;
10711091
const transform = setTransform(
10721092
{
1073-
top: boundingRect.height * 0.075,
1074-
left: boundingRect.width * 0.075,
1075-
width: boundingRect.width * 0.85,
1076-
height: boundingRect.height * 0.85,
1093+
top: boundingRect.height * ephemeralNodeMarginPct,
1094+
left: boundingRect.width * ephemeralNodeMarginPct,
1095+
width: boundingRect.width * ephemeralNodeSizePct,
1096+
height: boundingRect.height * ephemeralNodeSizePct,
10771097
},
10781098
true,
10791099
true,

‎frontend/layout/lib/tilelayout.less

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,16 @@
106106
}
107107
}
108108

109+
--block-blur: 2px;
110+
109111
.magnified-node-backdrop,
110112
.ephemeral-node-backdrop {
111113
position: absolute;
112114
top: 0;
113115
left: 0;
114116
width: 100%;
115117
height: 100%;
116-
backdrop-filter: blur(2px);
118+
backdrop-filter: blur(var(--block-blur));
117119
}
118120

119121
.magnified-node-backdrop {

‎frontend/types/gotypes.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -548,6 +548,10 @@ declare global {
548548
"window:nativetitlebar"?: boolean;
549549
"window:disablehardwareacceleration"?: boolean;
550550
"window:maxtabcachesize"?: number;
551+
"window:magnifiedblockopacity"?: number;
552+
"window:magnifiedblocksize"?: number;
553+
"window:magnifiedblockblurprimarypx"?: number;
554+
"window:magnifiedblockblursecondarypx"?: number;
551555
"telemetry:*"?: boolean;
552556
"telemetry:enabled"?: boolean;
553557
"conn:*"?: boolean;

‎pkg/wconfig/defaultconfig/settings.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
"window:tilegapsize": 3,
1414
"window:maxtabcachesize": 10,
1515
"window:nativetitlebar": true,
16+
"window:magnifiedblockopacity": 0.6,
17+
"window:magnifiedblocksize": 0.9,
18+
"window:magnifiedblockblurprimarypx": 10,
19+
"window:magnifiedblockblursecondarypx": 2,
1620
"telemetry:enabled": true,
1721
"term:copyonselect": true
1822
}

‎pkg/wconfig/metaconsts.go

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ const (
6161
ConfigKey_WindowNativeTitleBar = "window:nativetitlebar"
6262
ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration"
6363
ConfigKey_WindowMaxTabCacheSize = "window:maxtabcachesize"
64+
ConfigKey_WindowMagnifiedBlockOpacity = "window:magnifiedblockopacity"
65+
ConfigKey_WindowMagnifiedBlockSize = "window:magnifiedblocksize"
66+
ConfigKey_WindowMagnifiedBlockBlurPrimaryPx = "window:magnifiedblockblurprimarypx"
67+
ConfigKey_WindowMagnifiedBlockBlurSecondaryPx = "window:magnifiedblockblursecondarypx"
6468

6569
ConfigKey_TelemetryClear = "telemetry:*"
6670
ConfigKey_TelemetryEnabled = "telemetry:enabled"

0 commit comments

Comments
 (0)