Skip to content

Commit 43df873

Browse files
devhelprdevhelpr
committed
feat: Enhance node sidebar menu with search functionality and improve layout; update range and slider nodes for better control
1 parent 80da27a commit 43df873

File tree

6 files changed

+178
-142
lines changed

6 files changed

+178
-142
lines changed

‎apps/vps-web/public/example-flows/scatterplot-linearRegression.json‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
},
2828
{
2929
"id": "11746075-622f-4e5f-bb57-faae2845a10d",
30-
"x": -4189.832167694787,
31-
"y": -230.5327188962175,
30+
"x": -4189.832062284511,
31+
"y": -230.53273131561508,
3232
"width": 150,
3333
"height": 155,
3434
"nodeType": "Shape",
@@ -52,20 +52,6 @@
5252
}
5353
}
5454
},
55-
{
56-
"id": "792ca34d-2a12-4c6b-948d-976878762f5a",
57-
"x": -4522.121461875386,
58-
"y": -123.06207201421323,
59-
"width": 200,
60-
"height": 112,
61-
"nodeType": "Shape",
62-
"nodeInfo": {
63-
"type": "value",
64-
"formValues": {
65-
"value": "100"
66-
}
67-
}
68-
},
6955
{
7056
"id": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
7157
"x": -3896.15811456064,
@@ -80,8 +66,8 @@
8066
},
8167
{
8268
"id": "28c40617-07b5-499a-8312-b18539fe6a3a",
83-
"x": -3435.7626536580715,
84-
"y": 165.3138129785275,
69+
"x": -3436.9988894158964,
70+
"y": 165.3137840963708,
8571
"width": 111.7109375,
8672
"height": 96,
8773
"nodeType": "Shape",
@@ -143,7 +129,7 @@
143129
"x": -2586.05164853934,
144130
"y": 293.3697248588114,
145131
"width": 344.5859375,
146-
"height": 152,
132+
"height": 136,
147133
"nodeType": "Shape",
148134
"nodeInfo": {
149135
"type": "register-expression-function-node",
@@ -170,12 +156,28 @@
170156
}
171157
}
172158
},
159+
{
160+
"id": "ebd52eab-8fcc-47a5-a364-26a7db5dc04f",
161+
"x": -4529.032860315769,
162+
"y": -71.86555066019824,
163+
"width": 200,
164+
"height": 124,
165+
"nodeType": "Shape",
166+
"nodeInfo": {
167+
"type": "slider",
168+
"formValues": {
169+
"value": "100",
170+
"valueSliderSettings": "{\"min\":1,\"max\":100,\"step\":1}"
171+
},
172+
"taskType": "slider"
173+
}
174+
},
173175
{
174176
"id": "f69c9d0e-9f2a-4396-8ae9-502a7473dedc",
175177
"x": -4336.352091925861,
176178
"y": -271.2406770862517,
177-
"endX": -4189.832167694787,
178-
"endY": -200.5327188962175,
179+
"endX": -4189.832062284511,
180+
"endY": -200.53273131561508,
179181
"startNodeId": "b1b5cc78-badf-4641-a5a3-446673ccdadd",
180182
"endNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
181183
"startThumbName": "output",
@@ -185,25 +187,10 @@
185187
"layer": 1,
186188
"nodeInfo": {}
187189
},
188-
{
189-
"id": "4d2bfc6a-c84c-4713-aa26-c4c7cf5fe031",
190-
"x": -4322.121461875386,
191-
"y": -67.06207201421323,
192-
"endX": -4189.832167694787,
193-
"endY": -150.5327188962175,
194-
"startNodeId": "792ca34d-2a12-4c6b-948d-976878762f5a",
195-
"endNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
196-
"startThumbName": "output",
197-
"endThumbName": "max",
198-
"lineType": "BezierCubic",
199-
"nodeType": "Connection",
200-
"layer": 1,
201-
"nodeInfo": {}
202-
},
203190
{
204191
"id": "55b8d8a4-4abb-4aae-993b-d521caf4a577",
205-
"x": -4039.832167694787,
206-
"y": -153.0327188962175,
192+
"x": -4039.8320622845113,
193+
"y": -153.03273131561508,
207194
"endX": -3896.15811456064,
208195
"endY": 36.76376610512207,
209196
"startNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
@@ -219,8 +206,8 @@
219206
"id": "5d775479-193c-4b7a-8e43-cab5ea2f9aaa",
220207
"x": -3786.15811456064,
221208
"y": 61.76376610512207,
222-
"endX": -3435.7626536580715,
223-
"endY": 213.3138129785275,
209+
"endX": -3436.9988894158964,
210+
"endY": 213.3137840963708,
224211
"startNodeId": "b5d7481b-d7d3-4fb2-ab28-c3720b702e45",
225212
"endNodeId": "28c40617-07b5-499a-8312-b18539fe6a3a",
226213
"startThumbName": "output2",
@@ -262,8 +249,8 @@
262249
},
263250
{
264251
"id": "904d1dd2-5f94-4811-a095-cf12713a961a",
265-
"x": -4039.832167694787,
266-
"y": -153.0327188962175,
252+
"x": -4039.8320622845113,
253+
"y": -153.03273131561508,
267254
"endX": -3569.3339366320247,
268255
"endY": -553.0048689865731,
269256
"startNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
@@ -334,6 +321,21 @@
334321
"nodeType": "Connection",
335322
"layer": 1,
336323
"nodeInfo": {}
324+
},
325+
{
326+
"id": "56196c2b-7c78-4ea0-91fc-e3adb22c6d4e",
327+
"x": -4329.032860315769,
328+
"y": -9.865550660198238,
329+
"endX": -4189.832062284511,
330+
"endY": -150.53273131561508,
331+
"startNodeId": "ebd52eab-8fcc-47a5-a364-26a7db5dc04f",
332+
"endNodeId": "11746075-622f-4e5f-bb57-faae2845a10d",
333+
"startThumbName": "output",
334+
"endThumbName": "max",
335+
"lineType": "BezierCubic",
336+
"nodeType": "Connection",
337+
"layer": 1,
338+
"nodeInfo": {}
337339
}
338340
]
339341
}

‎apps/vps-web/src/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -800,7 +800,7 @@ html:active-view-transition-type(normal) {
800800
@apply bg-white text-black;
801801
}
802802

803-
.taskbar-container > div {
803+
.taskbar-container .taskbar-container__scroll {
804804
scrollbar-width: thin;
805805
scrollbar-color: rgb(100, 116, 139) rgb(51, 65, 85);
806806
}

‎libs/app-canvas/src/app/components/node-sidebar-menu.tsx‎

Lines changed: 115 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -261,119 +261,140 @@ export class NodeSidebarMenuComponent extends Component<
261261
`}
262262
getElement={(element: HTMLElement) => {
263263
this.taskbarContainer = element;
264+
265+
renderElement(
266+
<div
267+
class={`absolute w-full z-[20150] top-0 p-4 flex flex-col pb-2 bg-slate-700 `}
268+
>
269+
<input
270+
type="text"
271+
class="rounded p-2 bg-slate-500 text-white border border-slate-50"
272+
input={(event: InputEvent) => {
273+
const value = (event.target as HTMLInputElement).value;
274+
if (taskbar) {
275+
taskbar
276+
.querySelectorAll('.taskbar__node-type')
277+
.forEach((node) => {
278+
if (node) {
279+
const title = node.getAttribute?.('title');
280+
if (title) {
281+
if (title.toLowerCase().includes(value)) {
282+
node.classList.remove('hidden');
283+
} else {
284+
node.classList.add('hidden');
285+
}
286+
}
287+
}
288+
});
289+
290+
taskbar
291+
.querySelectorAll('.taskbar__category')
292+
.forEach((node) => {
293+
if (node && taskbar) {
294+
const category = (node as HTMLElement).innerText;
295+
if (
296+
taskbar.querySelectorAll(
297+
`[data-category="${category}"]:not(.hidden)`
298+
).length > 0
299+
) {
300+
node.classList.remove('hidden');
301+
} else {
302+
node.classList.add('hidden');
303+
}
304+
}
305+
});
306+
}
307+
}}
308+
placeholder="Search"
309+
/>
310+
</div>,
311+
this.taskbarContainer
312+
);
264313
}}
265314
>
266315
<div
267-
class={`absolute
316+
class={`
317+
absolute
268318
flex flex-col
269-
top-0 left-0
319+
top-0 left-0 right-0
270320
z-[20050]
271-
overflow-y-scroll
272-
px-4 py-2
273-
max-h-[calc(100vh-208px)]
274-
w-min
275-
h-min
321+
pt-[60px]
322+
bottom-0
323+
276324
`}
277325
>
278326
<div
279-
class={`overflow-visible flex flex-col gap-2 relative pt-2 pb-2`}
280-
getElement={(element: HTMLElement) => {
281-
taskbar = element;
282-
renderElement(
283-
<div
284-
class={`sticky w-full top-0 max-w-[150px] flex flex-col pb-2 bg-slate-700 `}
285-
>
286-
<input
287-
type="text"
288-
input={(event: InputEvent) => {
289-
const value = (event.target as HTMLInputElement).value;
290-
if (taskbar) {
291-
taskbar
292-
.querySelectorAll('.taskbar__node-type')
293-
.forEach((node) => {
294-
if (node) {
295-
const title = node.getAttribute?.('title');
296-
if (title) {
297-
if (title.toLowerCase().includes(value)) {
298-
node.classList.remove('hidden');
299-
} else {
300-
node.classList.add('hidden');
301-
}
302-
}
303-
}
304-
});
305-
306-
taskbar
307-
.querySelectorAll('.taskbar__category')
308-
.forEach((node) => {
309-
if (node && taskbar) {
310-
const category = (node as HTMLElement).innerText;
311-
if (
312-
taskbar.querySelectorAll(
313-
`[data-category="${category}"]:not(.hidden)`
314-
).length > 0
315-
) {
316-
node.classList.remove('hidden');
317-
} else {
318-
node.classList.add('hidden');
319-
}
320-
}
321-
});
322-
}
323-
}}
324-
placeholder="Search"
325-
/>
326-
</div>,
327-
taskbar
328-
);
329-
sortedCategories.forEach((categoryName) => {
330-
const category = categorizedNodeTasks.get(categoryName);
331-
if (categoryName === 'deprecated') {
332-
return;
333-
}
334-
renderElement(
335-
<h2 class={`text-white py-2 taskbar__category`}>
336-
{categoryName}
337-
</h2>,
338-
taskbar
339-
);
340-
341-
category?.forEach((nodeTask) => {
342-
const label =
343-
canvasNodeTaskRegistryLabels[nodeTask.nodeType] ||
344-
nodeTask.nodeType;
345-
327+
class={`
328+
taskbar-container__scroll
329+
grid
330+
grid-cols-1
331+
grid-rows-1
332+
grid-rows-[1fr]
333+
grid-cols-[1fr]
334+
335+
top-0 left-0
336+
z-[20050]
337+
overflow-y-scroll
338+
px-4 py-2
339+
max-h-[calc(100vh-208px)]
340+
w-full
341+
h-min
342+
`}
343+
>
344+
<div
345+
class={`overflow-visible flex flex-col gap-2 relative pt-2 pb-2`}
346+
getElement={(element: HTMLElement) => {
347+
taskbar = element;
348+
349+
sortedCategories.forEach((categoryName) => {
350+
const category = categorizedNodeTasks.get(categoryName);
351+
if (categoryName === 'deprecated') {
352+
return;
353+
}
346354
renderElement(
347-
<div
348-
class={`taskbar__node-type cursor-pointer
349-
bg-slate-500
350-
text-white
351-
rounded
352-
px-4 py-2 mb-2
353-
max-w-[150px]
354-
whitespace-nowrap overflow-hidden text-ellipsis`}
355-
pointerdown={(event: PointerEvent) => {
356-
this.startDragNode(event, taskbar, nodeTask.nodeType);
357-
}}
358-
title={label}
359-
data-category={categoryName}
360-
>
361-
{label}
362-
</div>,
355+
<h2 class={`text-white py-2 taskbar__category`}>
356+
{categoryName}
357+
</h2>,
363358
taskbar
364359
);
360+
361+
category?.forEach((nodeTask) => {
362+
const label =
363+
canvasNodeTaskRegistryLabels[nodeTask.nodeType] ||
364+
nodeTask.nodeType;
365+
366+
renderElement(
367+
<div
368+
class={`taskbar__node-type cursor-pointer
369+
bg-slate-500
370+
text-white
371+
rounded
372+
px-4 py-2 mb-2
373+
max-w-[150px]
374+
whitespace-nowrap overflow-hidden text-ellipsis`}
375+
pointerdown={(event: PointerEvent) => {
376+
this.startDragNode(event, taskbar, nodeTask.nodeType);
377+
}}
378+
title={label}
379+
data-category={categoryName}
380+
>
381+
{label}
382+
</div>,
383+
taskbar
384+
);
385+
});
365386
});
366-
});
367-
}}
368-
></div>
387+
}}
388+
></div>
389+
</div>
369390
</div>
370391
<div
371392
class="taskbar-container-before
372393
pointer-events-none
373394
absolute
374395
left-0
375396
w-[182px]
376-
top-0
397+
top-[60px]
377398
h-4
378399
bg-gradient-to-b
379400
from-slate-700

0 commit comments

Comments
 (0)