@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
95 lines (94 loc) • 4.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.calcColumnsFromPx = calcColumnsFromPx;
exports.calcMediaPxWidth = void 0;
exports.calcPctFromPx = calcPctFromPx;
exports.calcPctWidth = void 0;
exports.calcPxFromColumns = calcPxFromColumns;
exports.calcPxFromPct = calcPxFromPct;
exports.wrappedLayouts = exports.snapToGrid = exports.layoutSupportsWidth = void 0;
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _constants = require("../../media-single/constants");
var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
var layoutSupportsWidth = exports.layoutSupportsWidth = function layoutSupportsWidth(layout) {
return validWidthModes.indexOf(layout) > -1;
};
function calcPxFromColumns(columns, lineLength, gridSize) {
var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
return maxWidth / gridSize * columns - _constants.MEDIA_SINGLE_GUTTER_SIZE;
}
function calcColumnsFromPx(width, lineLength, gridSize) {
var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
}
function calcPxFromPct(pct, lineLength) {
var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
return maxWidth * pct - _constants.MEDIA_SINGLE_GUTTER_SIZE;
}
function calcPctFromPx(width, lineLength) {
var maxWidth = lineLength + _constants.MEDIA_SINGLE_GUTTER_SIZE;
return (width + _constants.MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
}
var wrappedLayouts = exports.wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
var calcPctWidth = exports.calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
};
var calcMediaPxWidth = exports.calcMediaPxWidth = function calcMediaPxWidth(opts) {
var origWidth = opts.origWidth,
origHeight = opts.origHeight,
layout = opts.layout,
pctWidth = opts.pctWidth,
containerWidth = opts.containerWidth,
resizedPctWidth = opts.resizedPctWidth;
var width = containerWidth.width,
lineLength = containerWidth.lineLength;
var calculatedPctWidth = calcPctWidth(containerWidth, pctWidth, origWidth, origHeight);
var calculatedResizedPctWidth = calcPctWidth(containerWidth, resizedPctWidth, origWidth, origHeight);
if (layout === 'wide') {
if (lineLength) {
var wideWidth = Math.ceil(lineLength * _editorSharedStyles.breakoutWideScaleRatio);
return wideWidth > width ? lineLength : wideWidth;
}
} else if (layout === 'full-width') {
return width - _editorSharedStyles.akEditorBreakoutPadding;
} else if (calculatedPctWidth) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
if (wrappedLayouts.indexOf(layout) > -1) {
if (calculatedResizedPctWidth) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
if (resizedPctWidth < 50) {
return calculatedResizedPctWidth;
}
return calculatedPctWidth;
}
return calculatedPctWidth;
}
if (calculatedResizedPctWidth) {
return calculatedResizedPctWidth;
}
return calculatedPctWidth;
} else if (layout === 'center') {
if (calculatedResizedPctWidth) {
return calculatedResizedPctWidth;
}
return Math.min(origWidth, lineLength || width);
} else if (layout && wrappedLayouts.indexOf(layout) !== -1) {
// when layout is wrap-left, wrap-right, align-start, align-end
// but no pctWidth is defined
return Math.min(calcPxFromPct(0.5, lineLength || width), origWidth);
}
return origWidth;
};
var snapToGrid = exports.snapToGrid = function snapToGrid(gridWidth, width, height, lineLength, gridSize) {
var pxWidth = calcPxFromPct(gridWidth / 100, lineLength);
var columnSpan = Math.round(calcColumnsFromPx(pxWidth, lineLength, gridSize));
var alignedWidth = calcPxFromColumns(columnSpan, lineLength, gridSize);
return {
height: height / width * alignedWidth,
width: alignedWidth
};
};