#1502 Add snap to grid to sketch mode

docs/kcl-lang/settings/project.md

@@ -136,6 +136,41 @@ Highlight edges of 3D objects?
 Whether or not Screen Space Ambient Occlusion (SSAO) is enabled.
 
 
+**Default:** None
+
+##### fixed_size_grid
+
+When enabled, the grid will use a fixed size based on your selected units rather than automatically scaling with zoom level.
+
+
+**Default:** None
+
+##### snap_to_grid
+
+When enabled, tools like line, rectangle, etc. will snap to the grid.
+
+
+**Default:** None
+
+##### major_grid_spacing
+
+The space between major grid lines, specified in the current unit.
+
+
+**Default:** None
+
+##### minor_grids_per_major
+
+The number of minor grid lines per major grid line.
+
+
+**Default:** None
+
+##### snaps_per_minor
+
+The number of snaps between minor grid lines. 1 means snapping to the minor grid lines.
+
+
 **Default:** None
 
 

docs/kcl-lang/settings/user.md

@@ -83,13 +83,6 @@ Allow orbiting in sketch mode.
 Whether to show the debug panel, which lets you see various states of the app to aid in development.
 
 
-**Default:** None
-
-##### fixed_size_grid
-
-If true, the grid cells will be fixed-size, where the width is your default length unit. If false, the grid will get larger as you zoom out, and smaller as you zoom in.
-
-
 **Default:** None
 
 
@@ -164,6 +157,41 @@ Whether or not Screen Space Ambient Occlusion (SSAO) is enabled.
 Whether or not to show a scale grid in the 3D modeling view
 
 
+**Default:** None
+
+##### fixed_size_grid
+
+When enabled, the grid will use a fixed size based on your selected units rather than automatically scaling with zoom level. If true, the grid cells will be fixed-size, where the width is your default length unit. If false, the grid will get larger as you zoom out, and smaller as you zoom in.
+
+
+**Default:** None
+
+##### snap_to_grid
+
+Whether or not to snap to the scale grid in sketching mode.
+
+
+**Default:** None
+
+##### major_grid_spacing
+
+The space between major grid lines, specified in the current unit
+
+
+**Default:** None
+
+##### minor_grids_per_major
+
+Specifies ow many minor grid lines to have per major grid line.
+
+
+**Default:** None
+
+##### snaps_per_minor
+
+The number of snaps to have between minor grid lines. 1 means snapping to the minor grid lines.
+
+
 **Default:** None
 
 

e2e/playwright/command-bar-tests.spec.ts

@@ -418,7 +418,7 @@ test.describe('Command bar tests', () => {
       name: 'rectangle Corner rectangle',
     })
     const lineToolCommand = page.getByRole('option', {
-      name: 'Line',
+      name: 'line Line Start drawing',
     })
     const lineToolButton = page.getByRole('button', {
       name: 'line Line',

e2e/playwright/storageStates.ts

@@ -12,13 +12,16 @@ export const TEST_SETTINGS: DeepPartial<Settings> = {
     },
     onboarding_status: 'dismissed',
     show_debug_panel: true,
-    fixed_size_grid: false,
   },
   modeling: {
     enable_ssao: false,
     base_unit: 'in',
     mouse_controls: 'zoo',
     camera_projection: 'perspective',
+    // Tests were written before this setting existed.
+    // It's true by default because it's a good user experience, but
+    // these tests require it to be false.
+    fixed_size_grid: false,
   },
   project: {
     default_project_name: 'untitled',

e2e/playwright/test-utils.ts

@@ -947,10 +947,6 @@ export async function setup(
             },
             ...TEST_SETTINGS.project,
             onboarding_status: 'dismissed',
-            // Tests were written before this setting existed.
-            // It's true by default because it's a good user experience, but
-            // these tests require it to be false.
-            fixed_size_grid: false,
           },
           project: {
             ...TEST_SETTINGS.project,

e2e/playwright/testing-settings.spec.ts

@@ -824,8 +824,8 @@ test.describe(
       const lineToolButton = page.getByTestId('line')
       const segmentOverlays = page.getByTestId('segment-overlay')
       const sketchOriginLocation = { x: 600, y: 250 }
-      const darkThemeSegmentColor: [number, number, number] = [215, 215, 215]
-      const lightThemeSegmentColor: [number, number, number] = [90, 90, 90]
+      const darkThemeSegmentColor: [number, number, number] = [249, 249, 249]
+      const lightThemeSegmentColor: [number, number, number] = [28, 28, 28]
 
       await test.step(`Get into sketch mode`, async () => {
         await page.mouse.click(700, 200)

rust/kcl-lib/src/execution/mod.rs

@@ -325,7 +325,7 @@ impl From<crate::settings::types::Settings> for ExecutorSettings {
             replay: None,
             project_directory: None,
             current_file: None,
-            fixed_size_grid: settings.app.fixed_size_grid,
+            fixed_size_grid: settings.modeling.fixed_size_grid,
         }
     }
 }

rust/kcl-lib/src/settings/types/mod.rs

@@ -64,7 +64,7 @@ pub struct Settings {
 }
 
 /// Application wide settings.
-#[derive(Debug, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Validate)]
+#[derive(Debug, Default, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Validate)]
 #[ts(export)]
 #[serde(rename_all = "snake_case")]
 pub struct AppSettings {
@@ -94,10 +94,6 @@ pub struct AppSettings {
     /// of the app to aid in development.
     #[serde(default, skip_serializing_if = "is_default")]
     pub show_debug_panel: bool,
-    /// If true, the grid cells will be fixed-size, where the width is your default length unit.
-    /// If false, the grid will get larger as you zoom out, and smaller as you zoom in.
-    #[serde(default = "make_it_so", skip_serializing_if = "is_true")]
-    pub fixed_size_grid: bool,
 }
 
 /// Default to true.
@@ -109,20 +105,6 @@ fn is_true(b: &bool) -> bool {
     *b
 }
 
-impl Default for AppSettings {
-    fn default() -> Self {
-        Self {
-            appearance: Default::default(),
-            onboarding_status: Default::default(),
-            dismiss_web_banner: Default::default(),
-            stream_idle_mode: Default::default(),
-            allow_orbit_in_sketch_mode: Default::default(),
-            show_debug_panel: Default::default(),
-            fixed_size_grid: make_it_so(),
-        }
-    }
-}
-
 fn deserialize_stream_idle_mode<'de, D>(deserializer: D) -> Result<Option<u32>, D::Error>
 where
     D: Deserializer<'de>,
@@ -270,7 +252,7 @@ impl From<AppTheme> for kittycad::types::Color {
 }
 
 /// Settings that affect the behavior while modeling.
-#[derive(Debug, Default, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Eq, Validate)]
+#[derive(Debug, Default, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Validate)]
 #[serde(rename_all = "snake_case")]
 #[ts(export)]
 pub struct ModelingSettings {
@@ -301,6 +283,23 @@ pub struct ModelingSettings {
     /// Whether or not to show a scale grid in the 3D modeling view
     #[serde(default, skip_serializing_if = "is_default")]
     pub show_scale_grid: bool,
+    /// When enabled, the grid will use a fixed size based on your selected units rather than automatically scaling with zoom level.
+    /// If true, the grid cells will be fixed-size, where the width is your default length unit.
+    /// If false, the grid will get larger as you zoom out, and smaller as you zoom in.
+    #[serde(default = "make_it_so", skip_serializing_if = "is_true")]
+    pub fixed_size_grid: bool,
+    /// Whether or not to snap to the scale grid in sketching mode.
+    #[serde(default, skip_serializing_if = "is_default")]
+    pub snap_to_grid: bool,
+    /// The space between major grid lines, specified in the current unit
+    #[serde(default, skip_serializing_if = "is_default")]
+    pub major_grid_spacing: f64,
+    /// Specifies how many minor grid lines to have per major grid line.
+    #[serde(default, skip_serializing_if = "is_default")]
+    pub minor_grids_per_major: f64,
+    /// The number of snaps to have between minor grid lines. 1 means snapping to the minor grid lines.
+    #[serde(default, skip_serializing_if = "is_default")]
+    pub snaps_per_minor: f64,
 }
 
 #[derive(Debug, Copy, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Eq)]
@@ -681,6 +680,7 @@ text_wrapping = true"#;
                     base_unit: UnitLength::In,
                     mouse_controls: MouseControlType::Zoo,
                     camera_projection: CameraProjectionType::Perspective,
+                    fixed_size_grid: true,
                     ..Default::default()
                 },
                 project: ProjectSettings {

rust/kcl-lib/src/settings/types/project.rs

@@ -120,7 +120,7 @@ pub struct ProjectAppearanceSettings {
 }
 
 /// Project specific settings that affect the behavior while modeling.
-#[derive(Debug, Default, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Eq, Validate)]
+#[derive(Debug, Default, Clone, Deserialize, Serialize, JsonSchema, ts_rs::TS, PartialEq, Validate)]
 #[serde(rename_all = "snake_case")]
 #[ts(export)]
 pub struct ProjectModelingSettings {
@@ -133,6 +133,21 @@ pub struct ProjectModelingSettings {
     /// Whether or not Screen Space Ambient Occlusion (SSAO) is enabled.
     #[serde(default, skip_serializing_if = "is_default")]
     pub enable_ssao: DefaultTrue,
+    /// When enabled, the grid will use a fixed size based on your selected units rather than automatically scaling with zoom level.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub fixed_size_grid: Option<bool>,
+    /// Whether or not to snap to the scale grid in sketching mode.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub snap_to_grid: Option<bool>,
+    /// The space between major grid lines, specified in the current unit
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub major_grid_spacing: Option<f64>,
+    /// Specifies how many minor grid lines to have per major grid line.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub minor_grids_per_major: Option<f64>,
+    /// The number of snaps to have between minor grid lines. 1 means snapping to the minor grid lines.
+    #[serde(default, skip_serializing_if = "Option::is_none")]
+    pub snaps_per_minor: Option<f64>,
 }
 
 fn named_view_point_version_one() -> f64 {
@@ -331,6 +346,11 @@ color = 1567.4"#;
                     base_unit: UnitLength::Yd,
                     highlight_edges: Default::default(),
                     enable_ssao: true.into(),
+                    snap_to_grid: None,
+                    major_grid_spacing: None,
+                    minor_grids_per_major: None,
+                    snaps_per_minor: None,
+                    fixed_size_grid: None,
                 },
                 text_editor: TextEditorSettings {
                     text_wrapping: false.into(),

src/clientSideScene/CameraControls.ts

@@ -50,6 +50,7 @@ import {
 } from '@src/lib/utils'
 import { deg2Rad } from '@src/lib/utils2d'
 import { degToRad } from 'three/src/math/MathUtils'
+import { Signal } from '@src/lib/signal'
 
 const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
@@ -426,15 +427,8 @@ export class CameraControls {
   setIsCamMovingCallback(cb: (isMoving: boolean, isTween: boolean) => void) {
     this._isCamMovingCallback = cb
   }
-  private _camChangeCallbacks: { [key: string]: () => void } = {}
-  subscribeToCamChange(cb: () => void) {
-    const cbId = uuidv4()
-    this._camChangeCallbacks[cbId] = cb
-    const unsubscribe = () => {
-      delete this._camChangeCallbacks[cbId]
-    }
-    return unsubscribe
-  }
+
+  public readonly cameraChange = new Signal()
 
   onWindowResize = () => {
     if (this.camera instanceof PerspectiveCamera) {
@@ -1509,7 +1503,7 @@ export class CameraControls {
       })
     }
     this.deferReactUpdate(this.reactCameraProperties)
-    Object.values(this._camChangeCallbacks).forEach((cb) => cb())
+    this.cameraChange.dispatch()
   }
   getInteractionType = (
     event: PointerEvent | WheelEvent | MouseEvent

src/clientSideScene/ClientSideSceneComp.tsx

@@ -102,7 +102,7 @@ export const ClientSideScene = ({
     const canvas = canvasRef.current
     canvas.appendChild(sceneInfra.renderer.domElement)
     canvas.appendChild(sceneInfra.labelRenderer.domElement)
-    sceneInfra.onWindowResize()
+    sceneInfra.onCanvasResized()
     sceneInfra.animate()
     canvas.addEventListener(
       'mousemove',
@@ -135,13 +135,31 @@ export const ClientSideScene = ({
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
+
+    // Detect canvas size changes
     const observer = new ResizeObserver(() => {
-      sceneInfra.onWindowResize()
+      sceneInfra.onCanvasResized()
       sceneInfra.camControls.onWindowResize()
     })
     observer.observe(canvas)
+
+    // Detect dpr changes
+    let media = window.matchMedia(
+      `(resolution: ${window.devicePixelRatio}dppx)`
+    )
+    function handleChange() {
+      media.removeEventListener('change', handleChange)
+      media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`)
+      media.addEventListener('change', handleChange)
+
+      sceneInfra.onCanvasResized()
+      sceneInfra.camControls.onWindowResize()
+    }
+    media.addEventListener('change', handleChange)
+
     return () => {
       observer.disconnect()
+      media.removeEventListener('change', handleChange)
     }
   }, [])