Guides

Guides

new Guides(container, optionsopt)

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

Methods

destroy()

Source:
destroy guides

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

getGuides() → {number[]}

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

loadGuides(guides)

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

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

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

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>>

resize()

Source:
Recalculate the size of the ruler.

scroll(pos)

Source:
Scroll the position of the ruler.
Name Type Description
pos number

scrollGuides(pos)

Source:
Scroll the positions of the guidelines opposite the ruler.
Name Type Description
pos number

setState(state, callbackopt)

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

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 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

Type Definitions

GuideOptions

Source:
Properties:
Name Type Description
type? "horizontal" | "vertical" ruler's direction
width? number ruler's width (default: offsetWidth)
height? number ruler's height (default: offsetheight)
unit? number main scale unit (default: 50)
zoom? number zoom (default: 1)
direction? "start" | "end" line's direction (default: "end")
textAlign? "left" | "center" | "right" text align (default: "start")
font? string font and size (default: "10px sans-serif")
segment? number Number of areas to divide between two main lines (default: 10)
mainLineSize? string | number main line size (default "100%")
longLineSize? string | number long line size (default: 10)
shortLineSize? string | number short line size (default: 7)
textOffset? number[] text's position offset (default: [0, 0])
negativeRuler? boolean Whether to display the ruler in the negative direction (default: true)
scrollPos? number you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method. (default: 0)
style? IObject<any> ruler canvas style
backgroundColor? string ruler's background color (default: "#333333")
lineColor? string ruler's line color (default: "#777777")
textColor? string ruler's text color (default: "#ffffff")
textFormat? (scale: number) => string ruler's text format
className? string guides' class name (default: "")
rulerStyle? IObject<any> ruler's css style(default: width 100%, height: 100%)
snapThreshold? number Interval to snap (default: 5)
snaps? number[] Positions to snap (default: [])
displayDragPos? boolean Whether to show the moving pos when dragging (default: false)
cspNonce? string csp nonce
dragPosFormat? (value: number) => string | number Format of drag pos (default: v => v)
defaultGuides? number[] default guidelines (default: [])
showGuides? boolean Whether to show guidelines (default: true)
lockGuides? boolean | Array<"add" | "change" | "remove"> Whether to lock add/remove/change functions via drag/click of guides (default: false)
digit? number pos digit of guidelines (default: 0)
guideStyle? Record<string, any> CSS style objects for guide elements (default: )
dragGuideStyle? Record<string, any> CSS style objects for drag guide element (default: )
portalContainer? HTMLElement | null Guides Portal Container to support other frameworks. Don't set it. (default: null)
Type:
  • TSInterface

GuidesEvents

Source:
Properties:
Name Type Description
changeGuides OnChangeGuides
dragStart OnDragStart
drag OnDrag
dragEnd OnDragEnd
Type:
  • TSInterface

GuidesInterface

Source:
Properties:
Name Type Description
getGuides () => number[]
scroll (pos: number) => void
scrollGuides (pos: number) => void
loadGuides (guides: number[]) => void
resize () => void
Type:
  • TSInterface

GuidesOptions

Source:
Properties:
Name Type Description
type? "horizontal" | "vertical" ruler's direction
width? number ruler's width (default: offsetWidth)
height? number ruler's height (default: offsetheight)
unit? number main scale unit (default: 50)
zoom? number zoom (default: 1)
direction? "start" | "end" line's direction (default: "end")
textAlign? "left" | "center" | "right" text align (default: "start")
font? string font and size (default: "10px sans-serif")
segment? number Number of areas to divide between two main lines (default: 10)
mainLineSize? string | number main line size (default "100%")
longLineSize? string | number long line size (default: 10)
shortLineSize? string | number short line size (default: 7)
textOffset? number[] text's position offset (default: [0, 0])
negativeRuler? boolean Whether to display the ruler in the negative direction (default: true)
scrollPos? number you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method. (default: 0)
style? IObject<any> ruler canvas style
backgroundColor? string ruler's background color (default: "#333333")
lineColor? string ruler's line color (default: "#777777")
textColor? string ruler's text color (default: "#ffffff")
textFormat? (scale: number) => string ruler's text format
className? string guides' class name (default: "")
rulerStyle? IObject<any> ruler's css style(default: width 100%, height: 100%)
snapThreshold? number Interval to snap (default: 5)
snaps? number[] Positions to snap (default: [])
displayDragPos? boolean Whether to show the moving pos when dragging (default: false)
cspNonce? string csp nonce
dragPosFormat? (value: number) => string | number Format of drag pos (default: v => v)
defaultGuides? number[] default guidelines (default: [])
showGuides? boolean Whether to show guidelines (default: true)
lockGuides? boolean | Array<"add" | "change" | "remove"> Whether to lock add/remove/change functions via drag/click of guides (default: false)
digit? number pos digit of guidelines (default: 0)
guideStyle? Record<string, any> CSS style objects for guide elements (default: )
dragGuideStyle? Record<string, any> CSS style objects for drag guide element (default: )
portalContainer? HTMLElement | null Guides Portal Container to support other frameworks. Don't set it. (default: null)
Type:
  • TSInterface

GuidesProps

Source:
Properties:
Name Type Description
type? "horizontal" | "vertical" ruler's direction
width? number ruler's width (default: offsetWidth)
height? number ruler's height (default: offsetheight)
unit? number main scale unit (default: 50)
zoom? number zoom (default: 1)
direction? "start" | "end" line's direction (default: "end")
textAlign? "left" | "center" | "right" text align (default: "start")
font? string font and size (default: "10px sans-serif")
segment? number Number of areas to divide between two main lines (default: 10)
mainLineSize? string | number main line size (default "100%")
longLineSize? string | number long line size (default: 10)
shortLineSize? string | number short line size (default: 7)
textOffset? number[] text's position offset (default: [0, 0])
negativeRuler? boolean Whether to display the ruler in the negative direction (default: true)
scrollPos? number you can set scroll position by prop. If you use the scrollPos prop, you can't use the scroll method. (default: 0)
style? IObject<any> ruler canvas style
backgroundColor? string ruler's background color (default: "#333333")
lineColor? string ruler's line color (default: "#777777")
textColor? string ruler's text color (default: "#ffffff")
textFormat? (scale: number) => string ruler's text format
className? string guides' class name (default: "")
rulerStyle? IObject<any> ruler's css style(default: width 100%, height: 100%)
snapThreshold? number Interval to snap (default: 5)
snaps? number[] Positions to snap (default: [])
displayDragPos? boolean Whether to show the moving pos when dragging (default: false)
cspNonce? string csp nonce
dragPosFormat? (value: number) => string | number Format of drag pos (default: v => v)
defaultGuides? number[] default guidelines (default: [])
showGuides? boolean Whether to show guidelines (default: true)
lockGuides? boolean | Array<"add" | "change" | "remove"> Whether to lock add/remove/change functions via drag/click of guides (default: false)
digit? number pos digit of guidelines (default: 0)
guideStyle? Record<string, any> CSS style objects for guide elements (default: )
dragGuideStyle? Record<string, any> CSS style objects for drag guide element (default: )
portalContainer? HTMLElement | null Guides Portal Container to support other frameworks. Don't set it. (default: null)
onChangeGuides? (e: OnChangeGuides) => any
onDragStart? (e: OnDragStart) => any
onDrag? (e: OnDrag) => any
onDragEnd? (e: OnDragEnd) => any
Type:
  • TSInterface

OnChangeGuides

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

OnDrag

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

OnDragEnd

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

OnDragStart

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

Events

changeGuides

Source:
The `changeGuides` event occurs when the guideline is added / removed / changed.
Type Description
OnChangeGuides Parameters for the changeGuides 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