@guinetik/gcanvas 1.0.0

package/src/util/layout.js

@@ -0,0 +1,317 @@
+/**
+ * Applies layout positions to items with optional transformation
+ *
+ * @param {Object[]} items - Array of objects to position (must have x, y properties)
+ * @param {Object[]} positions - Array of position objects from layout functions
+ * @param {Object} options - Options for applying positions
+ * @param {number} [options.offsetX=0] - X offset to apply to all positions
+ * @param {number} [options.offsetY=0] - Y offset to apply to all positions
+ * @param {function} [options.transform] - Optional transform function to apply to positions
+ * @return {Object[]} The items with updated positions
+ */
+export function applyLayout(items, positions, options = {}) {
+  const offsetX = options.offsetX ?? 0;
+  const offsetY = options.offsetY ?? 0;
+  const transform = options.transform;
+
+  items.forEach((item, index) => {
+    if (index < positions.length) {
+      const pos = positions[index];
+
+      if (transform) {
+        const transformed = transform(pos);
+        item.x = transformed.x + offsetX;
+        item.y = transformed.y + offsetY;
+      } else {
+        item.x = pos.x + offsetX;
+        item.y = pos.y + offsetY;
+      }
+    }
+  });
+
+  return items;
+}
+
+/**
+ * Creates a horizontal layout for the given items
+ *
+ * @param {Object[]} items - Array of objects with width and height properties
+ * @param {Object} options - Layout configuration options
+ * @param {number} [options.spacing=10] - Space between items
+ * @param {number} [options.padding=0] - Padding around the entire layout
+ * @param {string} [options.align="start"] - Vertical alignment ("start", "center", "end")
+ * @param {boolean} [options.centerItems=true] - Whether to position items relative to their centers
+ * @return {Object} Result containing positioned items and layout dimensions
+ */
+export function horizontalLayout(items, options = {}) {
+  const spacing = options.spacing ?? 10;
+  const padding = options.padding ?? 0;
+  const align = options.align ?? "start";
+  const centerItems = options.centerItems ?? true;
+
+  let x = padding;
+  let maxHeight = 0;
+  const positions = [];
+
+  // First pass: get max height
+  for (const item of items) {
+    maxHeight = Math.max(maxHeight, item.height ?? 0);
+  }
+
+  // Second pass: calculate positions
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const width = item.width ?? 0;
+    const height = item.height ?? 0;
+
+    // X position depends on whether we're centering the items
+    const itemX = centerItems ? x + width / 2 : x;
+
+    // Y position determined by alignment
+    let itemY;
+    switch (align) {
+      case "center":
+        itemY = (maxHeight - height) / 2;
+        break;
+      case "end":
+        itemY = maxHeight - height;
+        break;
+      case "start":
+      default:
+        itemY = 0;
+    }
+
+    positions.push({ x: itemX, y: itemY });
+
+    // Move to next position
+    x += width;
+    if (i < items.length - 1) {
+      x += spacing;
+    }
+  }
+
+  // Calculate total dimensions
+  const totalWidth = x + padding;
+  const totalHeight = maxHeight + padding * 2;
+
+  return {
+    positions,
+    width: totalWidth,
+    height: totalHeight,
+  };
+}
+
+/**
+ * Creates a vertical layout for the given items
+ *
+ * @param {Object[]} items - Array of objects with width and height properties
+ * @param {Object} options - Layout configuration options
+ * @param {number} [options.spacing=10] - Space between items
+ * @param {number} [options.padding=0] - Padding around the entire layout
+ * @param {string} [options.align="start"] - Horizontal alignment ("start", "center", "end")
+ * @param {boolean} [options.centerItems=true] - Whether to position items relative to their centers
+ * @return {Object} Result containing positioned items and layout dimensions
+ */
+export function verticalLayout(items, options = {}) {
+  const spacing = options.spacing ?? 10;
+  const padding = options.padding ?? 0;
+  const align = options.align ?? "start";
+  const centerItems = options.centerItems ?? true;
+
+  let y = padding;
+  let maxWidth = 0;
+  const positions = [];
+
+  // First pass: get max width
+  for (const item of items) {
+    maxWidth = Math.max(maxWidth, item.width ?? 0);
+  }
+
+  // Second pass: calculate positions
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const width = item.width ?? 0;
+    const height = item.height ?? 0;
+
+    // Y position depends on whether we're centering the items
+    const itemY = centerItems ? y + height / 2 : y;
+
+    // X position determined by alignment
+    let itemX;
+    switch (align) {
+      case "center":
+        itemX = (maxWidth - width) / 2;
+        break;
+      case "end":
+        itemX = maxWidth - width;
+        break;
+      case "start":
+      default:
+        itemX = 0;
+    }
+
+    positions.push({ x: itemX, y: itemY });
+
+    // Move to next position
+    y += height;
+    if (i < items.length - 1) {
+      y += spacing;
+    }
+  }
+
+  // Calculate total dimensions
+  const totalWidth = maxWidth + padding * 2;
+  const totalHeight = y + padding;
+
+  return {
+    positions,
+    width: totalWidth,
+    height: totalHeight,
+  };
+}
+
+/**
+ * Creates a tile layout for the given items
+ *
+ * @param {Object[]} items - Array of objects with width and height properties
+ * @param {Object} options - Layout configuration options
+ * @param {number} [options.columns=4] - Number of columns in the grid
+ * @param {number} [options.spacing=10] - Space between items
+ * @param {number} [options.padding=0] - Padding around the entire layout
+ * @param {boolean} [options.centerItems=true] - Whether to position items relative to their centers
+ * @return {Object} Result containing positioned items and layout dimensions
+ */
+export function tileLayout(items, options = {}) {
+  if (items.length === 0) {
+    return { positions: [], width: 0, height: 0 };
+  }
+
+  const columns = options.columns ?? 4;
+  const spacing = options.spacing ?? 10;
+  const padding = options.padding ?? 0;
+  const centerItems = options.centerItems ?? true;
+
+  // Assume uniform tile size based on first item
+  const tileWidth = items[0].width ?? 0;
+  const tileHeight = items[0].height ?? 0;
+
+  const rowCount = Math.ceil(items.length / columns);
+  const positions = [];
+
+  // Calculate grid dimensions
+  const totalWidth =
+    columns * tileWidth + (columns - 1) * spacing + padding * 2;
+  const totalHeight =
+    rowCount * tileHeight + (rowCount - 1) * spacing + padding * 2;
+
+  // Set starting position at top-left corner
+  let x = padding;
+  let y = padding;
+  let colIndex = 0;
+
+  // Calculate positions for each item
+  for (let i = 0; i < items.length; i++) {
+    // Position depends on whether we're centering the items
+    const itemX = centerItems ? x + tileWidth / 2 : x;
+    const itemY = centerItems ? y + tileHeight / 2 : y;
+
+    positions.push({ x: itemX, y: itemY });
+
+    colIndex++;
+    if (colIndex < columns) {
+      x += tileWidth + spacing;
+    } else {
+      colIndex = 0;
+      x = padding;
+      y += tileHeight + spacing;
+    }
+  }
+
+  return {
+    positions,
+    width: totalWidth,
+    height: totalHeight,
+  };
+}
+
+export function gridLayout(items, options = {}) {
+  if (items.length === 0) {
+    return { positions: [], width: 0, height: 0 };
+  }
+
+  const columns = options.columns ?? 4;
+  const spacing = options.spacing ?? 10;
+  const padding = options.padding ?? 0;
+  const centerItems = options.centerItems ?? true;
+
+  // Determine max width and height for each column and row
+  const colWidths = new Array(columns).fill(0);
+  const rowHeights = [];
+  
+  items.forEach((item, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+    
+    const itemWidth = item.width ?? 0;
+    const itemHeight = item.height ?? 0;
+    
+    // Track max width for each column
+    colWidths[col] = Math.max(colWidths[col], itemWidth);
+    
+    // Track max height for each row
+    if (rowHeights[row] === undefined) {
+      rowHeights[row] = itemHeight;
+    } else {
+      rowHeights[row] = Math.max(rowHeights[row], itemHeight);
+    }
+  });
+
+  // Calculate positions
+  const positions = [];
+  let x = padding;
+  let y = padding;
+  let colIndex = 0;
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const itemWidth = item.width ?? 0;
+    const itemHeight = item.height ?? 0;
+    const rowHeight = rowHeights[Math.floor(i / columns)];
+
+    // Position depends on whether we're centering the items
+    const posX = centerItems ? x + itemWidth / 2 : x;
+    const posY = centerItems ? y + itemHeight / 2 : y;
+
+    positions.push({ x: posX, y: posY });
+
+    // Move to next position
+    colIndex++;
+    if (colIndex < columns) {
+      x += colWidths[colIndex - 1] + spacing;
+    } else {
+      // Move to next row
+      colIndex = 0;
+      x = padding;
+      y += rowHeight + spacing;
+    }
+  }
+
+  // Calculate total dimensions
+  const totalWidth = 
+    padding * 2 + 
+    colWidths.reduce((sum, width) => sum + width, 0) + 
+    spacing * (columns - 1);
+  
+  const totalHeight = 
+    padding * 2 + 
+    rowHeights.reduce((sum, height) => sum + height, 0) + 
+    spacing * (rowHeights.length - 1);
+
+  return {
+    positions,
+    width: totalWidth,
+    height: totalHeight,
+    cols: columns,
+    rows: rowHeights.length
+  };
+}

package/src/util/position.js

@@ -0,0 +1,147 @@
+/**
+ * Position utility for consistently positioning objects relative to containers
+ * Provides anchor point constants and methods for calculating positions
+ */
+export class Position {
+  /**
+   * Anchor position constants
+   */
+  static TOP_LEFT = "top-left";
+  static TOP_CENTER = "top-center";
+  static TOP_RIGHT = "top-right";
+  static CENTER_LEFT = "center-left";
+  static CENTER = "center";
+  static CENTER_RIGHT = "center-right";
+  static BOTTOM_LEFT = "bottom-left";
+  static BOTTOM_CENTER = "bottom-center";
+  static BOTTOM_RIGHT = "bottom-right";
+  
+  /**
+   * Calculates position based on anchor point
+   * 
+   * @param {string} anchor - Anchor position constant
+   * @param {Object} object - Object being positioned (with width and height)
+   * @param {Object} container - Container to position relative to (with x, y, width, height)
+   * @param {number} margin - Margin from the container edges
+   * @param {number} offsetX - Additional X offset
+   * @param {number} offsetY - Additional Y offset
+   * @returns {Object} Position and alignment information
+   */
+  static calculate(anchor, object, container, margin = 10, offsetX = 0, offsetY = 0) {
+    // Ensure we have valid dimensions
+    const objectWidth = object.width || 0;
+    const objectHeight = object.height || 0;
+    
+    const containerWidth = container.width || 0;
+    const containerHeight = container.height || 0;
+    const containerX = container.x || 0;
+    const containerY = container.y || 0;
+    
+    // Calculate position based on anchor
+    let x, y, align, baseline;
+    
+    switch (anchor) {
+      // Top row
+      case Position.TOP_LEFT:
+        x = (containerX - containerWidth/2) + margin + objectWidth/2;
+        y = (containerY - containerHeight/2) + margin + objectHeight/2;
+        align = "left";
+        baseline = "top";
+        break;
+        
+      case Position.TOP_CENTER:
+        x = containerX;
+        y = (containerY - containerHeight/2) + margin + objectHeight/2;
+        align = "center";
+        baseline = "top";
+        break;
+        
+      case Position.TOP_RIGHT:
+        x = (containerX + containerWidth/2) - margin - objectWidth/2;
+        y = (containerY - containerHeight/2) + margin + objectHeight/2;
+        align = "right";
+        baseline = "top";
+        break;
+      
+      // Middle row
+      case Position.CENTER_LEFT:
+        x = (containerX - containerWidth/2) + margin + objectWidth/2;
+        y = containerY;
+        align = "left";
+        baseline = "middle";
+        break;
+        
+      case Position.CENTER:
+        x = containerX;
+        y = containerY;
+        align = "center";
+        baseline = "middle";
+        break;
+        
+      case Position.CENTER_RIGHT:
+        x = (containerX + containerWidth/2) - margin - objectWidth/2;
+        y = containerY;
+        align = "right";
+        baseline = "middle";
+        break;
+      
+      // Bottom row
+      case Position.BOTTOM_LEFT:
+        //console.log("BOTTOM_LEFT", containerX, containerWidth, margin, objectWidth);
+        x = (containerX - containerWidth/2) + margin + objectWidth/2;
+        y = (containerY + containerHeight/2) - margin - objectHeight/2;
+        align = "left";
+        baseline = "bottom";
+        break;
+        
+      case Position.BOTTOM_CENTER:
+        x = containerX;
+        y = (containerY + containerHeight/2) - margin - objectHeight/2;
+        align = "center";
+        baseline = "bottom";
+        break;
+        
+      case Position.BOTTOM_RIGHT:
+        x = (containerX + containerWidth/2) - margin - objectWidth/2;
+        y = (containerY + containerHeight/2) - margin - objectHeight/2;
+        align = "right";
+        baseline = "bottom";
+        break;
+        
+      default:
+        // Fallback to top-left
+        x = (containerX - containerWidth/2) + margin + objectWidth/2;
+        y = (containerY - containerHeight/2) + margin + objectHeight/2;
+        align = "left";
+        baseline = "top";
+    }
+    
+    // Apply custom offsets
+    x += offsetX;
+    y += offsetY;
+    
+    return { x, y, align, baseline };
+  }
+  
+  /**
+   * Calculates absolute position relative to the game canvas
+   * 
+   * @param {string} anchor - Anchor position constant
+   * @param {Object} object - Object being positioned
+   * @param {Object} game - Game object with canvas dimensions
+   * @param {number} margin - Margin from the edges
+   * @param {number} offsetX - Additional X offset
+   * @param {number} offsetY - Additional Y offset
+   * @returns {Object} Position and alignment information
+   */
+  static calculateAbsolute(anchor, object, game, margin = 10, offsetX = 0, offsetY = 0) {
+    const container = {
+      width: game.width,
+      height: game.height,
+      x: game.width / 2,
+      y: game.height / 2
+    };
+    
+    return Position.calculate(anchor, object, container, margin, offsetX, offsetY);
+  }
+}

package/src/util/tasks.js

@@ -0,0 +1,47 @@
+export class TaskManager {
+    constructor(workerUrl) {
+      this.worker = new Worker(workerUrl);
+      this.nextTaskId = 1;
+      this.pendingTasks = new Map();
+      
+      // Set up message handler
+      this.worker.onmessage = this.handleMessage.bind(this);
+    }
+    
+    handleMessage(e) {
+      const { taskId, status, result, error } = e.data;
+      
+      if (this.pendingTasks.has(taskId)) {
+        const { resolve, reject } = this.pendingTasks.get(taskId);
+        
+        if (status === 'complete') {
+          resolve(result);
+        } else if (status === 'error') {
+          reject(new Error(error));
+        }
+        
+        // Remove the completed task
+        this.pendingTasks.delete(taskId);
+      }
+    }
+    
+    runTask(taskName, params) {
+      return new Promise((resolve, reject) => {
+        const taskId = this.nextTaskId++;
+        
+        // Store the promise callbacks
+        this.pendingTasks.set(taskId, { resolve, reject });
+        
+        // Send the task to the worker
+        this.worker.postMessage({
+          taskId,
+          taskName,
+          params
+        });
+      });
+    }
+    
+    terminate() {
+      this.worker.terminate();
+    }
+  }