@saltcorn/builder 1.7.0-alpha.1 → 1.7.0-beta.1

package/src/components/RenderNode.js

@@ -57,6 +57,7 @@ const RenderNode = ({ render }) => {
   }));
 
   const currentRef = useRef();
+  const borderRef = useRef();
 
   const getZoomFactor = useCallback(() => {
     const bw = document.body.offsetWidth;
@@ -65,11 +66,30 @@ const RenderNode = ({ render }) => {
     return factor || 1;
   }, []);
 
+  // a display:contents element (e.g. the LibraryInstance boundary) has no
+  // box of its own, so getBoundingClientRect() on it is all zeros - fall
+  // back to the union of its children's boxes so selection still has
+  // something real to draw a border around
+  const getRect = (dom) => {
+    if (!dom) return { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
+    const rect = dom.getBoundingClientRect();
+    if (rect.width || rect.height) return rect;
+    const childRects = Array.from(dom.children || []).map(getRect);
+    if (!childRects.length) return rect;
+    const top = Math.min(...childRects.map((r) => r.top));
+    const left = Math.min(...childRects.map((r) => r.left));
+    const bottom = Math.max(...childRects.map((r) => r.bottom));
+    const right = Math.max(...childRects.map((r) => r.right));
+    return { top, left, bottom, right, width: right - left, height: bottom - top };
+  };
+
   const getPos = useCallback((dom) => {
     const zoom = getZoomFactor();
-    const { top, left, bottom, height, width, right } = dom
-      ? dom.getBoundingClientRect()
-      : { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
+    const ownRect = dom?.getBoundingClientRect();
+    const hasOwnBox = !!(ownRect && (ownRect.width || ownRect.height));
+    const { top, left, bottom, height, width, right } = hasOwnBox
+      ? ownRect
+      : getRect(dom);
     const topAdj = (top > 0 ? top : bottom) / zoom;
     const leftAdj = left / zoom;
     const rightPos = window.innerWidth / zoom - right / zoom;
@@ -83,21 +103,23 @@ const RenderNode = ({ render }) => {
       height: height / zoom,
       width: width / zoom,
       bottom: bottom / zoom,
+      hasOwnBox,
     };
   }, [getZoomFactor]);
 
   const scroll = useCallback(() => {
-    const { current: currentDOM } = currentRef;
-    if (!currentDOM) return;
     const pos = getPos(dom);
-    currentDOM.style.top = pos.top;
-    if (options.isRTL) {
-      currentDOM.style.right = pos.right;
-      currentDOM.style.left = 'auto';
-    } else {
-      currentDOM.style.left = pos.left;
-      currentDOM.style.right = 'auto';
-    }
+    [currentRef.current, borderRef.current].forEach((el) => {
+      if (!el) return;
+      el.style.top = pos.top;
+      if (options.isRTL) {
+        el.style.right = pos.right;
+        el.style.left = "auto";
+      } else {
+        el.style.left = pos.left;
+        el.style.right = "auto";
+      }
+    });
   }, [dom, getPos, options.isRTL]);
 
   const hiddenColumnParents = new Set(["Card", "Container", "Table", "DropMenu"]);
@@ -212,6 +234,24 @@ const RenderNode = ({ render }) => {
             document.querySelector("#builder-main-canvas")
           )
         : null}
+      {isActive && id !== "ROOT" && !getPos(dom).hasOwnBox
+        ? ReactDOM.createPortal(
+            <div
+              ref={borderRef}
+              className="selected-indicator-border"
+              style={{
+                ...(options.isRTL
+                  ? { right: getPos(dom).right, left: "auto" }
+                  : { left: getPos(dom).left, right: "auto" }),
+                top: getPos(dom).top,
+                width: getPos(dom).width,
+                height: getPos(dom).height,
+                zIndex: 1028,
+              }}
+            />,
+            document.querySelector("#builder-main-canvas")
+          )
+        : null}
       {render}
     </>
   );

package/src/components/Toolbox.js

@@ -27,6 +27,8 @@ import { Container } from "./elements/Container";
 import { Image } from "./elements/Image";
 import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
+import { MessageList } from "./elements/MessageList";
+import { MessageForm } from "./elements/MessageForm";
 import { Link } from "./elements/Link";
 import { Page } from "./elements/Page";
 import { Prompt } from "./elements/Prompt";
@@ -866,6 +868,48 @@ const ToolboxEdit = ({ expanded }) => {
   );
 };
 
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const MessageListElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-comments"
+      title={t("The list of messages in the room")}
+      label="Messages"
+    >
+      <Element canvas is={MessageList}></Element>
+    </WrapElem>
+  );
+};
+/**
+ * @param {object} props
+ * @param {object} props.connectors
+ * @returns {WrapElem}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const MessageFormElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-paper-plane"
+      title={t("The form for sending a new message")}
+      label="Send"
+    >
+      <Element canvas is={MessageForm}></Element>
+    </WrapElem>
+  );
+};
 export /**
  * @returns {Fragment}
  * @category saltcorn-builder
@@ -901,3 +945,33 @@ const ToolboxPage = ({ expanded }) => {
     expanded
   );
 };
+
+export /**
+ * @returns {Fragment}
+ * @category saltcorn-builder
+ * @subcategory components / Toolbox
+ * @namespace
+ */
+const ToolboxRoom = ({ expanded }) => {
+  const { connectors } = useEditor();
+  const options = useContext(optionsCtx);
+  const { views, images, pages } = options;
+  return chunkToolBox(
+    [
+      <MessageListElem connectors={connectors} />,
+      <MessageFormElem connectors={connectors} />,
+      <TextElem connectors={connectors} />,
+      <ColumnsElem connectors={connectors} />,
+      <LineBreakElem connectors={connectors} />,
+      <ContainerElem connectors={connectors} />,
+      <CardElem connectors={connectors} />,
+      <TabsElem connectors={connectors} />,
+      <LinkElem connectors={connectors} />,
+      <ViewElem connectors={connectors} views={views} />,
+      <ImageElem connectors={connectors} images={images} />,
+      <HTMLElem connectors={connectors} />,
+      <PageElem connectors={connectors} pages={pages} />,
+    ],
+    expanded
+  );
+};

package/src/components/elements/LibraryInstance.js

@@ -0,0 +1,83 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/LibraryInstance
+ * @subcategory components / elements
+ */
+
+import React from "react";
+import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
+
+// A placed copy of a shared Library component - edits here save back to the
+// shared component, so every other page using it updates too.
+export /**
+ * @param {object} props
+ * @param {*} props.children
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibraryInstance = ({ children }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+
+  // a real box (not display:contents) so drops can actually be targeted
+  // inside it - display:contents has no geometry, so the builder's own
+  // drop-position hit-testing skips straight past it to its parent
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`library-instance ${selected ? "selected-node" : ""}`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibraryInstanceSettings = () => {
+  const { library_name } = useNode((node) => ({
+    library_name: node.data.props.library_name,
+  }));
+  const { t } = useTranslation();
+  return (
+    <div>
+      <p>
+        {t("Shared component")}: <strong>{library_name}</strong>
+      </p>
+      <small className="text-muted d-block">
+        {t(
+          "Editing its contents changes every page and view that uses it."
+        )}
+      </small>
+    </div>
+  );
+};
+
+/**
+ * @type {object}
+ */
+LibraryInstance.craft = {
+  displayName: "LibraryInstance",
+  // declared here rather than relying on every caller to wrap it in
+  // <Element canvas> - some (eg Library.js's addSelected) create it bare
+  isCanvas: true,
+  props: {
+    library_id: undefined,
+    library_name: "",
+  },
+  rules: {
+    canDrag: () => true,
+  },
+  related: {
+    settings: LibraryInstanceSettings,
+  },
+};

package/src/components/elements/LibrarySlotInstance.js

@@ -0,0 +1,214 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/LibrarySlotInstance
+ * @subcategory components / elements
+ */
+
+import React, { useContext } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import useTranslation from "../../hooks/useTranslation";
+
+export /**
+ * A placeholder inside a shared Library component - each placement fills it
+ * independently (picks a field to render, or drops its own content in),
+ * without touching the shared component itself.
+ * @param {object} props
+ * @param {string} props.kind
+ * @param {string} props.slot_name
+ * @param {string} props.field
+ * @param {string} props.fieldview
+ * @param {*} props.children
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibrarySlotInstance = ({ kind, slot_name, field, fieldview, children }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const { t } = useTranslation();
+  const isEmpty = Array.isArray(children) ? children.length === 0 : !children;
+
+  return (
+    <div
+      ref={(dom) => connect(drag(dom))}
+      className={`library-slot-instance ${
+        kind === "field" ? "d-inline-block" : ""
+      } ${selected ? "selected-node" : ""}`}
+    >
+      {kind === "field" ? (
+        field ? (
+          `[slot: ${fieldview || ""} ${field}]`
+        ) : (
+          `[slot: ${slot_name || "unfilled"}]`
+        )
+      ) : isEmpty ? (
+        // an empty container slot has no size of its own to drop onto - a
+        // placeholder gives it one, for both real users and drag targeting
+        <div
+          className="text-muted border border-dashed p-2"
+          style={{ minHeight: "2em" }}
+        >
+          {t("Drop content here")}
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibrarySlotInstanceSettings = () => {
+  const {
+    actions: { setProp },
+    slot_name,
+    kind,
+    field,
+    fieldview,
+  } = useNode((node) => ({
+    slot_name: node.data.props.slot_name,
+    kind: node.data.props.kind,
+    field: node.data.props.field,
+    fieldview: node.data.props.fieldview,
+  }));
+  const { t } = useTranslation();
+  const options = useContext(optionsCtx);
+  const canPickField = !!options.fields;
+  const fvs = (options.field_view_options || {})[field];
+
+  return (
+    <div>
+      <label>{t("Slot name")}</label>
+      <input
+        type="text"
+        className="slot-name form-control"
+        value={slot_name || ""}
+        onChange={(e) => {
+          if (!e.target) return;
+          const value = e.target.value;
+          setProp((prop) => (prop.slot_name = value));
+        }}
+      />
+      <label className="mt-2">{t("Kind")}</label>
+      <select
+        className="slot-kind form-control form-select"
+        value={kind}
+        onChange={(e) => {
+          if (!e.target) return;
+          const value = e.target.value;
+          setProp((prop) => (prop.kind = value));
+        }}
+      >
+        <option value="field" disabled={!canPickField}>
+          {t("Field")}
+        </option>
+        <option value="container">{t("Container")}</option>
+      </select>
+      {!canPickField && kind === "field" && (
+        <small className="text-muted d-block mt-1">
+          {t(
+            "Field slots aren't available here - this builder isn't bound to one table."
+          )}
+        </small>
+      )}
+      {kind === "field" && canPickField ? (
+        <table className="w-100 mt-2">
+          <tbody>
+            <tr>
+              <td>
+                <label>{t("Field")}</label>
+              </td>
+              <td>
+                <select
+                  className="field form-control form-select"
+                  value={field || ""}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.field = value));
+                    const newfvs = options.field_view_options[value];
+                    if (newfvs && newfvs.length > 0)
+                      setProp((prop) => (prop.fieldview = newfvs[0]));
+                  }}
+                >
+                  <option value="">{t("Choose a field")}</option>
+                  {options.fields.map((f, ix) => (
+                    <option key={ix} value={f.name}>
+                      {f.label}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+            {fvs && (
+              <tr>
+                <td>
+                  <label>{t("Field view")}</label>
+                </td>
+                <td>
+                  <select
+                    className="fieldview form-control form-select"
+                    value={fieldview || ""}
+                    onChange={(e) => {
+                      if (!e.target) return;
+                      const value = e.target.value;
+                      setProp((prop) => (prop.fieldview = value));
+                    }}
+                  >
+                    {(fvs || []).map((fvnm, ix) => (
+                      <option key={ix} value={fvnm}>
+                        {fvnm}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      ) : null}
+      {kind === "container" && (
+        <small className="text-muted d-block mt-2">
+          {t(
+            "Drop elements here - each placement of this component fills this area independently."
+          )}
+        </small>
+      )}
+    </div>
+  );
+};
+
+/**
+ * @type {object}
+ */
+LibrarySlotInstance.craft = {
+  displayName: "LibrarySlotInstance",
+  // declared here rather than relying on every caller to wrap it in
+  // <Element canvas> - Library.js's onNodesChange creates it bare
+  isCanvas: true,
+  props: {
+    slot_name: "",
+    kind: "field",
+    field: undefined,
+    fieldview: undefined,
+  },
+  rules: {
+    canDrag: () => true,
+    // a field slot has no children - it's filled via the settings panel,
+    // not by dropping elements into it
+    canMoveIn: (incoming, currentNode) =>
+      currentNode?.data?.props?.kind !== "field",
+  },
+  related: {
+    settings: LibrarySlotInstanceSettings,
+  },
+};

package/src/components/elements/MessageForm.js

@@ -0,0 +1,101 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/MessageForm
+ * @subcategory components / elements
+ */
+
+import React from "react";
+import useTranslation from "../../hooks/useTranslation";
+import { useNode } from "@craftjs/core";
+import { setAPropGen } from "./utils";
+
+export /**
+ * The form for sending a new message. Its fields come from the room's message
+ * form view, so this stands in for it on the canvas.
+ *
+ * @param {object} props
+ * @param {boolean} props.pinned
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const MessageForm = ({ pinned }) => {
+  const { t } = useTranslation();
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+
+  return (
+    <div
+      className={`sc-room-msgform-preview ${selected ? "selected-node" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <div className="input-group">
+        <input
+          type="text"
+          className="form-control bg-light"
+          placeholder={t("New message...")}
+          readOnly={true}
+        />
+        <button className="btn btn-primary" disabled>
+          {t("Send")}
+        </button>
+      </div>
+      {pinned && (
+        <div className="text-muted small">{t("Pinned below the messages")}</div>
+      )}
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const MessageFormSettings = () => {
+  const { t } = useTranslation();
+  const {
+    actions: { setProp },
+    pinned,
+  } = useNode((node) => ({ pinned: node.data.props.pinned }));
+  const setAProp = setAPropGen(setProp);
+
+  return (
+    <div>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          name="pinned"
+          type="checkbox"
+          checked={!!pinned}
+          onChange={setAProp("pinned", { checked: true })}
+        />
+        <label className="form-check-label">{t("Pin to bottom")}</label>
+      </div>
+      <small className="text-muted">
+        {t(
+          "Fix the form below the message list, which then scrolls within the room. The room takes the message list height, or fills the window down to the bottom if that is blank"
+        )}
+      </small>
+    </div>
+  );
+};
+
+/**
+ * @type {object}
+ */
+MessageForm.craft = {
+  displayName: "MessageForm",
+  props: {
+    pinned: false,
+  },
+  related: {
+    settings: MessageFormSettings,
+    segment_type: "message_form",
+    fields: [{ name: "pinned" }],
+  },
+};