@saltcorn/builder 1.1.0-beta.0 → 1.1.0-beta.2

package/dist/builder_bundle.js.LICENSE.txt

@@ -0,0 +1,96 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/*!*
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.1.0-beta.0",
+    "@saltcorn/common-code": "1.1.0-beta.2",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Builder.js

@@ -60,15 +60,13 @@ import {
   faCaretSquareLeft,
   faCaretSquareRight,
 } from "@fortawesome/free-regular-svg-icons";
-import {
-  Accordion,
-  ErrorBoundary,
-  recursivelyCloneToElems,
-} from "./elements/utils";
+import { Accordion, ErrorBoundary } from "./elements/utils";
 import { InitNewElement, Library } from "./Library";
 import { RenderNode } from "./RenderNode";
 import { ListColumn } from "./elements/ListColumn";
 import { ListColumns } from "./elements/ListColumns";
+import { recursivelyCloneToElems } from "./elements/Clone";
+
 const { Provider } = optionsCtx;
 
 /**
@@ -208,6 +206,7 @@ const SettingsPanel = () => {
       sibIx + 1
     );
   };
+  
   return (
     <div className="settings-panel card mt-1">
       <div className="card-header px-2 py-1">

package/src/components/Library.js

@@ -142,6 +142,11 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
         }
       });
   };
+  useEffect(() => {
+    window.addEventListener("beforeunload", () => doSave(query));
+    window.addEventListener("blur", () => doSave(query));
+    window.addEventListener("pagehide", () => doSave(query));
+  }, []);
   const throttledSave = useThrottle(() => {
     doSave(query);
   });

package/src/components/RenderNode.js

@@ -17,7 +17,7 @@ import {
   faArrowUp,
   faArrowsAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import { recursivelyCloneToElems } from "./elements/utils";
+import { recursivelyCloneToElems } from "./elements/Clone";
 /* 
 Contains code copied from craft.js landing page example
 Copyright (c) 2020 Previnash Wong Sze Chuan

package/src/components/elements/Clone.js

@@ -0,0 +1,57 @@
+import React, { Fragment, useState, useEffect } from "react";
+import { ListColumn } from "./ListColumn";
+import { Columns, ntimes } from "./Columns";
+import { rand_ident } from "./utils";
+import { Element } from "@craftjs/core";
+
+export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
+  const { data } = query.node(nodeId).get();
+  const { type, props, nodes } = data;
+  const newProps = { ...props };
+  if (newProps.rndid) {
+    newProps.rndid = rand_ident();
+  }
+
+  // console.log("cloning", data.displayName, data.linkedNodes["listcol"]);
+
+  const children = (nodes || []).map(recursivelyCloneToElems(query));
+  if (data.displayName === "Columns") {
+    const cols = ntimes(data.props.ncols, (ix) =>
+      recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
+    );
+    return React.createElement(Columns, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: cols,
+    });
+  }
+
+  if (data.displayName === "ListColumn") {
+    const col = recursivelyCloneToElems(query)(data.linkedNodes["listcol"]);
+
+    return React.createElement(ListColumn, {
+      ...newProps,
+      contents: col,
+    });
+  }
+
+  if (data.isCanvas)
+    return React.createElement(
+      Element,
+      {
+        ...newProps,
+        canvas: true,
+        is: type,
+        ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      },
+      children
+    );
+  return React.createElement(
+    type,
+    {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+    },
+    children
+  );
+};

package/src/components/elements/Container.js

@@ -108,6 +108,7 @@ const Container = ({
   rotate,
   style,
   htmlElement,
+  transform,
 }) => {
   const {
     selected,
@@ -125,7 +126,7 @@ const Container = ({
       } ${selected ? "selected-node" : ""}`,
       style: {
         ...parseStyles(customCSS || ""),
-        ...reactifyStyles(style),
+        ...reactifyStyles(style, transform, rotate),
         display,
         //padding: padding.map((p) => p + "px").join(" "),
         //margin: margin.map((p) => p + "px").join(" "),
@@ -166,11 +167,6 @@ const Container = ({
               width: `${width}${widthUnit || "px"}`,
             }
           : {}),
-        ...(rotate
-          ? {
-              transform: `rotate(${rotate}deg)`,
-            }
-          : {}),
       },
     },
     children
@@ -221,6 +217,7 @@ const ContainerSettings = () => {
     rotate: node.data.props.rotate,
     display: node.data.props.display,
     style: node.data.props.style,
+    transform: node.data.props.transform,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
     click_action: node.data.props.click_action,
   }));
@@ -254,6 +251,7 @@ const ContainerSettings = () => {
     imgResponsiveWidths,
     click_action,
     style,
+    transform,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -265,6 +263,8 @@ const ContainerSettings = () => {
    * @returns {function}
    */
   const setAProp = setAPropGen(setProp);
+  //console.log("transform", transform);
+
   return (
     <Accordion>
       <div accordiontitle="Box" className="w-100">
@@ -676,6 +676,65 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
+      <table className="w-100" accordiontitle="Transform">
+        <tbody>
+          <SettingsRow
+            field={{
+              name: "rotate",
+              label: "Rotate°",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ name: "skewX", label: "SkewX°", type: "Integer" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+            valuePostfix="deg"
+          />
+          <SettingsRow
+            field={{ name: "skewY", label: "SkewY°", type: "Integer" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+            valuePostfix="deg"
+          />
+          <SettingsRow
+            field={{ name: "scaleX", label: "ScaleX", type: "Float" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{ name: "scaleY", label: "ScaleY", type: "Float" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{
+              name: "translateX",
+              label: "TranslateX",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{
+              name: "translateY",
+              label: "TranslateY",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+        </tbody>
+      </table>
       <table className="w-100" accordiontitle="Flex properties">
         <tbody>
           <SettingsSectionHeaderRow title="Flex item" />

package/src/components/elements/utils.js

@@ -21,7 +21,6 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useNode, Element } from "@craftjs/core";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import { Columns, ntimes } from "./Columns";
 import Tippy from "@tippyjs/react";
 import { RelationType } from "@saltcorn/common-code";
 import Select from "react-select";
@@ -666,7 +665,7 @@ export const parseStyles = (styles) =>
  * @param {object} styles
  * @returns {object}
  */
-export const reactifyStyles = (styles) => {
+export const reactifyStyles = (styles, transform, rotate) => {
   const toCamel = (s) => {
     return s.replace(/([-][a-z])/gi, ($1) => {
       return $1.toUpperCase().replace("-", "");
@@ -676,6 +675,17 @@ export const reactifyStyles = (styles) => {
   Object.keys(styles).forEach((k) => {
     reactified[toCamel(k)] = styles[k];
   });
+  if (transform) {
+    reactified.transform = Object.entries(transform)
+      .filter(([k, v]) => v !== "")
+      .map(([k, v]) => `${k}(${v})`)
+      .join(" ");
+  }
+  if (rotate) {
+    if (!reactified.transform) reactified.transform = `rotate(${rotate}deg)`;
+    else reactified.transform = `${reactified.transform} rotate(${rotate}deg)`;
+  }
+
   return reactified;
 };
 
@@ -831,6 +841,8 @@ const ConfigField = ({
   props,
   setter,
   isStyle,
+  subProp,
+  valuePostfix,
 }) => {
   /**
    * @param {object} v
@@ -838,7 +850,8 @@ const ConfigField = ({
    */
   const options = React.useContext(optionsCtx);
 
-  const myOnChange = (v) => {
+  const myOnChange = (v0) => {
+    const v = valuePostfix && (v0 || v0 === 0) ? v0 + valuePostfix : v0;
     setProp((prop) => {
       if (setter) setter(prop, field.name, v);
       else if (configuration) {
@@ -847,18 +860,25 @@ const ConfigField = ({
       } else if (isStyle) {
         if (!prop.style) prop.style = {};
         prop.style[field.name] = v;
+      } else if (subProp) {
+        if (!prop[subProp]) prop[subProp] = {};
+        prop[subProp][field.name] = v;
       } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v, setProp);
   };
-  const value = or_if_undef(
+  let value = or_if_undef(
     configuration
       ? configuration[field.name]
       : isStyle
       ? props.style[field.name]
+      : subProp
+      ? props[subProp]?.[field.name]
       : props[field.name],
     field.default
   );
+  if (valuePostfix)
+    value = `${value}`.replaceAll(valuePostfix || "__nosuchstring", "");
   if (field.input_type === "fromtype") field.input_type = null;
   if (
     field.type &&
@@ -1064,7 +1084,7 @@ const ConfigField = ({
       if (isStyle && value === "auto") {
         styleVal = "";
         styleDim = "auto";
-      } else if (isStyle && value && typeof value === "string") {
+      } else if ((isStyle || subProp) && value && typeof value === "string") {
         const matches = value.match(/^([-]?[0-9]+\.?[0-9]*)(.*)/);
         if (matches) {
           styleVal = matches[1];
@@ -1076,13 +1096,13 @@ const ConfigField = ({
           {styleDim !== "auto" && (
             <input
               type="number"
-              value={(isStyle ? styleVal : value) || ""}
+              value={(isStyle || subProp ? styleVal : value) || ""}
               className={`field-${field?.name} w-50 form-control-sm d-inline dimunit`}
               disabled={field.autoable && styleDim === "auto"}
               onChange={(e) =>
                 e?.target &&
                 myOnChange(
-                  isStyle
+                  isStyle || subProp
                     ? `${e.target.value}${styleDim || "px"}`
                     : e.target.value
                 )
@@ -1093,7 +1113,7 @@ const ConfigField = ({
             value={or_if_undef(
               configuration
                 ? configuration[field.name + "Unit"]
-                : isStyle
+                : isStyle || subProp
                 ? styleDim
                 : props[field.name + "Unit"],
               "px"
@@ -1118,6 +1138,13 @@ const ConfigField = ({
                     myStyleVal,
                     0
                   )}${target_value}`;
+                }
+                if (subProp) {
+                  if (!prop[subProp]) prop[subProp] = {};
+                  prop[subProp][field.name] = `${or_if_undef(
+                    myStyleVal,
+                    0
+                  )}${target_value}`;
                 } else prop[field.name + "Unit"] = target_value;
               });
             }}
@@ -1214,7 +1241,15 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
+const SettingsRow = ({
+  field,
+  node,
+  setProp,
+  onChange,
+  isStyle,
+  subProp,
+  valuePostfix,
+}) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -1237,6 +1272,8 @@ const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
       setProp={setProp}
       onChange={onChange}
       isStyle={isStyle}
+      subProp={subProp}
+      valuePostfix={valuePostfix}
     />
   );
   return (
@@ -1528,45 +1565,6 @@ export const bstyleopt = (style) => ({
 export const rand_ident = () =>
   Math.floor(Math.random() * 16777215).toString(16);
 
-export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
-  const { data } = query.node(nodeId).get();
-  const { type, props, nodes } = data;
-  const newProps = { ...props };
-  if (newProps.rndid) {
-    newProps.rndid = rand_ident();
-  }
-  const children = (nodes || []).map(recursivelyCloneToElems(query));
-  if (data.displayName === "Columns") {
-    const cols = ntimes(data.props.ncols, (ix) =>
-      recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
-    );
-    return React.createElement(Columns, {
-      ...newProps,
-      ...(typeof ix !== "undefined" ? { key: ix } : {}),
-      contents: cols,
-    });
-  }
-  if (data.isCanvas)
-    return React.createElement(
-      Element,
-      {
-        ...newProps,
-        canvas: true,
-        is: type,
-        ...(typeof ix !== "undefined" ? { key: ix } : {}),
-      },
-      children
-    );
-  return React.createElement(
-    type,
-    {
-      ...newProps,
-      ...(typeof ix !== "undefined" ? { key: ix } : {}),
-    },
-    children
-  );
-};
-
 export const isBlock = (block, inline, textStyle) =>
   !textStyle ||
   !textStyleToArray(textStyle).some((ts) => ts && ts.startsWith("h"))

package/src/components/storage.js

@@ -246,6 +246,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           imgResponsiveWidths={segment.imgResponsiveWidths}
           bgType={segment.bgType || "None"}
           style={segment.style || {}}
+          transform={segment.transform || {}}
           bgColor={segment.bgColor || "#ffffff"}
           setTextColor={!!segment.setTextColor}
           textColor={segment.textColor || "#000000"}
@@ -541,6 +542,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
           click_action: node.props.click_action,
           rotate: node.props.rotate,
           style: node.props.style,
+          transform: node.props.transform,
           ...customProps,
         };
       else return get_nodes(node);

package/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require("path");
-
+const webpack = require('webpack')
 module.exports = {
   module: {
     rules: [
@@ -18,4 +18,10 @@ module.exports = {
     //libraryTarget: 'window',
     //libraryExport: 'default'
   },
+  plugins: [
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ]
 };