@cratis/scene.react 3.0.0 → 3.2.0

package/for_panelLayout/when_arranging_a_panel.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-import { ColumnDefinition, Dock, DockPanel, Grid, GridUnitType, HorizontalAlignment, Orientation, RowDefinition, SceneElement, StackPanel, VerticalAlignment, Visibility, WrapPanel } from '@cratis/scene.model';
+import { Canvas, ColumnDefinition, Dock, DockPanel, Grid, GridUnitType, HorizontalAlignment, Orientation, RowDefinition, SceneElement, StackPanel, VerticalAlignment, Visibility, WrapPanel } from '@cratis/scene.model';
 import { childStyle, panelStyle } from '../renderer/panelLayout';
 
 const base = {
@@ -28,6 +28,29 @@ const row = (over: Partial<RowDefinition> = {}): RowDefinition => ({ height: sta
 const column = (over: Partial<ColumnDefinition> = {}): ColumnDefinition => ({ width: star(1), minimumWidth: 0, maximumWidth: Number.POSITIVE_INFINITY, ...over });
 
 describe('when arranging a panel', () => {
+    it('should make a canvas the coordinate space its children are placed against', () => {
+        const panel: Canvas = { ...base, extent: {} };
+        panelStyle(panel)!.position!.should.equal('relative');
+    });
+
+    it('should size a canvas to its extent', () => {
+        const panel: Canvas = { ...base, extent: { width: 1280, height: 800 } };
+        const style = panelStyle(panel)!;
+        [style.width, style.height].should.have.members([1280, 800]);
+    });
+
+    it('should place a canvas child at the edges it names', () => {
+        const panel: Canvas = { ...base, extent: {} };
+        const style = childStyle(panel, child({ 'Canvas.Left': 40, 'Canvas.Top': 24 }), 0)!;
+        style.position!.should.equal('absolute');
+        [style.left, style.top].should.have.members([40, 24]);
+    });
+
+    it('should leave a canvas child that names no edge in flow', () => {
+        const panel: Canvas = { ...base, extent: {} };
+        (childStyle(panel, child(), 0) === undefined).should.be.true;
+    });
+
     it('should lay a stack panel out along its orientation', () => {
         const panel: StackPanel = { ...base, orientation: Orientation.Horizontal, spacing: 8 };
         panelStyle(panel)!.flexDirection!.should.equal('row');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.react",
-    "version": "3.0.0",
+    "version": "3.2.0",
     "description": "The React renderer implementing Scene.Engine's Renderer contract against real React/DOM.",
     "keywords": [
         "cratis",
@@ -50,12 +50,12 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "3.0.0",
-        "@cratis/scene.model": "3.0.0"
+        "@cratis/scene.engine": "3.2.0",
+        "@cratis/scene.model": "3.2.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "3.0.0",
-        "@cratis/scene.model": "3.0.0",
+        "@cratis/scene.engine": "3.2.0",
+        "@cratis/scene.model": "3.2.0",
         "@storybook/addon-links": "^10.4.1",
         "@storybook/react": "^10.4.1",
         "@storybook/react-vite": "^10.4.1",

package/renderer/panelLayout.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { CSSProperties } from 'react';
-import { isDockPanel, isGrid, isStackPanel, isWrapPanel } from '@cratis/scene.engine';
+import { isCanvas, isDockPanel, isGrid, isStackPanel, isWrapPanel } from '@cratis/scene.engine';
 import { Dock, GridUnitType, Orientation } from '@cratis/scene.model';
 import type { ColumnDefinition, GridLength, Panel, RowDefinition, SceneElement } from '@cratis/scene.model';
 
@@ -39,6 +39,16 @@ const number = (value: unknown): number | undefined => (typeof value === 'number
 
 /** The CSS that arranges a panel's own children. */
 export function panelStyle(panel: Panel): CSSProperties | undefined {
+    if (isCanvas(panel)) {
+        // Absolutely placed children need a positioned ancestor to be placed against, and the canvas is
+        // that ancestor rather than whatever happens to be above it.
+        return {
+            position: 'relative',
+            width: panel.extent?.width ?? undefined,
+            height: panel.extent?.height ?? undefined,
+        };
+    }
+
     if (isGrid(panel)) {
         return {
             display: 'grid',
@@ -77,6 +87,17 @@ export function panelStyle(panel: Panel): CSSProperties | undefined {
 export function childStyle(panel: Panel, child: SceneElement, index: number): CSSProperties | undefined {
     const properties = child.properties ?? {};
 
+    if (isCanvas(panel)) {
+        const left = number(properties['Canvas.Left']);
+        const top = number(properties['Canvas.Top']);
+        const right = number(properties['Canvas.Right']);
+        const bottom = number(properties['Canvas.Bottom']);
+        // A child that names no edge is not placed by the canvas at all, so it keeps whatever flow the
+        // renderer would otherwise have given it rather than being pinned to the origin.
+        if (left === undefined && top === undefined && right === undefined && bottom === undefined) return undefined;
+        return { position: 'absolute', left, top, right, bottom };
+    }
+
     if (isGrid(panel)) {
         const row = number(properties['Grid.Row']);
         const column = number(properties['Grid.Column']);