dulimarta / spherical-easel Goto Github PK

This issue is with the text that pops up when a tool is clicked. The text boxes appear for a second only, even though they have what looks like a delete "X," suggesting they will display until dismissed.

To reproduce:

• Create an open parametric curve
• Rotate the sphere so the curve is not at its original pose
• Save the construction
• Reload the construction

Issue: trace point is shown in its correct position but the end points (min/max) are shown in their unrotated position.

Heuristic:
3 User control and freedom
5 Error prevention
Severity: 4
Problem: When a MEASUREMENT object is created using the "Create" button in the "SLIDER" drop down, there is no delete button, and therefore no way to delete it.
Solution: Add a delete button to the MEASUREMENT object.

If you

1. Create a line segment,
2. An ellipse with a point on the segment,
3. A translation along the segment of length the length of the line segment,
4. Apply the transformation to the ellipse,
5. Save the construction
6. Load the construction

you get the error below. If you do this with any isometry transformation, you get the same error. If you change the ellipse to a line|segment|circle|point and any transformation, you do not get these errors.

found in

---> <Default1> at src/components/ConstructionList.vue
       <ConstructionLoader> at src/components/ConstructionLoader.vue
         <VTabItem>
           <VTabsItems>
             <VTabs>
               <Toolbox> at src/components/ToolBox.vue
                 <Pane>
                   <Splitpanes>
                     <Easel> at src/views/Easel.vue
                       <VMain>
                         <VApp>
                           <App> at src/App.vue
                             <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
loadPreview @ cjs.js?40c3:180
click @ ConstructionList.vue?69f3:124
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'bind')
    at Path.BindVertices (two.module.js?f077:7253:1)
    at method (two.module.js?f077:433:1)
    at dispatch (two.module.js?f077:452:1)
    at Collection.trigger (two.module.js?f077:297:1)
    at Collection.push (two.module.js?f077:3134:1)
    at eval (index.js?6eee:534:1)
    at Collection.forEach (<anonymous>)
    at NonFreeEllipse.updateDisplay (index.js?6eee:531:1)
    at SEIsometryEllipse.update (index.js?6eee:113:1)
    at SETranslation.updateKids (index.js?6eee:157:1)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
loadPreview @ cjs.js?40c3:180
click @ ConstructionList.vue?69f3:124
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
two.module.js?f077:14000 Error: <path> attribute transform: Expected number, "matrix(NaN NaN NaN NaN …".
setAttributes @ two.module.js?f077:14000
createElement @ two.module.js?f077:13988
render @ two.module.js?f077:14422
render @ two.module.js?f077:14265

Steps to Reproduce:

1. Start SE
2. Click the object tree icon. It will correctly say "No objects in database" and it will have executed the zeroObjects() method in ObjectTree.vue
3. Click back to the tools and create a line or anything plottable.
4. Click back to the object tree and notice that it still says "No objects in database" and did not execute zeroObjects()

Thoughts: Is this a vue update issue?

Heuristic: 3 User control and freedom

Severity: 3

Problem: This button is clickable when there aren't any valid objects to click on the sphere to create this object.

Solution: This button should only be clickable if there is at least one LINE SEGMENT, LINE, or CIRCLE object on the sphere.

Heuristic: 3 User control and freedom
Severity: 3
Problem: The MOVE_OBJECTS button is clickable when there aren't any objects on the sphere to move.
Solution: This button should only be clickable if at there as least one object on the sphere.

Problem: Opening either docs (the question mark) or settings discards unsaved changes

Location: Header

Heuristic: User control and freedom

Severity: 4

Solution: Automatically stash unsaved changes and reload them after returning to the main display

Saved construction "Spirograph (100, 80, 20)" exhibits a coarse curve due to insufficient sampling.

Problem: The snackbar tips disappear too quickly to read

Location: Clicking on a tool

Heuristic: Help and documentation

Severity: 1

Solution: Increase the time the tips are displayed

Tool buttons should be active only when the user can use the tool in a construction.

Buttons need three states: active and visible, deactivated but visible, not visible

Heuristic: 3 User control and freedom

Severity: 3

Problem:
When clicking any tool button,
unless the user manages to click the orange X in the lower left pane before it disappears
(which is about 2 seconds), there is no apparent way to exit out of the tool.
The only to way to exit is to either click another control,
which immediately launches that control, or re click the original tool
again and then click the orange X as it reappears again for a few seconds.\

Solution: Leave the black and orange pane with the cancel X open indefinitely until the user
physically clicks it, or allow the user hit the "esc" key which also exits the current tool event.

Problem: Attempting to load a construction, results in an invalid command format error.

Location: Saved Constructions

Heuristic: Error prevention

Severity: 5

Solution: Fix invalid command

This button is clickable when there aren't any valid objects to click on the sphere to create this object.

User control and freedom

Severity: 3

This button should only be clickable if there is at least one LINE SEGMENT object on the sphere.

I created a large file with 1 line, 20-30 points, 16 line segments and I couldn’t save it ( “Can’t save document FirebaseError: The value of property “preview” is longer than 1048487 bytes.“)

Probably some setting in Firebase or maybe we’ll have to be more efficient in creating the string we are saving. I can see how to handle that.

Steps to Reproduce

1. Create a triangle or circle
2. Select and style it. Change the foreground fill color to a particular RGB value.
3. Use a Digital Color Meter (MAC) to compare the displayed RGB to the entered RGB code -- they are different. Even the test square displayed has a different RGB code

NOTE: this is not true for lines - the digital meter and the inputed RGB codes are the same

Thoughts: This has to do with the radial gradient used to render filled objects.

Problem: The menu button (three horizontal lines in the upper left corner) doesn't do anything

Location: Header

Heuristic: Consistency and standards

Severity: 4

Solution: Add functions to the menu or remove the button

Problem: Switching between tools quickly can cause an error and the new tool is not selected

Location: Tool panel

Heuristic: Error Prevention

Severity: 2

Solution: ???

When you zoom in, the boundary circle linewidth/thickness doesn't stay the same.

In the process of updating documentation, I updated the rotation handler which is now allows rotations about a point and translations along a line. It is fun to play with and you should check out the latest update.

For more fun, I was trying to sketch the Death Star 🙂 and I made a very rough sketch (maybe 1 line, 4 circles and 16 line segments & 20 points). After doing this I discovered:

2. Rotating it was super super slow. Like I would start a rotation and then couldn’t interrupt the process for 15 seconds. Experimenting seems to show that you have 30-40 points rotation is fine, adding 4-6 circle is still ok (except if your circle has radius bigger than Pi/2), but adding only 4-6 line segments really slows it down. Perhaps that intersections calculation for line segments slows it down?

Issue #2 seems more pressing as I can imagine some of the constructions that I would make in my own research experiments would be much more complex and involve more parts. I’m not sure how to handle this issue — I’m not even sure what to make more efficient or even if efficiency is the issue.

When the user mouses over a measurement, the 15(?) decimal places value is shown. We should enable the user to copy this value in some way. A copy button in the tool tip? And a shortcut ctrl-c?

Once I log in, the share icon is displayed in white below my picture, when it should be displayed to the right of my icon.

When loading a construction like

easelgeo.app/construction/IWlkSyJdvyB72setZsgY

The display is initially missing the line segments and triangles, then when you move a point more features show up. I think you have to move all points in order for the labels to show up

Problem: It's not clear how to return to the main display after opening the docs or settings page

Location: Docs and settings pages

Heuristic: User control and freedom

Severity: 3

Solution: Add a back or exit button

Problem: There doesn't appear to be a way to save a construction despite there being a saved construction menu

Location: Saved Constructions

Heuristic: Consistency and standards

Severity: 3

Solution: Add ability to save constructions

When editing for style, the selected object will often be hidden for unknown reasons (especially when changing an attribute or first starting to edit.

Heuristic: 3 User control and freedom
Severity: 3
Problem: This button is clickable when there aren't any valid objects to click on the sphere to create this object.
Solution: This button should only be clickable if at there as least one MEASURE_ANGLE object on the sphere.

Problem: There are no common keyboard shortcuts like ctlr-z for undo

Heuristic: Consistency and standards

Severity: 1

Solution: Add keyboard shortcuts

Steps to reproduce

• Create a parametric curve
• Select the tangent line tool
• Select the parametric curve
• Create tangent line(2) thru a point outside the curve
• Rotate the sphere

Issue: tangent line(s) look separated from the curve

Problem: The size of the box that displays the sphere isn't adjustable

Location: Sphere display

Heuristic: Consistency and standards

Severity: 1

Solution: Allow the user to adjust the size of the sphere display

Heuristic: 3 User control and freedom
Severity: 3
Problem: This button is clickable when there aren't any valid objects to click on the sphere to create this object.
Solution: This button should only be clickable if at least one LINE SEGMENT object is on the sphere.

Problem: A slider can't be deleted

Location: Objects -> Slider

Heuristic: User Control and freedom

Severity: 3

Solution: Add ability to delete sliders

can t be a lune. fix

Steps to reproduce:

1. Open SE and create a triangle using line segments
2. Measure the triangle
3. Save the construction
4. Restart SE
5. Load the construction. Notice that the interior of the triangle is not displayed but you can still select it and style it -- however even changing the fill in the style panel doesn't make it display -- nor does hiding and showing it.
6. Load the same construction again. Notice the interior of the triangle is displayed!

Thoughts: Is this because we don't ask twoiJS for permission to yank in/out the SVG?

If you make an ellipse and a line or line segment with no points in common the errors below result. However, if the line/segment and the ellipse have at least one point in common (like a focus of the ellipse is on the segment or an endpoint of the segment is one the ellipse), the errors do not appear! You can draw as many ellipses as you want and the error only appears if you draw an independent line or segment.

This error doesn't appear if you draw any pair of line/segment/point/circle, only with ellipses.

two.module.js?f077:14000 Error: <text> attribute transform: Expected number, "matrix(NaN NaN NaN NaN …". setAttributes @ two.module.js?f077:14000 createElement @ two.module.js?f077:13988 render @ two.module.js?f077:14644 render @ two.module.js?f077:14265 render @ two.module.js?f077:14265 render @ two.module.js?f077:15081 render @ two.module.js?f077:17151 update @ two.module.js?f077:17139 loop @ two.module.js?f077:17780 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 two.module.js?f077:14000 Error: <text> attribute transform: Expected number, "matrix(NaN NaN NaN NaN …". setAttributes @ two.module.js?f077:14000 createElement @ two.module.js?f077:13988 render @ two.module.js?f077:14644 render @ two.module.js?f077:14265 render @ two.module.js?f077:14265 render @ two.module.js?f077:15081 render @ two.module.js?f077:17151 update @ two.module.js?f077:17139 loop @ two.module.js?f077:17780 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 requestAnimationFrame (async) loop @ two.module.js?f077:17784 VM151198:1 GET http://192.168.1.42:8080/sockjs-node/info?t=1655754408218 net::ERR_CONNECTION_TIMED_OUT (anonymous) @ VM151198:1 AbstractXHRObject._start @ sockjs.js?9be2:1603 eval @ sockjs.js?9be2:1492 setTimeout (async) AbstractXHRObject @ sockjs.js?9be2:1491 XHRCorsObject @ sockjs.js?9be2:2868 InfoAjax @ sockjs.js?9be2:353 InfoReceiver._getReceiver @ sockjs.js?9be2:534 InfoReceiver.doXhr @ sockjs.js?9be2:551 eval @ sockjs.js?9be2:520 setTimeout (async) InfoReceiver @ sockjs.js?9be2:519 SockJS @ sockjs.js?9be2:728 SockJSClient @ SockJSClient.js?0a33:43 initSocket @ socket.js?e29c:20 eval @ socket.js?e29c:39 setTimeout (async) eval @ socket.js?e29c:38 EventTarget.dispatchEvent @ sockjs.js?9be2:170 eval @ sockjs.js?9be2:967 setTimeout (async) SockJS._close @ sockjs.js?9be2:955 SockJS._receiveInfo @ sockjs.js?9be2:784 g @ sockjs.js?9be2:66 EventEmitter.emit @ sockjs.js?9be2:86 eval @ sockjs.js?9be2:556 setTimeout (async) InfoReceiver.doXhr @ sockjs.js?9be2:553 eval @ sockjs.js?9be2:520 setTimeout (async) InfoReceiver @ sockjs.js?9be2:519 SockJS @ sockjs.js?9be2:728 SockJSClient @ SockJSClient.js?0a33:43 initSocket @ socket.js?e29c:20 eval @ socket.js?e29c:39 setTimeout (async) eval @ socket.js?e29c:38 EventTarget.dispatchEvent @ sockjs.js?9be2:170 eval @ sockjs.js?9be2:967 setTimeout (async) SockJS._close @ sockjs.js?9be2:955 SockJS._receiveInfo @ sockjs.js?9be2:784 g @ sockjs.js?9be2:66 EventEmitter.emit @ sockjs.js?9be2:86 eval @ sockjs.js?9be2:556 setTimeout (async) InfoReceiver.doXhr @ sockjs.js?9be2:553 eval @ sockjs.js?9be2:520 setTimeout (async) InfoReceiver @ sockjs.js?9be2:519 SockJS @ sockjs.js?9be2:728 SockJSClient @ SockJSClient.js?0a33:43 initSocket @ socket.js?e29c:20 eval @ client?3759:176 eval @ index.js?http://192.168.1.42:8080&sockPath=/sockjs-node:177 ./node_modules/webpack-dev-server/client/index.js?http://192.168.1.42:8080&sockPath=/sockjs-node @ chunk-vendors.js:11918 __webpack_require__ @ app.js:854 fn @ app.js:151 1 @ app.js:4734 __webpack_require__ @ app.js:854 checkDeferredModules @ app.js:46 (anonymous) @ app.js:994 (anonymous) @ app.js:997

Heuristic: 3 User control and freedom
Severity: 3
Problem: When there aren't any objects on the sphere the DELETE button is still available to click.
Solution: Make the DELETE button unclickable if there aren't any valid objects on the sphere.

If you create an object solely on the front (like a circle, segment or angle marker with nothing on the back of the sphere). Once you rotate the sphere so that the object is on the back, the object is no longer rendered. ( twojs_update branch)

In the display of a measured triangle or polygon the dash should be a colon. That is currently it read something like

M13 - Po 0.423pi

and it should read

M13:Po 0.423pi

When you change the label name of an angle marker, the new name is not used in the object tree in the measurement part.

Deleted constructions which refer to Firebase storage must also delete the associated entries in Firebase storage

Problem: It is somewhat difficult to see which tool is selected

Location: Tool panel

Heuristic: Visibility of system status

Severity: 1

Solution: Change the tool highlight to make it more visible

Problem: There is no explanation of what an expression is or how to use that tool

Location: Objects -> Expression

Heuristic: Help and documentation

Severity: 3

Solution: Add tooltips and examples to show intended function

Heuristic: 3 User control and freedom
Severity: 3
Problem: The COORDINATES button is clickable when there aren't any objects on the sphere to ask the coordinates of.
Solution: This button should only be clickable if at there as least one object on the sphere.

Heuristic: 3 User control and freedom

Severity:** 3

Problem: This button is clickable when there aren't any valid objects to click on the sphere to create this object.

Solution: This button should only be clickable if there is at least two POINT objects on the sphere.

Save construction dialog should check that the ideal sphere is not empty.

Problem: Resetting the sphere can't be undone

Location: Sphere display

Heuristic: User control and freedom

Severity: 3

Solution: Include resetting the sphere in the undo list

Save construction "Spirograph (100, 80, 20)" is a parametric curve that displays random sections, depending on the rotation. However, it displays correctly in the negative hemisphere.

When changing the display of a triangle (after measuring it) the fill color appears to be muted (like the opacity is less than one, but the numerical values displayed show an opacity of one). This might also be happening to the stroke of a line segment. See the public construction VolumePrinciple for an example.

Problem: There is no scroll bar in the objects tab which forces the user to minimize tools at the top to see the bottom

Location: Objects -> Slider

Heuristic: Consistency and Standards

Severity: 2

Solution: Add scroll bar