Measures support (with toggle button) by asmith26 · Pull Request #819 · jupytercad/JupyterCAD

asmith26 · 2025-11-24T00:51:33Z

Please see comments in #818 for main functionality added - this PR includes the ability to toggle on/off the measurement feature.

Original comment:

Fixes #124

On selection of an edge or object, XYZ sizes are shown on those axes:

measure1.mp4

Can select multiple objects, which results in the total dimensions being shown:

measure2.mp4

(This highlights the dimensions are actually represented with a dashed line - we can see this by removing a selected object:

measure3.mp4

I have noticed that when transforming a shape the dimension labels don't move with it, but deselecting and re-selecting it correctly updates the location (but I could try and get the labels to move with it if you think this is possible and would prefer it):

measure4.mp4

Very much welcome any thoughts: I did wonder if would we like to have a button to toggle measurements, instead of always showing them whenever an object is selected (I think this might also fix the broken snapshot UI tests)? Thanks!

for more information, see https://pre-commit.ci

github-actions · 2025-11-24T01:10:12Z

Preview PR at appsharing.space

github-actions · 2025-11-24T01:10:15Z

Integration tests report: appsharing.space

for more information, see https://pre-commit.ci

arjxn-py

Thanks @asmith26, this is awesome work.
However i have some minor comments that can be addressed before merging.

Other than that I notice that when we select an edge - it's a 2D plane instead of a bounding box and any of the x, y or z value is 0. Should we hide that label whichever value is 0?

Refer to this image:

packages/base/src/3dview/measurement.ts

arjxn-py · 2025-11-25T11:26:10Z

packages/base/src/3dview/measurement.ts

+    const material = new THREE.LineDashedMaterial({
+      color: 0x000000,
+      linewidth: 1,
+      scale: 1,
+      dashSize: 0.1,
+      gapSize: 0.1
+    });
+    const geometry = new THREE.BufferGeometry().setFromPoints([start, end]);
+    const line = new THREE.Line(geometry, material);
+    line.computeLineDistances();
+    this._group.add(line);


What is the significance of these dashed lines? I ask because I see the measurements working similarly without these too.

I've found these helpful when measuring multiple objects, e.g.

or between objects (e.g. selecting the 2 edges):

Of course happy to remove if preferable?

I like the dash lines, actually I like them so much that I think they are not visible enough 😄 Could we make them more visible when measuring one object?

+1 on keeping the lines. I haven't been able to properly notice them before as they aren't visible enough. Thank You for the justification :)

Thanks for the feedback, what do think of 9329bbe

packages/base/src/commands/index.ts

arjxn-py · 2025-11-25T11:37:44Z

About the UI tests, they just seem a bit flaky to me after i inspected the snapshots.

asmith26 · 2025-11-25T23:57:37Z

About the UI tests, they just seem a bit flaky to me after i inspected the snapshots.

I've tried to fix the failing ones, and they seem to be passing now.

asmith26 · 2025-11-26T00:10:30Z

Other than that I notice that when we select an edge - it's a 2D plane instead of a bounding box and any of the x, y or z value is 0. Should we hide that label whichever value is 0?

Great thought thanks, I like this idea as it could help to keep the UI cleaner. Will have a go at implementing this (hopefully) tomorrow!

arjxn-py · 2025-11-26T09:05:11Z

In the latest version, I notice that you have also managed to fix:

I have noticed that when transforming a shape the dimension labels don't move with it, but deselecting and re-selecting it correctly updates the location (but I could try and get the labels to move with it if you think this is possible and would prefer it)

Cheers 🎉

arjxn-py · 2025-11-26T09:46:36Z

One thing that I noticed while testing the PR:

When an object is aligned to the xyz axes, there is no issue:

However when the object is tilted using the transform controls, the dashed lines are no longer aligned with the bounding box of the selected object:

We discussed this a bit internally, we think that the dashed lines should be aligned with the bounding box of the object only when measuring a single object. However, since this PR adds also adds support for multi object measurement - the dashed lines should be aligned with the world axes in other cases.

Sorry if this sounds like a lot, we would be happy to help at any point.

…ject

for more information, see https://pre-commit.ci

asmith26 · 2025-11-26T22:27:09Z

We discussed this a bit internally, we think that the dashed lines should be aligned with the bounding box of the object only when measuring a single object. However, since this PR adds also adds support for multi object measurement - the dashed lines should be aligned with the world axes in other cases.

Great idea, added in 4abf570

Sorry if this sounds like a lot, we would be happy to help at any point.

No problem at all, I'm happy to help with this amazing project in anyway that I can!

asmith26 · 2025-11-26T22:35:58Z

Other than that I notice that when we select an edge - it's a 2D plane instead of a bounding box and any of the x, y or z value is 0. Should we hide that label whichever value is 0?

Added in 56fdfca

for more information, see https://pre-commit.ci

asmith26 · 2025-11-26T23:47:16Z

Thanks very much for all the feedback, I think I've implemented everything, although I'm unsure as to why the JupyterLite tests are now failing?

asmith26 · 2025-11-28T12:10:28Z

I've noticed a few problems with the latest updates, hence I've converted to draft whilst I try fix these (I'm thinking of perhaps adding some more tests to help pick these up automatically).

asmith26 and others added 7 commits November 22, 2025 16:24

Add measure support

e08bc30

Measure -> Measurement

87aa35b

Merge branch 'jupytercad:main' into measures_support

1a5b1c6

Add comment

f08452f

Add toggle measurement button

7c23ef9

Increase size of ruler image

1570e31

[pre-commit.ci] auto fixes from pre-commit.com hooks

e14281f

for more information, see https://pre-commit.ci

asmith26 mentioned this pull request Nov 24, 2025

Measures support #818

Closed

trungleduc requested a review from arjxn-py November 24, 2025 17:19

asmith26 and others added 4 commits November 24, 2025 19:10

Merge branch 'jupytercad:main' into measures_support_ruler

79cd9fc

Fix test

bc5f431

[pre-commit.ci] auto fixes from pre-commit.com hooks

dcac414

for more information, see https://pre-commit.ci

Update failing snapshots

35fa2ee

arjxn-py added the enhancement New Feature or improvement label Nov 25, 2025

arjxn-py requested changes Nov 25, 2025

View reviewed changes

asmith26 added 5 commits November 25, 2025 22:17

Update snapshots

e8fcd72

Update snapshots

3194256

Update snapshots

58269ed

React -> Class

73ed175

Remove redundant code, add comment

cae7af3

asmith26 force-pushed the measures_support_ruler branch from 2c94c46 to cae7af3 Compare November 26, 2025 00:16

Fix measurements not refreshing on delete/move

a4e7535

Fix: align bounding box to the object only when measuring a single ob…

4abf570

…ject

pre-commit-ci bot and others added 2 commits November 26, 2025 22:17

[pre-commit.ci] auto fixes from pre-commit.com hooks

5707339

for more information, see https://pre-commit.ci

Update comment

d2cd181

Hide 0 axes

56fdfca

asmith26 and others added 3 commits November 26, 2025 22:42

Improved dashed line

9329bbe

[pre-commit.ci] auto fixes from pre-commit.com hooks

c4377ea

for more information, see https://pre-commit.ci

Update snapshot

6e6f135

asmith26 requested review from arjxn-py and martinRenou November 26, 2025 23:33

asmith26 marked this pull request as draft November 28, 2025 12:09

Refactor

1719ba9

Comments

Conversation

asmith26 commented Nov 24, 2025 • edited by martinRenou Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arjxn-py left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arjxn-py Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

asmith26 Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

martinRenou Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

arjxn-py Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

asmith26 Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arjxn-py commented Nov 25, 2025

Uh oh!

asmith26 commented Nov 25, 2025

Uh oh!

asmith26 commented Nov 26, 2025

Uh oh!

arjxn-py commented Nov 26, 2025

Uh oh!

arjxn-py commented Nov 26, 2025

Uh oh!

asmith26 commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

asmith26 commented Nov 26, 2025

Uh oh!

asmith26 commented Nov 26, 2025

Uh oh!

asmith26 commented Nov 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

asmith26 commented Nov 24, 2025 •

edited by martinRenou

Loading

github-actions bot commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 24, 2025 •

edited

Loading

arjxn-py left a comment •

edited

Loading

asmith26 Nov 26, 2025 •

edited

Loading

asmith26 commented Nov 26, 2025 •

edited

Loading