@lightningjs/solid - npm Package Compare versions

Comparing version 0.7.4 to 0.7.5

dist/esm/index.js

@@ -398,6 +398,9 @@ import { createSignal, createEffect, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack } from 'solid-js';
   const dimension = direction === 'row' ? 'width' : 'height';
+  const crossDimension = direction === 'row' ? 'height' : 'width';
   const marginOne = direction === 'row' ? 'marginLeft' : 'marginTop';
   const marginTwo = direction === 'row' ? 'marginRight' : 'marginBottom';
   const prop = direction === 'row' ? 'x' : 'y';
+  const crossProp = direction === 'row' ? 'y' : 'x';
   const containerSize = node[dimension] || 0;
+  const containerCrossSize = node[crossDimension] || 0;
   const itemSize = children.reduce((prev, c) => prev + (c[dimension] || 0), 0);
@@ -407,2 +410,14 @@ const gap = node.gap || 0;
   const justify = node.justifyContent || 'flexStart';
+  const align = node.alignItems;
+
+  // Only align children if container has a cross size
+  const crossAlignChild = containerCrossSize && align ? c => {
+    if (align === 'flexStart') {
+      c[crossProp] = 0;
+    } else if (align === 'center') {
+      c[crossProp] = (containerCrossSize - (c[crossDimension] || 0)) / 2;
+    } else if (align === 'flexEnd') {
+      c[crossProp] = containerCrossSize - (c[crossDimension] || 0);
+    }
+  } : c => c;
   if (justify === 'flexStart') {
@@ -413,2 +428,3 @@ let start = 0;
       start += (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+      crossAlignChild(c);
     });
@@ -423,2 +439,3 @@ }
       start -= (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+      crossAlignChild(c);
     }
@@ -431,2 +448,3 @@ }
       start += (c[dimension] || 0) + gap;
+      crossAlignChild(c);
     });
@@ -440,2 +458,3 @@ }
       start += (c[dimension] || 0) + toPad;
+      crossAlignChild(c);
     });
@@ -449,2 +468,3 @@ }
       start += (c[dimension] || 0) + toPad;
+      crossAlignChild(c);
     });
@@ -451,0 +471,0 @@ }

dist/source/core/flex.js

@@ -23,6 +23,9 @@ /*
     const dimension = direction === 'row' ? 'width' : 'height';
+    const crossDimension = direction === 'row' ? 'height' : 'width';
     const marginOne = direction === 'row' ? 'marginLeft' : 'marginTop';
     const marginTwo = direction === 'row' ? 'marginRight' : 'marginBottom';
     const prop = direction === 'row' ? 'x' : 'y';
+    const crossProp = direction === 'row' ? 'y' : 'x';
     const containerSize = node[dimension] || 0;
+    const containerCrossSize = node[crossDimension] || 0;
     const itemSize = children.reduce((prev, c) => prev + (c[dimension] || 0), 0);
@@ -32,2 +35,17 @@ const gap = node.gap || 0;
     const justify = node.justifyContent || 'flexStart';
+    const align = node.alignItems;
+    // Only align children if container has a cross size
+    const crossAlignChild = containerCrossSize && align
+        ? (c) => {
+            if (align === 'flexStart') {
+                c[crossProp] = 0;
+            }
+            else if (align === 'center') {
+                c[crossProp] = (containerCrossSize - (c[crossDimension] || 0)) / 2;
+            }
+            else if (align === 'flexEnd') {
+                c[crossProp] = containerCrossSize - (c[crossDimension] || 0);
+            }
+        }
+        : (c) => c;
     if (justify === 'flexStart') {
@@ -39,2 +57,3 @@ let start = 0;
                 (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+            crossAlignChild(c);
         });
@@ -50,2 +69,3 @@ }
                 (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+            crossAlignChild(c);
         }
@@ -58,2 +78,3 @@ }
             start += (c[dimension] || 0) + gap;
+            crossAlignChild(c);
         });
@@ -67,2 +88,3 @@ }
             start += (c[dimension] || 0) + toPad;
+            crossAlignChild(c);
         });
@@ -76,4 +98,5 @@ }
             start += (c[dimension] || 0) + toPad;
+            crossAlignChild(c);
         });
     }
 }

dist/types/intrinsicTypes.d.ts

@@ -14,2 +14,3 @@ import { type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps } from '@lightningjs/renderer';
     justifyContent?: 'flexStart' | 'flexEnd' | 'center' | 'spaceBetween' | 'spaceEvenly';
+    alignItems?: 'flexStart' | 'flexEnd' | 'center';
     marginLeft?: number;
@@ -16,0 +17,0 @@ marginRight?: number;

package.json

 {
   "name": "@lightningjs/solid",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Lightning renderer for solid universal",
@@ -5,0 +5,0 @@ "type": "module",

src/core/flex.ts

@@ -18,3 +18,3 @@ /*
 import { assertTruthy } from '@lightningjs/renderer/utils';
-import type { ElementNode } from './node/index.js';
+import type { ElementNode, SolidNode } from './node/index.js';
 
@@ -26,6 +26,9 @@ export default function (node: ElementNode) {
   const dimension = direction === 'row' ? 'width' : 'height';
+  const crossDimension = direction === 'row' ? 'height' : 'width';
   const marginOne = direction === 'row' ? 'marginLeft' : 'marginTop';
   const marginTwo = direction === 'row' ? 'marginRight' : 'marginBottom';
   const prop = direction === 'row' ? 'x' : 'y';
+  const crossProp = direction === 'row' ? 'y' : 'x';
   const containerSize = node[dimension] || 0;
+  const containerCrossSize = node[crossDimension] || 0;
   const itemSize = children.reduce((prev, c) => prev + (c[dimension] || 0), 0);
@@ -35,3 +38,18 @@ const gap = node.gap || 0;
   const justify = node.justifyContent || 'flexStart';
+  const align = node.alignItems;
 
+  // Only align children if container has a cross size
+  const crossAlignChild =
+    containerCrossSize && align
+      ? (c: SolidNode) => {
+          if (align === 'flexStart') {
+            c[crossProp] = 0;
+          } else if (align === 'center') {
+            c[crossProp] = (containerCrossSize - (c[crossDimension] || 0)) / 2;
+          } else if (align === 'flexEnd') {
+            c[crossProp] = containerCrossSize - (c[crossDimension] || 0);
+          }
+        }
+      : (c: SolidNode) => c;
+
   if (justify === 'flexStart') {
@@ -43,2 +61,3 @@ let start = 0;
         (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+      crossAlignChild(c);
     });
@@ -54,2 +73,3 @@ }
         (c[dimension] || 0) + gap + (c[marginOne] || 0) + (c[marginTwo] || 0);
+      crossAlignChild(c);
     }
@@ -62,2 +82,3 @@ }
       start += (c[dimension] || 0) + gap;
+      crossAlignChild(c);
     });
@@ -71,2 +92,3 @@ }
       start += (c[dimension] || 0) + toPad;
+      crossAlignChild(c);
     });
@@ -80,4 +102,5 @@ }
       start += (c[dimension] || 0) + toPad;
+      crossAlignChild(c);
     });
   }
 }

src/intrinsicTypes.ts

@@ -45,2 +45,3 @@ /*
     | 'spaceEvenly';
+  alignItems?: 'flexStart' | 'flexEnd' | 'center';
   marginLeft?: number;
@@ -47,0 +48,0 @@ marginRight?: number;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282511

increased by1.62%

Lines of code

4454

increased by1.5%

No dependency changes