f490c63632
Add manifest.json, sidepanel components, and scripts. Include project assets and documentation files. Remove placeholder blank file.
145 lines
4.4 KiB
JavaScript
145 lines
4.4 KiB
JavaScript
// Grid Templates definition
|
|
// Ported from python engine/templates.py
|
|
|
|
class Slot {
|
|
constructor(x, y, w, h, description = "") {
|
|
this.x = x;
|
|
this.y = y;
|
|
this.w = w;
|
|
this.h = h;
|
|
this.description = description;
|
|
}
|
|
}
|
|
|
|
class GridTemplate {
|
|
constructor(id, name, canvasSize, slots, expectedCount) {
|
|
this.id = id;
|
|
this.name = name;
|
|
this.canvasSize = canvasSize; // [width, height]
|
|
this.slots = slots;
|
|
this.expectedCount = expectedCount;
|
|
}
|
|
}
|
|
|
|
class TemplateManager {
|
|
static getTemplates() {
|
|
const templates = [];
|
|
|
|
// Template 1: 3 images - Left portrait + 2 stacked squares
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
1,
|
|
"Portrait + 2 Squares",
|
|
[1920, 1920],
|
|
[
|
|
new Slot(0, 0, 960, 1920, "Left Portrait"),
|
|
new Slot(960, 0, 960, 960, "Right Top"),
|
|
new Slot(960, 960, 960, 960, "Right Bottom")
|
|
],
|
|
3
|
|
));
|
|
|
|
// Template 2: 5 images - 2 squares left + 3 stacked right
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
2,
|
|
"2 Squares + 3 Stacked",
|
|
[1920, 1920],
|
|
[
|
|
// Left Column
|
|
new Slot(0, 0, 960, 960, "Left Top"),
|
|
new Slot(0, 960, 960, 960, "Left Bottom"),
|
|
// Right Column
|
|
new Slot(960, 0, 960, 640, "Right Top"),
|
|
new Slot(960, 640, 960, 640, "Right Mid"),
|
|
new Slot(960, 1280, 960, 640, "Right Bot"),
|
|
],
|
|
5
|
|
));
|
|
|
|
// Template 3: 4 images - Main left + 3 stacked squares right
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
3,
|
|
"Main + 3 Squares",
|
|
[1920, 1920],
|
|
[
|
|
new Slot(0, 0, 1280, 1920, "Left Main"),
|
|
new Slot(1280, 0, 640, 640, "Right Top"),
|
|
new Slot(1280, 640, 640, 640, "Right Mid"),
|
|
new Slot(1280, 1280, 640, 640, "Right Bot"),
|
|
],
|
|
4
|
|
));
|
|
|
|
// Template 4: 3 images - Top wide + 2 squares bottom
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
4,
|
|
"Wide + 2 Squares",
|
|
[1920, 1920],
|
|
[
|
|
new Slot(0, 0, 1920, 960, "Top Wide"),
|
|
new Slot(0, 960, 960, 960, "Bottom Left"),
|
|
new Slot(960, 960, 960, 960, "Bottom Right"),
|
|
],
|
|
3
|
|
));
|
|
|
|
// Template 5: 4 images - Top main + 3 squares bottom
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
5,
|
|
"Main + 3 Bottom Squares",
|
|
[1920, 1920],
|
|
[
|
|
new Slot(0, 0, 1920, 1280, "Top Main"),
|
|
new Slot(0, 1280, 640, 640, "Bot Left"),
|
|
new Slot(640, 1280, 640, 640, "Bot Mid"),
|
|
new Slot(1280, 1280, 640, 640, "Bot Right"),
|
|
],
|
|
4
|
|
));
|
|
|
|
// Template 6: 4 images - Perfect 2x2 grid
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
6,
|
|
"2x2 Grid",
|
|
[1920, 1920],
|
|
[
|
|
new Slot(0, 0, 960, 960, "Top Left"),
|
|
new Slot(960, 0, 960, 960, "Top Right"),
|
|
new Slot(0, 960, 960, 960, "Bottom Left"),
|
|
new Slot(960, 960, 960, 960, "Bottom Right"),
|
|
],
|
|
4
|
|
));
|
|
|
|
// Template 7: 5 images - 2 large top + 3 small bottom
|
|
// Canvas: 1920 x 1920 (1:1)
|
|
templates.push(new GridTemplate(
|
|
7,
|
|
"2 Large + 3 Small",
|
|
[1920, 1920],
|
|
[
|
|
// Top Row - 2 large squares
|
|
new Slot(0, 0, 960, 960, "Top Left"),
|
|
new Slot(960, 0, 960, 960, "Top Right"),
|
|
// Bottom Row - 3 smaller rectangles
|
|
new Slot(0, 960, 640, 960, "Bottom Left"),
|
|
new Slot(640, 960, 640, 960, "Bottom Center"),
|
|
new Slot(1280, 960, 640, 960, "Bottom Right"),
|
|
],
|
|
5
|
|
));
|
|
|
|
return templates;
|
|
}
|
|
|
|
static getTemplateById(id) {
|
|
const templates = this.getTemplates();
|
|
return templates.find(t => t.id === id) || templates[0];
|
|
}
|
|
}
|