drawer-utils

adrawer utils

Usage no npm install needed!

<script type="module">
  import drawerUtils from 'https://cdn.skypack.dev/drawer-utils';
</script>

README

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

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
params type default descr
salts number 2 The value that is used to generate the salts count
interval number 1 The value that is the timeseq increased millisecond interval.1000 is increased per second,1000*60 is per minute, so on.If less than zero, there are not timeseq
initTime number Date.now() The value that is the epoch of the timeseq.The default is millisecond of module import Date.now() 
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