@saltcorn/builder 0.5.6-beta.3 → 0.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.5.6-beta.3",
+  "version": "0.6.0-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -16,8 +16,8 @@
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
-    "@craftjs/core": "0.1.0-beta.17",
-    "@craftjs/layers": "0.1.0-beta.17",
+    "@craftjs/core": "0.1.0-beta.20",
+    "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "^1.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
@@ -37,5 +37,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "styled-components": "^4.4.1"
   }
 }

package/src/components/Builder.js

@@ -1,4 +1,10 @@
-import React, { useEffect, useContext, useState, Fragment } from "react";
+import React, {
+  useEffect,
+  useContext,
+  useState,
+  Fragment,
+  useRef,
+} from "react";
 import { Editor, Frame, Element, Selector, useEditor } from "@craftjs/core";
 import { Text } from "./elements/Text";
 import { Field } from "./elements/Field";
@@ -29,12 +35,20 @@ import { Link } from "./elements/Link";
 import { View } from "./elements/View";
 import { Container } from "./elements/Container";
 import { Column } from "./elements/Column";
-import { Layers } from "@craftjs/layers";
-
+import { Layers } from "saltcorn-craft-layers-noeye";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCopy,
+  faUndo,
+  faRedo,
+  faTrashAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { Accordion, ErrorBoundary } from "./elements/utils";
+import { InitNewElement, Library } from "./Library";
 const { Provider } = optionsCtx;
 
 const SettingsPanel = () => {
-  const { actions, selected } = useEditor((state, query) => {
+  const { actions, selected, query } = useEditor((state, query) => {
     const currentNodeId = state.events.selected;
     let selected;
 
@@ -42,6 +56,7 @@ const SettingsPanel = () => {
       selected = {
         id: currentNodeId,
         name: state.nodes[currentNodeId].data.name,
+        parent: state.nodes[currentNodeId].data.parent,
         displayName:
           state.nodes[currentNodeId].data &&
           state.nodes[currentNodeId].data.displayName,
@@ -59,9 +74,66 @@ const SettingsPanel = () => {
       selected,
     };
   });
+
   const deleteThis = () => {
     actions.delete(selected.id);
   };
+  const otherSibling = (offset) => {
+    const siblings = query.node(selected.parent).childNodes();
+    const sibIx = siblings.findIndex((sib) => sib === selected.id);
+    return siblings[sibIx + offset];
+  };
+  const handleUserKeyPress = (event) => {
+    const { keyCode, target } = event;
+    if (target.tagName.toLowerCase() === "body" && selected) {
+      //8 backsp, 46 del
+      if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
+        deleteChildren();
+      }
+      if (keyCode === 8) {
+        //backspace
+        const prevSib = otherSibling(-1);
+        const parent = selected.parent;
+        deleteThis();
+        if (prevSib) actions.selectNode(prevSib);
+        else actions.selectNode(parent);
+      }
+      if (keyCode === 46) {
+        //del
+        const nextSib = otherSibling(1);
+        deleteThis();
+        if (nextSib) actions.selectNode(nextSib);
+      }
+      if (keyCode === 37 && selected.parent)
+        //left
+        actions.selectNode(selected.parent);
+
+      if (keyCode === 39) {
+        //right
+        if (selected.children && selected.children.length > 0) {
+          actions.selectNode(selected.children[0]);
+        }
+      }
+      if (keyCode === 38 && selected.parent) {
+        //up
+        const prevSib = otherSibling(-1);
+        if (prevSib) actions.selectNode(prevSib);
+        event.preventDefault();
+      }
+      if (keyCode === 40 && selected.parent) {
+        //down
+        const nextSib = otherSibling(1);
+        if (nextSib) actions.selectNode(nextSib);
+        event.preventDefault();
+      }
+    }
+  };
+  useEffect(() => {
+    window.addEventListener("keydown", handleUserKeyPress);
+    return () => {
+      window.removeEventListener("keydown", handleUserKeyPress);
+    };
+  }, [handleUserKeyPress]);
   const hasChildren =
     selected && selected.children && selected.children.length > 0;
   const deleteChildren = () => {
@@ -69,28 +141,67 @@ const SettingsPanel = () => {
       actions.delete(child);
     });
   };
+  const recursivelyCloneToElems = (nodeId, ix) => {
+    const {
+      data: { type, props, nodes },
+    } = query.node(nodeId).get();
+    const children = (nodes || []).map(recursivelyCloneToElems);
+    return React.createElement(
+      type,
+      { ...props, ...(typeof ix !== "undefined" ? { key: ix } : {}) },
+      children
+    );
+  };
+  const duplicate = () => {
+    const {
+      data: { parent },
+    } = query.node(selected.id).get();
+    const elem = recursivelyCloneToElems(selected.id);
+    actions.addNodeTree(
+      query.parseReactElement(elem).toNodeTree(),
+      parent || "ROOT"
+    );
+  };
   return (
-    <div className="settings-panel card mt-2">
-      <div className="card-header">
-        {selected && selected.displayName
-          ? `Settings: ${selected.displayName}`
-          : "Settings"}
+    <div className="settings-panel card mt-1">
+      <div className="card-header px-2 py-1">
+        {selected && selected.displayName ? (
+          <Fragment>
+            <b>{selected.displayName}</b> settings
+          </Fragment>
+        ) : (
+          "Settings"
+        )}
       </div>
       <div className="card-body p-2">
         {selected ? (
           <Fragment>
-            {}
-            {selected.settings && React.createElement(selected.settings)}
             {selected.isDeletable && (
-              <button className="btn btn-danger mt-2" onClick={deleteThis}>
+              <button className="btn btn-sm btn-danger" onClick={deleteThis}>
+                <FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
                 Delete
               </button>
             )}
-            {hasChildren && !selected.isDeletable && (
-              <button className="btn btn-danger mt-2" onClick={deleteChildren}>
+            {hasChildren && !selected.isDeletable ? (
+              <button
+                className="btn btn-sm btn-danger"
+                onClick={deleteChildren}
+              >
+                <FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
                 Delete contents
               </button>
+            ) : (
+              <button
+                title="Duplicate element with its children"
+                className="btn btn-sm btn-secondary ml-2"
+                onClick={duplicate}
+              >
+                <FontAwesomeIcon icon={faCopy} className="mr-1" />
+                Clone
+              </button>
             )}
+            <hr className="my-2" />
+            {selected.settings && React.createElement(selected.settings)}
           </Fragment>
         ) : (
           "No element selected"
@@ -130,19 +241,47 @@ const ViewPageLink = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
   return options.page_id ? (
-    <a
-      target="_blank"
-      className="d-block mt-2"
-      href={`/page/${options.page_name}`}
-    >
+    <a target="_blank" className="ml-3" href={`/page/${options.page_name}`}>
       View page
     </a>
   ) : (
     ""
   );
 };
+const HistoryPanel = () => {
+  const { canUndo, canRedo, actions } = useEditor((state, query) => ({
+    canUndo: query.history.canUndo(),
+    canRedo: query.history.canRedo(),
+  }));
+
+  return (
+    <div className="mt-2">
+      {canUndo && (
+        <button
+          className="btn btn-sm btn-secondary mr-2"
+          title="Undo"
+          onClick={() => actions.history.undo()}
+        >
+          <FontAwesomeIcon icon={faUndo} />
+        </button>
+      )}
+      {canRedo && (
+        <button
+          className="btn btn-sm btn-secondary"
+          title="Redo"
+          onClick={() => actions.history.redo()}
+        >
+          <FontAwesomeIcon icon={faRedo} />
+        </button>
+      )}
+    </div>
+  );
+};
+
 const NextButton = ({ layout }) => {
   const { query, actions } = useEditor(() => {});
+  const options = useContext(optionsCtx);
+
   useEffect(() => {
     layoutToNodes(layout, query, actions);
   }, []);
@@ -158,7 +297,7 @@ const NextButton = ({ layout }) => {
   };
   return (
     <button className="btn btn-primary builder-save" onClick={onClick}>
-      Next &raquo;
+      {options.next_button_label || "Next"} &raquo;
     </button>
   );
 };
@@ -166,83 +305,88 @@ const NextButton = ({ layout }) => {
 const Builder = ({ options, layout, mode }) => {
   const [showLayers, setShowLayers] = useState(true);
   const [previews, setPreviews] = useState({});
+  const nodekeys = useRef([]);
 
   return (
-    <Editor>
-      <Provider value={options}>
-        <PreviewCtx.Provider value={{ previews, setPreviews }}>
-          <div className="row">
-            <div className="col-sm-auto">
-              <div className="card">
-                {{
-                  show: <ToolboxShow />,
-                  edit: <ToolboxEdit />,
-                  page: <ToolboxPage />,
-                  filter: <ToolboxFilter />,
-                }[mode] || <div>Missing mode</div>}
-              </div>
-            </div>
-            <div id="builder-main-canvas" className="col">
-              <div>
-                <Frame
-                  resolver={{
-                    Text,
-                    Empty,
-                    Columns,
-                    JoinField,
-                    Field,
-                    ViewLink,
-                    Action,
-                    HTMLCode,
-                    LineBreak,
-                    Aggregation,
-                    Card,
-                    Image,
-                    Link,
-                    View,
-                    SearchBar,
-                    Container,
-                    Column,
-                    DropDownFilter,
-                    Tabs,
-                    ToggleFilter,
-                  }}
-                >
-                  <Element canvas is={Column}></Element>
-                </Frame>
-              </div>
-            </div>
-            <div className="col-sm-auto builder-sidebar">
-              <div style={{ width: "16rem" }}>
-                <div className="card">
-                  <div className="card-header">
-                    Layers
-                    <div className="float-right">
-                      <input
-                        type="checkbox"
-                        checked={showLayers}
-                        onChange={(e) => setShowLayers(e.target.checked)}
-                      />
+    <ErrorBoundary>
+      <Editor>
+        <Provider value={options}>
+          <PreviewCtx.Provider value={{ previews, setPreviews }}>
+            <div className="row" style={{ marginTop: "-5px" }}>
+              <div className="col-sm-auto">
+                <div className="componets-and-library-accordion toolbox-card">
+                  <InitNewElement nodekeys={nodekeys} />
+                  <Accordion>
+                    <div className="card mt-1" accordiontitle="Components">
+                      {{
+                        show: <ToolboxShow />,
+                        edit: <ToolboxEdit />,
+                        page: <ToolboxPage />,
+                        filter: <ToolboxFilter />,
+                      }[mode] || <div>Missing mode</div>}
                     </div>
-                  </div>
+                    <div accordiontitle="Library">
+                      <Library />
+                    </div>
+                  </Accordion>
+                </div>
+                <div className="card toolbox-card">
+                  <div className="card-header">Layers</div>
                   {showLayers && (
                     <div className="card-body p-0 builder-layers">
                       <Layers expandRootOnLoad={true} />
                     </div>
                   )}
                 </div>
-                <SettingsPanel />
-                <br />
-                <SaveButton />
-                <NextButton layout={layout} />
-                <ViewPageLink />
+              </div>
+              <div
+                id="builder-main-canvas"
+                className={`col builder-mode-${options.mode}`}
+              >
+                <div>
+                  <Frame
+                    resolver={{
+                      Text,
+                      Empty,
+                      Columns,
+                      JoinField,
+                      Field,
+                      ViewLink,
+                      Action,
+                      HTMLCode,
+                      LineBreak,
+                      Aggregation,
+                      Card,
+                      Image,
+                      Link,
+                      View,
+                      SearchBar,
+                      Container,
+                      Column,
+                      DropDownFilter,
+                      Tabs,
+                      ToggleFilter,
+                    }}
+                  >
+                    <Element canvas is={Column}></Element>
+                  </Frame>
+                </div>
+              </div>
+              <div className="col-sm-auto builder-sidebar">
+                <div style={{ width: "16rem" }}>
+                  <SaveButton />
+                  <NextButton layout={layout} />
+                  <ViewPageLink />
+                  <HistoryPanel />
+                  <SettingsPanel />
+                </div>
               </div>
             </div>
-          </div>
-        </PreviewCtx.Provider>
-      </Provider>
-      <div className="d-none preview-scratchpad"></div>
-    </Editor>
+          </PreviewCtx.Provider>
+        </Provider>
+        <div className="d-none preview-scratchpad"></div>
+      </Editor>
+    </ErrorBoundary>
   );
 };
 

package/src/components/Library.js

@@ -0,0 +1,184 @@
+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";
+
+const twoByTwos = (xs) => {
+  if (xs.length <= 2) return [xs];
+  const [x, y, ...rest] = xs;
+  return [[x, y], ...twoByTwos(rest)];
+};
+
+export 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>
+  );
+};
+
+LibraryElem.craft = {
+  displayName: "LibraryElem",
+};
+
+export 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 {
+        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 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([]);
+
+  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="mr-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="mr-1" />
+            Add
+          </button>
+          <button
+            className={`btn btn-outline-secondary ml-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>
+  );
+};