drawer-utils v1.0.3

drawer-utils

install

npm i --save drawer-utils

apis

graph

• flowLayout(horizontal = 100, vertical = 100) 流式布局
• transElePosition(nodes = [], targetEle = 'ele') 根据nodeid节点，获取位置，填充node对象
• completePosition(plumbInstance, nodes = []) 获取plumbInstance中的所有元素，然后填充位置

placment

• Anchors
• Connectors
• EndPoints
• Overlays

setting

tools

• uuid()
• toShortId(len = 6)
• getShortUID()
• uuidv4()
• isNumber(value)
• isDom(value)
• isObject(value)
• isArray(value)
• isString(value)
• isEmpty(value)
• isNotReactElement(value)
• isNil(value)
• stringIsJson(str)
• clone(source)
• merge(target, source, overwrite)
• deepEqual(valA, valB)
• connEqual(connA, connB)
• omit(obj, fields)
• filterArray(preArr, nextArr)
• filterConnect(preConn, nextConn)
• filterNode(preNodes, nextNodes)
• filterNewNode(preNodes, nextNodes)

align

• doAlignLeft(plumbInstance) 左 对 齐
• doAlignCente(plumbInstance) 居中对齐
• doAlignRight(plumbInstance) 右 对 齐
• doAlignTop(plumbInstance) 上 对 齐
• doAlignMiddl(plumbInstance) 垂直居中
• doAlignBotto(plumbInstance) 下 对 齐
• doUpColse(plumbInstance) 上下靠拢
• doLeftColse(plumbInstance) 左右靠拢
• doSameHeight(plumbInstance) 同 高
• doSameWidth(plumbInstance) 同 宽
• doClockwise(plumbInstance) 旋 转
• doDeleteAll(plumbInstance) 删除所有

附录

Anchors

• Anchors.Assign: 'Assign',
• Anchors.AutoDefault: 'AutoDefault',
• Anchors.Bottom: 'Bottom',
• Anchors.BottomCenter: 'BottomCenter',
• Anchors.BottomLeft: 'BottomLeft',
• Anchors.BottomRight: 'BottomRight',
• Anchors.Center: 'Center',
• Anchors.Continuous: 'Continuous',
• Anchors.ContinuousBottom: 'ContinuousBottom',
• Anchors.ContinuousLeft: 'ContinuousLeft',
• Anchors.ContinuousRight: 'ContinuousRight',
• Anchors.ContinuousTop: 'ContinuousTop',
• Anchors.Left: 'Left',
• Anchors.LeftMiddle: 'LeftMiddle',
• Anchors.Perimeter: 'Perimeter',
• Anchors.Right: 'Right',
• Anchors.RightMiddle: 'RightMiddle',
• Anchors.Top: 'Top',
• Anchors.TopCenter: 'TopCenter',
• Anchors.TopLeft: 'TopLeft',
• Anchors.TopRight: 'TopRight'

Connectors

• Connectors.Bezier: 'Bezier',
• Connectors.Flowchart: 'Flowchart',
• Connectors.StateMachine: 'StateMachine',
• Connectors.Straight: 'Straight'

EndPoints

• EndPoints.Blank: 'Blank',
• EndPoints.Dot: 'Dot',
• EndPoints.Image: 'Image',
• EndPoints.Rectangle: 'Rectangle'

Overlays

• Overlays.Arrow 'Arrow'
• Overlays.Diamond 'Diamond'
• Overlays.Label 'Label'
• Overlays.PlainArrow 'PlainArrow'

dagre layout

注意，需要手动安装 dagre

npm install --save dagre

// import dagre from 'drawer-utils/lib/plugins/dagre';
import dagreLayout from 'drawer-utils/lib/plugins/dagreLayout';

const dataSource = {
  nodes: [...],
  connections: [...]
};

const newDataSource = dagreLayout(dataSource);

...

shortUID

• options

const inst = shortUID.inst({ salts: 3, interval: 1000 });
console.log(inst.gen());

// default option { salts: 2, interval: 1 }
console.log(shortUID.gen());
// custom option
console.log(shortUID.gen({salts:3,interval:1000}));
// default option { salts: 4, interval: 1 }
console.log(shortUID.uuid());

author

ilex.h