Design Details

CanvasMap

To Do

• Have Setup() for CM3View: setup camera

Canvas Map Aggregation Hierarchy

• Scene
• Settings:
• Background color
• LayerViews:
• Viewing plane
• Associated with a Canvas DOM element
• An item in the scene (visible in other views)
• Can have items that appear in the view with pixel coordinates:
• North arrow, scale bar, coordinates, navigation
• These can be inserted, deleted, and moved, and have settings
• 3D:
• has frustum (front and back clipping surfaces)
•  
• LayerLights?
• Lights are objects that can be moved
• Layers:
• Type: background, foreground, editing (determines which panel they appear in)
• Status: Hidden, Visible, Selectable, Editable
• All appear in TimeEditor

Messaging

• Scene:
• View:
• Extent changed
• Position changed
• Zoom level changed
• -> Footer update
• Time Extent changed
• Time changed
• -> Scene repaint?
• -> Footer update
• Mouse moved
• -> Footer update
• Attributes
• Attribute changed
• -> View to repaint
• Data
• Data changed
• -> Layer to update bounds
• -> View to repaint?
• Layer
• Being deleted
• Style changed
• -> View to repaint
• Extent changed
• -> Scene to recompute bounds
• TimePanel
• Sets time into view which triggers repaint

 

 

Other

StrokeStyle or fill style: one of:

• Color
• RGB, RGBA, Hex, HSL, HSLA, named color
• Linear gradient:
• X0, y0, x1, y1
• Set of:
• Colors
• Stops (0 to 1)
• Radial: like linear but adds:
• R0, r1 for radii
• Pattern
• Image pattern
• Repeat: yes, no, x, y

From User’s perspective:
LineStyle: one of:

• Color:
• Color: rgb, name, hex?
• Transparency

FillStyle: same as LineStyle?

What is really needed?

• “Large” object properties?
• Canvas drawing properties
• Fill: style
• Color (inc. transparency), gradient or pattern
• Stroke: style
• Shadow: x, y, blur, color
• Line: width, cap, join, miter limit
• Text: font, alignment, etc.
• Coordinates
• Visible

Controls:

• Canvas Drawing:
• CSS Color:
• Color: rgb, named, hsl?, hex? (text string of “255,255,255” or “blue”)
• Color palette
• List of names?
• Transparency: Integer, 0 to N (Slider with number box?)
• Stroke (Line):
• Radios for type:
• CSS Color
• Linear Gradient
• List of stops?
• Position
• Color
• X0, Y0, X1, Y1: Control points? Text?
• Circular Gradient
• Radius 0: Float, 0 to N
• Radius 1: Float, 0 to N
• Pattern
• Image: text url, popup?
• Repeat: popup
• LineWidth: Integer, 0 to N (samples?)
• ShadowColor: CSS Color
• ShadowBlur: Integer, 0 to N
• Shadow X: Integer, 0 to N
• Shadow Y: Integer, 0 to N
•