cyclecad 0.5.0 → 0.8.6

package/app/js/agent-api.js

@@ -1894,10 +1894,5 @@ function addFeature(id, type, mesh, params) {
 export {
   on,
   off,
-  emit,
-  undo,
-  redo,
-  canUndo,
-  canRedo,
-  getModules
+  emit
 };

package/app/js/operations.js

@@ -75,74 +75,137 @@ export function createMaterial(preset = 'steel', overrides = {}) {
  * @returns {THREE.Shape}
  */
 function entitiesToShape(entities) {
-  const shape = new THREE.Shape();
-  let hasStartPoint = false;
+  if (!entities || entities.length === 0) {
+    throw new Error('No sketch entities to convert');
+  }
 
-  // Sort entities to identify outer profile vs holes
-  const profiles = [];
-  const holes = [];
+  // Separate entities by type
+  const rects = [];
+  const circles = [];
+  const lines = [];
+  const arcs = [];
+  const polylines = [];
 
   for (const entity of entities) {
-    if (entity.type === 'rect') {
-      const { x, y, width, height } = entity;
-      const profile = new THREE.Path();
-      profile.moveTo(x, y);
-      profile.lineTo(x + width, y);
-      profile.lineTo(x + width, y + height);
-      profile.lineTo(x, y + height);
-      profile.lineTo(x, y);
-      profiles.push(profile);
-    } else if (entity.type === 'circle') {
-      const { x, y, radius } = entity;
-      const profile = new THREE.Path();
-      profile.absarc(x, y, radius, 0, Math.PI * 2);
-      profiles.push({ circle: { x, y, radius } });
-    } else if (entity.type === 'polyline') {
-      const profile = new THREE.Path();
-      entity.points.forEach((pt, i) => {
-        if (i === 0) profile.moveTo(pt.x, pt.y);
-        else profile.lineTo(pt.x, pt.y);
-      });
-      profiles.push(profile);
+    switch (entity.type) {
+      case 'rect':
+      case 'rectangle':
+        rects.push(entity);
+        break;
+      case 'circle':
+        circles.push(entity);
+        break;
+      case 'line':
+        lines.push(entity);
+        break;
+      case 'arc':
+        arcs.push(entity);
+        break;
+      case 'polyline':
+        polylines.push(entity);
+        break;
     }
   }
 
-  // Determine which circles are holes (inside rectangles)
-  for (let i = 0; i < profiles.length; i++) {
-    const p = profiles[i];
-    if (p.circle) {
-      let isHole = false;
-      for (let j = 0; j < profiles.length; j++) {
-        if (i !== j && !profiles[j].circle) {
-          // Simple containment check: circle center is inside rect
-          // This is a simplified check; real implementation would be more robust
-          isHole = true;
-        }
+  // Build shapes from each entity type
+  const shapes = [];
+
+  // Rectangles → closed shape
+  for (const r of rects) {
+    const s = new THREE.Shape();
+    // Sketch stores corner in points[0], opposite corner in points[1], dims in dimensions
+    const x = r.points?.[0]?.x ?? r.x ?? 0;
+    const y = r.points?.[0]?.y ?? r.y ?? 0;
+    const w = r.dimensions?.width ?? r.width ?? 10;
+    const h = r.dimensions?.height ?? r.height ?? 10;
+    s.moveTo(x, y);
+    s.lineTo(x + w, y);
+    s.lineTo(x + w, y + h);
+    s.lineTo(x, y + h);
+    s.closePath();
+    shapes.push({ shape: s, area: Math.abs(w * h), type: 'rect' });
+  }
+
+  // Circles → closed shape
+  for (const c of circles) {
+    const s = new THREE.Shape();
+    // Sketch stores center in points[0], radius in dimensions.radius
+    const cx = c.points?.[0]?.x ?? c.x ?? c.center?.x ?? 0;
+    const cy = c.points?.[0]?.y ?? c.y ?? c.center?.y ?? 0;
+    const r = c.dimensions?.radius ?? c.radius ?? 10;
+    s.absarc(cx, cy, r, 0, Math.PI * 2, false);
+    shapes.push({ shape: s, area: Math.PI * r * r, type: 'circle' });
+  }
+
+  // Polylines → closed shape (if closed or has enough points)
+  for (const p of polylines) {
+    if (p.points && p.points.length >= 3) {
+      const s = new THREE.Shape();
+      s.moveTo(p.points[0].x, p.points[0].y);
+      for (let i = 1; i < p.points.length; i++) {
+        s.lineTo(p.points[i].x, p.points[i].y);
       }
-      if (isHole) {
-        holes.push(p.circle);
-      } else {
-        profiles[i] = p;
+      s.closePath();
+      // Approximate area using shoelace formula
+      let area = 0;
+      const pts = p.points;
+      for (let i = 0; i < pts.length; i++) {
+        const j = (i + 1) % pts.length;
+        area += pts[i].x * pts[j].y;
+        area -= pts[j].x * pts[i].y;
       }
+      shapes.push({ shape: s, area: Math.abs(area / 2), type: 'polyline' });
     }
   }
 
-  // Build main shape from first profile (usually outer boundary)
-  if (profiles.length > 0 && !profiles[0].circle) {
-    shape.moveTo(0, 0);
-    for (let i = 0; i < 10; i++) {
-      shape.lineTo(i * 0.1, Math.sin(i * 0.1) * 0.5);
+  // Lines → try to build closed path if they form a loop
+  if (lines.length >= 3) {
+    const s = new THREE.Shape();
+    // Start from first line's start point
+    const firstLine = lines[0];
+    const sx = firstLine.start?.x || firstLine.x1 || 0;
+    const sy = firstLine.start?.y || firstLine.y1 || 0;
+    s.moveTo(sx, sy);
+
+    for (const line of lines) {
+      const ex = line.end?.x || line.x2 || 0;
+      const ey = line.end?.y || line.y2 || 0;
+      s.lineTo(ex, ey);
     }
+    s.closePath();
+    shapes.push({ shape: s, area: 1, type: 'lines' });
   }
 
-  // Add holes
-  for (const hole of holes) {
+  // If no shapes could be built, create a default 20mm square
+  if (shapes.length === 0) {
+    const s = new THREE.Shape();
+    s.moveTo(-10, -10);
+    s.lineTo(10, -10);
+    s.lineTo(10, 10);
+    s.lineTo(-10, 10);
+    s.closePath();
+    shapes.push({ shape: s, area: 400, type: 'default' });
+  }
+
+  // Sort by area — largest is the outer profile, smaller ones are holes
+  shapes.sort((a, b) => b.area - a.area);
+
+  // Largest shape is the outer boundary
+  const mainShape = shapes[0].shape;
+
+  // Any smaller shapes become holes in the main shape
+  for (let i = 1; i < shapes.length; i++) {
+    const holePts = shapes[i].shape.getPoints(32);
     const holePath = new THREE.Path();
-    holePath.absarc(hole.x, hole.y, hole.radius, 0, Math.PI * 2);
-    shape.holes.push(holePath);
+    holePts.forEach((pt, idx) => {
+      if (idx === 0) holePath.moveTo(pt.x, pt.y);
+      else holePath.lineTo(pt.x, pt.y);
+    });
+    holePath.closePath();
+    mainShape.holes.push(holePath);
   }
 
-  return shape;
+  return mainShape;
 }
 
 /**
@@ -168,9 +231,8 @@ export function extrudeProfile(entities, height, options = {}) {
   // Create shape from entities
   const shape = entitiesToShape(entities);
 
-  // Calculate extrusion settings
-  const extrudeHeight = symmetric ? height / 2 : height;
-  const depth = symmetric ? height : height;
+  // Always use positive depth — cut logic is handled by doExtrude in index.html
+  const depth = symmetric ? Math.abs(height) : Math.abs(height);
 
   // Create extrude geometry
   const geometry = new THREE.ExtrudeGeometry(shape, {
@@ -182,7 +244,7 @@ export function extrudeProfile(entities, height, options = {}) {
     steps: Math.max(1, Math.floor(depth / 10))
   });
 
-  // Center if symmetric
+  // Position the extrusion
   if (symmetric) {
     geometry.translate(0, 0, -depth / 2);
   }

package/app/js/sketch.js

@@ -50,17 +50,20 @@ export function startSketch(plane, camera, controls) {
   // Disable orbit controls
   if (controls) controls.enabled = false;
 
-  // Create canvas overlay
-  const container = document.body;
+  // Create canvas overlay — constrained to viewport area only
+  const container = document.getElementById('viewport-container') || document.body;
   const canvas = document.createElement('canvas');
   canvas.id = 'sketch-canvas';
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-  canvas.style.position = 'fixed';
+  const vpRect = container.getBoundingClientRect();
+  canvas.width = vpRect.width || window.innerWidth;
+  canvas.height = vpRect.height || window.innerHeight;
+  canvas.style.position = 'absolute';
   canvas.style.top = '0';
   canvas.style.left = '0';
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
   canvas.style.cursor = 'crosshair';
-  canvas.style.zIndex = '9999';
+  canvas.style.zIndex = '30';
   canvas.style.backgroundColor = 'rgba(0,0,0,0)';
 
   container.appendChild(canvas);
@@ -179,9 +182,14 @@ export function canvasToWorld(clientX, clientY, camera, plane) {
   const canvas = sketchState.canvas;
   if (!canvas) return { x: 0, y: 0, z: 0 };
 
+  // Account for canvas position offset (left panel, toolbar, etc.)
+  const rect = canvas.getBoundingClientRect();
+  const localX = clientX - rect.left;
+  const localY = clientY - rect.top;
+
   // Normalized device coordinates
-  const ndcX = (clientX / canvas.width) * 2 - 1;
-  const ndcY = -(clientY / canvas.height) * 2 + 1;
+  const ndcX = (localX / rect.width) * 2 - 1;
+  const ndcY = -(localY / rect.height) * 2 + 1;
 
   // Ray from camera through pixel
   const raycaster = sketchState.raycaster;
@@ -192,7 +200,10 @@ export function canvasToWorld(clientX, clientY, camera, plane) {
   const planeObj = new THREE.Plane(planeNormal, 0);
   const intersection = new THREE.Vector3();
 
-  raycaster.ray.intersectPlane(planeObj, intersection);
+  const hit = raycaster.ray.intersectPlane(planeObj, intersection);
+  if (!hit) {
+    return { x: 0, y: 0, z: 0 }; // fallback if ray is parallel to plane
+  }
 
   return { x: intersection.x, y: intersection.y, z: intersection.z };
 }
@@ -602,17 +613,24 @@ function _onSketchClick(e) {
 function _onSketchContextMenu(e) {
   e.preventDefault();
 
-  if (sketchState.currentTool === 'line' && sketchState.currentPoints.length > 0) {
+  const tool = sketchState.currentTool;
+
+  if (tool === 'line' && sketchState.currentPoints.length > 0) {
     // Stop line chain mode
     if (sketchState.currentPoints.length >= 2) {
       _finalizeEntity();
     }
     sketchState.currentPoints = [];
     sketchState.isDrawing = false;
-  } else if (sketchState.currentTool === 'polyline' && sketchState.currentPoints.length >= 2) {
+  } else if (tool === 'polyline' && sketchState.currentPoints.length >= 2) {
     // Close polyline
     _finalizeEntity();
     sketchState.isDrawing = false;
+  } else if ((tool === 'rectangle' || tool === 'rect' || tool === 'circle' || tool === 'arc') && sketchState.isDrawing) {
+    // Cancel in-progress rect/circle/arc on right-click
+    sketchState.currentPoints = [];
+    sketchState.isDrawing = false;
+    sketchState.inProgressEntity = null;
   }
 
   _renderSketchCanvas();
@@ -640,7 +658,17 @@ function _onSketchKeyDown(e) {
     }
     _renderSketchCanvas();
   } else if (e.key === 'Escape') {
-    endSketch();
+    // Cancel current drawing, don't destroy the sketch
+    if (sketchState.currentPoints.length > 0 || sketchState.inProgressEntity) {
+      sketchState.currentPoints = [];
+      sketchState.inProgressEntity = null;
+      sketchState.isDrawing = false;
+      _renderSketchCanvas();
+    } else if (sketchState.currentTool) {
+      sketchState.currentTool = null;
+      _renderSketchCanvas();
+    }
+    // If no tool and no in-progress, do nothing — user clicks Extrude to finish
   } else if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
     undo();
   }
@@ -651,8 +679,10 @@ function _onSketchKeyDown(e) {
  */
 function _onSketchResize() {
   if (sketchState.canvas) {
-    sketchState.canvas.width = window.innerWidth;
-    sketchState.canvas.height = window.innerHeight;
+    const vp = document.getElementById('viewport-container');
+    const rect = vp ? vp.getBoundingClientRect() : { width: window.innerWidth, height: window.innerHeight };
+    sketchState.canvas.width = rect.width;
+    sketchState.canvas.height = rect.height;
     _renderSketchCanvas();
   }
 }

package/app/js/tree.js

@@ -44,7 +44,12 @@ export function initTree(containerEl) {
       </div>
       <div class="tree-list" id="tree-list"></div>
       <div class="tree-empty" id="tree-empty">
-        <p>Start with a sketch</p>
+        <div style="text-align:center;padding:20px 12px;">
+          <div style="font-size:32px;margin-bottom:8px;opacity:0.5;">&#x1F4D0;</div>
+          <p style="font-size:12px;font-weight:600;margin-bottom:6px;color:var(--text-primary, #e0e0e0);">No features yet</p>
+          <p style="font-size:11px;color:var(--text-secondary, #a0a0a0);line-height:1.5;">Click <b>New Sketch</b> to draw a 2D profile, then <b>Extrude</b> to make it 3D.</p>
+          <p style="font-size:10px;color:var(--text-muted, #696969);margin-top:8px;">Features will appear here as you build.</p>
+        </div>
       </div>
     </div>
   `;

package/app/js/viewport.js

@@ -628,6 +628,14 @@ export function getControls() {
   return controls;
 }
 
+/**
+ * Fit camera to show entire scene
+ * @param {number} padding - Padding multiplier (default 1.2)
+ */
+export function fitAll(padding = 1.2) {
+  if (scene) fitToObject(scene, padding);
+}
+
 // ============================================================================
 // Event Handlers
 // ============================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cyclecad",
-  "version": "0.5.0",
+  "version": "0.8.6",
   "description": "Browser-based parametric 3D CAD modeler with AI-powered tools, native Inventor file parsing, and smart assembly management. No install required.",
   "main": "index.html",
   "bin": {
@@ -32,7 +32,7 @@
     "cyclewash"
   ],
   "author": "vvlars <vvlars@googlemail.com>",
-  "license": "BSL-1.1",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/vvlars-cmd/cyclecad.git"