Skip to content

Commit 93d690d

Browse files
devhelprdevhelpr
committed
improved resizing nodes with restrictions
1 parent 663e14b commit 93d690d

9 files changed

Lines changed: 210 additions & 116 deletions

File tree

‎apps/vps-web/src/app/custom-nodes/classes/base-rect-node-class.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,14 @@ export class BaseRectNode {
175175
renderElement={(element: HTMLTextAreaElement) => {
176176
element.value = nodeInfo?.text ?? '';
177177
setTimeout(() => {
178+
element.style.width = 'auto';
178179
element.style.height = 'auto';
179-
console.log('renderElement textarea', element.scrollHeight);
180+
//console.log('renderElement textarea', element.scrollHeight);
180181
element.style.height = element.scrollHeight + 'px';
182+
if (this.node) {
183+
this.node.restrictHeight = element.scrollHeight;
184+
this.node.restrictWidth = element.scrollWidth;
185+
}
181186
}, 0);
182187
}}
183188
input={(event: InputEvent) => {

‎apps/vps-web/src/app/custom-nodes/classes/mermaid-node-class.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export class MermaidNode {
8080

8181
render = () => {
8282
return (
83-
<div class="mermaid w-min h-min p-4 border-4 border-slate-400 border-solid rounded flex items-center justify-center"></div>
84-
);
83+
<div class="mermaid w-full h-full p-4 border-4 border-slate-400 border-solid rounded flex items-center justify-center"></div>
84+
); //w-min h-min
8585
};
8686
}

‎apps/vps-web/src/app/custom-nodes/classes/oval-node-class.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export class OvalNode extends BaseRectNode {
2121
static readonly category = 'Default test';
2222
static readonly text = 'oval';
2323

24+
static readonly disableManualResize: boolean = false;
25+
2426
override compute = (
2527
input: string,
2628
_loopIndex?: number,
@@ -38,20 +40,18 @@ export class OvalNode extends BaseRectNode {
3840
});
3941
};
4042

41-
childElementSelector = '.child-node-wrapper > *:first-child';
43+
childElementSelector = '.child-node-wrapper textarea';
4244
render = (node: FlowNode<NodeInfo>) => {
4345
const nodeInfo = node.nodeInfo as any;
4446
console.log('render rect-node', node.width, node.height);
4547
return (
46-
<div>
48+
<div class="h-full w-full">
4749
<div
4850
getElement={(element: HTMLElement) => {
4951
this.rectElement = element;
5052
}}
51-
class={`rounded-full overflow-clip justify-center items-center text-center whitespace-pre inline-flex`}
52-
style={`min-width:${node.width ?? 50}px;min-height:${
53-
node.height ?? 50
54-
}px;background:${nodeInfo?.fillColor ?? 'black'};border: ${
53+
class={`h-full w-full rounded-full overflow-clip justify-center items-center text-center whitespace-pre inline-flex`}
54+
style={`;background:${nodeInfo?.fillColor ?? 'black'};border: ${
5555
nodeInfo?.strokeWidth ?? '2'
5656
}px ${nodeInfo?.strokeColor ?? 'white'} solid;color:${
5757
nodeInfo?.strokeColor ?? 'white'
@@ -61,5 +61,10 @@ export class OvalNode extends BaseRectNode {
6161
</div>
6262
</div>
6363
);
64+
/*
65+
min-width:${node.width ?? 50}px;min-height:${
66+
node.height ?? 50
67+
}px
68+
*/
6469
};
6570
}

‎apps/vps-web/src/app/custom-nodes/classes/rect-node-class.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class RectNode extends BaseRectNode {
1414

1515
static readonly text: string = 'rect';
1616

17-
static readonly disableManualResize: boolean = true;
17+
static readonly disableManualResize: boolean = false;
1818

1919
constructor(
2020
id: string,
@@ -43,7 +43,7 @@ w-min h-min
4343
flex items-center justify-center
4444
*/
4545

46-
childElementSelector = '.child-node-wrapper > textarea'; // '.child-node-wrapper > *:first-child'
46+
childElementSelector = '.child-node-wrapper textarea'; // '.child-node-wrapper > *:first-child'
4747
render(node: FlowNode<NodeInfo>) {
4848
const nodeInfo = node.nodeInfo as any;
4949
console.log(
@@ -53,15 +53,13 @@ w-min h-min
5353
(node?.nodeInfo as any)?.text
5454
);
5555
return (
56-
<div>
56+
<div class="h-full w-full">
5757
<div
5858
getElement={(element: HTMLElement) => {
5959
this.rectElement = element;
6060
}}
61-
class={`rounded overflow-clip justify-center items-center text-center whitespace-pre inline-flex grow-textarea`}
62-
style={`min-width:${node.width ?? 50}px;min-height:${
63-
node.height ?? 50
64-
}px;background:${nodeInfo?.fillColor ?? 'black'};border: ${
61+
class={`h-full w-full rounded overflow-clip justify-center items-center text-center whitespace-pre inline-flex grow-textarea`}
62+
style={`background:${nodeInfo?.fillColor ?? 'black'};border: ${
6563
nodeInfo?.strokeWidth ?? '2'
6664
}px ${nodeInfo?.strokeColor ?? 'white'} solid;color:${
6765
nodeInfo?.strokeColor ?? 'white'
@@ -71,6 +69,11 @@ w-min h-min
7169
</div>
7270
</div>
7371
);
72+
/*
73+
min-width:${node.width ?? 50}px;min-height:${
74+
node.height ?? 50
75+
}px;
76+
*/
7477
}
7578
onResize: ((width: number, height: number) => void) | undefined = undefined;
7679
}

‎apps/vps-web/src/app/custom-nodes/mermaid.tsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@ export const getMermaidNode =
5050
};
5151
const computeAsync = (input: string, loopIndex?: number, payload?: any) => {
5252
return mermaidNode.compute(input, loopIndex, payload).then((result) => {
53-
if (rect && rect.resize) {
54-
rect.resize(
55-
undefined,
56-
true,
57-
'.child-node-wrapper > *:first-child',
58-
true
59-
);
60-
}
53+
// if (rect && rect.resize) {
54+
// rect.resize(
55+
// undefined,
56+
// true,
57+
// '.child-node-wrapper > *:first-child',
58+
// true
59+
// );
60+
// }
6161
return result;
6262
});
6363
};
@@ -95,25 +95,26 @@ export const getMermaidNode =
9595
).querySelector('.child-node-wrapper > *:first-child');
9696
if (nodeRenderElement) {
9797
mermaidNode.nodeRenderElement = nodeRenderElement;
98-
const resizeObserver = new ResizeObserver(() => {
99-
if (rect && rect.resize) {
100-
rect.resize(
101-
undefined,
102-
true,
103-
'.child-node-wrapper > *:first-child',
104-
true
105-
);
106-
}
107-
});
108-
resizeObserver.observe(nodeRenderElement);
109-
if (node?.nodeInfo) {
110-
node.nodeInfo.delete = () => {
111-
if (nodeRenderElement) {
112-
resizeObserver.unobserve(nodeRenderElement);
113-
}
114-
resizeObserver.disconnect();
115-
};
116-
}
98+
// const resizeObserver = new ResizeObserver(() => {
99+
// console.log('mermaid resize');
100+
// if (rect && rect.resize) {
101+
// rect.resize(
102+
// undefined,
103+
// true,
104+
// '.child-node-wrapper > *:first-child',
105+
// true
106+
// );
107+
// }
108+
// });
109+
// resizeObserver.observe(nodeRenderElement);
110+
// if (node?.nodeInfo) {
111+
// node.nodeInfo.delete = () => {
112+
// if (nodeRenderElement) {
113+
// resizeObserver.unobserve(nodeRenderElement);
114+
// }
115+
// resizeObserver.disconnect();
116+
// };
117+
// }
117118
}
118119
// if (rect && rect.resize) {
119120
// rect.resize(undefined, undefined, undefined, true);
@@ -124,8 +125,10 @@ export const getMermaidNode =
124125
hasStaticWidthHeight: true,
125126
hasCustomStyling: true,
126127
customClassName: 'mermaid-node',
127-
childNodeWrapperClass: 'child-node-wrapper',
128+
childNodeWrapperClass:
129+
'child-node-wrapper w-full h-full overflow-hidden',
128130
centerToYPositionThumb: true,
131+
additionalClassNames: 'h-full w-full',
129132
},
130133
<div class="child-instance"></div>,
131134
true

‎apps/vps-web/src/app/custom-nodes/rect-node.tsx‎

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,21 @@ export const getRectNode =
5151
};
5252
const computeAsync = (input: string, loopIndex?: number, payload?: any) => {
5353
return rectNode.compute(input, loopIndex, payload).then((result) => {
54-
if (rect && rect.resize) {
55-
rect.resize(undefined, true, rectNode.childElementSelector, true);
56-
}
54+
// if (rect && rect.resize) {
55+
// rect.resize(
56+
// undefined,
57+
// true,
58+
// rectNode.childElementSelector,
59+
// true,
60+
// undefined,
61+
// undefined,
62+
// true
63+
// );
64+
// }
5765
return result;
5866
});
5967
};
68+
console.log('rect node width/height', flowNode?.width, flowNode?.height);
6069

6170
return visualNodeFactory(
6271
NodeClass.nodeTypeName,
@@ -133,14 +142,18 @@ export const getRectNode =
133142
rectNode.rectInstance = rect;
134143
rectNode.canvasAppInstance = nodeInstance.contextInstance;
135144
rectNode.onResize = (width: number, height: number) => {
145+
node.restrictHeight = height;
146+
if (height < (node?.height ?? 0)) {
147+
return;
148+
}
136149
// TODO : fix this... when changing the height, the node content is not resized
137150
const newHeight = height;
138151
//height > (node.height ?? 10) ? height : node.height ?? 10;
139152
console.log('RECT RESIZE via onResize', width, newHeight);
140-
node.width = width;
153+
//node.width = width;
141154
node.height = newHeight;
142155
node.isSettingSize = true;
143-
rectNode.setSize(width, newHeight);
156+
//rectNode.setSize(width, newHeight);
144157

145158
rect?.resize(
146159
width,
@@ -149,6 +162,8 @@ export const getRectNode =
149162
true,
150163
newHeight,
151164
true
165+
// true,
166+
// newHeight
152167
);
153168
nodeInstance.contextInstance?.nodeTransformer.resizeNodeTransformer(
154169
width,
@@ -192,29 +207,30 @@ export const getRectNode =
192207
nodeRenderElement = (
193208
rect?.nodeComponent?.domElement as HTMLElement
194209
).querySelector(rectNode.childElementSelector);
210+
console.log('rect-node nodeRenderElement', nodeRenderElement);
195211
if (nodeRenderElement) {
196212
rectNode.nodeRenderElement = nodeRenderElement;
197-
const resizeObserver = new ResizeObserver(() => {
198-
if (rect && rect.resize) {
199-
console.log('RECT RESIZE via observer');
200-
// problem with manual resizing is partially solved when this is commented
201-
// node content is not resized though...
202-
if (node.isSettingSize) {
203-
node.isSettingSize = false;
204-
rectNode.setSize(node.width ?? 10, node.height ?? 10);
205-
return;
206-
}
207-
if (rect && rect.resize) {
208-
rect.resize(
209-
undefined,
210-
true,
211-
rectNode.childElementSelector,
212-
true
213-
);
214-
}
215-
}
216-
});
217-
resizeObserver.observe(nodeRenderElement);
213+
// const resizeObserver = new ResizeObserver(() => {
214+
// if (rect && rect.resize) {
215+
// console.log('RECT RESIZE via observer');
216+
// // problem with manual resizing is partially solved when this is commented
217+
// // node content is not resized though...
218+
// if (node.isSettingSize) {
219+
// node.isSettingSize = false;
220+
// rectNode.setSize(node.width ?? 10, node.height ?? 10);
221+
// return;
222+
// }
223+
// if (rect && rect.resize) {
224+
// rect.resize(
225+
// undefined,
226+
// true,
227+
// rectNode.childElementSelector,
228+
// true
229+
// );
230+
// }
231+
// }
232+
// });
233+
//resizeObserver.observe(nodeRenderElement);
218234

219235
// const mutationObserver = new MutationObserver(() => {
220236
// if (rect && rect.resize) {
@@ -249,10 +265,10 @@ export const getRectNode =
249265
// });
250266
if (node?.nodeInfo) {
251267
node.nodeInfo.delete = () => {
252-
if (nodeRenderElement) {
253-
resizeObserver.unobserve(nodeRenderElement);
254-
}
255-
resizeObserver.disconnect();
268+
// if (nodeRenderElement) {
269+
// resizeObserver.unobserve(nodeRenderElement);
270+
// }
271+
// resizeObserver.disconnect();
256272
};
257273
}
258274
}
@@ -264,8 +280,9 @@ export const getRectNode =
264280
category: NodeClass.category,
265281
hasStaticWidthHeight: true,
266282
hasCustomStyling: true,
283+
additionalClassNames: 'h-full w-full',
267284
customClassName: 'custom-rect-node',
268-
childNodeWrapperClass: 'child-node-wrapper',
285+
childNodeWrapperClass: 'child-node-wrapper h-full w-full',
269286
centerToYPositionThumb: false,
270287
skipDetermineSizeOnInit: true,
271288
disableManualResize: NodeClass.disableManualResize,
@@ -274,7 +291,7 @@ export const getRectNode =
274291
hasFormInPopup: true,
275292
hasSettingsPopup: !NodeClass.getFormFields,
276293
},
277-
<div class="child-instance"></div>,
294+
<div class="child-instance h-full w-full"></div>,
278295
true
279296
);
280297
};

0 commit comments

Comments
 (0)