根据position定位画布,使画布定位于容器右下角
# eastflow
中心坐标系不用考虑流程图画布是否够用,拖拽节点时可自动增加画布大小
代码
<!-- 最外层容器 -->
<div id="efContainer" ref="efContainer" class="container" v-flowDrag v-if="easyFlowVisible">
<!-- 给画布一个默认的宽度和高度 -->
<div
:style="{
width: `${flowSize.canvasWidth}px`,
left: `${flowSize.canvasWidth}px`,
height: `${flowSize.canvasHeight}px`,
top: `${flowSize.canvasHeight}px`,
}"
style="position:absolute;">
<template v-for="node in flowNodeLine.nodeList">
<!-- 节点-->
<flow-node
:id="node.id"
:key="node.id"
:node="node"
@changeNodeSite="changeNodeSite"
@showNodeParams="clickShowNodeParams"
@clickRight="clickShowNodeMenu"
@onClickOutside="onClickOutside"
>
</flow-node>
</template>
</div>
</div>
修改节点可拖拽的边界(jsplumb.js 约在1813行左右)
var _setConstrain = function(value) {
constrain = typeof value === "function" ? value : value ? function(pos, dragEl, _constrainRect, _size) {
// 最大的xy值 画布width的一半
const { canvasHeight, canvasWidth } = flowStore.state.flowSize;
// 当前xy
const x = Math.min(canvasWidth - _size[0], pos[0]);
const y = Math.min(canvasHeight - _size[1], pos[1]);
// 拖拽范围 不可超出画布范围
return negativeFilter([
Math.max(-canvasWidth, x),
Math.max(-canvasHeight, y)
]);
}.bind(this) : function(pos) { return negativeFilter(pos); };
}.bind(this);