easyflow 流程图 画布 原点坐标系

# 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);