首页

Appearance

@jtopo/core

@jtopo/core ​

Table of contents ​

Enumerations ​

Classes ​

Interfaces ​

Type Aliases ​

Variables ​

Functions ​

Type Aliases ​

CameraEventType ​

CameraEventType: "zoom"

ClassPropertyNames ​

ClassPropertyNames<T>: keyof FilterMethods<T>

Type parameters ​

Name
T

ClassPropertyNamesExclude ​

ClassPropertyNamesExclude<T, E>: Exclude<keyof FilterMethods<T>, E>

Type parameters ​

Name
T
E

ConnectToLinkAnchorType ​

ConnectToLinkAnchorType: "begin" | "end" | "auto" | "middle"

Link连接点

ConnectToNodeAnchorType ​

ConnectToNodeAnchorType: "lt" | "ct" | "rt" | "lm" | "center" | "rm" | "lb" | "cb" | "rb"

Node-默认连接点

CoreIconNames ​

CoreIconNames: "Rect" | "Ellipse" | "Arrow" | "Triangle" | "Diamond"

CoreNENames ​

CoreNENames: "Node" | "ImageNode" | "TextNode" | "EllipseNode" | "TipNode" | "ShapeNode" | "VideoNode" | "RatioNode" | "CanvasNode" | "Link" | "FoldLink" | "QuadBezierLink" | "AutoFoldLink" | "BezierLink" | "ArcLink" | "ZShapeLink" | "HtmlNode"

DirectionType ​

DirectionType: "up" | "down" | "left" | "right"

DrawContentDesc ​

DrawContentDesc: Object

Type declaration ​

NameType
hasBorderboolean
hasBackgroundColorboolean
shapeSize{ width: number ; height: number }
shapeSize.widthnumber
shapeSize.heightnumber

EasingNameType ​

EasingNameType: "easeLinear" | "easeInQuad" | "easeOutQuad" | "easeInOutQuad" | "easeInSine" | "easeOutSine" | "easeInOutSine" | "easeInExpo" | "easeInOutExpo" | "easeInCirc" | "easeOutCirc" | "easeInOutCirc" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic" | "easeInQuart" | "easeOutQuart" | "easeInOutQuart" | "easeInQuint" | "easeOutQuint" | "easeInOutQuint" | "easeInElastic" | "easeOutElastic" | "easeInOutElastic" | "easeInBack" | "easeOutBack" | "easeInOutBack" | "easeInBounce" | "easeOutBounce" | "easeInOutBounce"

EndpointOffsetType ​

EndpointOffsetType: number | PointLike

InputEventType ​

InputEventType: typeof InputEventList[number]

JsonResourcesType ​

JsonResourcesType: Object

Type declaration ​

NameType
type"img"
srcstring

LayoutAnimationOption ​

LayoutAnimationOption: Object

Type declaration ​

NameType
name?string
duration?number
onEnd?Function
effect?EasingNameType
times?number
delay?number
direction?"normal" | "reverse" | "alternate" | "alternate-reverse" | "normal"

LinkAnchorNamesType ​

LinkAnchorNamesType: keyof typeof LinkPosition

LinkDirectionFirstType ​

LinkDirectionFirstType: "horizontal" | "vertical"

连线方向, 水平优先 或者 垂直优先

LinkSelectedStyleOptionsType ​

LinkSelectedStyleOptionsType: Object

连线选中状态的样式

选中时连线会呈现阴影

当shadowColor不为null时生效

受以下参数影响（shadowBlur、shadowOffsetX、shadowOffsetY）

Type declaration ​

NameType
shadowColor?string
shadowBlur?number
shadowOffsetX?number
shadowOffsetY?number

LinkTarget ​

LinkTarget: Anchor | PointLike | AnchorProxy | NE

NEEventType ​

NEEventType: "pointerdown" | "pointerup" | "pointermove" | "pointerenter" | "pointerout" | "click" | "dblclick"

NearestInfo ​

NearestInfo: Object

Type declaration ​

NameType
objectany
anchorNamestring
distancenumber

NodeAnchorNamesType ​

NodeAnchorNamesType: keyof typeof ConnectToNodePosition

NodeSelectedStyleOptionsType ​

NodeSelectedStyleOptionsType: Object

节点选中状态的样式

  • 当borderWidth > 0 时， 选中时节点周围会呈现一个边框，受以下参数影响（borderWidth、borderColor）

  • 当borderWidth为null或 == 0 时， 选中时节点会呈现阴影，受以下参数影响（shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY）

Type declaration ​

NameType
borderWidth?number
borderColor?string
shadowColor?string
shadowBlur?number
shadowOffsetX?number
shadowOffsetY?number

PartStyleOptionType ​

PartStyleOptionType:

部分样式配置

PointLike ​

PointLike: Object

Point对象或者拥有x、y的对象

Type declaration ​

NameType
xnumber
ynumber

Pojo ​

Pojo: Object

Index signature ​

▪ [key: string]: any

RatioDirection ​

RatioDirection: DirectionType

RectPositionType ​

RectPositionType: "lt" | "ct" | "rt" | "lm" | "center" | "rm" | "lb" | "cb" | "rb"

矩形方位

RotateDirectionType ​

RotateDirectionType: "clockwise" | "anticlockwise"

SerializeableType ​

SerializeableType: Object

可被序列化的

Index signature ​

▪ [key: string]: any

SerializedDisplayObjectType ​

SerializedDisplayObjectType: { [key: string]: any; className: string ; id?: number | string ; name?: string ; type?: string ; attributes?: { [key: string]: any; } ; data?: { [key: string]: any; } ; pointerEnabled?: boolean ; visible?: boolean ; zIndex?: number ; style?: number ; shape?: any ; beginArrow?: {} ; endArrow?: {} } & SerializedLayerType | SerializedNodeType | SerializedLinkType

SerializedJsonType ​

SerializedJsonType: Object

序列化后的json格式

Type declaration ​

NameTypeDescription
versionstringjtopo版本
SerializeType"Stage" | "Layer" | "Objects"序列化类型
Rootsany[]-
CustomStyle{ [themeName: string]: any; themes?: { [key: string]: ThemeType; } ; styles?: { [key: string]: PartStyleOptionType; } }用户自定义的样式
CustomStyle.themes?{ [key: string]: ThemeType; }用户自定义的主题
CustomStyle.styles?{ [key: string]: PartStyleOptionType; }通过defClass定义的样式
Stylesany[]-
ResourcesJsonResourcesType[]资源
Shapesany[]-
DisplayObjectsSerializedDisplayObjectType[]-
EditInfo?{ uneditable?: number[] ; unconnectable?: number[] }编辑信息
EditInfo.uneditable?number[]禁止编辑的节点
EditInfo.unconnectable?number[]禁止连线的节点

SerializedLinkType ​

SerializedLinkType: Object

Type declaration ​

NameType
isLinktrue
label?number
parent?number
path?[]
begin?{}
end?{}
beginArrow?number
endArrow?number

StageConfig ​

StageConfig: Object

Type declaration ​

NameTypeDescription
dropAllowedboolean是否启用drop，默认开启

StageModeType ​

StageModeType: "normal" | "drag" | "edit" | "view" | "select"

Stage模式

StyleKeyType ​

StyleKeyType: ClassPropertyNamesExclude<Style, `_${string}` | "className" | "dirty">

样式属性名字

TextAlignType ​

TextAlignType: "start" | "end" | "left" | "right" | "center"

文本对齐

TextBaselineType ​

TextBaselineType: "top" | "bottom" | "middle" | "alphabetic" | "hanging"

文本基线

ThemeContentType ​

ThemeContentType: { DefaultConfig?: { fillStyle?: string ; strokeStyle?: string ; font?: string } ; Layer?: PartStyleOptionType ; SelectArea?: PartStyleOptionType ; SelectedStyle?: NodeSelectedStyleOptionsType ; Link.Arrow?: PartStyleOptionType ; Link.Label?: PartStyleOptionType } &

ThemeStyleNameType ​

ThemeStyleNameType: Exclude<keyof ThemeContent, "toJSON"> | string & {}

主题样式名称类型

ToJsonOptionType ​

ToJsonOptionType: Object

Type declaration ​

NameTypeDescription
imageToBase64?boolean是否将图片以base64的形式内联到json 默认值: false 1. GIF图片（目前不能内联） 2. 性能敏感时，不要使用内联

Vec2Type ​

Vec2Type: [number, number] | [number?, number?]

Variables ​

Assets ​

Const Assets: AssetsClass

ConnectToNodePosition ​

Const ConnectToNodePosition: Readonly<{ lt: "lt" = 'lt'; ct: "ct" = 'ct'; rt: "rt" = 'rt'; lm: "lm" = 'lm'; rm: "rm" = 'rm'; lb: "lb" = 'lb'; cb: "cb" = 'cb'; rb: "rb" = 'rb'; center: "center" = 'center'; auto: "auto" = 'auto' }>

Cursor ​

Const Cursor: Readonly<{ grabbing: "grabbing" = 'grabbing'; default: "default" = 'default'; grab: "grab" = 'grab'; auto: "auto" = 'auto'; move: "move" = 'move'; hand: "hand" = 'hand'; crosshair: "crosshair" = 'crosshair'; s_resize: "s-resize" = 's-resize'; n_resize: "n-resize" = 'n-resize'; w_resize: "w-resize" = 'w-resize'; e_resize: "e-resize" = 'e-resize'; ne_resize: "ne-resize" = 'ne-resize'; se_resize: "se-resize" = 'se-resize'; sw_resize: "sw-resize" = 'sw-resize'; nw_resize: "nw-resize" = 'nw-resize' }>

Debug ​

Debug: Object

Type declaration ​

NameType
isDebugboolean
paintAABBboolean
debugInfoany
debugMode() => void

Direction ​

Const Direction: Readonly<{ horizontal: "horizontal" = 'horizontal'; vertical: "vertical" = 'vertical'; h: "h" = 'h'; v: "v" = 'v'; anticlockwise: "anticlockwise" = 'anticlockwise'; clockwise: "clockwise" = 'clockwise' }>

FunctionName ​

Const FunctionName: Readonly<{ AutoFoldLinkCenter: "com.jtopo.AutoFoldLink.center" = 'com.jtopo.AutoFoldLink.center'; AutoFoldLinkFold1: "fold1" = 'fold1'; AutoFoldLinkFold2: "fold2" = 'fold2'; LinkCenter: "center" = 'center'; LinkBegin: "begin" = 'begin'; LinkEnd: "end" = 'end'; QuadBezierLinkCtrlPoint: "ctrlPoint" = 'ctrlPoint'; BezierLinkCtrlPoint1: "ctrlPoint1" = 'ctrlPoint1'; BezierLinkCtrlPoint2: "ctrlPoint2" = 'ctrlPoint2'; QuadBezierLinkCenter: "com.jtopo.QuadBezierLink.center" = 'com.jtopo.QuadBezierLink.center'; BezierLinkCenter: "com.jtopo.BezierLink.center" = 'com.jtopo.BezierLink.center'; ArcLinkCenter: "com.jtopo.ArcLink.center" = 'com.jtopo.ArcLink.center' }>

JTType ​

Const JTType: Object = {}

LinkPosition ​

Const LinkPosition: Readonly<{ begin: "begin" = 'begin'; end: "end" = 'end'; middle: "middle" = 'middle'; ctrlPoint: "ctrlPoint" = 'ctrlPoint'; ctrlPoint1: "ctrlPoint1" = 'ctrlPoint1'; ctrlPoint2: "ctrlPoint2" = 'ctrlPoint2'; fold1: "fold1" = 'fold1'; fold2: "fold2" = 'fold2'; mid: "mid" = 'mid'; mid1: "mid1" = 'mid1'; mid2: "mid2" = 'mid2' }>

ObjectName ​

Const ObjectName: Readonly<{ AutoFoldLinkAnchors: "com.jtopo.AutoFoldLinkAnchors" = 'com.jtopo.AutoFoldLinkAnchors' }>

RectPosition ​

Const RectPosition: Readonly<{ lt: "lt" = 'lt'; ct: "ct" = 'ct'; rt: "rt" = 'rt'; lm: "lm" = 'lm'; rm: "rm" = 'rm'; lb: "lb" = 'lb'; cb: "cb" = 'cb'; rb: "rb" = 'rb'; center: "center" = 'center' }>

RectPositionNormalized ​

Const RectPositionNormalized: Object

Type declaration ​

NameType
lt[number, number]
ct[number, number]
rt[number, number]
lm[number, number]
rm[number, number]
lb[number, number]
cb[number, number]
rb[number, number]
center[number, number]

RectPositionUnitNormals ​

Const RectPositionUnitNormals: Object

Type declaration ​

NameType
lt[number, number]
ct[number, number]
rt[number, number]
lm[number, number]
rm[number, number]
lb[number, number]
cb[number, number]
rb[number, number]
center[number, number]

ResourceSystem ​

Const ResourceSystem: ResourceSystemBase

StageMode ​

Const StageMode: Readonly<{ drag: "drag" = "drag"; edit: "edit" = "edit"; normal: "normal" = "normal"; select: "select" = "select"; view: "view" = "view" }>

StageMode 常量

TextAlign ​

Const TextAlign: Readonly<{ left: "left" = 'left'; center: "center" = 'center'; right: "right" = 'right' }>

TextBaseline ​

Const TextBaseline: Readonly<{ top: "top" = 'top'; middle: "middle" = 'middle'; bottom: "bottom" = 'bottom' }>

TextPosition ​

Const TextPosition: Readonly<{ lt: "lt" = 'lt'; ct: "ct" = 'ct'; rt: "rt" = 'rt'; lm: "lm" = 'lm'; rm: "rm" = 'rm'; lb: "lb" = 'lb'; cb: "cb" = 'cb'; rb: "rb" = 'rb'; center: "center" = 'center' }> = RectPosition

VERSION ​

Const VERSION: "#version#"

geom ​

Const geom: Object

Type declaration ​

NameType
clamp(min: number, max: number, n: number) => number
isHorizontal(k: number) => boolean
getNearestPositionName(intersectInWorld: Intersect, minDist: number) => "ct" | "lm" | "rm" | "cb" | "begin" | "end"
getNearestPointOnLines(x: number, y: number, points: PointLike[], isClosed: boolean) => Intersect
getLineIntersectPoint(p1: PointLike, p2: PointLike, m1: PointLike, m2: PointLike, isLine: boolean) => { x: number ; y: number }
isPointOnLineSegs

Functions ​

pointIntersectNode ​

pointIntersectNode(p, widthHalf, heightHalf): PointLike

Parameters ​

NameType
pPointLike
widthHalfnumber
heightHalfnumber

Returns ​

PointLike

randomColor ​

randomColor(): string

随机生成颜色（不是完全随机，有jtopo的主题方案） 返回示例： '#c5aa99'

Returns ​

string

十六进制颜色字符串