@saltcorn/builder 0.0.1-beta.1

package/src/components/Library.js

@@ -0,0 +1,224 @@
+/**
+ * @category saltcorn-builder
+ * @module components/Library
+ * @subcategory components
+ */
+
+import React, { useEffect, useContext, useState, Fragment } from "react";
+import { useEditor, useNode } from "@craftjs/core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
+import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
+import faIcons from "./elements/faicons";
+import { craftToSaltcorn, layoutToNodes } from "./storage";
+import optionsCtx from "./context";
+import { WrapElem } from "./Toolbox";
+
+/**
+ * 
+ * @param {object[]} xs 
+ * @returns {object[]}
+ */
+const twoByTwos = (xs) => {
+  if (xs.length <= 2) return [xs];
+  const [x, y, ...rest] = xs;
+  return [[x, y], ...twoByTwos(rest)];
+};
+
+export /**
+ * @param {object} props
+ * @param {*} props.name
+ * @param {*} props.layout
+ * @returns {Fraggment}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const LibraryElem = ({ name, layout }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <Fragment>
+      <span
+        className={selected ? "selected-node" : ""}
+        ref={(dom) => connect(drag(dom))}
+      >
+        LibElem
+      </span>
+      <br />
+    </Fragment>
+  );
+};
+
+/**
+ * @type {object}
+ */
+LibraryElem.craft = {
+  displayName: "LibraryElem",
+};
+
+export /**
+ * @param {object} props
+ * @param {object} props.nodekeys
+ * @returns {object[]}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const InitNewElement = ({ nodekeys }) => {
+  const { actions, query, connectors } = useEditor((state, query) => {
+    return {};
+  });
+  const onNodesChange = (arg, arg1) => {
+    const nodes = arg.getSerializedNodes();
+    const newNodeIds = [];
+    Object.keys(nodes).forEach((id) => {
+      if (!nodekeys.current.includes(id)) {
+        newNodeIds.push(id);
+      }
+    });
+    nodekeys.current = Object.keys(nodes);
+    if (newNodeIds.length === 1) {
+      const id = newNodeIds[0];
+      const node = nodes[id];
+      if (node.displayName === "LibraryElem") {
+        const layout = node.props.layout;
+        layoutToNodes(
+          layout.layout ? layout.layout : layout,
+          query,
+          actions,
+          node.parent
+        );
+        setTimeout(() => {
+          actions.delete(id);
+        }, 0);
+      } else if (node.displayName !== "Column") {
+        actions.selectNode(id);
+      }
+    }
+  };
+  useEffect(() => {
+    const nodes = query.getSerializedNodes();
+    nodekeys.current = Object.keys(nodes);
+    actions.setOptions((options) => {
+      const oldf = options.onNodesChange(
+        (options.onNodesChange = oldf
+          ? (q) => {
+              oldf(q);
+              onNodesChange(q);
+            }
+          : onNodesChange)
+      );
+    });
+  }, []);
+
+  return [];
+};
+
+export /**
+ * @category saltcorn-builder
+ * @returns {div}
+ * @subcategory components
+ * @namespace
+ */
+const Library = () => {
+  const { actions, selected, query, connectors } = useEditor((state, query) => {
+    return {
+      selected: state.events.selected,
+    };
+  });
+  const options = useContext(optionsCtx);
+  const [adding, setAdding] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [icon, setIcon] = useState();
+  const [recent, setRecent] = useState([]);
+
+  /**
+   * @returns {void}
+   */
+  const addSelected = () => {
+    const layout = craftToSaltcorn(JSON.parse(query.serialize()), selected);
+    const data = { layout, icon, name: newName };
+    fetch(`/library/savefrombuilder`, {
+      method: "POST", // or 'PUT'
+      headers: {
+        "Content-Type": "application/json",
+        "CSRF-Token": options.csrfToken,
+      },
+      body: JSON.stringify(data),
+    });
+    setAdding(false);
+    setIcon();
+    setNewName("");
+    setRecent([...recent, data]);
+  };
+
+  const elemRows = twoByTwos([...(options.library || []), ...recent]);
+  return (
+    <div className="builder-library">
+      <div className="dropdown">
+        <button
+          className="btn btn-sm btn-secondary dropdown-toggle mt-2"
+          type="button"
+          id="dropdownMenuButton"
+          aria-haspopup="true"
+          aria-expanded="false"
+          disabled={!selected}
+          onClick={() => setAdding(!adding)}
+        >
+          <FontAwesomeIcon icon={faPlus} className="me-1" />
+          Add
+        </button>
+        <div
+          className={`dropdown-menu py-3 px-4 ${adding ? "show" : ""}`}
+          aria-labelledby="dropdownMenuButton"
+        >
+          <label>Name</label>
+          <input
+            type="text"
+            className="form-control"
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+          />
+          <br />
+          <label>Icon</label>
+          <FontIconPicker
+            className="w-100"
+            value={icon}
+            icons={faIcons}
+            onChange={setIcon}
+            isMulti={false}
+          />
+          <button className={`btn btn-primary mt-3`} onClick={addSelected}>
+            <FontAwesomeIcon icon={faPlus} className="me-1" />
+            Add
+          </button>
+          <button
+            className={`btn btn-outline-secondary ms-2 mt-3`}
+            onClick={() => setAdding(false)}
+          >
+            <FontAwesomeIcon icon={faTimes} />
+          </button>
+        </div>
+      </div>
+      <div className="card mt-2">
+        {elemRows.map((els, ix) => (
+          <div className="toolbar-row" key={ix}>
+            {els.map((l, ix) => (
+              <WrapElem
+                key={ix}
+                connectors={connectors}
+                icon={l.icon}
+                label={l.name}
+              >
+                <LibraryElem name={l.name} layout={l.layout}></LibraryElem>
+              </WrapElem>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/RenderNode.js

@@ -0,0 +1,203 @@
+/**
+ * @category saltcorn-builder
+ * @module components/RenderNode
+ * @subcategory components
+ */
+
+import { useNode, useEditor } from "@craftjs/core";
+//import { ROOT_NODE } from "@craftjs/utils";
+import React, { useEffect, useRef, useCallback, Fragment } from "react";
+import ReactDOM from "react-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCopy,
+  faUndo,
+  faRedo,
+  faTrashAlt,
+  faArrowUp,
+  faArrowsAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { recursivelyCloneToElems } from "./elements/utils";
+/* 
+Contains code copied from craft.js landing page example
+Copyright (c) 2020 Previnash Wong Sze Chuan
+*/
+
+export /**
+ * @param {object} props
+ * @param {string} props.render
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const RenderNode = ({ render }) => {
+  const { id } = useNode();
+  const { actions, query, isActive } = useEditor((state) => ({
+    isActive: state.nodes[id].events.selected,
+  }));
+
+  const {
+    isHover,
+    dom,
+    name,
+    moveable,
+    deletable,
+    connectors: { drag },
+    parent,
+  } = useNode((node) => ({
+    isHover: node.events.hovered,
+    dom: node.dom,
+    name: node.data.custom.displayName || node.data.displayName,
+    moveable: query.node(node.id).isDraggable(),
+    deletable: query.node(node.id).isDeletable(),
+    parent: node.data.parent,
+    props: node.data.props,
+  }));
+
+  const currentRef = useRef();
+
+  const getPos = useCallback((dom) => {
+    const { top, left, bottom, height, width, right } = dom
+      ? dom.getBoundingClientRect()
+      : { top: 0, left: 0, bottom: 0, right: 0, height: 0, width: 0 };
+    return {
+      top: `${top > 0 ? top : bottom}px`,
+      left: `${left}px`,
+      topn: top,
+      leftn: left,
+      height,
+      width,
+      right,
+      bottom,
+    };
+  }, []);
+
+  const scroll = useCallback(() => {
+    const { current: currentDOM } = currentRef;
+    if (!currentDOM) return;
+    const { top, left } = getPos(dom);
+    currentDOM.style.top = top;
+    currentDOM.style.left = left;
+  }, [dom, getPos]);
+
+  useEffect(() => {
+    document
+      .getElementById("builder-main-canvas")
+      .addEventListener("scroll", scroll);
+    document.addEventListener("scroll", scroll);
+
+    return () => {
+      document
+        .getElementById("builder-main-canvas")
+        .removeEventListener("scroll", scroll);
+      document.removeEventListener("scroll", scroll);
+    };
+  }, [scroll]);
+
+  /**
+   * @returns {void}
+   */
+  const duplicate = () => {
+    const {
+      data: { parent },
+    } = query.node(id).get();
+    const siblings = query.node(parent).childNodes();
+    const sibIx = siblings.findIndex((sib) => sib === id);
+    const elem = recursivelyCloneToElems(query)(id);
+    actions.addNodeTree(
+      query.parseReactElement(elem).toNodeTree(),
+      parent || "ROOT",
+      sibIx + 1
+    );
+  };
+  return (
+    <>
+      {(isActive || isHover) &&
+      id !== "ROOT" &&
+      !(name === "Column" && !isActive)
+        ? ReactDOM.createPortal(
+            <div
+              ref={currentRef}
+              className={`selected-indicator ${
+                isActive ? "activeind" : "hoverind"
+              } px-1 text-white`}
+              style={{
+                left: getPos(dom).left,
+                top: getPos(dom).top,
+                zIndex: 9999,
+              }}
+            >
+              <div className="dispname me-3">{name}</div>{" "}
+              {moveable && isActive && (
+                <button
+                  className="btn btn-link btn-builder-move p-0"
+                  ref={drag}
+                >
+                  <FontAwesomeIcon icon={faArrowsAlt} className="me-2" />
+                </button>
+              )}
+              {isActive && parent && parent !== "ROOT" ? (
+                <FontAwesomeIcon
+                  icon={faArrowUp}
+                  className="me-2"
+                  onClick={() => {
+                    actions.selectNode(parent);
+                  }}
+                />
+              ) : null}
+              {deletable && isActive
+                ? [
+                    <FontAwesomeIcon
+                      key={1}
+                      icon={faCopy}
+                      onClick={duplicate}
+                      className="me-2"
+                    />,
+                    <FontAwesomeIcon
+                      key={2}
+                      icon={faTrashAlt}
+                      className="me-2"
+                      onMouseDown={(e) => {
+                        e.stopPropagation();
+                        actions.delete(id);
+                        setTimeout(() => actions.selectNode(parent), 0);
+                      }}
+                    />,
+                  ]
+                : null}
+            </div>,
+            document.querySelector("#builder-main-canvas")
+          )
+        : null}
+      {render}
+    </>
+  );
+};
+/*
+   {moveable ? (
+                <Btn className="me-2 cursor-move" ref={drag}>
+                  <Move />
+                </Btn>
+              ) : null}
+              {id !== ROOT_NODE && (
+                <Btn
+                  className="me-2 cursor-pointer"
+                  onClick={() => {
+                    actions.selectNode(parent);
+                  }}
+                >
+                  <ArrowUp />
+                </Btn>
+              )}
+              {deletable ? (
+                <Btn
+                  className="cursor-pointer"
+                  onMouseDown={(e) => {
+                    e.stopPropagation();
+                    actions.delete(id);
+                  }}
+                >
+                  <Delete />
+                </Btn>
+              ) : null}
+*/