SYS.OP.MODE: CLM_VIEWER_ACTIVE
CANVAS_RES: 2732 × 2048
ASPECT_RATIO: 4:3 (IPAD PRO)
GRID_SNAP: ON (20PX)
T_SYNC: 0000ms
<!-- SLIDE STRUCTURE -->
<div class="slide-container" id="slide-01">
<header class="slide-header">
<h1 class="title" contenteditable="true">
Progettazione Slide
</h1>
</header>
<main class="slide-content grid-layout">
<section class="text-block drop-zone">
<p>Inserisci il testo qui...</p>
</section>
<aside class="media-block drop-zone">
<img src="placeholder.png" alt="Media" />
</aside>
</main>
</div>
/* STYLESHEET */
.slide-container {
display: grid;
grid-template-columns: 1fr 300px;
gap: 24px;
padding: 40px;
background: var(--bg-canvas);
}
.drop-zone {
border: 2px dashed var(--accent);
border-radius: 12px;
transition: all 0.3s ease;
}
// SLIDE CONTROLLER LOGIC
class SlideEditor {
constructor(canvasElement) {
this.canvas = canvasElement;
this.elements = [];
this.gridSize = 20;
this.initTouchEvents();
}
initTouchEvents() {
this.canvas.addEventListener(
'touchstart',
this.handleTouch.bind(this)
);
}
handleDrag(event) {
event.preventDefault();
const touch = event.touches[0];
const activeEl = this.getActive();
if (activeEl) {
const newX = this.snapToGrid(touch.clientX);
const newY = this.snapToGrid(touch.clientY);
activeEl.updatePosition(newX, newY);
this.renderGuides(activeEl);
}
}
snapToGrid(value) {
return Math.round(value / this.gridSize)
* this.gridSize;
}
}
