@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
83 lines • 3.68 kB
JavaScript
import { akEditorBreakoutPadding, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
var validWidthModes = ['center', 'wrap-left', 'wrap-right', 'align-start', 'align-end'];
export var layoutSupportsWidth = function layoutSupportsWidth(layout) {
return validWidthModes.indexOf(layout) > -1;
};
export function calcPxFromColumns(columns, lineLength, gridSize) {
var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
return maxWidth / gridSize * columns - MEDIA_SINGLE_GUTTER_SIZE;
}
export function calcColumnsFromPx(width, lineLength, gridSize) {
var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
return (width + MEDIA_SINGLE_GUTTER_SIZE) * gridSize / maxWidth;
}
export function calcPxFromPct(pct, lineLength) {
var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
}
export function calcPctFromPx(width, lineLength) {
var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
return (width + MEDIA_SINGLE_GUTTER_SIZE) / maxWidth;
}
export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
export var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
return pctWidth && origWidth && origHeight && Math.ceil(calcPxFromPct(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
};
export var 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 * breakoutWideScaleRatio);
return wideWidth > width ? lineLength : wideWidth;
}
} else if (layout === 'full-width') {
return width - 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;
};
export var 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
};
};