Skip to content

Commit 1195752

Browse files
devhelprdevhelpr
committed
refactor draw-grid-node to use JSX fragments and simplify template rendering
1 parent 8341e88 commit 1195752

File tree

2 files changed

+81
-78
lines changed

2 files changed

+81
-78
lines changed

‎apps/vps-web/src/app/custom-nodes/classes/draw-grid-node.tsx‎

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,12 @@ class Label extends HTMLElement {
1515
super();
1616
const shadowRoot = this.attachShadow({ mode: 'open' });
1717

18-
let template: HTMLTemplateElement | null = null;
1918
renderElement(
20-
<template
21-
id="label-template"
22-
getElement={(element: HTMLTemplateElement) => {
23-
template = element as HTMLTemplateElement;
24-
}}
25-
>
26-
<p>
27-
<slot name="label-text">My default text</slot>
28-
</p>
29-
</template>,
19+
<div part="label">
20+
<slot name="label-text">Test</slot>
21+
</div>,
3022
shadowRoot
3123
);
32-
33-
// const template = document.createElement('template');
34-
// template.innerHTML = `
35-
// <p>
36-
// <slot name="label-text">My default text</slot>
37-
// </p>
38-
// `;
39-
40-
const wrapper = document.createElement('div');
41-
wrapper.setAttribute('part', 'label'); // uses ::part pseudo-element
42-
// const text = this.getAttribute('text') || 'Label';
43-
// wrapper.textContent = text;
44-
shadowRoot.appendChild(wrapper);
45-
46-
// setTimeout(() => {
47-
// const template = shadowRoot.getElementById(
48-
// 'label-template'
49-
// ) as HTMLTemplateElement;
50-
if (template) {
51-
const templateContent = (template as HTMLTemplateElement)?.content;
52-
console.log('templateContent', template, templateContent);
53-
shadowRoot.appendChild(templateContent.cloneNode(true));
54-
}
55-
// }, 0);
5624
}
5725
}
5826

@@ -179,54 +147,88 @@ class GridDraw {
179147
// Create a container for the controls that can be collapsed
180148
const controlsContainer = document.createElement('div');
181149
controlsContainer.className = 'controls-container';
182-
controlsContainer.innerHTML = `
183-
<div class="control-group">
184-
<draw-grid-label text="Draw Grid"><slot name="label-text">Hello webcomponent</slot></draw-grid-label>
185-
<label>Brush Color</label>
186-
<input type="color" id="colorPicker" value="#000000">
187-
<div class="color-presets">
188-
${this.COLOR_PRESETS.map(
189-
(color, index) => `
190-
<button
191-
class="color-preset-button"
192-
style="background-color: rgb(${color[0]}, ${color[1]}, ${
193-
color[2]
194-
})"
195-
data-color-index="${index}"
196-
title="Color ${index + 1}"
197-
></button>
198-
`
199-
).join('')}
150+
151+
renderElement(
152+
<element:Fragment>
153+
<div class="control-group">
154+
<draw-grid-label text="Draw Grid">
155+
<slot name="label-text">Hello webcomponent</slot>
156+
</draw-grid-label>
157+
<label>Brush Color</label>
158+
<input type="color" id="colorPicker" value="#000000" />
159+
<div class="color-presets">
160+
{this.COLOR_PRESETS.map((color, _index) => (
161+
<button
162+
class="color-preset-button"
163+
style={`background-color: rgb(${color[0]}, ${color[1]}, ${color[2]})`}
164+
data-color-index="${index}"
165+
title="Color ${index + 1}"
166+
></button>
167+
))}
168+
</div>
200169
</div>
201-
</div>
202-
<div class="control-group">
203-
<label>Brush Size (${this.brushParams.fadeRadius * 2 + 1}x${
204-
this.brushParams.fadeRadius * 2 + 1
205-
})</label>
206-
<input type="range" id="fadeRadius" min="2" max="8" step="1" value="${
170+
<div class="control-group">
171+
<label>
172+
Brush Size ({this.brushParams.fadeRadius * 2 + 1}x
173+
{this.brushParams.fadeRadius * 2 + 1})
174+
</label>
175+
<input
176+
type="range"
177+
id="fadeRadius"
178+
min="2"
179+
max="8"
180+
step="1"
181+
value="{
207182
this.brushParams.fadeRadius
208-
}">
209-
</div>
210-
<div class="control-group">
211-
<label>Fade Power (${this.brushParams.fadePower.toFixed(1)})</label>
212-
<input type="range" id="fadePower" min="0.1" max="2" step="0.1" value="${
183+
}"
184+
/>
185+
</div>
186+
<div class="control-group">
187+
<label>Fade Power (${this.brushParams.fadePower.toFixed(1)})</label>
188+
<input
189+
type="range"
190+
id="fadePower"
191+
min="0.1"
192+
max="2"
193+
step="0.1"
194+
value="{
213195
this.brushParams.fadePower
214-
}">
215-
</div>
216-
<div class="control-group">
217-
<label>Color Intensity (${this.brushParams.gamma.toFixed(1)})</label>
218-
<input type="range" id="gamma" min="0.1" max="4" step="0.1" value="${
196+
}"
197+
/>
198+
</div>
199+
<div class="control-group">
200+
<label>Color Intensity (${this.brushParams.gamma.toFixed(1)})</label>
201+
<input
202+
type="range"
203+
id="gamma"
204+
min="0.1"
205+
max="4"
206+
step="0.1"
207+
value="{
219208
this.brushParams.gamma
220-
}">
221-
</div>
222-
<div class="control-group">
223-
<label>Grid size (${this.brushParams.gridSize.toFixed(0)})</label>
224-
<input type="range" id="GRID_SIZE" min="16" max="64" step="1" value="${
209+
}"
210+
/>
211+
</div>
212+
<div class="control-group">
213+
<label>Grid size (${this.brushParams.gridSize.toFixed(0)})</label>
214+
<input
215+
type="range"
216+
id="GRID_SIZE"
217+
min="16"
218+
max="64"
219+
step="1"
220+
value="{
225221
this.brushParams.gridSize
226-
}">
227-
</div>
228-
<button id="clearButton" class="control-button">Clear Grid</button>
229-
`;
222+
}"
223+
/>
224+
</div>
225+
<button id="clearButton" class="control-button">
226+
Clear Grid
227+
</button>
228+
</element:Fragment>,
229+
230+
controlsContainer
231+
);
230232

231233
panel.appendChild(controlsContainer);
232234
//document.body.appendChild(panel);

‎apps/vps-web/vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default defineConfig({
2828
plugins: [nxViteTsPaths()], //mkcert()
2929
esbuild: {
3030
sourcemap: false,
31+
jsxFragment: 'Fragment',
3132
},
3233

3334
// Uncomment this if you are using workers.

0 commit comments

Comments
 (0)