Skip to content

Commit 757fe0b

Browse files
roncodesroncodes
committed
ran prettier
1 parent aab2cff commit 757fe0b

File tree

12 files changed

+246
-229
lines changed

12 files changed

+246
-229
lines changed

‎addon/components/template-builder.js‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,11 @@ export default class TemplateBuilderComponent extends Component {
117117
super(owner, args);
118118
const cloned = this._cloneTemplate(args.template);
119119
const { content, queries, ...meta } = cloned;
120-
this._meta = meta;
120+
this._meta = meta;
121121
this._content = Array.isArray(content) ? content : [];
122122
// Seed queries from the template relationship (loaded via hasMany).
123123
// When the template is new (unsaved), this will be an empty array.
124-
this.queries = Array.isArray(queries) ? queries : [];
124+
this.queries = Array.isArray(queries) ? queries : [];
125125
}
126126

127127
// -------------------------------------------------------------------------
@@ -157,12 +157,12 @@ export default class TemplateBuilderComponent extends Component {
157157

158158
const queriesSchema = {
159159
namespace: '__queries__',
160-
label: 'Queries',
161-
icon: 'database',
160+
label: 'Queries',
161+
icon: 'database',
162162
variables: this.queries.map((q) => ({
163-
path: q.variable_name,
164-
label: q.label,
165-
type: 'array',
163+
path: q.variable_name,
164+
label: q.label,
165+
type: 'array',
166166
example: `[{ ... }] (${q.resource_type_label ?? q.model_type ?? ''})`,
167167
})),
168168
};
@@ -188,17 +188,17 @@ export default class TemplateBuilderComponent extends Component {
188188

189189
const defaults = this._defaultsForType(type);
190190
const newElement = {
191-
uuid: guidFor({}),
191+
uuid: guidFor({}),
192192
type,
193-
label: null,
194-
visible: true,
195-
x: 20,
196-
y: 20,
197-
width: defaults.width,
198-
height: defaults.height,
199-
z_index: this._content.length + 1,
193+
label: null,
194+
visible: true,
195+
x: 20,
196+
y: 20,
197+
width: defaults.width,
198+
height: defaults.height,
199+
z_index: this._content.length + 1,
200200
rotation: 0,
201-
opacity: 1,
201+
opacity: 1,
202202
...defaults.props,
203203
};
204204

@@ -278,7 +278,7 @@ export default class TemplateBuilderComponent extends Component {
278278
if (!el) return;
279279
const current = el.rotation ?? 0;
280280
// Normalise to [0, 360)
281-
const next = ((current + deltaDegrees) % 360 + 360) % 360;
281+
const next = (((current + deltaDegrees) % 360) + 360) % 360;
282282
this.updateElement(uuid, { rotation: next });
283283
}
284284

@@ -296,11 +296,11 @@ export default class TemplateBuilderComponent extends Component {
296296
this._pushUndo();
297297

298298
const elements = this._content;
299-
const element = elements.find((el) => el.uuid === uuid);
299+
const element = elements.find((el) => el.uuid === uuid);
300300
if (!element) return;
301301

302302
const currentZ = element.z_index ?? 1;
303-
const sorted = [...elements].sort((a, b) => (a.z_index ?? 0) - (b.z_index ?? 0));
303+
const sorted = [...elements].sort((a, b) => (a.z_index ?? 0) - (b.z_index ?? 0));
304304
const sortedIndex = sorted.findIndex((el) => el.uuid === uuid);
305305

306306
let swapElement = null;
@@ -315,7 +315,7 @@ export default class TemplateBuilderComponent extends Component {
315315
const swapZ = swapElement.z_index ?? 1;
316316

317317
// Mutate z_index in-place on both objects
318-
element.z_index = swapZ;
318+
element.z_index = swapZ;
319319
swapElement.z_index = currentZ;
320320

321321
// Replace array reference to trigger reactivity
@@ -382,15 +382,15 @@ export default class TemplateBuilderComponent extends Component {
382382
@action
383383
openVariablePicker(targetProp, callback) {
384384
this.variablePickerTargetProp = targetProp;
385-
this.variablePickerCallback = callback;
386-
this.variablePickerOpen = true;
385+
this.variablePickerCallback = callback;
386+
this.variablePickerOpen = true;
387387
}
388388

389389
@action
390390
closeVariablePicker() {
391-
this.variablePickerOpen = false;
391+
this.variablePickerOpen = false;
392392
this.variablePickerTargetProp = null;
393-
this.variablePickerCallback = null;
393+
this.variablePickerCallback = null;
394394
}
395395

396396
@action
@@ -454,14 +454,11 @@ export default class TemplateBuilderComponent extends Component {
454454
const merged = Object.assign({}, this._meta, changes);
455455

456456
if (changes.paper_size !== undefined || changes.orientation !== undefined) {
457-
const dims = this._dimensionsForPaperSize(
458-
merged.paper_size ?? 'A4',
459-
merged.orientation ?? 'portrait'
460-
);
457+
const dims = this._dimensionsForPaperSize(merged.paper_size ?? 'A4', merged.orientation ?? 'portrait');
461458
if (dims) {
462-
merged.width = dims.width;
459+
merged.width = dims.width;
463460
merged.height = dims.height;
464-
merged.unit = dims.unit;
461+
merged.unit = dims.unit;
465462
}
466463
}
467464

@@ -477,19 +474,19 @@ export default class TemplateBuilderComponent extends Component {
477474
*/
478475
_dimensionsForPaperSize(paperSize, orientation) {
479476
const sizes = {
480-
A4: { width: 210, height: 297 },
481-
A3: { width: 297, height: 420 },
482-
A5: { width: 148, height: 210 },
477+
A4: { width: 210, height: 297 },
478+
A3: { width: 297, height: 420 },
479+
A5: { width: 148, height: 210 },
483480
Letter: { width: 216, height: 279 },
484-
Legal: { width: 216, height: 356 },
481+
Legal: { width: 216, height: 356 },
485482
};
486483
const base = sizes[paperSize];
487484
if (!base) return null;
488485
const isLandscape = orientation === 'landscape';
489486
return {
490-
width: isLandscape ? base.height : base.width,
491-
height: isLandscape ? base.width : base.height,
492-
unit: 'mm',
487+
width: isLandscape ? base.height : base.width,
488+
height: isLandscape ? base.width : base.height,
489+
unit: 'mm',
493490
};
494491
}
495492

@@ -513,9 +510,7 @@ export default class TemplateBuilderComponent extends Component {
513510
const plain = {};
514511
template.eachAttribute((name) => {
515512
const val = template[name];
516-
plain[name] = val !== null && val !== undefined
517-
? JSON.parse(JSON.stringify(val))
518-
: val;
513+
plain[name] = val !== null && val !== undefined ? JSON.parse(JSON.stringify(val)) : val;
519514
});
520515
plain.uuid = template.uuid ?? template.id ?? null;
521516
return plain;
@@ -526,13 +521,13 @@ export default class TemplateBuilderComponent extends Component {
526521

527522
_defaultsForType(type) {
528523
const map = {
529-
text: { width: 200, height: 40, props: { content: 'Text', font_size: 14, font_family: 'Inter, sans-serif', font_weight: '400', color: '#000000', text_align: 'left' } },
530-
image: { width: 150, height: 100, props: { src: '', alt: '', object_fit: 'cover' } },
531-
table: { width: 400, height: 200, props: { columns: [], rows: [], border_color: '#e5e7eb', header_background: '#f9fafb', header_color: '#111827', cell_padding: 6 } },
532-
line: { width: 200, height: 2, props: { color: '#000000', line_width: 1, line_style: 'solid' } },
533-
shape: { width: 100, height: 100, props: { shape: 'rectangle', background_color: '#e5e7eb', border_width: 0, border_color: '#000000', border_radius: 0 } },
534-
qr_code: { width: 80, height: 80, props: { value: '' } },
535-
barcode: { width: 200, height: 60, props: { value: '', barcode_format: 'CODE128' } },
524+
text: { width: 200, height: 40, props: { content: 'Text', font_size: 14, font_family: 'Inter, sans-serif', font_weight: '400', color: '#000000', text_align: 'left' } },
525+
image: { width: 150, height: 100, props: { src: '', alt: '', object_fit: 'cover' } },
526+
table: { width: 400, height: 200, props: { columns: [], rows: [], border_color: '#e5e7eb', header_background: '#f9fafb', header_color: '#111827', cell_padding: 6 } },
527+
line: { width: 200, height: 2, props: { color: '#000000', line_width: 1, line_style: 'solid' } },
528+
shape: { width: 100, height: 100, props: { shape: 'rectangle', background_color: '#e5e7eb', border_width: 0, border_color: '#000000', border_radius: 0 } },
529+
qr_code: { width: 80, height: 80, props: { value: '' } },
530+
barcode: { width: 200, height: 60, props: { value: '', barcode_format: 'CODE128' } },
536531
};
537532
return map[type] ?? { width: 100, height: 40, props: {} };
538533
}

‎addon/components/template-builder/canvas.js‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export default class TemplateBuilderCanvasComponent extends Component {
8686
}
8787

8888
get canvasStyle() {
89-
const w = this.canvasWidthPx * this.zoom;
90-
const h = this.canvasHeightPx * this.zoom;
89+
const w = this.canvasWidthPx * this.zoom;
90+
const h = this.canvasHeightPx * this.zoom;
9191
const bg = this.args.template?.background_color ?? '#ffffff';
9292
return `width:${w}px; height:${h}px; background:${bg}; position:relative; overflow:hidden;`;
9393
}
@@ -122,7 +122,11 @@ export default class TemplateBuilderCanvasComponent extends Component {
122122
@action
123123
willDestroyCanvas() {
124124
this._interactables.forEach((interactable) => {
125-
try { interactable.unset(); } catch (_) { /* ignore */ }
125+
try {
126+
interactable.unset();
127+
} catch (_) {
128+
/* ignore */
129+
}
126130
});
127131
this._interactables.clear();
128132
}
@@ -136,7 +140,11 @@ export default class TemplateBuilderCanvasComponent extends Component {
136140
// Unset any stale interactable for this uuid before creating a new one.
137141
const stale = this._interactables.get(element.uuid);
138142
if (stale) {
139-
try { stale.unset(); } catch (_) { /* ignore */ }
143+
try {
144+
stale.unset();
145+
} catch (_) {
146+
/* ignore */
147+
}
140148
this._interactables.delete(element.uuid);
141149
}
142150
this._setupInteract(element, el);
@@ -146,7 +154,11 @@ export default class TemplateBuilderCanvasComponent extends Component {
146154
teardownElement(element) {
147155
const interactable = this._interactables.get(element.uuid);
148156
if (interactable) {
149-
try { interactable.unset(); } catch (_) { /* ignore */ }
157+
try {
158+
interactable.unset();
159+
} catch (_) {
160+
/* ignore */
161+
}
150162
this._interactables.delete(element.uuid);
151163
}
152164
}
@@ -184,9 +196,7 @@ export default class TemplateBuilderCanvasComponent extends Component {
184196
// Write a new translate (+ optional rotation) to the element's style.
185197
const applyTransform = (x, y) => {
186198
const rotation = element.rotation ?? 0;
187-
el.style.transform = rotation
188-
? `translate(${x}px, ${y}px) rotate(${rotation}deg)`
189-
: `translate(${x}px, ${y}px)`;
199+
el.style.transform = rotation ? `translate(${x}px, ${y}px) rotate(${rotation}deg)` : `translate(${x}px, ${y}px)`;
190200
el.dataset.x = x;
191201
el.dataset.y = y;
192202
};
@@ -204,7 +214,6 @@ export default class TemplateBuilderCanvasComponent extends Component {
204214

205215
// ── Interactable ───────────────────────────────────────────────────────
206216
const interactable = interact(el)
207-
208217
// ── Tap (select) ──────────────────────────────────────────────────
209218
// interact.js intercepts pointer events for drag/resize detection.
210219
// Using interact's own `tap` event guarantees selection fires even
@@ -218,17 +227,17 @@ export default class TemplateBuilderCanvasComponent extends Component {
218227
.draggable({
219228
listeners: {
220229
move: (event) => {
221-
const zoom = getZoom();
230+
const zoom = getZoom();
222231
const canvas = getCanvasDims();
223-
const pos = getPos();
232+
const pos = getPos();
224233

225234
// Divide interact.js deltas by zoom so the element
226235
// moves at the same speed as the pointer.
227236
let x = pos.x + event.dx / zoom;
228237
let y = pos.y + event.dy / zoom;
229238

230239
// Clamp to canvas bounds (element cannot leave the canvas).
231-
const elW = parseFloat(el.style.width) || (element.width ?? 100);
240+
const elW = parseFloat(el.style.width) || (element.width ?? 100);
232241
const elH = parseFloat(el.style.height) || (element.height ?? 30);
233242
x = Math.max(0, Math.min(x, canvas.w - elW));
234243
y = Math.max(0, Math.min(y, canvas.h - elH));
@@ -250,20 +259,20 @@ export default class TemplateBuilderCanvasComponent extends Component {
250259
// ── Resize ────────────────────────────────────────────────────────
251260
.resizable({
252261
edges: {
253-
top: '.tb-handle-nw, .tb-handle-ne',
254-
left: '.tb-handle-nw, .tb-handle-sw',
262+
top: '.tb-handle-nw, .tb-handle-ne',
263+
left: '.tb-handle-nw, .tb-handle-sw',
255264
bottom: '.tb-handle-sw, .tb-handle-se',
256-
right: '.tb-handle-ne, .tb-handle-se',
265+
right: '.tb-handle-ne, .tb-handle-se',
257266
},
258267
listeners: {
259268
move: (event) => {
260-
const zoom = getZoom();
269+
const zoom = getZoom();
261270
const canvas = getCanvasDims();
262-
const pos = getPos();
271+
const pos = getPos();
263272

264273
let x = pos.x + event.deltaRect.left / zoom;
265-
let y = pos.y + event.deltaRect.top / zoom;
266-
let w = event.rect.width / zoom;
274+
let y = pos.y + event.deltaRect.top / zoom;
275+
let w = event.rect.width / zoom;
267276
let h = event.rect.height / zoom;
268277

269278
// Enforce minimum size
@@ -274,20 +283,20 @@ export default class TemplateBuilderCanvasComponent extends Component {
274283
x = Math.max(0, Math.min(x, canvas.w - w));
275284
y = Math.max(0, Math.min(y, canvas.h - h));
276285

277-
el.style.width = `${w}px`;
286+
el.style.width = `${w}px`;
278287
el.style.height = `${h}px`;
279288
applyTransform(x, y);
280289
},
281290
end: (event) => {
282291
const zoom = getZoom();
283-
const pos = getPos();
284-
const w = Math.max(20, event.rect.width / zoom);
285-
const h = Math.max(10, event.rect.height / zoom);
292+
const pos = getPos();
293+
const w = Math.max(20, event.rect.width / zoom);
294+
const h = Math.max(10, event.rect.height / zoom);
286295
if (this.args.onMoveElement) {
287296
this.args.onMoveElement(element.uuid, {
288-
x: Math.round(pos.x),
289-
y: Math.round(pos.y),
290-
width: Math.round(w),
297+
x: Math.round(pos.x),
298+
y: Math.round(pos.y),
299+
width: Math.round(w),
291300
height: Math.round(h),
292301
});
293302
}
@@ -305,11 +314,15 @@ export default class TemplateBuilderCanvasComponent extends Component {
305314
_unitToPx(value, unit) {
306315
const PPI = 96;
307316
switch (unit) {
308-
case 'mm': return Math.round((value / 25.4) * PPI);
309-
case 'cm': return Math.round((value / 2.54) * PPI);
310-
case 'in': return Math.round(value * PPI);
317+
case 'mm':
318+
return Math.round((value / 25.4) * PPI);
319+
case 'cm':
320+
return Math.round((value / 2.54) * PPI);
321+
case 'in':
322+
return Math.round(value * PPI);
311323
case 'px':
312-
default: return Math.round(value);
324+
default:
325+
return Math.round(value);
313326
}
314327
}
315328
}

‎addon/components/template-builder/element-renderer.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@ export default class TemplateBuilderElementRendererComponent extends Component {
3838
const x = parseFloat(el.dataset.x) || 0;
3939
const y = parseFloat(el.dataset.y) || 0;
4040
const rotation = this.args.rotation ?? this.args.element.rotation ?? 0;
41-
el.style.transform = rotation
42-
? `translate(${x}px, ${y}px) rotate(${rotation}deg)`
43-
: `translate(${x}px, ${y}px)`;
41+
el.style.transform = rotation ? `translate(${x}px, ${y}px) rotate(${rotation}deg)` : `translate(${x}px, ${y}px)`;
4442
}
4543

4644
@action
@@ -118,9 +116,7 @@ export default class TemplateBuilderElementRendererComponent extends Component {
118116
}
119117

120118
get selectionClass() {
121-
return this.args.isSelected
122-
? 'ring-2 ring-blue-500 ring-offset-0'
123-
: 'hover:ring-1 hover:ring-blue-300 hover:ring-offset-0';
119+
return this.args.isSelected ? 'ring-2 ring-blue-500 ring-offset-0' : 'hover:ring-1 hover:ring-blue-300 hover:ring-offset-0';
124120
}
125121

126122
get elementType() {

0 commit comments

Comments
 (0)