JointJS 根据内容调整画布尺寸

用法

paper.fitToContent({
    padding: 20, // 内容周围留白大小
    allowNewOrigin: 'any' // 注意此配置如果不填，padding的top和left属性不会生效
})

源码

fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt)
    if (isObject$1(gridWidth)) {
        // first parameter is an option object
        opt = gridWidth;
        gridWidth = opt.gridWidth || 1;
        gridHeight = opt.gridHeight || 1;
        padding = opt.padding || 0;

    } else {

        opt || (opt = {});
        gridWidth = gridWidth || 1;
        gridHeight = gridHeight || 1;
        padding = padding || 0;
    }

    // Calculate the paper size to accommodate all the graph's elements.

    var minWidth = Math.max(opt.minWidth || 0, gridWidth);
    var minHeight = Math.max(opt.minHeight || 0, gridHeight);
    var maxWidth = opt.maxWidth || Number.MAX_VALUE;
    var maxHeight = opt.maxHeight || Number.MAX_VALUE;
    var newOrigin = opt.allowNewOrigin;

    padding = normalizeSides(padding);

    var area = ('contentArea' in opt) ? new Rect(opt.contentArea) : this.getContentArea(opt);

    var currentScale = this.scale();
    var currentTranslate = this.translate();
    var sx = currentScale.sx;
    var sy = currentScale.sy;

    area.x *= sx;
    area.y *= sy;
    area.width *= sx;
    area.height *= sy;

    var calcWidth = Math.ceil((area.width + area.x) / gridWidth);
    var calcHeight = Math.ceil((area.height + area.y) / gridHeight);
    if (!opt.allowNegativeBottomRight) {
        calcWidth = Math.max(calcWidth, 1);
        calcHeight = Math.max(calcHeight, 1);
    }
    calcWidth *= gridWidth;
    calcHeight *= gridHeight;

    var tx = 0;
    var ty = 0;

    if ((newOrigin === 'negative' && area.x < 0) || (newOrigin === 'positive' && area.x >= 0) || newOrigin === 'any') {
        tx = Math.ceil(-area.x / gridWidth) * gridWidth;
        tx += padding.left;
        calcWidth += tx;
    }

    if ((newOrigin === 'negative' && area.y < 0) || (newOrigin === 'positive' && area.y >= 0) || newOrigin === 'any') {
        ty = Math.ceil(-area.y / gridHeight) * gridHeight;
        ty += padding.top;
        calcHeight += ty;
    }

    calcWidth += padding.right;
    calcHeight += padding.bottom;

    // Make sure the resulting width and height are greater than minimum.
    calcWidth = Math.max(calcWidth, minWidth);
    calcHeight = Math.max(calcHeight, minHeight);

    // Make sure the resulting width and height are lesser than maximum.
    calcWidth = Math.min(calcWidth, maxWidth);
    calcHeight = Math.min(calcHeight, maxHeight);

    var computedSize = this.getComputedSize();
    var dimensionChange = calcWidth != computedSize.width || calcHeight != computedSize.height;
    var originChange = tx != currentTranslate.tx || ty != currentTranslate.ty;

    // Change the dimensions only if there is a size discrepancy or an origin change
    if (originChange) {
        this.translate(tx, ty);
    }
    if (dimensionChange) {
        this.setDimensions(calcWidth, calcHeight);
    }

    return new Rect(-tx / sx, -ty / sy, calcWidth / sx, calcHeight / sy);
}