@cratis/scene.react 2.0.0 → 3.1.0

package/dist/esm/renderer/panelLayout.js

@@ -0,0 +1,105 @@
+import { isGrid, isDockPanel, isWrapPanel, isStackPanel } from '@cratis/scene.engine';
+import { Dock, Orientation, GridUnitType } from '@cratis/scene.model';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Turns a panel into the CSS that arranges it, and a child into the CSS that places it inside one.
+ *
+ * The panels say what an arrangement *is*; this says what it looks like on the web. A second renderer -
+ * native, desktop - answers the same question with its own platform's layout primitives, which is why
+ * this lives in `Scene.React` rather than in the model or the engine.
+ *
+ * Where a panel needs to say something about an individual child - which grid cell, which edge - it does
+ * so through that child's own `properties` bag, because the model has no attached properties of its own.
+ * The keys are the ones the model's documentation names: `Grid.Row`, `Grid.Column`, `Grid.RowSpan`,
+ * `Grid.ColumnSpan` and `Dock`.
+ */ const track = (length)=>{
+    switch(length.unitType){
+        case GridUnitType.Auto:
+            return 'auto';
+        case GridUnitType.Absolute:
+            return `${length.value}px`;
+        case GridUnitType.Star:
+            return `${length.value}fr`;
+    }
+};
+const bound = (minimum, maximum, size)=>minimum === 0 && !Number.isFinite(maximum) ? size : `minmax(${minimum}px, ${Number.isFinite(maximum) ? `${maximum}px` : size})`;
+const rowTrack = (row)=>bound(row.minimumHeight, row.maximumHeight, track(row.height));
+const columnTrack = (column)=>bound(column.minimumWidth, column.maximumWidth, track(column.width));
+const number = (value)=>typeof value === 'number' ? value : undefined;
+/** The CSS that arranges a panel's own children. */ function panelStyle(panel) {
+    if (isGrid(panel)) {
+        return {
+            display: 'grid',
+            gridTemplateRows: panel.rows.map(rowTrack).join(' ') || undefined,
+            gridTemplateColumns: panel.columns.map(columnTrack).join(' ') || undefined
+        };
+    }
+    if (isDockPanel(panel)) {
+        // Docking has no single CSS primitive. A column of rows with a middle that grows is the shape a
+        // dock panel actually produces, and `lastChildFill` decides whether the final child is that
+        // middle or just another docked edge.
+        return {
+            display: 'flex',
+            flexDirection: 'column'
+        };
+    }
+    if (isStackPanel(panel)) {
+        return {
+            display: 'flex',
+            flexDirection: panel.orientation === Orientation.Horizontal ? 'row' : 'column',
+            gap: panel.spacing ? `${panel.spacing}px` : undefined
+        };
+    }
+    if (isWrapPanel(panel)) {
+        return {
+            display: 'flex',
+            flexWrap: 'wrap',
+            flexDirection: panel.orientation === Orientation.Horizontal ? 'row' : 'column'
+        };
+    }
+    return undefined;
+}
+/** The CSS that places one child within its panel, or `undefined` when the panel places children implicitly. */ function childStyle(panel, child, index) {
+    const properties = child.properties ?? {};
+    if (isGrid(panel)) {
+        const row = number(properties['Grid.Row']);
+        const column = number(properties['Grid.Column']);
+        const rowSpan = number(properties['Grid.RowSpan']) ?? 1;
+        const columnSpan = number(properties['Grid.ColumnSpan']) ?? 1;
+        if (row === undefined && column === undefined) return undefined;
+        return {
+            gridRow: row === undefined ? undefined : `${row + 1} / span ${rowSpan}`,
+            gridColumn: column === undefined ? undefined : `${column + 1} / span ${columnSpan}`
+        };
+    }
+    if (isDockPanel(panel)) {
+        const dock = properties['Dock'];
+        const isFill = panel.lastChildFill && index === (panel.children?.length ?? 0) - 1;
+        if (isFill) return {
+            flex: '1 1 auto',
+            minHeight: 0
+        };
+        // Left and right dock along the cross axis of the column the panel lays out, so they become a row
+        // of their own rather than a sibling in the column.
+        return dock === Dock.Left || dock === Dock.Right ? {
+            alignSelf: dock === Dock.Left ? 'flex-start' : 'flex-end',
+            flex: '0 0 auto'
+        } : {
+            flex: '0 0 auto'
+        };
+    }
+    if (isWrapPanel(panel)) {
+        if (panel.itemWidth === undefined && panel.itemHeight === undefined) return undefined;
+        return {
+            width: panel.itemWidth,
+            height: panel.itemHeight,
+            flex: '0 0 auto'
+        };
+    }
+    return undefined;
+}
+
+export { childStyle, panelStyle };
+//# sourceMappingURL=panelLayout.js.map

package/dist/esm/renderer/panelLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelLayout.js","sources":["../../../renderer/panelLayout.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport type { CSSProperties } from 'react';\nimport { isDockPanel, isGrid, isStackPanel, isWrapPanel } from '@cratis/scene.engine';\nimport { Dock, GridUnitType, Orientation } from '@cratis/scene.model';\nimport type { ColumnDefinition, GridLength, Panel, RowDefinition, SceneElement } from '@cratis/scene.model';\n\n/**\n * Turns a panel into the CSS that arranges it, and a child into the CSS that places it inside one.\n *\n * The panels say what an arrangement *is*; this says what it looks like on the web. A second renderer -\n * native, desktop - answers the same question with its own platform's layout primitives, which is why\n * this lives in `Scene.React` rather than in the model or the engine.\n *\n * Where a panel needs to say something about an individual child - which grid cell, which edge - it does\n * so through that child's own `properties` bag, because the model has no attached properties of its own.\n * The keys are the ones the model's documentation names: `Grid.Row`, `Grid.Column`, `Grid.RowSpan`,\n * `Grid.ColumnSpan` and `Dock`.\n */\n\nconst track = (length: GridLength): string => {\n    switch (length.unitType) {\n        case GridUnitType.Auto: return 'auto';\n        case GridUnitType.Absolute: return `${length.value}px`;\n        case GridUnitType.Star: return `${length.value}fr`;\n    }\n};\n\nconst bound = (minimum: number, maximum: number, size: string): string =>\n    minimum === 0 && !Number.isFinite(maximum)\n        ? size\n        : `minmax(${minimum}px, ${Number.isFinite(maximum) ? `${maximum}px` : size})`;\n\nconst rowTrack = (row: RowDefinition): string => bound(row.minimumHeight, row.maximumHeight, track(row.height));\nconst columnTrack = (column: ColumnDefinition): string => bound(column.minimumWidth, column.maximumWidth, track(column.width));\n\nconst number = (value: unknown): number | undefined => (typeof value === 'number' ? value : undefined);\n\n/** The CSS that arranges a panel's own children. */\nexport function panelStyle(panel: Panel): CSSProperties | undefined {\n    if (isGrid(panel)) {\n        return {\n            display: 'grid',\n            gridTemplateRows: panel.rows.map(rowTrack).join(' ') || undefined,\n            gridTemplateColumns: panel.columns.map(columnTrack).join(' ') || undefined,\n        };\n    }\n\n    if (isDockPanel(panel)) {\n        // Docking has no single CSS primitive. A column of rows with a middle that grows is the shape a\n        // dock panel actually produces, and `lastChildFill` decides whether the final child is that\n        // middle or just another docked edge.\n        return { display: 'flex', flexDirection: 'column' };\n    }\n\n    if (isStackPanel(panel)) {\n        return {\n            display: 'flex',\n            flexDirection: panel.orientation === Orientation.Horizontal ? 'row' : 'column',\n            gap: panel.spacing ? `${panel.spacing}px` : undefined,\n        };\n    }\n\n    if (isWrapPanel(panel)) {\n        return {\n            display: 'flex',\n            flexWrap: 'wrap',\n            flexDirection: panel.orientation === Orientation.Horizontal ? 'row' : 'column',\n        };\n    }\n\n    return undefined;\n}\n\n/** The CSS that places one child within its panel, or `undefined` when the panel places children implicitly. */\nexport function childStyle(panel: Panel, child: SceneElement, index: number): CSSProperties | undefined {\n    const properties = child.properties ?? {};\n\n    if (isGrid(panel)) {\n        const row = number(properties['Grid.Row']);\n        const column = number(properties['Grid.Column']);\n        const rowSpan = number(properties['Grid.RowSpan']) ?? 1;\n        const columnSpan = number(properties['Grid.ColumnSpan']) ?? 1;\n        if (row === undefined && column === undefined) return undefined;\n        return {\n            gridRow: row === undefined ? undefined : `${row + 1} / span ${rowSpan}`,\n            gridColumn: column === undefined ? undefined : `${column + 1} / span ${columnSpan}`,\n        };\n    }\n\n    if (isDockPanel(panel)) {\n        const dock = properties['Dock'] as Dock | undefined;\n        const isFill = panel.lastChildFill && index === (panel.children?.length ?? 0) - 1;\n        if (isFill) return { flex: '1 1 auto', minHeight: 0 };\n        // Left and right dock along the cross axis of the column the panel lays out, so they become a row\n        // of their own rather than a sibling in the column.\n        return dock === Dock.Left || dock === Dock.Right\n            ? { alignSelf: dock === Dock.Left ? 'flex-start' : 'flex-end', flex: '0 0 auto' }\n            : { flex: '0 0 auto' };\n    }\n\n    if (isWrapPanel(panel)) {\n        if (panel.itemWidth === undefined && panel.itemHeight === undefined) return undefined;\n        return { width: panel.itemWidth, height: panel.itemHeight, flex: '0 0 auto' };\n    }\n\n    return undefined;\n}\n"],"names":["track","length","unitType","GridUnitType","Auto","Absolute","value","Star","bound","minimum","maximum","size","Number","isFinite","rowTrack","row","minimumHeight","maximumHeight","height","columnTrack","column","minimumWidth","maximumWidth","width","number","undefined","panelStyle","panel","isGrid","display","gridTemplateRows","rows","map","join","gridTemplateColumns","columns","isDockPanel","flexDirection","isStackPanel","orientation","Orientation","Horizontal","gap","spacing","isWrapPanel","flexWrap","childStyle","child","index","properties","rowSpan","columnSpan","gridRow","gridColumn","dock","isFill","lastChildFill","children","flex","minHeight","Dock","Left","Right","alignSelf","itemWidth","itemHeight"],"mappings":"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"}