Guides

Guides

new Guides(container, optionsopt)

Source:
Name Type Default Description
container HTMLElement guides' container
options? Partial<Guides.GuidesOptions> {} guides' options

Methods

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

setState(state, callbackopt)

Source:
Name Type Description
state Partial<GuidesOptions>
callback? () => void

scrollGuides(pos, nextZoomopt)

Source:
Scroll the positions of the guidelines opposite the ruler.
Name Type Default Description
pos number
nextZoom? this._guidesZoom

scroll(pos, nextZoomopt)

Source:
Scroll the position of the ruler.
Name Type Default Description
pos number
nextZoom? this._zoom

resize(nextZoomopt)

Source:
Recalculate the size of the ruler.
Name Type Default Description
nextZoom? this._zoom

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Inherited From:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

on(eventName, listeneropt) → {this}

Source:
Inherited From:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

off(eventNameopt, listeneropt) → {this}

Source:
Inherited From:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

loadGuides(guides)

Source:
Load the current guidelines.
Name Type Description
guides number[]

getRulerElement()

Source:
Get Ruler DOM Element

getGuides() → {number[]}

Source:
Get current guidelines.
Returns:
Type
number[]

getElement()

Source:
Get Guides DOM Element

forceUpdate(callbackopt)

Source:
Name Type Description
callback? () => void

emit(eventName, paramopt) → {boolean}

Source:
Inherited From:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

destroy()

Source:
destroy guides

(static) zoomTo(nextZoom, nextGuidesZoomopt)

Source:
Since:
Set to the next zoom.
Name Type Default Description
nextZoom number next zoom
nextGuidesZoom? nextZoom

Type Definitions

GuideOptions

Source:
Properties:
type optional
Default Value: "horizontal"
type?: "horizontal" | "vertical"
ruler's direction
width optional
Default Value: target's offsetWidth
width?: number
ruler's width
height optional
Default Value: target's offsetHeight
height?: number
ruler's height
unit optional
Default Value: 50
unit?: number
main scale unit
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
zoom optional
Default Value: 1
zoom?: number
zoom
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
direction optional
Default Value: "end"
direction?: "start" | "center" | "end"
line's direction (align)
textAlign optional
Default Value: "start"
textAlign?: "left" | "center" | "right"
text align
font optional
Default Value: "10px sans-serif"
font?: string
font and size
segment optional
Default Value: 10
segment?: number
Number of areas to divide between two main lines
mainLineSize optional
Default Value: "100%"
mainLineSize?: string | number
main line size
longLineSize optional
Default Value: 10
longLineSize?: string | number
long line size
shortLineSize optional
Default Value: 7
shortLineSize?: string | number
short line size
lineOffset optional
Default Value: [0, 0]
lineOffset?: number[]
line's position offset
textOffset optional
Default Value: [0, 0]
textOffset?: number[]
text's position offset
negativeRuler optional
Default Value: true
negativeRuler?: boolean
Whether to display the ruler in the negative direction.
range optional
Default Value: [-Infinity, Infinity]
range?: [number, number]
The range to show the ruler's scales
scrollPos optional
Default Value: undefined
scrollPos?: number
you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method.
defaultScrollPos optional
Default Value: 0
defaultScrollPos?: number
you can set scroll position by prop for init. don't use `scrollPos` prop
style optional
style?: IObject<any>
ruler canvas style
backgroundColor optional
Default Value: "#333333"
backgroundColor?: string
ruler's background color
rangeBackgroundColor optional
Default Value: "transparent"
rangeBackgroundColor?: string
background color within range in ruler
lineColor optional
Default Value: "#777777"
lineColor?: string
ruler's line color
textColor optional
Default Value: "#ffffff"
textColor?: string
ruler's text color
textBackgroundColor optional
Default Value: "transparent"
textBackgroundColor?: string
The background color that wraps the text
textFormat optional
Default Value: ownself
textFormat?: (scale: number) => string
text foramt
marks optional
Default Value: []
marks?: number[]
positions to mark
markColor optional
Default Value: "#f55"
markColor?: string
lineWidth optional
Default Value: 1
lineWidth?: number
Ruler's line width
warpSelf optional
warpSelf?: boolean
Whether to warp self
selectedRanges optional
selectedRanges?: number[][]
You can paint the selected area(selectedranges) with the `selectedBackgroundColor` color.
selectedBackgroundColor optional
Default Value: "#555555"
selectedBackgroundColor?: string
background color within selected range in ruler with `selectedRanges` area
selectedRangesText optional
Since: 0.16.0
Default Value: false
selectedRangesText?: boolean
Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible.
selectedRangesTextOffset optional
Since: 0.16.0
Default Value: "0, 0"
selectedRangesTextOffset?: number[]
Position offset of text in selected ranges
selectedRangesTextColor optional
Since: 0.16.0
Default Value: "#44aaff"
selectedRangesTextColor?: string
Color of text in selected ranges
defaultPixelScale optional
Default Value: 2
defaultPixelScale?: number
Scale value of canvase when device high density is 1. Less than 2 may cause pixels to blur. If device high density is greater than 1, it is forcibly set to 3.
useResizeObserver optional
useResizeObserver?: boolean
Whether to use the resize observer. When the size changes, the resize method is automatically called.
className optional
Default Value: ""
className?: string
guides' class name
rulerStyle optional
Default Value: "width 100%, height: 100%"
rulerStyle?: IObject<any>
ruler's css style
snapThreshold optional
Default Value: 5
snapThreshold?: number
Interval to snap
snaps optional
Default Value: []
snaps?: number[]
Positions to snap
displayDragPos optional
Default Value: false
displayDragPos?: boolean
Whether to show the moving pos when dragging
guidesZoom optional
Since: 0.29.0
Default Value: zoom
guidesZoom?: number
guides zoom(side zoom). If not set, it is the same as `zoom`.
cspNonce optional
cspNonce?: string
csp nonce
dragPosFormat optional
Default Value: self
dragPosFormat?: (value: number) => string | number
Format of drag pos
defaultGuides optional
Default Value: []
defaultGuides?: number[]
default guidelines
defaultGuidesPos optional
Default Value: 0
defaultGuidesPos?: number
default guide pos for init
showGuides optional
Default Value: true
showGuides?: boolean
Whether to show guidelines
lockGuides optional
Default Value: false
lockGuides?: boolean | Array<"add" | "change" | "remove">
Whether to lock add/remove/change functions via drag/click of guides
digit optional
Default Value: 0
digit?: number
pos digit of guidelines
guideStyle optional
Default Value: "{}"
guideStyle?: Record<string, any>
CSS style objects for guide elements
dragGuideStyle optional
Default Value: "{}"
dragGuideStyle?: Record<string, any>
CSS style objects for drag guide element
displayGuidePos optional
Default Value: false
displayGuidePos?: boolean
Whether to show the guide pos text
guidePosFormat optional
Default Value: dragPosFormat
guidePosFormat?: (value: number) => string | number
Format of displayed guide pos
guidePosStyle optional
guidePosStyle?: IObject<any>
CSS style objects for displayed guide pos text element
scrollOptions optional
Default Value: null
scrollOptions?: DragScrollOptions | null
Set the scroll options, time, etc. to automatically scroll by dragging.
guidesOffset optional
Since: 0.22.0
Default Value: 0
guidesOffset?: number
Numerical value of how far away from the guideline position
Type:
  • TSInterface

GuidesEvents

Source:
Properties:
dragStart
dragStart: OnDragStart
drag
drag: OnDrag
dragEnd
dragEnd: OnDragEnd
clickRuler
clickRuler: OnClickRuler
Type:
  • TSInterface

GuidesInterface

Source:
Properties:
getGuides
getGuides: () => number[]
scroll
scroll: (pos: number) => void
scrollGuides
scrollGuides: (pos: number) => void
drawRuler
drawRuler: (options: DrawRulerOptions) => void
loadGuides
loadGuides: (guides: number[]) => void
resize
resize: () => void
getElement
getElement: () => HTMLElement
getRulerElement
getRulerElement: () => HTMLCanvasElement
Type:
  • TSInterface

GuidesOptions

Source:
Properties:
type optional
Default Value: "horizontal"
type?: "horizontal" | "vertical"
ruler's direction
width optional
Default Value: target's offsetWidth
width?: number
ruler's width
height optional
Default Value: target's offsetHeight
height?: number
ruler's height
unit optional
Default Value: 50
unit?: number
main scale unit
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
zoom optional
Default Value: 1
zoom?: number
zoom
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
direction optional
Default Value: "end"
direction?: "start" | "center" | "end"
line's direction (align)
textAlign optional
Default Value: "start"
textAlign?: "left" | "center" | "right"
text align
font optional
Default Value: "10px sans-serif"
font?: string
font and size
segment optional
Default Value: 10
segment?: number
Number of areas to divide between two main lines
mainLineSize optional
Default Value: "100%"
mainLineSize?: string | number
main line size
longLineSize optional
Default Value: 10
longLineSize?: string | number
long line size
shortLineSize optional
Default Value: 7
shortLineSize?: string | number
short line size
lineOffset optional
Default Value: [0, 0]
lineOffset?: number[]
line's position offset
textOffset optional
Default Value: [0, 0]
textOffset?: number[]
text's position offset
negativeRuler optional
Default Value: true
negativeRuler?: boolean
Whether to display the ruler in the negative direction.
range optional
Default Value: [-Infinity, Infinity]
range?: [number, number]
The range to show the ruler's scales
scrollPos optional
Default Value: undefined
scrollPos?: number
you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method.
defaultScrollPos optional
Default Value: 0
defaultScrollPos?: number
you can set scroll position by prop for init. don't use `scrollPos` prop
style optional
style?: IObject<any>
ruler canvas style
backgroundColor optional
Default Value: "#333333"
backgroundColor?: string
ruler's background color
rangeBackgroundColor optional
Default Value: "transparent"
rangeBackgroundColor?: string
background color within range in ruler
lineColor optional
Default Value: "#777777"
lineColor?: string
ruler's line color
textColor optional
Default Value: "#ffffff"
textColor?: string
ruler's text color
textBackgroundColor optional
Default Value: "transparent"
textBackgroundColor?: string
The background color that wraps the text
textFormat optional
Default Value: ownself
textFormat?: (scale: number) => string
text foramt
marks optional
Default Value: []
marks?: number[]
positions to mark
markColor optional
Default Value: "#f55"
markColor?: string
lineWidth optional
Default Value: 1
lineWidth?: number
Ruler's line width
warpSelf optional
warpSelf?: boolean
Whether to warp self
selectedRanges optional
selectedRanges?: number[][]
You can paint the selected area(selectedranges) with the `selectedBackgroundColor` color.
selectedBackgroundColor optional
Default Value: "#555555"
selectedBackgroundColor?: string
background color within selected range in ruler with `selectedRanges` area
selectedRangesText optional
Since: 0.16.0
Default Value: false
selectedRangesText?: boolean
Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible.
selectedRangesTextOffset optional
Since: 0.16.0
Default Value: "0, 0"
selectedRangesTextOffset?: number[]
Position offset of text in selected ranges
selectedRangesTextColor optional
Since: 0.16.0
Default Value: "#44aaff"
selectedRangesTextColor?: string
Color of text in selected ranges
defaultPixelScale optional
Default Value: 2
defaultPixelScale?: number
Scale value of canvase when device high density is 1. Less than 2 may cause pixels to blur. If device high density is greater than 1, it is forcibly set to 3.
useResizeObserver optional
useResizeObserver?: boolean
Whether to use the resize observer. When the size changes, the resize method is automatically called.
className optional
Default Value: ""
className?: string
guides' class name
rulerStyle optional
Default Value: "width 100%, height: 100%"
rulerStyle?: IObject<any>
ruler's css style
snapThreshold optional
Default Value: 5
snapThreshold?: number
Interval to snap
snaps optional
Default Value: []
snaps?: number[]
Positions to snap
displayDragPos optional
Default Value: false
displayDragPos?: boolean
Whether to show the moving pos when dragging
guidesZoom optional
Since: 0.29.0
Default Value: zoom
guidesZoom?: number
guides zoom(side zoom). If not set, it is the same as `zoom`.
cspNonce optional
cspNonce?: string
csp nonce
dragPosFormat optional
Default Value: self
dragPosFormat?: (value: number) => string | number
Format of drag pos
defaultGuides optional
Default Value: []
defaultGuides?: number[]
default guidelines
defaultGuidesPos optional
Default Value: 0
defaultGuidesPos?: number
default guide pos for init
showGuides optional
Default Value: true
showGuides?: boolean
Whether to show guidelines
lockGuides optional
Default Value: false
lockGuides?: boolean | Array<"add" | "change" | "remove">
Whether to lock add/remove/change functions via drag/click of guides
digit optional
Default Value: 0
digit?: number
pos digit of guidelines
guideStyle optional
Default Value: "{}"
guideStyle?: Record<string, any>
CSS style objects for guide elements
dragGuideStyle optional
Default Value: "{}"
dragGuideStyle?: Record<string, any>
CSS style objects for drag guide element
displayGuidePos optional
Default Value: false
displayGuidePos?: boolean
Whether to show the guide pos text
guidePosFormat optional
Default Value: dragPosFormat
guidePosFormat?: (value: number) => string | number
Format of displayed guide pos
guidePosStyle optional
guidePosStyle?: IObject<any>
CSS style objects for displayed guide pos text element
scrollOptions optional
Default Value: null
scrollOptions?: DragScrollOptions | null
Set the scroll options, time, etc. to automatically scroll by dragging.
guidesOffset optional
Since: 0.22.0
Default Value: 0
guidesOffset?: number
Numerical value of how far away from the guideline position
Type:
  • TSInterface

GuidesProps

Source:
Properties:
type optional
Default Value: "horizontal"
type?: "horizontal" | "vertical"
ruler's direction
width optional
Default Value: target's offsetWidth
width?: number
ruler's width
height optional
Default Value: target's offsetHeight
height?: number
ruler's height
unit optional
Default Value: 50
unit?: number
main scale unit
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
zoom optional
Default Value: 1
zoom?: number
zoom
Examples 
```
1px (Default) zoom: 1, unit: 50 (every 50px)
1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm)
1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in)
```
direction optional
Default Value: "end"
direction?: "start" | "center" | "end"
line's direction (align)
textAlign optional
Default Value: "start"
textAlign?: "left" | "center" | "right"
text align
font optional
Default Value: "10px sans-serif"
font?: string
font and size
segment optional
Default Value: 10
segment?: number
Number of areas to divide between two main lines
mainLineSize optional
Default Value: "100%"
mainLineSize?: string | number
main line size
longLineSize optional
Default Value: 10
longLineSize?: string | number
long line size
shortLineSize optional
Default Value: 7
shortLineSize?: string | number
short line size
lineOffset optional
Default Value: [0, 0]
lineOffset?: number[]
line's position offset
textOffset optional
Default Value: [0, 0]
textOffset?: number[]
text's position offset
negativeRuler optional
Default Value: true
negativeRuler?: boolean
Whether to display the ruler in the negative direction.
range optional
Default Value: [-Infinity, Infinity]
range?: [number, number]
The range to show the ruler's scales
scrollPos optional
Default Value: undefined
scrollPos?: number
you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method.
defaultScrollPos optional
Default Value: 0
defaultScrollPos?: number
you can set scroll position by prop for init. don't use `scrollPos` prop
style optional
style?: IObject<any>
ruler canvas style
backgroundColor optional
Default Value: "#333333"
backgroundColor?: string
ruler's background color
rangeBackgroundColor optional
Default Value: "transparent"
rangeBackgroundColor?: string
background color within range in ruler
lineColor optional
Default Value: "#777777"
lineColor?: string
ruler's line color
textColor optional
Default Value: "#ffffff"
textColor?: string
ruler's text color
textBackgroundColor optional
Default Value: "transparent"
textBackgroundColor?: string
The background color that wraps the text
textFormat optional
Default Value: ownself
textFormat?: (scale: number) => string
text foramt
marks optional
Default Value: []
marks?: number[]
positions to mark
markColor optional
Default Value: "#f55"
markColor?: string
lineWidth optional
Default Value: 1
lineWidth?: number
Ruler's line width
warpSelf optional
warpSelf?: boolean
Whether to warp self
selectedRanges optional
selectedRanges?: number[][]
You can paint the selected area(selectedranges) with the `selectedBackgroundColor` color.
selectedBackgroundColor optional
Default Value: "#555555"
selectedBackgroundColor?: string
background color within selected range in ruler with `selectedRanges` area
selectedRangesText optional
Since: 0.16.0
Default Value: false
selectedRangesText?: boolean
Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible.
selectedRangesTextOffset optional
Since: 0.16.0
Default Value: "0, 0"
selectedRangesTextOffset?: number[]
Position offset of text in selected ranges
selectedRangesTextColor optional
Since: 0.16.0
Default Value: "#44aaff"
selectedRangesTextColor?: string
Color of text in selected ranges
defaultPixelScale optional
Default Value: 2
defaultPixelScale?: number
Scale value of canvase when device high density is 1. Less than 2 may cause pixels to blur. If device high density is greater than 1, it is forcibly set to 3.
useResizeObserver optional
useResizeObserver?: boolean
Whether to use the resize observer. When the size changes, the resize method is automatically called.
className optional
Default Value: ""
className?: string
guides' class name
rulerStyle optional
Default Value: "width 100%, height: 100%"
rulerStyle?: IObject<any>
ruler's css style
snapThreshold optional
Default Value: 5
snapThreshold?: number
Interval to snap
snaps optional
Default Value: []
snaps?: number[]
Positions to snap
displayDragPos optional
Default Value: false
displayDragPos?: boolean
Whether to show the moving pos when dragging
guidesZoom optional
Since: 0.29.0
Default Value: zoom
guidesZoom?: number
guides zoom(side zoom). If not set, it is the same as `zoom`.
cspNonce optional
cspNonce?: string
csp nonce
dragPosFormat optional
Default Value: self
dragPosFormat?: (value: number) => string | number
Format of drag pos
defaultGuides optional
Default Value: []
defaultGuides?: number[]
default guidelines
defaultGuidesPos optional
Default Value: 0
defaultGuidesPos?: number
default guide pos for init
showGuides optional
Default Value: true
showGuides?: boolean
Whether to show guidelines
lockGuides optional
Default Value: false
lockGuides?: boolean | Array<"add" | "change" | "remove">
Whether to lock add/remove/change functions via drag/click of guides
digit optional
Default Value: 0
digit?: number
pos digit of guidelines
guideStyle optional
Default Value: "{}"
guideStyle?: Record<string, any>
CSS style objects for guide elements
dragGuideStyle optional
Default Value: "{}"
dragGuideStyle?: Record<string, any>
CSS style objects for drag guide element
displayGuidePos optional
Default Value: false
displayGuidePos?: boolean
Whether to show the guide pos text
guidePosFormat optional
Default Value: dragPosFormat
guidePosFormat?: (value: number) => string | number
Format of displayed guide pos
guidePosStyle optional
guidePosStyle?: IObject<any>
CSS style objects for displayed guide pos text element
scrollOptions optional
Default Value: null
scrollOptions?: DragScrollOptions | null
Set the scroll options, time, etc. to automatically scroll by dragging.
guidesOffset optional
Since: 0.22.0
Default Value: 0
guidesOffset?: number
Numerical value of how far away from the guideline position
onChangeGuides optional
onChangeGuides?: (e: OnChangeGuides) => any
onRequestScroll optional
onRequestScroll?: (e: OnRequestScroll) => any
onDragStart optional
onDragStart?: (e: OnDragStart) => any
onDrag optional
onDrag?: (e: OnDrag) => any
onDragEnd optional
onDragEnd?: (e: OnDragEnd) => any
onClickRuler optional
onClickRuler?: (e: OnClickRuler) => any
Type:
  • TSInterface

OnChangeGuides

Source:
Properties:
guides
guides: number[]
isAdd
isAdd: boolean
isRemove
isRemove: boolean
isChange
isChange: boolean
index
index: number
distX
distX: number
distY
distY: number
Type:
  • TSInterface

OnClickRuler

Source:
Properties:
pos
pos: number
Type:
  • TSInterface

OnDrag

Source:
Properties:
dragElement
dragElement: HTMLElement
Type:
  • TSInterface

OnDragEnd

Source:
Properties:
dragElement
dragElement: HTMLElement
Type:
  • TSInterface

OnDragStart

Source:
Properties:
dragElement
dragElement: HTMLElement
Type:
  • TSInterface

OnRequestScroll

Source:
Properties:
container
container: HTMLElement | SVGElement
direction
direction: number[]
Type:
  • TSInterface

Events

changeGuides

Source:
The `changeGuides` event occurs when the guideline is added / removed / changed.
Type Description
OnChangeGuides Parameters for the changeGuides event

clickRuler

Source:
When click the ruler, the click ruler is called.
Type Description
OnClickRuler Parameters for the clickRuler event

drag

Source:
When dragging, the drag event is called.
Type Description
OnDrag Parameters for the drag event

dragEnd

Source:
When the drag finishes, the dragEnd event is called.
Type Description
OnDragEnd Parameters for the dragEnd event

dragStart

Source:
When the drag starts, the dragStart event is called.
Type Description
OnDragStart Parameters for the dragStart event

requestScroll

Source:
If scroll can be triggered through drag, the `requestScroll` event is fired.
Type Description
OnRequestScroll Parameters for the `requestScroll` event