heavyai / heavyai-charting

Dimensional charting built to work natively with crossfilter rendered using d3.js
https://heavyai.github.io/heavyai-charting/
Other
399 stars 73 forks source link

Adds Cross Section-ready line draw tool to the suite of lasso tools #609

Closed christopher-w-root closed 1 year ago

christopher-w-root commented 2 years ago

Adds a new cross-section ready line draw/edit tool to the suite of existing lasso tool (circle, polyline, & lasso).

This cross section line tool is supported by a couple different classes:

1) CrossSectionLineShapeHandler class, embedded in src/mixins/ui/lasso-tool-ui.js a) this class supports building the cross-section line shape (currently limited to only a single-segment line) via various mouse click/move events 2) LatLonPolyLineClass in src/mixins/ui/lasso-shapes/LatLonPolyLine.js a) this class supports drawing the cross-section line in mercator-projected space, allowing to see the mercator-related bends/deformations when drawing a line with lat/lon coordinates. b) most of the functionality to do this was already in place. It just required pulling out some shared code from the LatLonPoly class to be used amongst both classes

When adding the lasso draw tool controls to a raster chart via the addDrawControl() method, a new argument can be passed to that method to control which draw utilities you want to see/use - circle, polyline, lasso, and/or cross section. This argument is bitflag controlled via the new LassoToolSetTypes bitflag enum class (src/mixins/ui/lasso-tool-set-types.js)

For example, to only see the new cross section tool in the draw tool contol ux, you would call:

...
import * as HeavyCharting from "../src/index.js"
...
import LassoToolSetTypes from "../src/mixins/ui/lasso-tool-set-types.js"

const cross_section_chart = HeavyCharting.rasterChart(...)
...

cross_section_chart.addDrawControl(LassoToolSetTypes.kCrossSection)

Additional changes include a somewhat more refined event callback system allowing users to capture create/delete and edit start/end events, which are useful to capture when a cross-section line is created/deleted or modified (either moved, rotated, scaled, or individual vertices moved). That way you can easily update the the real cross section chart (or parameters) where/when appropriate.

Changes include a working example in exampleLineCrossSection.html/js (tho the server config is currently set to my local workstation)

Merge Checklist

:wrench: Issue(s) fixed:

:smoking: Smoke Test

:ship: Merge

johallar commented 1 year ago

So cool to use this in the example!!

I noticed one thing, not sure if this is a prob with the example or with the draw tool itself:

  1. Draw a line
  2. Click the line tool again
  3. You are able to draw 2 line segments

draw-tool

christopher-w-root commented 1 year ago

3. You are able to draw 2 line segments

hmm, yeah, that needs to be fixed.

Tho need to decide on appropriate behavior here. Do we allow the ability to create a new line, and if they do it wipes out the currently existing one? Or do we prevent the user from creating a new line until any existing lines are deleted?

christopher-w-root commented 1 year ago

Tho need to decide on appropriate behavior here. Do we allow the ability to create a new line, and if they do it wipes out the currently existing one? Or do we prevent the user from creating a new line until any existing lines are deleted?

I've decided to go with the former. It makes more sense overall.

johallar commented 1 year ago

I like option 1 as well

christopher-w-root commented 1 year ago

the only other thing I see is that backspace does delete a line, but the delete button does not

Sorry, that was probably an oversight due to my testing it on a mac keyboard. I'll see about adding the "delete" key too.

christopher-w-root commented 1 year ago

If y'all dont mind, I'm going to land this now and follow it up with an immediate PR that addresses the above bug. Makes more sense since the follow-up has a bunch of other code in it for completeness.