Design Intuition

Appearance

Aesthetics ​

i want the UX to be:

goals ​

  • beautiful
  • exciting
  • intuitive
  • consistent
  • powerful
  • complete

done ​

  • fit button on stairs never satisfied
  • control groups not quite centered
  • border only on bottom face of root
  • minimum width -> 360px
  • scaling slider -> 40% of graph width
  • darker colors
    • banners
      • ignores when accent color changes
  • stepper buttons clipped
  • toggles background color should ignore state
    • edit
    • 2/3D
  • hover
    • ignored by close button in build notes
    • sticky hover -> show small dot
    • wrong color for build notes button in graph
  • library size of file on each item -> re-accessed on each open hideable
  • disable reset when angle is zero
  • move axis decorations in from edges by 10px
  • add buttons
    • duplicate -> d parts, centered in new row above sep
    • reset -> P Angles, centered between swap and -90
  • library
    • double click on item -> same action as clicking replace
    • add size of file to each item, at far right
  • add center dot to sticky thumbs
  • top/bottom face seg cont -> rotated 180°
  • add and wire up swap/rotate 90 -> root
  • basement
  • eliminate ghastly horizontal scroll bar in details
  • merge separators section below with notes/components/Separators
  • proposal: all sliders use Slider.svelte
  • i want separator flares to be an SVG path generated by SVG paths function flares(r)
    • function does NOT reference ANYTHING else in the app code base
    • each separator has two flares, one at each end, with long side further toward the end
    • the path can be for just the top of a vertical separator
      • the bottom is just rotate by 180
      • the two horizontal ends are rotate by 90 and -90
      • NO NEED FOR is_vertical boolean
    • the generated flare path is VERY simple: draw four-sides
      • all within a rectangle r high and r * (2 + 1/3) wide
      • 2 sides are straight and parallel lines, one is long the other short
        • length of the long one is r * (2 + 1/3)
        • length of the short one is r / 3
      • the other 2 sides are concave (quarter circle) curves with radius r
    • drawing order is
      • 1 long side, going right
      • 2 concave circle, with center at bottom right corner of rect
      • 3 short side going left
      • 4 second concave circle, with center at bottom left corner of rect
  • describe the design of the Separator.svelte component -> new separator section, below
  • stairs unrepeat straight unrepeat diagonal -> should
    • discard and recreate clones
    • re-layout using rise AND computed run
  • straight / diagonal wrong font size
  • in not edit mode -> disable graph hover logic
  • relaunch -> not automatically select, select only if file says something is selected
  • remove axes orientation cube (at right below scaling slider)
  • disable straighten if already straightened, reenable when user rotates
  • show axis orientation decorations in 2D
  • show magnet button in 3D
  • axis decorations
    • hop around a lot
    • not show edge-on axis decoration
  • edit/read-only button (add/not add: lock unichar)
  • gaps not uniform
    • use --l-margin
      • around control groups when NOT wrapped
        • eg, next to vertical separators
    • use --l-gap
      • above and below groups in controls
        • too small when NOT wrapped
        • inconsistent when wrapped
      • preferences above AND below separator
      • below selected title input field (when parts are hidden)
      • above selected title input field (when parts are hidden)
      • library below separator
      • below parts table
    • show parts button is less wide than title input
  • move hamburger svg -> svg paths
    • use css
    • move h far right when wrapped
  • separators
    • thin seps not long enough
    • use new css vars
  • convert hardcoded font sizes -> css vars
    • make these --h-font-small
      • D_Preferences.svelte, 119, 0.7rem
      • D_Preferences.svelte, 142, 9px
      • Controls.svelte, 187, 10px (snap button)
      • Separator.svelte, 142, 10px (title)
      • Hideable.svelte, 78, 12px (banner button)
      • D_Parts.svelte, 254, 9px
      • D_Parts.svelte, 281, 7px
      • D_Parts.svelte, 333, 8px
      • P_Repeat.svelte, 316, 10px
      • P_Repeat.svelte, 383, 9px
      • P_Repeat.svelte, 397, 9px
      • P_Repeat.svelte, 434, 7px
      • Slider.svelte, 188, 9px
      • Slider.svelte, 198, 8px
      • Slider.svelte, 238, 6px
      • BuildNotes.svelte, 88, 0.85em (modal)
      • P_Attributes.svelte, 375, 12px (add button)
    • make these --h-font-common
      • D_Parts.svelte, 316, 18px
      • D_Parts.svelte, 340, 12px
      • P_Constants.svelte, 144, 13px
      • Details.svelte, 90, 14px (banner-add "+")
      • BuildNotes.svelte, 107, 1.25em (title)
  • use new height constants
  • are there any other stores that can be used in css like --bg?
  • move root css -> src/lib/css/app.css
  • change the circle on the magnet (for 2D snap) to a magnet with a slash
    • change the shape of the button itself -> a perfect circle
    • toggling -> snap should also straighten
      • remember the prior orientation, but only until the user rotates
      • toggle -> not snap should restore the prior orientation (or do nothing at all if no prior exists)
  • ability to drag on mobile (ipad, iphone)
  • click straighten, the tumble. rendering jerks to the pre-straighten orientation (unexpected and unpleasant), then proceeds to tumble
  • add a button with 🔒 and ○ unichar next to 2D when in 2D move
    • current snap in 2D rotation is lock (same concept as straighten)
    • unlock is no such snap
  • add axis decorations to graph
    • fat arrows (seven sided line drawing, head is a triangle, stem is a rectangle)
    • axis label at arrowhead pointing towards increase
    • located near bottom three silhouette edges
    • visually 1" out
  • AND a little cube far right, just below scaling slider
    • visually occupies a 1" square bit of screen real estate
    • always draw the furthest-back three axes as arrows
    • arrow heads point to positive
    • labels outside the cube
    • same 7-edge shape
  • add a color picker
  • move precision and units to details
  • add a slider to details for line thickness
  • make the height of units system button consistent with other buttons
  • hide face label when face is
    • occluded
    • nearly edge on
  • convert precision into a segmented control whose segment titles depend on the units system
    • imperial: whole, 1/2, 1/4, 1/8, 1/16, 1/32, 1/64
    • others: whole, 1, 2, 3
    • constrain the SOT values accordingly
  • face intersection line segments
    • only for SO pairs that do not share ALL their axes
    • ASSUME:
      • child does not share axes
      • child extends outside parent
      • create from reset: add child, stretch child longer than parent, rotate child
    • compute the dihedral intersection line for each pair of intersecting faces (use cross product)
    • compute the two endpoints of each such line
      • hidden lines, etc
    • i want the rendered lines to exclude anything that is "inside" any SO
    • screen-space spatial partitioning (tiled bins or BVH) to cull face checks per edge
    • Occlusion is brute-force O(edges × faces) — every edge checks every front-facing face from every other object. Intersection lines add O(face_pairs × faces) on top. Fine for a handful of objects, but will choke at scale
    • [[spatial]]
  • 2D needs to be a "infinite zoom" projection
    • so rotated SO flatten but "retain their relative angle"
  • add ability to edit face label
  • remove border around edit input fields in the canvas
  • row of SO buttons -> top center of canvas
    • selected SO needs a border, black text, darker background color
    • unselected need light background color
  • move breadcrumbs -> graph left corner
    • stack them vertically
  • i want a separator svelte component
    • options: title, vertical, click/hover
    • adjustable thickness, length, radius of flare
    • add a vertical separator in controls between slider and seg control for faces
  • move zoom -> graph, horizontal, top right
  • grid opacity -> canvas, horizontal, top left (assist)
  • shrink height of controls by 16px, maintain centering of all items
  • shrink gap before and after hamburger, and after straighten
  • keep these grouped together and centered horizontally in their assigned width:
    • hamburger, save and fit (generic group)
    • name/dim/ang seg and 2D/3D, and solid/x-ray control (draw group, centered)
    • face seg cont and straighten (face group)
  • when there is not enough horizontal room (threshold = 650)
    • increase the controls height -> double rows
    • increase the height of the first separator to span both rows --- creates two "boxes"
      • left side is one row, centered vertically
      • right side is two rows, controls centered horizontally in each row
    • remove the sep that preceded them