@cratis/scene.react 3.1.0 → 3.3.0

package/for_ScreenplayCoreComponents/when_rendering_a_translated_screen.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { expect } from 'chai';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Control, ExternalComponent, HorizontalAlignment, VerticalAlignment, Visibility } from '@cratis/scene.model';
+import { SceneElementView } from '../SceneElementView';
+import { coreComponents } from '../core';
+
+function control(id: string): Control {
+    return {
+        id,
+        name: id,
+        properties: {},
+        visibility: Visibility.Visible,
+        isEnabled: true,
+        opacity: 1,
+        size: {},
+        zIndex: 0,
+        minimumSize: {},
+        maximumSize: {},
+        margin: { left: 0, top: 0, right: 0, bottom: 0 },
+        horizontalAlignment: HorizontalAlignment.Stretch,
+        verticalAlignment: VerticalAlignment.Stretch,
+        borderThickness: { left: 0, top: 0, right: 0, bottom: 0 },
+        padding: { left: 0, top: 0, right: 0, bottom: 0 },
+        tabIndex: 0,
+    };
+}
+
+const component = (
+    id: string,
+    componentName: string,
+    properties: Record<string, unknown> = {},
+    slots: Record<string, ExternalComponent[]> = {},
+): ExternalComponent => ({ ...control(id), componentName, properties, slots });
+
+describe('when rendering a translated Screenplay screen', () => {
+    const title = component('title', 'core:title', { text: 'Invoices' });
+    const action = component('create', 'core:action', { command: 'CreateInvoice', label: 'Create invoice' });
+    const section = component('section', 'core:section', { name: 'Open invoices' }, { content: [title, action] });
+
+    beforeEach(() => {
+        render(<SceneElementView element={section} registry={coreComponents} resolveBinding={() => undefined} />);
+    });
+
+    it('should render the section heading', () => expect(screen.getByRole('heading', { name: 'Open invoices' })).to.exist);
+    it('should render the translated title', () => expect(screen.getByRole('heading', { name: 'Invoices' })).to.exist);
+    it('should render the modeled action', () => expect(screen.getByRole('button', { name: 'Create invoice' })).to.exist);
+
+    it('should announce the modeled command to the host', () => {
+        let command = '';
+        const listener = (event: Event) => { command = (event as CustomEvent).detail.command; };
+        globalThis.addEventListener('cratis.scene.command', listener, { once: true });
+
+        fireEvent.click(screen.getByRole('button', { name: 'Create invoice' }));
+
+        command.should.equal('CreateInvoice');
+    });
+});

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.1.0",
+    "version": "3.3.0",
     "description": "The React renderer implementing Scene.Engine's Renderer contract against real React/DOM.",
     "keywords": [
         "cratis",
@@ -50,18 +50,18 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "3.1.0",
-        "@cratis/scene.model": "3.1.0"
+        "@cratis/scene.engine": "3.3.0",
+        "@cratis/scene.model": "3.3.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "3.1.0",
-        "@cratis/scene.model": "3.1.0",
-        "@storybook/addon-links": "^10.4.1",
-        "@storybook/react": "^10.4.1",
-        "@storybook/react-vite": "^10.4.1",
-        "react": "^19.2.6",
-        "react-dom": "^19.2.6",
-        "storybook": "^10.4.1"
+        "@cratis/scene.engine": "3.3.0",
+        "@cratis/scene.model": "3.3.0",
+        "@storybook/addon-links": "^10.6.0",
+        "@storybook/react": "^10.6.0",
+        "@storybook/react-vite": "^10.6.0",
+        "react": "^19.3.0",
+        "react-dom": "^19.3.0",
+        "storybook": "^10.6.0"
     },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",

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