RealDrawBoard | SVG Real Renderer

Drawing board.

Hierarchy

RealRenderer<IRealDrawBoardEvents>
- RealDrawBoard

Index

Constructors

constructor

Methods

Constructors

constructor

new RealDrawBoard(options: RealDrawBoardOptions): RealDrawBoard

Overrides RealRenderer.constructor
- Defined in src/renderers/RealDrawBoard/RealDrawBoard.ts:66
Parameters
- options: RealDrawBoardOptions
Returns RealDrawBoard

Properties

_doRender

_doRender: boolean

_offsetX

_offsetX: number = 0

_offsetY

_offsetY: number = 0

_strokeIndex

_strokeIndex: number = -1

attach

attach: (svg: SVGSVGElement, dimensions: GraphDimensions) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (svg: SVGSVGElement, dimensions: GraphDimensions): RealRenderer<IRealRendererEvents>
- Attaches to a DOM SVG element to render to.
  
  Parameters
  - svg: SVGSVGElement
    
    The SVG element to attach.
  - dimensions: GraphDimensions
    
    Dimensions of the graph.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

bgColor

bgColor: Color

bgType

bgType: BGType

changeBackground

changeBackground: (newBG: BGType) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (newBG: BGType): RealRenderer<IRealRendererEvents>
- Changes the background of the graph.
  
  Parameters
  - newBG: BGType
    
    New background.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

changeOffsets

changeOffsets: (xOffset: number, yOffset: number) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (xOffset: number, yOffset: number): RealRenderer<IRealRendererEvents>
- Change the offsets of the graph (for panning)
  
  Parameters
  - xOffset: number
    
    Offset in the x-direction.
  - yOffset: number
    
    Offset in the y-direction.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

changeTool

changeTool: (newTool: Tool) => RealDrawBoard = ...

Type declaration

- (newTool: Tool): RealDrawBoard
- Change the currently selected tool on the draw board.
  
  Parameters
  - newTool: Tool
  Returns RealDrawBoard
  
  Self for chaining.

changeToolSetting

changeToolSetting: <SettingName>(settingName: SettingName, value: ToolSettings[SettingName]) => RealDrawBoard = ...

Type declaration

- <SettingName>(settingName: SettingName, value: ToolSettings[SettingName]): RealDrawBoard
- Change a tool setting.
  
  Type parameters
  - SettingName: "brushColor" | "brushSize" | "eraserSize" | "lineThickness" | "lineColor" | "fontSize" | "fontColor" | "textToolMode" | "italic" | "bold" | "underline"
  Parameters
  - settingName: SettingName
    
    Name of the tool setting.
  - value: ToolSettings[SettingName]
    
    New value for the setting.
  Returns RealDrawBoard
  
  Self for chaining.

clear

clear: () => RealDrawBoard = ...

Type declaration

- (): RealDrawBoard
- Clear the board without resetting any parameters.
  
  Returns RealDrawBoard
  
  Self for chaining.

clearPreview

clearPreview: () => RealDrawBoard = ...

Type declaration

- (): RealDrawBoard
- Clear all tool previews.
  
  Returns RealDrawBoard
  
  Self for chaining.

dimensions

dimensions: GraphDimensions

draw

draw: (numDraws: number) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (numDraws: number): RealRenderer<IRealRendererEvents>
- Draw a certain number of frames.
  
  Parameters
  - numDraws: number
    
    Number of frames to draw.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

drawsPerFrame

drawsPerFrame: number

eventHandlers

eventHandlers: { board-cleared?: Map<string, (params: {}) => void>; board-reset?: Map<string, (params: {}) => void>; change-offsets?: Map<string, (params: { newOffsets: { x: number; y: number }; oldOffsets: { x: number; y: number } }) => void>; change-scale?: Map<string, (params: { newScaleFactor: number; oldScaleFactor: number }) => void>; import?: Map<string, (params: { import: RealExport }) => void>; start-render?: Map<string, (params: {}) => void>; stop-render?: Map<string, (params: {}) => void>; tool-change?: Map<string, (params: { newTool: Tool; oldTool: Tool }) => void>; tool-setting-change?: Map<string, (params: { newValue: number | boolean | Color | "new" | "edit"; oldValue: number | boolean | Color | "new" | "edit"; settingName: "brushColor" | "brushSize" | "eraserSize" | "lineThickness" | "lineColor" | "fontSize" | "fontColor" | "textToolMode" | "italic" | "bold" | "underline" }) => void> } = {}

Type declaration

Optional board-cleared?: Map<string, (params: {}) => void>
Optional board-reset?: Map<string, (params: {}) => void>
Optional change-offsets?: Map<string, (params: { newOffsets: { x: number; y: number }; oldOffsets: { x: number; y: number } }) => void>
Optional change-scale?: Map<string, (params: { newScaleFactor: number; oldScaleFactor: number }) => void>
Optional import?: Map<string, (params: { import: RealExport }) => void>
Optional start-render?: Map<string, (params: {}) => void>
Optional stop-render?: Map<string, (params: {}) => void>
Optional tool-change?: Map<string, (params: { newTool: Tool; oldTool: Tool }) => void>
Optional tool-setting-change?: Map<string, (params: { newValue: number | boolean | Color | "new" | "edit"; oldValue: number | boolean | Color | "new" | "edit"; settingName: "brushColor" | "brushSize" | "eraserSize" | "lineThickness" | "lineColor" | "fontSize" | "fontColor" | "textToolMode" | "italic" | "bold" | "underline" }) => void>

exportData

exportData: () => IRealExportV2 = ...

Type declaration

- (): IRealExportV2
- Export the data of the graph in a certain format that can be used to load the data later. Load using .importData().
  
  Returns IRealExportV2
  
  Data of the graph in a storable and loadable format.

importData

importData: (data: RealExport) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (data: RealExport): RealRenderer<IRealRendererEvents>
- Import the data exported by .export() method.
  
  Parameters
  - data: RealExport
    
    Data exported by .export()
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

originalDimensions

originalDimensions: GraphDimensions

redo

redo: (numRedo: number) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (numRedo: number): RealRenderer<IRealRendererEvents>
- Redos a certain number of strokes drawn on the graph.
  
  Parameters
  - numRedo: number
    
    Number of strokes to redo.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

scale

scale: (scaleFactor: number) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (scaleFactor: number): RealRenderer<IRealRendererEvents>
- Scale/zoom the graph.
  
  Parameters
  - scaleFactor: number
    
    Factor to scale the graph by. Larger number zooms in.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

scaleFactor

scaleFactor: number

settings

settings: RealDrawBoardSettings

startRender

startRender: () => any = ...

Type declaration

- (): any
- Returns any

stopRender

stopRender: () => any = ...

Type declaration

- (): any
- Returns any

strokes

strokes: Stroke[] = []

svg

svg: SVGSVGElement

svgSections

svgSections: SVGSections

time

time: number

timeStep

timeStep: number

toggleRender

toggleRender: () => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (): RealRenderer<IRealRendererEvents>
- Toggle rendering.
  
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

tool

tool: Tool = ...

toolSettings

toolSettings: ToolSettings

undo

undo: (numUndo: number) => RealRenderer<IRealRendererEvents> = ...

Type declaration

- (numUndo: number): RealRenderer<IRealRendererEvents>
- Undos a certain number of strokes drawn on the graph.
  
  Parameters
  - numUndo: number
    
    Number of strokes to undo.
  Returns RealRenderer<IRealRendererEvents>
  
  Self for chaining.

Static getExportVersion

getExportVersion: (data: RealExport) => 2 | 1 = ...

Type declaration

- (data: RealExport): 2 | 1
- Parameters
  - data: RealExport
  Returns 2 | 1

Methods

emit

emit<Event>(eventName: Event, parameters: IRealDrawBoardEvents[Event]): void

Inherited from RealRenderer.emit
- Defined in src/renderers/RealRenderer/events/eventEmitter.ts:28
Type parameters
- Event: "tool-change" | "tool-setting-change" | "board-cleared" | "board-reset" | "start-render" | "stop-render" | "change-scale" | "change-offsets" | "import"
Parameters
- eventName: Event
- parameters: IRealDrawBoardEvents[Event]
Returns void

off

off<Event>(eventName: Event, handlerName: string): void

Inherited from RealRenderer.off
- Defined in src/renderers/RealRenderer/events/eventEmitter.ts:21
Type parameters
- Event: "tool-change" | "tool-setting-change" | "board-cleared" | "board-reset" | "start-render" | "stop-render" | "change-scale" | "change-offsets" | "import"
Parameters
- eventName: Event
- handlerName: string
Returns void

on

on<Event>(eventName: Event, handlerName: string, handler: (params: IRealDrawBoardEvents[Event]) => void): void

Inherited from RealRenderer.on
- Defined in src/renderers/RealRenderer/events/eventEmitter.ts:12
Type parameters
- Event: "tool-change" | "tool-setting-change" | "board-cleared" | "board-reset" | "start-render" | "stop-render" | "change-scale" | "change-offsets" | "import"
Parameters
- eventName: Event
- handlerName: string
- handler: (params: IRealDrawBoardEvents[Event]) => void
  - - (params: IRealDrawBoardEvents[Event]): void
    - Parameters
      - params: IRealDrawBoardEvents[Event]
      Returns void
Returns void

reset

reset(): RealDrawBoard

Overrides RealRenderer.reset
- Defined in src/renderers/RealDrawBoard/RealDrawBoard.ts:266
Returns RealDrawBoard

resetTime

resetTime(): RealDrawBoard

Inherited from RealRenderer.resetTime
- Defined in src/renderers/RealRenderer/RealRenderer.ts:102
Resets the internal time counter.

Returns RealDrawBoard

Self for chaining.

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

options: RealDrawBoardOptions

Returns RealDrawBoard

Properties

_doRender

_offsetX

_offsetY

_strokeIndex

attach

Type declaration

Parameters

svg: SVGSVGElement

dimensions: GraphDimensions

Returns RealRenderer<IRealRendererEvents>

bgColor

bgType

changeBackground

Type declaration

Parameters

newBG: BGType

Returns RealRenderer<IRealRendererEvents>

changeOffsets

Type declaration

Parameters

xOffset: number

yOffset: number

Returns RealRenderer<IRealRendererEvents>

changeTool

Type declaration

Parameters

newTool: Tool

Returns RealDrawBoard

changeToolSetting

Type declaration

Type parameters

SettingName: "brushColor" | "brushSize" | "eraserSize" | "lineThickness" | "lineColor" | "fontSize" | "fontColor" | "textToolMode" | "italic" | "bold" | "underline"

Parameters

settingName: SettingName

value: ToolSettings[SettingName]

Returns RealDrawBoard

clear

Type declaration

Returns RealDrawBoard

clearPreview

Type declaration

Returns RealDrawBoard

dimensions

draw

Type declaration

Parameters

numDraws: number

Returns RealRenderer<IRealRendererEvents>

drawsPerFrame

eventHandlers

Type declaration

Optional board-cleared?: Map<string, (params: {}) => void>

Optional board-reset?: Map<string, (params: {}) => void>

Optional change-offsets?: Map<string, (params: { newOffsets: { x: number; y: number }; oldOffsets: { x: number; y: number } }) => void>

Optional change-scale?: Map<string, (params: { newScaleFactor: number; oldScaleFactor: number }) => void>

Optional import?: Map<string, (params: { import: RealExport }) => void>

Optional start-render?: Map<string, (params: {}) => void>

Optional stop-render?: Map<string, (params: {}) => void>

Optional tool-change?: Map<string, (params: { newTool: Tool; oldTool: Tool }) => void>

exportData

Type declaration

Returns IRealExportV2

importData

Type declaration

Parameters

data: RealExport

Returns RealRenderer<IRealRendererEvents>

originalDimensions

redo