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