feat!: remove canvas style and editing capabilities

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 };
 };

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'
->;

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();