diff --git a/packages/board-core/src/setup-stage.tsx b/packages/board-core/src/setup-stage.tsx index 96aa1cdc..4546182e 100644 --- a/packages/board-core/src/setup-stage.tsx +++ b/packages/board-core/src/setup-stage.tsx @@ -1,29 +1,14 @@ import { callHooks } from './hooks'; -import type { BoardSetupStageFunction, IWindowEnvironmentProps, ICanvasEnvironmentProps, CanvasStyles } from './types'; +import type { BoardSetupStageFunction, IWindowEnvironmentProps } from './types'; export const defaultWindowStyles = { width: 1024, height: 640, } as const; -export const defaultCanvasStyles: CanvasStyles = { - width: 'fit-content', - height: 'fit-content', - marginLeft: 'auto', - marginRight: 'auto', - marginBottom: 'auto', - marginTop: 'auto', - paddingLeft: '0px', - paddingRight: '0px', - paddingBottom: '0px', - paddingTop: '0px', -} as const; - export const defaultEnvironmentProperties = { windowWidth: defaultWindowStyles.width, windowHeight: defaultWindowStyles.height, - canvasMargin: {}, - canvasPadding: {}, }; const applyStylesToWindow = (windowStyles: IWindowEnvironmentProps = {}, previousProps: IWindowEnvironmentProps) => { @@ -39,86 +24,23 @@ const applyStylesToWindow = (windowStyles: IWindowEnvironmentProps = {}, previou document.body.style.backgroundColor = windowStyles.windowBackgroundColor || ''; }; -const applyStylesToCanvas = (canvas: HTMLDivElement, environmentProps: ICanvasEnvironmentProps = {}) => { - const canvasStyle = { - width: - environmentProps.canvasWidth !== undefined - ? `${environmentProps.canvasWidth}px` - : defaultCanvasStyles.width, - height: - environmentProps.canvasHeight !== undefined - ? `${environmentProps.canvasHeight}px` - : defaultCanvasStyles.height, - marginLeft: - environmentProps.canvasMargin?.left !== undefined - ? `${environmentProps.canvasMargin?.left}px` - : defaultCanvasStyles.marginLeft, - marginRight: - environmentProps.canvasMargin?.right !== undefined - ? `${environmentProps.canvasMargin?.right}px` - : defaultCanvasStyles.marginRight, - marginBottom: - environmentProps.canvasMargin?.bottom !== undefined - ? `${environmentProps.canvasMargin?.bottom}px` - : defaultCanvasStyles.marginBottom, - marginTop: - environmentProps.canvasMargin?.top !== undefined - ? `${environmentProps.canvasMargin?.top}px` - : defaultCanvasStyles.marginTop, - paddingLeft: - environmentProps.canvasPadding?.left !== undefined - ? `${environmentProps.canvasPadding?.left}px` - : defaultCanvasStyles.paddingLeft, - paddingRight: - environmentProps.canvasPadding?.right !== undefined - ? `${environmentProps.canvasPadding?.right}px` - : defaultCanvasStyles.paddingRight, - paddingBottom: - environmentProps.canvasPadding?.bottom !== undefined - ? `${environmentProps.canvasPadding?.bottom}px` - : defaultCanvasStyles.paddingBottom, - paddingTop: - environmentProps.canvasPadding?.top !== undefined - ? `${environmentProps.canvasPadding?.top}px` - : defaultCanvasStyles.paddingTop, - backgroundColor: environmentProps.canvasBackgroundColor || '', - }; - - // Canvas gets stretched horizontally/vertically - // when horizontal (left and right) or vertical (top and bottom) margins are applied. - if (environmentProps.canvasMargin?.left !== undefined && environmentProps.canvasMargin.right !== undefined) { - canvasStyle.width = '100%'; - } - - if (environmentProps.canvasMargin?.top !== undefined && environmentProps.canvasMargin.bottom !== undefined) { - canvasStyle.height = 'auto'; - } - - Object.assign(canvas.style, canvasStyle); -}; - export const setupBoardStage: BoardSetupStageFunction = (board, parentElement) => { const previousWindowEnvironmentProps: IWindowEnvironmentProps = {}; const canvas = document.createElement('div'); - canvas.setAttribute('id', 'board-canvas'); - - const { environmentProps } = board; - - applyStylesToWindow(environmentProps, previousWindowEnvironmentProps); - applyStylesToCanvas(canvas, environmentProps); - callHooks(board, 'beforeAppendCanvas', canvas); parentElement.appendChild(canvas); - const updateCanvas = (canvasEnvironmentProps: ICanvasEnvironmentProps) => { - applyStylesToCanvas(canvas, canvasEnvironmentProps); - }; + canvas.setAttribute('id', 'board-canvas'); + + const { environmentProps } = board; const updateWindow = (windowEnvironmentProps: IWindowEnvironmentProps) => { applyStylesToWindow(windowEnvironmentProps, previousWindowEnvironmentProps); }; + applyStylesToWindow(environmentProps, previousWindowEnvironmentProps); + const cleanup = () => { callHooks(board, 'beforeStageCleanUp', canvas); canvas.remove(); @@ -128,5 +50,11 @@ export const setupBoardStage: BoardSetupStageFunction = (board, parentElement) = } }; - return { canvas, updateCanvas, updateWindow, cleanup }; + // backward compatibility with older versions + // of Codux that still use updateCanvas + function updateCanvas() { + return; + } + + return { canvas, updateWindow, updateCanvas, cleanup }; }; diff --git a/packages/board-core/src/types.ts b/packages/board-core/src/types.ts index 0a7ce65f..ea99df0f 100644 --- a/packages/board-core/src/types.ts +++ b/packages/board-core/src/types.ts @@ -25,15 +25,15 @@ export interface IWindowEnvironmentProps { } export interface ICanvasEnvironmentProps { - /** @visualizer spacing */ + /** @deprecated canvas cannot be edited anymore, create your own container to control the preview */ canvasWidth?: LayoutSizeWithAuto | undefined; - /** @visualizer spacing */ + /** @deprecated canvas cannot be edited anymore, create your own container to control the preview */ canvasHeight?: LayoutSizeWithAuto | undefined; - /** @visualizer color */ + /** @deprecated canvas cannot be edited anymore, create your own container to control the preview */ canvasBackgroundColor?: string | undefined; - /** @visualizer canvasMargin */ + /** @deprecated canvas cannot be edited anymore, create your own container to control the preview */ canvasMargin?: LayoutSpacing | undefined; - /** @visualizer canvasPadding */ + /** @deprecated canvas cannot be edited anymore, create your own container to control the preview */ canvasPadding?: LayoutSpacing | undefined; } @@ -158,17 +158,3 @@ export type BoardSetupStageFunction = ( updateCanvas: (canvasEnvironmentProps: ICanvasEnvironmentProps) => void; updateWindow: (windowEnvironmentProps: IWindowEnvironmentProps) => void; }; - -export type CanvasStyles = Pick< - CSSStyleDeclaration, - | 'height' - | 'width' - | 'paddingLeft' - | 'paddingRight' - | 'paddingBottom' - | 'paddingTop' - | 'marginLeft' - | 'marginRight' - | 'marginBottom' - | 'marginTop' ->; diff --git a/packages/react-board/test/setup-stage.spec.tsx b/packages/react-board/test/setup-stage.spec.tsx index d3c7eba2..a8788c52 100644 --- a/packages/react-board/test/setup-stage.spec.tsx +++ b/packages/react-board/test/setup-stage.spec.tsx @@ -16,7 +16,7 @@ describe('setupBoardStage', () => { document.body.appendChild(container); disposables.add(() => document.body.removeChild(container)); - const { canvas, cleanup, updateCanvas, updateWindow } = setupBoardStage( + const { canvas, cleanup, updateWindow } = setupBoardStage( createBoard({ name: 'Test1', Board: () => null, @@ -26,7 +26,7 @@ describe('setupBoardStage', () => { disposables.add(cleanup); - return { canvas, container, updateWindow, updateCanvas }; + return { canvas, container, updateWindow }; } it('renders the canvas into a parent element', () => { @@ -35,51 +35,6 @@ describe('setupBoardStage', () => { expect(canvas.parentElement, 'canvas was not rendered into a provided container').to.eql(container); }); - it('sets canvas height and canvas width to the provided values if no margin is provided', () => { - const { updateCanvas, canvas } = setupBoard(); - - const canvasWidth = 420; - const canvasHeight = 690; - - updateCanvas({ - canvasWidth, - canvasHeight, - }); - - expect(canvas.offsetWidth, 'canvas width was not updated').equal(canvasWidth); - expect(canvas.offsetHeight, 'canvas height was not updated').equal(canvasHeight); - }); - - it('sets canvas height to auto if a "top" and "bottom" margin is provided', () => { - const { updateCanvas, canvas } = setupBoard(); - - updateCanvas({ canvasHeight: 5, canvasMargin: { top: 5, bottom: 5 } }); - - expect(canvas?.offsetHeight, 'canvas height is not stretched when margins are applied').equal( - CONTAINER_HEIGHT - 2 * 5, - ); - }); - - it('sets canvas width to auto if "left" and "right" margin is provided', () => { - const { updateCanvas, canvas } = setupBoard(); - - updateCanvas({ canvasWidth: 5, canvasMargin: { left: 5, right: 5 } }); - - expect(canvas?.offsetWidth, 'canvas width is not stretched when margins are applied').equal( - window.innerWidth - 2 * 5, - ); - }); - - it('sets canvas background color', () => { - const { updateCanvas, canvas } = setupBoard(); - - updateCanvas({ canvasBackgroundColor: '#fff' }); - - expect(window.getComputedStyle(canvas).backgroundColor, 'canvas background color was not updated').equal( - 'rgb(255, 255, 255)', - ); - }); - it('sets window dimensions', () => { const { updateWindow } = setupBoard();