Lucas 'Paperboy' Rose-Winters
73af519128
- Add ResizeHandler class with 8 resize handles (4 corners + 4 edges) - Implement unified mouse + touch resize events - Add real-time dimension overlay showing current size - Grid overlay with cell highlighting during resize - Enforce min/max size constraints (2×2 to 12×10) - Support resizing from all 8 directions with proper cursors - Escape key cancels resize and restores original size - Handle position adjustment when resizing from top/left - Touch delay (150ms) for mobile scroll compatibility - Create mobile-ready test harness with: - Hover-activated resize handles with fade transitions - Touch-optimized UI - Real-time statistics - Event logging - Works on desktop and mobile - 550 lines core code, 920 lines test suite - Comprehensive JSDoc documentation
950 lines
32 KiB
HTML
950 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||
<title>Widget Resize Test (Mobile-Ready)</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: #1a1a2e;
|
||
color: #eee;
|
||
padding: 20px;
|
||
touch-action: none;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
h1 {
|
||
margin-bottom: 20px;
|
||
color: #e94560;
|
||
font-size: clamp(20px, 5vw, 28px);
|
||
}
|
||
|
||
.test-section {
|
||
background: #16213e;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.test-section h2 {
|
||
color: #4ecca3;
|
||
margin-bottom: 10px;
|
||
font-size: clamp(16px, 4vw, 18px);
|
||
}
|
||
|
||
.grid-container {
|
||
position: relative;
|
||
background: #0f3460;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
min-height: 600px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.widget {
|
||
position: absolute;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
user-select: none;
|
||
transition: box-shadow 0.2s;
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
touch-action: none;
|
||
}
|
||
|
||
.widget:hover {
|
||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.widget.resizing {
|
||
box-shadow: 0 8px 24px rgba(78, 204, 163, 0.6);
|
||
border-color: rgba(78, 204, 163, 0.8);
|
||
}
|
||
|
||
.widget-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.widget-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.widget-title {
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
flex: 1;
|
||
}
|
||
|
||
.widget-info {
|
||
font-size: 11px;
|
||
opacity: 0.7;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* Resize handles */
|
||
.resize-handles {
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.widget:hover .resize-handles,
|
||
.widget.resizing .resize-handles {
|
||
opacity: 1;
|
||
}
|
||
|
||
.resize-handle {
|
||
transition: background 0.2s, transform 0.2s;
|
||
}
|
||
|
||
.resize-handle:hover {
|
||
background: rgba(78, 204, 163, 1) !important;
|
||
transform: scale(1.3) !important;
|
||
}
|
||
|
||
.controls {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
button {
|
||
background: #e94560;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 16px;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
touch-action: manipulation;
|
||
min-height: 44px;
|
||
}
|
||
|
||
button:hover {
|
||
background: #d63651;
|
||
}
|
||
|
||
button.secondary {
|
||
background: #4ecca3;
|
||
color: #1a1a2e;
|
||
}
|
||
|
||
button.secondary:hover {
|
||
background: #5edc9f;
|
||
}
|
||
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.stat-box {
|
||
background: #0f3460;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 11px;
|
||
opacity: 0.7;
|
||
text-transform: uppercase;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #4ecca3;
|
||
}
|
||
|
||
.hint {
|
||
background: #0f3460;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.hint strong {
|
||
color: #4ecca3;
|
||
}
|
||
|
||
.hint kbd {
|
||
background: #1a1a2e;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
border: 1px solid #4ecca3;
|
||
color: #4ecca3;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.event-log {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
background: #0f3460;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
font-family: monospace;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.event-item {
|
||
padding: 4px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.event-time {
|
||
color: #888;
|
||
}
|
||
|
||
.event-type {
|
||
color: #4ecca3;
|
||
font-weight: bold;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
|
||
.test-section {
|
||
padding: 12px;
|
||
}
|
||
|
||
.grid-container {
|
||
min-height: 500px;
|
||
}
|
||
|
||
button {
|
||
flex: 1 1 calc(50% - 4px);
|
||
min-width: 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.grid-container {
|
||
min-height: 400px;
|
||
}
|
||
|
||
.stats {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>📏 Widget Resize Test (Mobile-Ready)</h1>
|
||
|
||
<div class="test-section">
|
||
<h2>Resizable Widgets</h2>
|
||
<div class="hint">
|
||
<strong>Desktop:</strong> Hover over widget edges/corners and drag to resize<br>
|
||
<strong>Mobile:</strong> Touch and hold handles (150ms), then drag<br>
|
||
<strong>Keyboard:</strong> Press <kbd>Escape</kbd> to cancel resize<br>
|
||
<strong>Constraints:</strong> Min size 2×2, max size 12×10
|
||
</div>
|
||
<div id="grid-container" class="grid-container"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>Controls</h2>
|
||
<div class="controls">
|
||
<button onclick="addWidget()">Add Widget</button>
|
||
<button onclick="removeWidget()">Remove Last Widget</button>
|
||
<button onclick="resetGrid()">Reset</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>Statistics</h2>
|
||
<div id="stats" class="stats"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>Event Log</h2>
|
||
<button onclick="clearLog()">Clear Log</button>
|
||
<div id="event-log" class="event-log"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// GridEngine class (bundled inline)
|
||
class GridEngine {
|
||
constructor(config = {}) {
|
||
this.columns = config.columns || 12;
|
||
this.rowHeight = config.rowHeight || 80;
|
||
this.gap = config.gap || 12;
|
||
this.containerWidth = 0;
|
||
this.container = config.container;
|
||
|
||
if (this.container) {
|
||
this.updateContainerWidth();
|
||
}
|
||
}
|
||
|
||
updateContainerWidth() {
|
||
if (this.container) {
|
||
this.containerWidth = this.container.offsetWidth - (this.gap * 2);
|
||
}
|
||
}
|
||
|
||
getPixelPosition(widget) {
|
||
this.updateContainerWidth();
|
||
const totalGaps = this.gap * (this.columns + 1);
|
||
const colWidth = (this.containerWidth - totalGaps) / this.columns;
|
||
|
||
const left = widget.x * (colWidth + this.gap) + this.gap;
|
||
const top = widget.y * (this.rowHeight + this.gap) + this.gap;
|
||
const width = widget.w * colWidth + (widget.w - 1) * this.gap;
|
||
const height = widget.h * this.rowHeight + (widget.h - 1) * this.gap;
|
||
|
||
return { left, top, width, height };
|
||
}
|
||
}
|
||
|
||
// ResizeHandler class (bundled inline)
|
||
class ResizeHandler {
|
||
constructor(gridEngine, options = {}) {
|
||
this.gridEngine = gridEngine;
|
||
this.options = {
|
||
showDimensions: true,
|
||
showGrid: true,
|
||
minWidth: 2,
|
||
minHeight: 2,
|
||
maxWidth: 12,
|
||
maxHeight: 10,
|
||
touchDelay: 150,
|
||
...options
|
||
};
|
||
|
||
this.resizeState = null;
|
||
this.resizeHandlers = new Map();
|
||
this.gridOverlay = null;
|
||
this.touchTimer = null;
|
||
|
||
this.boundMouseMove = this.onMouseMove.bind(this);
|
||
this.boundMouseUp = this.onMouseUp.bind(this);
|
||
this.boundTouchMove = this.onTouchMove.bind(this);
|
||
this.boundTouchEnd = this.onTouchEnd.bind(this);
|
||
this.boundKeyDown = this.onKeyDown.bind(this);
|
||
|
||
this.handleTypes = {
|
||
'nw': 'nwse-resize',
|
||
'n': 'ns-resize',
|
||
'ne': 'nesw-resize',
|
||
'e': 'ew-resize',
|
||
'se': 'nwse-resize',
|
||
's': 'ns-resize',
|
||
'sw': 'nesw-resize',
|
||
'w': 'ew-resize'
|
||
};
|
||
}
|
||
|
||
initWidget(element, widget, onResizeEnd, constraints = {}) {
|
||
const handles = this.createResizeHandles();
|
||
element.appendChild(handles);
|
||
|
||
const widgetConstraints = {
|
||
minW: constraints.minW || this.options.minWidth,
|
||
minH: constraints.minH || this.options.minHeight,
|
||
maxW: constraints.maxW || this.options.maxWidth,
|
||
maxH: constraints.maxH || this.options.maxHeight
|
||
};
|
||
|
||
const handleElements = handles.querySelectorAll('.resize-handle');
|
||
const handleListeners = [];
|
||
|
||
handleElements.forEach(handleEl => {
|
||
const handleType = handleEl.dataset.handle;
|
||
|
||
const mouseDownHandler = (e) => {
|
||
if (e.button !== 0) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.startResize(e, handleType, element, widget, onResizeEnd, widgetConstraints);
|
||
};
|
||
|
||
const touchStartHandler = (e) => {
|
||
this.touchTimer = setTimeout(() => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.startResize(e.touches[0], handleType, element, widget, onResizeEnd, widgetConstraints);
|
||
}, this.options.touchDelay);
|
||
};
|
||
|
||
const touchCancelHandler = () => {
|
||
if (this.touchTimer) {
|
||
clearTimeout(this.touchTimer);
|
||
this.touchTimer = null;
|
||
}
|
||
};
|
||
|
||
handleEl.addEventListener('mousedown', mouseDownHandler);
|
||
handleEl.addEventListener('touchstart', touchStartHandler, { passive: false });
|
||
handleEl.addEventListener('touchcancel', touchCancelHandler);
|
||
handleEl.addEventListener('touchend', touchCancelHandler);
|
||
|
||
handleListeners.push({
|
||
element: handleEl,
|
||
mouseDownHandler,
|
||
touchStartHandler,
|
||
touchCancelHandler
|
||
});
|
||
});
|
||
|
||
this.resizeHandlers.set(element, {
|
||
handles,
|
||
handleListeners
|
||
});
|
||
}
|
||
|
||
createResizeHandles() {
|
||
const container = document.createElement('div');
|
||
container.className = 'resize-handles';
|
||
container.style.position = 'absolute';
|
||
container.style.inset = '0';
|
||
container.style.pointerEvents = 'none';
|
||
|
||
Object.entries(this.handleTypes).forEach(([handleType, cursor]) => {
|
||
const handle = document.createElement('div');
|
||
handle.className = `resize-handle resize-handle-${handleType}`;
|
||
handle.dataset.handle = handleType;
|
||
handle.style.position = 'absolute';
|
||
handle.style.pointerEvents = 'auto';
|
||
handle.style.cursor = cursor;
|
||
handle.style.width = '12px';
|
||
handle.style.height = '12px';
|
||
handle.style.background = 'rgba(78, 204, 163, 0.8)';
|
||
handle.style.border = '2px solid white';
|
||
handle.style.borderRadius = '3px';
|
||
handle.style.zIndex = '100';
|
||
|
||
if (handleType.includes('n')) handle.style.top = '-6px';
|
||
if (handleType.includes('s')) handle.style.bottom = '-6px';
|
||
if (handleType.includes('w')) handle.style.left = '-6px';
|
||
if (handleType.includes('e')) handle.style.right = '-6px';
|
||
|
||
if (handleType === 'n' || handleType === 's') {
|
||
handle.style.left = '50%';
|
||
handle.style.transform = 'translateX(-50%)';
|
||
}
|
||
if (handleType === 'w' || handleType === 'e') {
|
||
handle.style.top = '50%';
|
||
handle.style.transform = 'translateY(-50%)';
|
||
}
|
||
|
||
container.appendChild(handle);
|
||
});
|
||
|
||
return container;
|
||
}
|
||
|
||
startResize(e, handleType, element, widget, onResizeEnd, constraints) {
|
||
const overlay = this.createDimensionOverlay();
|
||
|
||
this.resizeState = {
|
||
element,
|
||
widget: { ...widget },
|
||
handle: handleType,
|
||
startX: e.clientX,
|
||
startY: e.clientY,
|
||
startWidth: widget.w,
|
||
startHeight: widget.h,
|
||
startGridX: widget.x,
|
||
startGridY: widget.y,
|
||
overlay,
|
||
isResizing: true,
|
||
onResizeEnd,
|
||
constraints
|
||
};
|
||
|
||
document.addEventListener('mousemove', this.boundMouseMove);
|
||
document.addEventListener('mouseup', this.boundMouseUp);
|
||
document.addEventListener('touchmove', this.boundTouchMove, { passive: false });
|
||
document.addEventListener('touchend', this.boundTouchEnd);
|
||
document.addEventListener('keydown', this.boundKeyDown);
|
||
|
||
if (this.options.showGrid) {
|
||
this.showGridOverlay();
|
||
}
|
||
|
||
element.classList.add('resizing');
|
||
|
||
logEvent('Resize Start', { id: widget.id, handle: handleType });
|
||
}
|
||
|
||
onMouseMove(e) {
|
||
if (!this.resizeState?.isResizing) return;
|
||
e.preventDefault();
|
||
this.updateResizeSize(e.clientX, e.clientY);
|
||
}
|
||
|
||
onTouchMove(e) {
|
||
if (!this.resizeState?.isResizing) return;
|
||
e.preventDefault();
|
||
const touch = e.touches[0];
|
||
this.updateResizeSize(touch.clientX, touch.clientY);
|
||
}
|
||
|
||
updateResizeSize(clientX, clientY) {
|
||
const { widget, handle, startX, startY, startWidth, startHeight, startGridX, startGridY, constraints, element, overlay } = this.resizeState;
|
||
|
||
const deltaX = clientX - startX;
|
||
const deltaY = clientY - startY;
|
||
|
||
this.gridEngine.updateContainerWidth();
|
||
const totalGaps = this.gridEngine.gap * (this.gridEngine.columns + 1);
|
||
const colWidth = (this.gridEngine.containerWidth - totalGaps) / this.gridEngine.columns;
|
||
const rowHeight = this.gridEngine.rowHeight;
|
||
|
||
const deltaGridX = Math.round(deltaX / (colWidth + this.gridEngine.gap));
|
||
const deltaGridY = Math.round(deltaY / (rowHeight + this.gridEngine.gap));
|
||
|
||
let newW = startWidth;
|
||
let newH = startHeight;
|
||
let newX = startGridX;
|
||
let newY = startGridY;
|
||
|
||
if (handle.includes('e')) {
|
||
newW = startWidth + deltaGridX;
|
||
} else if (handle.includes('w')) {
|
||
newW = startWidth - deltaGridX;
|
||
newX = startGridX + deltaGridX;
|
||
}
|
||
|
||
if (handle.includes('s')) {
|
||
newH = startHeight + deltaGridY;
|
||
} else if (handle.includes('n')) {
|
||
newH = startHeight - deltaGridY;
|
||
newY = startGridY + deltaGridY;
|
||
}
|
||
|
||
newW = Math.max(constraints.minW, Math.min(newW, constraints.maxW));
|
||
newH = Math.max(constraints.minH, Math.min(newH, constraints.maxH));
|
||
newW = Math.min(newW, this.gridEngine.columns - newX);
|
||
|
||
if (handle.includes('w') && newW === constraints.minW) {
|
||
newX = startGridX + startWidth - constraints.minW;
|
||
}
|
||
if (handle.includes('n') && newH === constraints.minH) {
|
||
newY = startGridY + startHeight - constraints.minH;
|
||
}
|
||
|
||
this.resizeState.widget.w = newW;
|
||
this.resizeState.widget.h = newH;
|
||
this.resizeState.widget.x = newX;
|
||
this.resizeState.widget.y = newY;
|
||
|
||
const pos = this.gridEngine.getPixelPosition(this.resizeState.widget);
|
||
element.style.width = pos.width + 'px';
|
||
element.style.height = pos.height + 'px';
|
||
element.style.left = pos.left + 'px';
|
||
element.style.top = pos.top + 'px';
|
||
|
||
if (overlay) {
|
||
overlay.textContent = `${newW}×${newH}`;
|
||
overlay.style.left = (pos.left + pos.width / 2) + 'px';
|
||
overlay.style.top = (pos.top + pos.height / 2) + 'px';
|
||
}
|
||
|
||
if (this.gridOverlay) {
|
||
this.highlightGridCells(newX, newY, newW, newH);
|
||
}
|
||
}
|
||
|
||
onMouseUp(e) {
|
||
if (!this.resizeState?.isResizing) return;
|
||
e.preventDefault();
|
||
this.endResize();
|
||
}
|
||
|
||
onTouchEnd(e) {
|
||
if (!this.resizeState?.isResizing) return;
|
||
e.preventDefault();
|
||
this.endResize();
|
||
}
|
||
|
||
onKeyDown(e) {
|
||
if (!this.resizeState?.isResizing) return;
|
||
|
||
if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
this.cancelResize();
|
||
}
|
||
}
|
||
|
||
endResize() {
|
||
if (!this.resizeState) return;
|
||
|
||
const { element, widget, onResizeEnd } = this.resizeState;
|
||
|
||
element.classList.remove('resizing');
|
||
|
||
if (onResizeEnd) {
|
||
onResizeEnd(widget, widget.w, widget.h, widget.x, widget.y);
|
||
}
|
||
|
||
logEvent('Resize End', { id: widget.id, size: `${widget.w}×${widget.h}` });
|
||
this.cleanup();
|
||
}
|
||
|
||
cancelResize() {
|
||
if (!this.resizeState) return;
|
||
|
||
const { element, startWidth, startHeight, startGridX, startGridY } = this.resizeState;
|
||
|
||
const widget = {
|
||
x: startGridX,
|
||
y: startGridY,
|
||
w: startWidth,
|
||
h: startHeight
|
||
};
|
||
|
||
const pos = this.gridEngine.getPixelPosition(widget);
|
||
element.style.width = pos.width + 'px';
|
||
element.style.height = pos.height + 'px';
|
||
element.style.left = pos.left + 'px';
|
||
element.style.top = pos.top + 'px';
|
||
|
||
element.classList.remove('resizing');
|
||
|
||
logEvent('Resize Cancelled', null);
|
||
this.cleanup();
|
||
}
|
||
|
||
cleanup() {
|
||
if (this.resizeState?.overlay) {
|
||
this.resizeState.overlay.remove();
|
||
}
|
||
|
||
this.hideGridOverlay();
|
||
|
||
document.removeEventListener('mousemove', this.boundMouseMove);
|
||
document.removeEventListener('mouseup', this.boundMouseUp);
|
||
document.removeEventListener('touchmove', this.boundTouchMove);
|
||
document.removeEventListener('touchend', this.boundTouchEnd);
|
||
document.removeEventListener('keydown', this.boundKeyDown);
|
||
|
||
if (this.touchTimer) {
|
||
clearTimeout(this.touchTimer);
|
||
this.touchTimer = null;
|
||
}
|
||
|
||
this.resizeState = null;
|
||
}
|
||
|
||
createDimensionOverlay() {
|
||
const overlay = document.createElement('div');
|
||
overlay.className = 'resize-dimension-overlay';
|
||
overlay.style.position = 'absolute';
|
||
overlay.style.background = 'rgba(78, 204, 163, 0.9)';
|
||
overlay.style.color = 'white';
|
||
overlay.style.padding = '8px 12px';
|
||
overlay.style.borderRadius = '6px';
|
||
overlay.style.fontSize = '14px';
|
||
overlay.style.fontWeight = 'bold';
|
||
overlay.style.pointerEvents = 'none';
|
||
overlay.style.zIndex = '10001';
|
||
overlay.style.transform = 'translate(-50%, -50%)';
|
||
overlay.style.whiteSpace = 'nowrap';
|
||
overlay.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';
|
||
|
||
this.gridEngine.container.appendChild(overlay);
|
||
return overlay;
|
||
}
|
||
|
||
showGridOverlay() {
|
||
if (this.gridOverlay) return;
|
||
|
||
this.gridOverlay = document.createElement('div');
|
||
this.gridOverlay.className = 'grid-overlay';
|
||
this.gridOverlay.style.position = 'absolute';
|
||
this.gridOverlay.style.top = '0';
|
||
this.gridOverlay.style.left = '0';
|
||
this.gridOverlay.style.width = '100%';
|
||
this.gridOverlay.style.height = '100%';
|
||
this.gridOverlay.style.pointerEvents = 'none';
|
||
this.gridOverlay.style.zIndex = '9999';
|
||
|
||
this.gridEngine.container.appendChild(this.gridOverlay);
|
||
}
|
||
|
||
hideGridOverlay() {
|
||
if (this.gridOverlay) {
|
||
this.gridOverlay.remove();
|
||
this.gridOverlay = null;
|
||
}
|
||
}
|
||
|
||
highlightGridCells(x, y, w, h) {
|
||
if (!this.gridOverlay) return;
|
||
|
||
this.gridOverlay.innerHTML = '';
|
||
|
||
const totalGaps = this.gridEngine.gap * (this.gridEngine.columns + 1);
|
||
const colWidth = (this.gridEngine.containerWidth - totalGaps) / this.gridEngine.columns;
|
||
|
||
for (let row = y; row < y + h; row++) {
|
||
for (let col = x; col < x + w; col++) {
|
||
const cell = document.createElement('div');
|
||
cell.style.position = 'absolute';
|
||
cell.style.left = (col * (colWidth + this.gridEngine.gap) + this.gridEngine.gap) + 'px';
|
||
cell.style.top = (row * (this.gridEngine.rowHeight + this.gridEngine.gap) + this.gridEngine.gap) + 'px';
|
||
cell.style.width = colWidth + 'px';
|
||
cell.style.height = this.gridEngine.rowHeight + 'px';
|
||
cell.style.backgroundColor = 'rgba(78, 204, 163, 0.3)';
|
||
cell.style.border = '2px solid rgba(78, 204, 163, 0.6)';
|
||
cell.style.borderRadius = '4px';
|
||
cell.style.boxSizing = 'border-box';
|
||
|
||
this.gridOverlay.appendChild(cell);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Test application
|
||
let gridEngine = null;
|
||
let resizeHandler = null;
|
||
let widgets = [];
|
||
let widgetElements = new Map();
|
||
let widgetCounter = 0;
|
||
|
||
const widgetTypes = [
|
||
{ icon: '📊', name: 'Stats', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||
{ icon: '🎒', name: 'Inventory', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
||
{ icon: '📝', name: 'Notes', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||
{ icon: '🗺️', name: 'Map', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' }
|
||
];
|
||
|
||
function init() {
|
||
const container = document.getElementById('grid-container');
|
||
|
||
gridEngine = new GridEngine({
|
||
columns: 12,
|
||
rowHeight: 80,
|
||
gap: 12,
|
||
container
|
||
});
|
||
|
||
resizeHandler = new ResizeHandler(gridEngine, {
|
||
showDimensions: true,
|
||
showGrid: true,
|
||
minWidth: 2,
|
||
minHeight: 2,
|
||
maxWidth: 12,
|
||
maxHeight: 10,
|
||
touchDelay: 150
|
||
});
|
||
|
||
createInitialWidgets();
|
||
updateStats();
|
||
|
||
let resizeTimeout;
|
||
window.addEventListener('resize', () => {
|
||
clearTimeout(resizeTimeout);
|
||
resizeTimeout = setTimeout(() => {
|
||
renderAllWidgets();
|
||
updateStats();
|
||
}, 100);
|
||
});
|
||
|
||
logEvent('Initialized', { widgets: widgets.length });
|
||
}
|
||
|
||
function createInitialWidgets() {
|
||
const initialWidgets = [
|
||
{ x: 0, y: 0, w: 6, h: 3, type: 0 },
|
||
{ x: 6, y: 0, w: 6, h: 2, type: 1 },
|
||
{ x: 0, y: 3, w: 4, h: 3, type: 2 }
|
||
];
|
||
|
||
initialWidgets.forEach(config => {
|
||
const widget = {
|
||
id: `widget-${widgetCounter++}`,
|
||
x: config.x,
|
||
y: config.y,
|
||
w: config.w,
|
||
h: config.h,
|
||
type: config.type
|
||
};
|
||
widgets.push(widget);
|
||
createWidgetElement(widget);
|
||
});
|
||
}
|
||
|
||
function createWidgetElement(widget) {
|
||
const container = document.getElementById('grid-container');
|
||
const type = widgetTypes[widget.type];
|
||
|
||
const element = document.createElement('div');
|
||
element.className = 'widget';
|
||
element.style.background = type.color;
|
||
|
||
element.innerHTML = `
|
||
<div class="widget-header">
|
||
<span class="widget-icon">${type.icon}</span>
|
||
<span class="widget-title">${type.name}</span>
|
||
</div>
|
||
<div class="widget-info">Position: (${widget.x}, ${widget.y})</div>
|
||
<div class="widget-info">Size: ${widget.w}×${widget.h}</div>
|
||
`;
|
||
|
||
container.appendChild(element);
|
||
widgetElements.set(widget.id, element);
|
||
|
||
positionWidget(element, widget);
|
||
|
||
resizeHandler.initWidget(element, widget, (updatedWidget, newW, newH, newX, newY) => {
|
||
widget.w = newW;
|
||
widget.h = newH;
|
||
widget.x = newX;
|
||
widget.y = newY;
|
||
updateWidgetInfo(element, widget);
|
||
updateStats();
|
||
}, {
|
||
minW: 2,
|
||
minH: 2,
|
||
maxW: 12,
|
||
maxH: 10
|
||
});
|
||
}
|
||
|
||
function positionWidget(element, widget) {
|
||
const pos = gridEngine.getPixelPosition(widget);
|
||
element.style.left = pos.left + 'px';
|
||
element.style.top = pos.top + 'px';
|
||
element.style.width = pos.width + 'px';
|
||
element.style.height = pos.height + 'px';
|
||
}
|
||
|
||
function updateWidgetInfo(element, widget) {
|
||
const infoElements = element.querySelectorAll('.widget-info');
|
||
infoElements[0].textContent = `Position: (${widget.x}, ${widget.y})`;
|
||
infoElements[1].textContent = `Size: ${widget.w}×${widget.h}`;
|
||
}
|
||
|
||
function renderAllWidgets() {
|
||
widgets.forEach(widget => {
|
||
const element = widgetElements.get(widget.id);
|
||
if (element) {
|
||
positionWidget(element, widget);
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addWidget = function() {
|
||
const randomType = Math.floor(Math.random() * widgetTypes.length);
|
||
const widget = {
|
||
id: `widget-${widgetCounter++}`,
|
||
x: Math.floor(Math.random() * 8),
|
||
y: Math.floor(Math.random() * 3),
|
||
w: 4,
|
||
h: 2,
|
||
type: randomType
|
||
};
|
||
|
||
widgets.push(widget);
|
||
createWidgetElement(widget);
|
||
updateStats();
|
||
logEvent('Widget Added', { id: widget.id });
|
||
};
|
||
|
||
window.removeWidget = function() {
|
||
if (widgets.length === 0) return;
|
||
|
||
const widget = widgets.pop();
|
||
const element = widgetElements.get(widget.id);
|
||
|
||
if (element) {
|
||
element.remove();
|
||
widgetElements.delete(widget.id);
|
||
}
|
||
|
||
updateStats();
|
||
logEvent('Widget Removed', { id: widget.id });
|
||
};
|
||
|
||
window.resetGrid = function() {
|
||
widgets.forEach(widget => {
|
||
const element = widgetElements.get(widget.id);
|
||
if (element) {
|
||
element.remove();
|
||
}
|
||
});
|
||
|
||
widgets = [];
|
||
widgetElements.clear();
|
||
widgetCounter = 0;
|
||
|
||
createInitialWidgets();
|
||
updateStats();
|
||
logEvent('Grid Reset', null);
|
||
};
|
||
|
||
function updateStats() {
|
||
const container = document.getElementById('stats');
|
||
const totalSize = widgets.reduce((sum, w) => sum + (w.w * w.h), 0);
|
||
const avgSize = widgets.length > 0 ? (totalSize / widgets.length).toFixed(1) : 0;
|
||
|
||
container.innerHTML = `
|
||
<div class="stat-box">
|
||
<div class="stat-label">Widgets</div>
|
||
<div class="stat-value">${widgets.length}</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<div class="stat-label">Total Grid Units</div>
|
||
<div class="stat-value">${totalSize}</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<div class="stat-label">Avg Size</div>
|
||
<div class="stat-value">${avgSize}</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<div class="stat-label">Grid Columns</div>
|
||
<div class="stat-value">${gridEngine.columns}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function logEvent(type, data) {
|
||
const log = document.getElementById('event-log');
|
||
const time = new Date().toLocaleTimeString();
|
||
const item = document.createElement('div');
|
||
item.className = 'event-item';
|
||
item.innerHTML = `
|
||
<span class="event-time">${time}</span>
|
||
<span class="event-type"> ${type}</span>
|
||
${data ? ` - ${JSON.stringify(data)}` : ''}
|
||
`;
|
||
log.insertBefore(item, log.firstChild);
|
||
|
||
while (log.children.length > 50) {
|
||
log.removeChild(log.lastChild);
|
||
}
|
||
}
|
||
|
||
window.clearLog = function() {
|
||
document.getElementById('event-log').innerHTML = '';
|
||
};
|
||
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html>
|