@lvce-editor/component-state-worker 0.2.0 → 0.3.0

package/README.md

@@ -5,3 +5,22 @@ Inspect and edit live LVCE Editor component state as JSON.
 The worker provides the component-state grid view and the
 `live-component-state:///<uid>.json` filesystem implementation used by LVCE
 Editor.
+
+## Development
+
+```sh
+npm ci
+npm run dev
+```
+
+Open `http://localhost:3000`, then run `Developer: Open Component State` from
+the command palette. Select an editable component to open its live state as a
+JSON file. Saving that file applies the new state to the running component.
+
+Run the browser tests headlessly with:
+
+```sh
+npm run build
+npm run build:static
+npm run e2e:headless
+```

package/dist/componentStateWorkerMain.js

@@ -1295,12 +1295,20 @@ const create = (uid, x, y, width, height) => {
   set(uid, state, state);
 };
 
+const cardGap = 8;
+const cardMinWidth = 180;
+const viewHorizontalPadding = 32;
+const getColumnCount = width => {
+  const availableWidth = Math.max(0, width - viewHorizontalPadding);
+  return Math.max(1, Math.floor((availableWidth + cardGap) / (cardMinWidth + cardGap)));
+};
+
 const diff2 = uid => {
   const {
     oldState,
     scheduledState
   } = get(uid);
-  return oldState.components === scheduledState.components && oldState.loaded === scheduledState.loaded ? [] : [1];
+  return oldState.components === scheduledState.components && oldState.loaded === scheduledState.loaded && getColumnCount(oldState.width) === getColumnCount(scheduledState.width) ? [] : [1];
 };
 
 const pattern = /^live-component-state:\/\/\/(\d+)\.json$/;
@@ -1365,8 +1373,9 @@ const CardStatus = 'ComponentStateCardStatus';
 const CardTitle = 'ComponentStateCardTitle';
 const CardUid = 'ComponentStateCardUid';
 const Description = 'ComponentStateDescription';
-const Grid = 'ComponentStateGrid';
 const Heading = 'ComponentStateHeading';
+const Row = 'ComponentStateRow';
+const Rows = 'ComponentStateRows';
 const View = 'ComponentStateView';
 
 const HandleClick = 1;
@@ -1413,13 +1422,27 @@ const descriptionNode = {
   className: Description,
   type: Div
 };
-const getComponentStateVirtualDom = (components, loaded) => {
+const getRows = (components, columnCount) => {
+  const rows = [];
+  for (let index = 0; index < components.length; index += columnCount) {
+    const row = components.slice(index, index + columnCount);
+    rows.push({
+      childCount: row.length,
+      className: Row,
+      type: Div
+    }, ...row.flatMap(getCard));
+  }
+  return rows;
+};
+const getComponentStateVirtualDom = (components, loaded, width) => {
   const description = loaded ? `${components.length} live components` : 'Loading live components…';
+  const columnCount = getColumnCount(width);
+  const rowCount = Math.ceil(components.length / columnCount);
   return [viewNode, headingNode, text('Live Component State'), descriptionNode, text(description), {
-    childCount: components.length,
-    className: Grid,
+    childCount: rowCount,
+    className: Rows,
     type: Div
-  }, ...components.flatMap(getCard)];
+  }, ...getRows(components, columnCount)];
 };
 
 const render2 = (uid, diffResult) => {
@@ -1430,7 +1453,7 @@ const render2 = (uid, diffResult) => {
   if (diffResult.length === 0) {
     return [];
   }
-  return [[SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded)]];
+  return [[SetDom2, uid, getComponentStateVirtualDom(newState.components, newState.loaded, newState.width)]];
 };
 
 const renderEventListeners = () => [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/component-state-worker",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Inspect and edit live LVCE component state",
   "keywords": [
     "component-state",