/leafer-x-connector

LeaferJS Connector Plugin, LeaferJS连线插件

Primary LanguageTypeScriptMIT LicenseMIT

leafer-x-connector

Preview

字段 类型 默认 说明
*rect1 Rect 连接对象1
*rect2 Rect 连接对象2
*option IQnConnectorOption 连接属性

IQnConnectorOption 属性

字段 类型 默认 说明
padding number 8 连接面延伸距离
margin number 0 对象和连线之间的空隙
opt1 ITargetOption 单独设置连接面1的延伸距离
opt2 ITargetOption
addPoint IPointData[] 连线自定义点
type IConnectorType 连线类型，目前暂时只支持最简单类型
boundType IBoundsType stroke 边界类型(继承官网属性)
onDraw FOnDrowCallback = (param:{
s:IConnectorPoint,
e:IConnectorPoint,
path:string
})=>string
自定义连线回调函数

【Rect类型】ITargetOption 属性(后续根据不同形状参数略不同)

字段 类型 默认 说明
padding number 8 连接面延伸距离
margin number 0 对象和连线之间的空隙
side ISideType 指定连接面，连线与对象的接触面
top, bottom, left, right 首字母
percent ISideType 指定连接面与连线的接触点（按顺时针方向）
arrow IArrowType 箭头类型参考官网箭头类型

后续开发计划: （已完成）

  • 添加自定义链接点

    IPointData

  • 连线类型样式（default，straight，curve）

    IConnectorType

  • 箭头自定义

  • 多边形

  • PNG透明图片

  • 对象之间围绕碰撞检测（自定义连接点的时候有点问题）

示例1: 快速上手

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 
const conn = new LeaferXQnConnector(elipse,rect) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

示例2: 属性配置

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 

const opt:IConnectorOption = {
    opt1:{
        margin:25,    // 比外层优先级更高
    },
    opt2:{
        percent:0.8,
        margin:5,
    },
    padding:20,
    margin:10,
}

const conn = new LeaferXQnConnector(elipse,rect,opt) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

示例3: 回调, 自定义连线

sketch map

import { Leafer, Rect, Ellipse } from 'leafer-ui'
import { LeaferXQnConnector } from "leafer-x-connector";
const leafer = new Leafer({ view: window })
 

const elipse = new Ellipse({ 
    x: 150, 
    y: 150,  
    fill: '#32cd79',  
    draggable: true,
}) 
const rect = new Rect({ 
    x: 350,
    y: 220,
    fill: '#323379', 
    draggable: true,
}) 
const opt:IConnectorOption = {
    onDraw:(param)=>{
        console.log(`param::`,param)
        
        // 根据需求可自定义path即可
        return param.path   
    }
}
const conn = new LeaferXQnConnector(elipse,rect,opt) 

leafer.add(rect)
leafer.add(elipse)
leafer.add(conn)

/* 回调输出:
param::{
  "s": {
    "linkPoint": {
      "x": 236.12890625,
      "y": 387.453125
    },
    "padding": {
      "x": 236.12890625,
      "y": 367.453125
    },
    "side": "t",
    "anglePoint": {   // padding为零的时候为了计算角度使用的点
      "x": 236.12890625,
      "y": 387.453125
    },
    "angle": 261.0890177921008
  },
  "e": {
    "linkPoint": {
      "x": 455,
      "y": 330
    },
    "padding": {
      "x": 475,
      "y": 330
    },
    "side": "r",
    "anglePoint": {
      "x": 455,
      "y": 330
    },
    "angle": 351.0890177921008,
    "pathPoint": {    // 自动补长连线点, (*可能后续这个变量会有变动)
      "x": 475,
      "y": 367.453125
    }
  },
  "path": "M 236.12890625 387.453125 L 236.12890625 367.453125 L 475 367.453125 L 475 330 L 455 330"
}

示例4: Group 操作

group.add(rect)
group.add(elipse)
leafer.add(group)

// leafer.add(conn)  *这里不能这么写
group.add(conn)