release: SketchForge 1.0.5

Author: Formsmith746

.github/SETUP.md

@@ -32,7 +32,7 @@ permissions:
 
 ## Create a release
 
-Push a tag such as `v1.0.4`, or run `Desktop Release` with `workflow_dispatch` and enter `1.0.4`.
+Push a tag such as `v1.0.5`, or run `Desktop Release` with `workflow_dispatch` and enter `1.0.5`.
 
 The workflow builds these packages:
 

.github/workflows/desktop-release.yml

@@ -8,7 +8,7 @@ on:
   workflow_dispatch:
     inputs:
       version:
-        description: "Version to release (for example 1.0.4)"
+        description: "Version to release (for example 1.0.5)"
         required: true
         type: string
 

README.md

@@ -19,7 +19,7 @@
     <a href="https://github.com/Formsmith746/SketchForge-3D/stargazers"><img alt="Star SketchForge on GitHub" src="https://img.shields.io/github/stars/Formsmith746/SketchForge-3D?style=flat&logo=github"></a>
     <a href="https://github.com/sponsors/Formsmith746"><img alt="Sponsor SketchForge on GitHub" src="https://img.shields.io/badge/GitHub-Sponsor-ea4aaa?logo=githubsponsors&logoColor=white"></a>
     <img alt="Local first" src="https://img.shields.io/badge/local--first-no%20account-0ea5e9">
-    <img alt="Version v1.0.4" src="https://img.shields.io/badge/version-v1.0.4-2563eb">
+    <img alt="Version v1.0.5" src="https://img.shields.io/badge/version-v1.0.5-2563eb">
   </p>
 </div>
 

apps/web/src/app/globals.css

@@ -4737,16 +4737,16 @@ button {
 
 .rotate-handle {
   z-index: 3;
-  width: 42px;
-  height: 42px;
+  width: 52px;
+  height: 52px;
   color: rgba(47, 61, 70, 0.6);
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   cursor: grab;
   opacity: 1;
-  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%) rotate(var(--rotate-handle-angle, 0deg));
+  transform: translate3d(var(--overlay-x, 0), var(--overlay-y, 0), 0) translate(-50%, -50%);
 }
 
 .rotate-handle:hover {
@@ -4756,8 +4756,8 @@ button {
 .rotate-handle-icon,
 .rotate-handle-icon svg {
   display: block;
-  width: 18px;
-  height: 18px;
+  width: 26px;
+  height: 26px;
 }
 
 .rotate-handle-icon {
@@ -4769,6 +4769,16 @@ button {
 
 .rotate-handle-icon svg {
   fill: currentColor;
+  transform: matrix(
+    var(--rotate-plane-a, 1),
+    var(--rotate-plane-b, 0),
+    var(--rotate-plane-c, 0),
+    var(--rotate-plane-d, 1),
+    0,
+    0
+  );
+  transform-box: fill-box;
+  transform-origin: center;
 }
 
 .rotation-edit {

apps/web/src/components/WorkplaneViewport.tsx

@@ -42,7 +42,7 @@ import {
   type PlacementWorkplane,
 } from "@/lib/placementWorkplane";
 import { regularPolygonFootprintScale } from "@/lib/regularPolygonFootprint";
-import { DEFAULT_SNAP_GRID, DEFAULT_WORKPLANE_WORKSPACE, normalizeSnapGrid, normalizeWorkspaceSettings, workplaneSettingsFingerprint, workspaceHydrationSyncDecision } from "@/lib/workplaneSettings";
+import { canBeginShapeDrag, DEFAULT_SNAP_GRID, DEFAULT_WORKPLANE_WORKSPACE, normalizeSnapGrid, normalizeWorkspaceSettings, workplaneSettingsFingerprint, workspaceHydrationSyncDecision } from "@/lib/workplaneSettings";
 import { interiorWorkplaneGridCoordinates, workplaneThemePalette, WORKPLANE_LINE_ELEVATION, WORKPLANE_MAJOR_GRID_INTERVAL } from "@/lib/workplaneGrid";
 import { cleanNearZero, cleanRotationDegrees, fallbackSolidColor, mirroredAxisCount, mirrorSign, preservesEdgeTreatmentSize, proportionalResizeScale, resizedImportedCoordinates, resizedImportedMeshPositions, resizedShapeSize, shapeDepth, shapeHasTaper, shapeOverallFootprintDimensions, shapeTaperDimensions, shapeTaperScaleAt, shapeWidth } from "@/lib/workplaneShapes";
 import { sphereTessellation } from "@/lib/sphereTessellation";
@@ -51,6 +51,7 @@ import {
   TransformOverlay,
   getElevationMeasureKey,
   measureKeyForHandle,
+  normalizedRotationPlaneBasis,
   type DimensionMark,
   type EditingDimension,
   type EditingRotation,
@@ -1837,8 +1838,6 @@ function signedAngleAroundAxis(start: THREE.Vector3, current: THREE.Vector3, axi
 
 const ROTATION_HANDLE_SIDE_HYSTERESIS = 0.22;
 const ROTATION_HANDLE_DOMINANCE_HYSTERESIS = 0.18;
-const ROTATION_UPPER_HANDLE_ICON_ANGLE = 0;
-const ROTATION_BOTTOM_HANDLE_ICON_ANGLE = 0;
 function signedRotationSide(value: number, previous: RotationHandleSide | undefined, positiveSide: RotationHandleSide, negativeSide: RotationHandleSide) {
   if (previous === positiveSide && value > -ROTATION_HANDLE_SIDE_HYSTERESIS) {
     return previous;
@@ -1896,9 +1895,10 @@ function rotationHandleSidesForCamera(
   const viewZ = viewZRaw / length;
   const previous = state.rotationHandleSides ?? undefined;
   const next: RotationHandleSides = {
-    x: signedRotationSide(viewX, previous?.x, "right", "left"),
+    // Keep the two upper rotation handles on the faces opposite the camera.
+    x: signedRotationSide(viewX, previous?.x, "left", "right"),
     y: dominantRotationSide(viewX, viewZ, previous?.y),
-    z: signedRotationSide(viewZ, previous?.z, "near", "far"),
+    z: signedRotationSide(viewZ, previous?.z, "far", "near"),
   };
   state.rotationHandleSides = next;
   return next;
@@ -4262,6 +4262,9 @@ export function WorkplaneViewport({
       if (!alreadySelected) {
         onSelectShape(id);
       }
+      if (!canBeginShapeDrag(workspaceRef.current.selectBeforeMove, alreadySelected)) {
+        return;
+      }
       if (shape.locked) {
         return;
       }
@@ -6231,7 +6234,10 @@ function updateTransformOverlayDom(state: ThreeState, next: TransformOverlayStat
     }
     element.style.setProperty("--overlay-x", `${handle.x}px`);
     element.style.setProperty("--overlay-y", `${handle.y}px`);
-    element.style.setProperty("--rotate-handle-angle", `${handle.angle}deg`);
+    element.style.setProperty("--rotate-plane-a", String(handle.plane.a));
+    element.style.setProperty("--rotate-plane-b", String(handle.plane.b));
+    element.style.setProperty("--rotate-plane-c", String(handle.plane.c));
+    element.style.setProperty("--rotate-plane-d", String(handle.plane.d));
   });
 }
 
@@ -6438,37 +6444,34 @@ function syncTransformOverlay(
   };
   const rotateLeft = screenOffsetFromCenter(project(sidePoint(rotationSides.x, frame.max.y)), 24);
   const rotateRight = screenOffsetFromCenter(project(sidePoint(rotationSides.z, frame.max.y)), 28);
-  const rotateBottom = screenOffsetFromCenter(project(sidePoint(rotationSides.y, footprintY)), 34);
+  const rotateBottomAnchor = screenOffsetFromCenter(project(sidePoint(rotationSides.y, footprintY)), 26);
+  const rotateBottom = { ...rotateBottomAnchor, y: rotateBottomAnchor.y - 5 };
   const xFaceCenter = sidePoint(rotationSides.x, 0);
   const zFaceCenter = sidePoint(rotationSides.z, 0);
   const yFaceCenter = bottomCenterWorld;
-  const projectedAxisAngle = (centerWorld: THREE.Vector3, axis: THREE.Vector3) => {
-    const from = project(centerWorld.clone().addScaledVector(axis, -1));
-    const to = project(centerWorld.clone().addScaledVector(axis, 1));
-    return THREE.MathUtils.radToDeg(Math.atan2(to.y - from.y, to.x - from.x));
-  };
-  const rotateWithWorkplane = !placementWorkplaneIsBase(activeWorkplane);
-  const xRotateAngle = rotateWithWorkplane
-    ? projectedAxisAngle(xFaceCenter, zFootAxis)
-    : ROTATION_UPPER_HANDLE_ICON_ANGLE;
-  const zRotateAngle = rotateWithWorkplane
-    ? projectedAxisAngle(zFaceCenter, xFootAxis)
-    : ROTATION_UPPER_HANDLE_ICON_ANGLE;
-  const yRotateTangent = rotationSides.y === "right" || rotationSides.y === "left"
-    ? zFootAxis
-    : xFootAxis;
-  const yRotateAngle = rotateWithWorkplane
-    ? projectedAxisAngle(yFaceCenter, yRotateTangent)
-    : ROTATION_BOTTOM_HANDLE_ICON_ANGLE;
+  const yRotationAxes = rotationSides.y === "near"
+    ? { u: xFootAxis, v: zFootAxis }
+    : rotationSides.y === "far"
+      ? { u: xFootAxis.clone().multiplyScalar(-1), v: zFootAxis.clone().multiplyScalar(-1) }
+      : rotationSides.y === "right"
+        ? { u: zFootAxis.clone().multiplyScalar(-1), v: xFootAxis }
+        : { u: zFootAxis, v: xFootAxis.clone().multiplyScalar(-1) };
   const planeRadius = 154;
-  const planeWorldStep = Math.max(12, Math.max(frame.width, frame.depth, frame.height) * 0.78);
+  const planeWorldStep = Math.max(0.1, cameraDistance * 0.01);
   const makePlaneView = (centerWorld: THREE.Vector3, uAxis: THREE.Vector3, vAxis: THREE.Vector3): RotationPlaneView => {
     const screenCenter = project(centerWorld);
-    const u = project(centerWorld.clone().add(uAxis.clone().multiplyScalar(planeWorldStep)));
-    const v = project(centerWorld.clone().add(vAxis.clone().multiplyScalar(planeWorldStep)));
-    const du = { x: u.x - screenCenter.x, y: u.y - screenCenter.y };
-    const dv = { x: v.x - screenCenter.x, y: v.y - screenCenter.y };
-    const longest = Math.max(12, Math.hypot(du.x, du.y), Math.hypot(dv.x, dv.y));
+    const uOffset = uAxis.clone().multiplyScalar(planeWorldStep);
+    const vOffset = vAxis.clone().multiplyScalar(planeWorldStep);
+    const uStart = project(centerWorld.clone().sub(uOffset));
+    const uEnd = project(centerWorld.clone().add(uOffset));
+    const vStart = project(centerWorld.clone().sub(vOffset));
+    const vEnd = project(centerWorld.clone().add(vOffset));
+    const du = { x: (uEnd.x - uStart.x) / 2, y: (uEnd.y - uStart.y) / 2 };
+    const dv = { x: (vEnd.x - vStart.x) / 2, y: (vEnd.y - vStart.y) / 2 };
+    const longest = Math.max(Math.hypot(du.x, du.y), Math.hypot(dv.x, dv.y));
+    if (!Number.isFinite(longest) || longest < 0.000001) {
+      return { x: screenCenter.x, y: screenCenter.y, a: 1, b: 0, c: 0, d: 1 };
+    }
     const scale = planeRadius / longest / 100;
     return {
       x: screenCenter.x,
@@ -6499,6 +6502,19 @@ function syncTransformOverlay(
     y: makePlaneView(yFaceCenter, xFootAxis, zFootAxis),
     z: makePlaneView(zFaceCenter, xFootAxis, yFootAxis),
   };
+  const makeCameraPlaneView = (uAxis: THREE.Vector3, vAxis: THREE.Vector3): RotationPlaneView => {
+    const u = uAxis.clone().transformDirection(state.camera.matrixWorldInverse);
+    const v = vAxis.clone().transformDirection(state.camera.matrixWorldInverse);
+    return { x: 0, y: 0, a: u.x, b: -u.y, c: v.x, d: -v.y };
+  };
+  const rotationHandlePlanes: Record<RotationAxis, RotationPlaneView> = {
+    // Project only the two plane axes through the camera rotation. Ignoring
+    // perspective translation keeps glyph appearance independent of object
+    // length and screen position while preserving camera foreshortening.
+    x: makeCameraPlaneView(zFootAxis, yFootAxis),
+    y: makeCameraPlaneView(yRotationAxes.u, yRotationAxes.v),
+    z: makeCameraPlaneView(xFootAxis, yFootAxis),
+  };
 
   const next = {
     id: frame.ids.join("|"),
@@ -6521,9 +6537,9 @@ function syncTransformOverlay(
       { key: liftHandleKey, className: showLowerHandles ? "height-lift lower" : "height-lift", kind: "lift" as const, x: liftPoint.x, y: liftPoint.y, title: "Lift", angle: liftHandleAngle },
     ],
     rotateHandles: [
-      { key: "rotate-left", className: "screen-left", x: rotateLeft.x, y: rotateLeft.y, angle: xRotateAngle },
-      { key: "rotate-right", className: "screen-right", x: rotateRight.x, y: rotateRight.y, angle: zRotateAngle },
-      { key: "rotate-bottom", className: "screen-bottom", x: rotateBottom.x, y: rotateBottom.y, angle: yRotateAngle },
+      { key: "rotate-left", className: "screen-left", x: rotateLeft.x, y: rotateLeft.y, plane: normalizedRotationPlaneBasis(rotationHandlePlanes.x, true) },
+      { key: "rotate-right", className: "screen-right", x: rotateRight.x, y: rotateRight.y, plane: normalizedRotationPlaneBasis(rotationHandlePlanes.z, true) },
+      { key: "rotate-bottom", className: "screen-bottom", x: rotateBottom.x, y: rotateBottom.y, plane: normalizedRotationPlaneBasis(rotationHandlePlanes.y, true) },
     ],
     dimensions: dimensionMarks,
     rotationWheel: rotationWheels.y,

apps/web/src/components/workplane/TransformOverlay.tsx

@@ -9,11 +9,13 @@ import {
 export {
   getElevationMeasureKey,
   measureKeyForHandle,
+  normalizedRotationPlaneBasis,
   type DimensionMark,
   type EditingDimension,
   type EditingRotation,
   type PinnedRotationWheelView,
   type RotationAxis,
+  type RotationPlaneBasis,
   type RotationPlaneView,
   type RotationReadout,
   type RotationWheelView,
@@ -240,7 +242,14 @@ export function TransformOverlay({
         <button
           key={handle.key}
           className={`rotate-handle ${handle.className}`}
-          style={{ "--overlay-x": `${handle.x}px`, "--overlay-y": `${handle.y}px`, "--rotate-handle-angle": `${handle.angle}deg` } as CSSProperties}
+          style={{
+            "--overlay-x": `${handle.x}px`,
+            "--overlay-y": `${handle.y}px`,
+            "--rotate-plane-a": handle.plane.a,
+            "--rotate-plane-b": handle.plane.b,
+            "--rotate-plane-c": handle.plane.c,
+            "--rotate-plane-d": handle.plane.d,
+          } as CSSProperties}
           title="Rotate"
           onPointerDown={(event) => {
             if (event.button === 0) {

apps/web/src/components/workplane/WorkspaceSettingsModal.tsx

@@ -202,6 +202,11 @@ export function WorkspaceSettingsModal({
                     checked={moveDimensionsEnabled}
                     onChange={onMoveDimensionsEnabledChange}
                   />
+                  <WorkspaceToggle
+                    label="Select before moving"
+                    checked={workspace.selectBeforeMove}
+                    onChange={(selectBeforeMove) => patchWorkspace({ selectBeforeMove })}
+                  />
                   <WorkspaceToggle label="Show shadows" checked={workspace.showShadows} onChange={(showShadows) => patchWorkspace({ showShadows })} />
                   <WorkspaceToggle
                     label="Cruise when adding new shapes"

apps/web/src/components/workplane/transformOverlayTypes.ts

@@ -13,6 +13,21 @@ export type RotationPlaneView = {
   d: number;
 };
 
+export type RotationPlaneBasis = Pick<RotationPlaneView, "a" | "b" | "c" | "d">;
+
+export function normalizedRotationPlaneBasis(plane: RotationPlaneView, invertVerticalAxis = false): RotationPlaneBasis {
+  const longestAxis = Math.max(Math.hypot(plane.a, plane.b), Math.hypot(plane.c, plane.d));
+  if (!Number.isFinite(longestAxis) || longestAxis < 0.000001) {
+    return { a: 1, b: 0, c: 0, d: 1 };
+  }
+  return {
+    a: plane.a / longestAxis,
+    b: plane.b / longestAxis,
+    c: (plane.c / longestAxis) * (invertVerticalAxis ? -1 : 1),
+    d: (plane.d / longestAxis) * (invertVerticalAxis ? -1 : 1),
+  };
+}
+
 export type PinnedRotationWheelView = {
   axis: RotationAxis;
   wheel: RotationWheelView;
@@ -46,7 +61,7 @@ export type TransformOverlayState = {
   height: number;
   guides: Array<{ x1: number; y1: number; x2: number; y2: number }>;
   handles: Array<{ key: string; className: string; kind: TransformHandleKind; x: number; y: number; title: string; angle?: number }>;
-  rotateHandles: Array<{ key: string; className: string; x: number; y: number; angle: number }>;
+  rotateHandles: Array<{ key: string; className: string; x: number; y: number; plane: RotationPlaneBasis }>;
   dimensions: Record<string, DimensionMark[]>;
   rotationWheel: RotationWheelView | null;
   rotationWheels: Record<RotationAxis, RotationWheelView>;

apps/web/src/lib/skfProject.ts

@@ -12,7 +12,7 @@ import type { GridSize, ProjectAsset, ProjectAssetSourceFormat, SketchOperation,
 export const SKF_SCHEMA_ID = "com.sketchforge.project";
 export const SKF_FORMAT_VERSION = 1;
 export const SKF_MINIMUM_READER_VERSION = 1;
-export const SKF_CREATED_WITH_VERSION = "1.0.4";
+export const SKF_CREATED_WITH_VERSION = "1.0.5";
 export const SKF_MEDIA_TYPE = "application/vnd.sketchforge.project+zip";
 
 export const SKF_LIMITS = {

apps/web/src/lib/workplaneSettings.ts

@@ -15,6 +15,7 @@ export const DEFAULT_WORKPLANE_WORKSPACE: WorkplaneWorkspaceSettings = {
   showShadows: true,
   showGrid: true,
   cruiseShapes: true,
+  selectBeforeMove: false,
   zoomSpeed: 5,
   units: "Metric (Default)",
   scale: "1:1 (millimeters)",
@@ -68,6 +69,7 @@ export function normalizeWorkspaceSettings(value: unknown, fallback: WorkplaneWo
     showShadows: booleanOrDefault(candidate.showShadows, fallback.showShadows),
     showGrid: booleanOrDefault(candidate.showGrid, fallback.showGrid),
     cruiseShapes: booleanOrDefault(candidate.cruiseShapes, fallback.cruiseShapes),
+    selectBeforeMove: booleanOrDefault(candidate.selectBeforeMove, fallback.selectBeforeMove),
     zoomSpeed: numberOrDefault(candidate.zoomSpeed, fallback.zoomSpeed),
     units,
     scale: normalizeScaleForUnits(units, stringOrDefault(candidate.scale, fallback.scale)),
@@ -76,6 +78,10 @@ export function normalizeWorkspaceSettings(value: unknown, fallback: WorkplaneWo
   };
 }
 
+export function canBeginShapeDrag(selectBeforeMove: boolean, alreadySelected: boolean) {
+  return !selectBeforeMove || alreadySelected;
+}
+
 export function workplaneSettingsFingerprint(workspace: WorkplaneWorkspaceSettings, snapGrid: GridSize) {
   return JSON.stringify({ workspace, snapGrid });
 }