Add support for horizontal layout

.github/workflows/ci.yml

@@ -5,6 +5,7 @@ on:
     paths:
       - 'source/src/**'
       - 'examples/src/**/*.spec.ts'
+      - 'examples/src/**/*.page.tsx'
 
 concurrency:
   group: ${{ github.workflow }}
@@ -104,6 +105,9 @@ jobs:
       - name: Execute 'npm ci' in monorepo
         run: npm ci
 
+      - name: Execute 'npm i' in www/dataserver
+        run: npm run www-dataserver:install
+
       # - name: Load cached node_modules for root
       #   id: cache-node-modules-root
       #   uses: actions/cache@v3

.github/workflows/rebuild-website.yml

@@ -49,7 +49,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
@@ -72,7 +72,7 @@ jobs:
           token: ${{ secrets.DEPLOY_GITHUB_TOKEN }}
           repository: infinite-table/infinite-www-dist
           path: infinite-www-dist
-          ref: ${{ github.ref_name}}
+          ref: master
 
       - name: Copy netlify.toml
         run: cp ./netlify.toml ./infinite-www-dist

.github/workflows/release.yml

@@ -82,7 +82,7 @@ jobs:
       - name: Push changes
         uses: './.github/actions/git-push-action'
         with:
-          branch: master
+          branch: ${{ github.ref_name }}
           github_token: ${{ secrets.DEPLOY_GITHUB_TOKEN }}
 
       # - name: Send version to slack

examples/src/index.global.css

@@ -16,8 +16,23 @@ body {
 
 body {
   background: black;
+  /* --infinite-flashing-animation-name: flashing; */
+}
+
+@keyframes flashing {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
-/* 
-.InfiniteRow--hovered {
-  background: green !important;
-} */

examples/src/pages/demos/new-perf-approach.page.tsx

@@ -40,7 +40,7 @@ export default function App() {
       </b>
     );
   };
-  const [brain] = React.useState(() => new MatrixBrain());
+  const [brain] = React.useState(() => new MatrixBrain('test'));
 
   (globalThis as any).brain = brain;
 
@@ -65,8 +65,8 @@ export default function App() {
     brain.update({
       rowHeight: 40,
       colWidth: 150,
-      width,
-      height,
+      width: width,
+      height: height,
       rows: 1500,
       cols: 4,
     });

examples/src/pages/demos/new-perf-approach2.page.tsx

@@ -39,7 +39,7 @@ export default function App() {
       </b>
     );
   };
-  const [brain] = React.useState(() => new MatrixBrain());
+  const [brain] = React.useState(() => new MatrixBrain('test'));
 
   (globalThis as any).brain = brain;