Thulasizwe/en/canvas

shesha-reactjs/src/components/formDesigner/designerMainArea/index.tsx

@@ -1,6 +1,6 @@
 import { ConfigurableFormRenderer, SidebarContainer } from '@/components';
 import ConditionalWrap from '@/components/conditionalWrapper';
-import { DataContextProvider, MetadataProvider, useCanvas, useShaFormInstance } from '@/providers';
+import { DataContextProvider, MetadataProvider, useShaFormInstance } from '@/providers';
 import { useFormDesignerStateSelector } from '@/providers/formDesigner';
 import ParentProvider from '@/providers/parentProvider';
 import React, { FC, useMemo, useEffect } from 'react';
@@ -26,9 +26,8 @@ export const DesignerMainArea: FC<IDesignerMainAreaProps> = () => {
   const readOnly = useFormDesignerStateSelector((state) => state.readOnly);
   const formSettings = useFormDesignerStateSelector((state) => state.formSettings);
   const formMode = useFormDesignerStateSelector((state) => state.formMode);
-  const { antdForm: form } = useShaFormInstance();
-  const { designerWidth, zoom } = useCanvas();
   const shaForm = useShaFormInstance();
+  const { antdForm: form } = shaForm;
   const { styles } = useStyles();
 
   useEffect(() => {
@@ -45,36 +44,36 @@ export const DesignerMainArea: FC<IDesignerMainAreaProps> = () => {
   [readOnly]);
 
   return (
-        <div
-          className={styles.mainArea}
+        <div
+          className={styles.mainArea}
           style={{
             borderTop: '1px solid #d3d3d3',
             ...(formMode !== 'designer' && {
               maxHeight: '85vh',
               overflow: 'auto',
             }),
-          }}
+          }}
         >
             <ConditionalWrap
               condition={formMode === 'designer'}
               wrap={(children) => (
                     <SidebarContainer
                       leftSidebarProps={leftSidebarProps}
                       rightSidebarProps={rightSidebarProps}
+                      canZoom={true}
                     >
                         {children}
                     </SidebarContainer>
               )}
             >
-                <div style={{ width: designerWidth, zoom: `${zoom}%`, overflow: 'auto', margin: '0 auto' }}>
                     <ConditionalWrap
                       condition={Boolean(formSettings?.modelType)}
                       wrap={(children) => (<MetadataProvider modelType={formSettings?.modelType}>{children}</MetadataProvider>)}
                     >
                         <ParentProvider model={null} formMode="designer">
-                            <DataContextProvider
-                              id={SheshaCommonContexts.FormContext}
-                              name={SheshaCommonContexts.FormContext}
+                            <DataContextProvider
+                              id={SheshaCommonContexts.FormContext}
+                              name={SheshaCommonContexts.FormContext}
                               type="form"
                               description="Form designer"
                             >
@@ -83,12 +82,12 @@ export const DesignerMainArea: FC<IDesignerMainAreaProps> = () => {
                                         <DebugPanel />
                                     )}
                                 </ConfigurableFormRenderer>
+
                             </DataContextProvider>
                         </ParentProvider>
                     </ConditionalWrap>
 
-                </div>
             </ConditionalWrap>
         </div>
   );
-};
+};

shesha-reactjs/src/components/formDesigner/styles/styles.ts

@@ -1,5 +1,5 @@
-import { createStyles } from '@/styles';
-import { sheshaStyles } from '@/styles';
+import { getFormDesignerBackgroundSvg } from '@/components/sidebarContainer/styles/svg/dropHint';
+import { createStyles, sheshaStyles } from '@/styles';
 
 const designerClassNames = {
   componentDragHandle: "sha-component-drag-handle",
@@ -42,6 +42,7 @@ const designerClassNames = {
   formName: "form-name",
   formTitle: "form-title",
   formNameParent: "form-name-parent",
+  toolbarWrapper: "form-toolbar-wrapper",
 };
 const useStylesResponse = {
   styles: designerClassNames,
@@ -175,6 +176,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
             background: white;
             padding: 8px 12px 0px 12px;
             display: flex;
+            align-items: center;
             justify-content: space-between;
 
             .${formName} {
@@ -235,6 +237,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
                 .radio-group {
                     display: flex;
                     flex-direction: row;
+                    justify-content: center;
                     .radio-button {
                         display: flex;
                         justify-content: center;
@@ -369,6 +372,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
 
         .${designerWorkArea}{
             background-color: white;
+            height: 100%;
             .${shaComponentsContainer} {
                 border-radius: 2px;
 
@@ -377,12 +381,31 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
                     text-align: center;
                     color: darkgray;
                     padding: 10px;
+                    height: 55px;
                 }
 
                 .${shaComponent} {
                     min-height: 30px;
                 }
             }
+
+            > div {
+             height: 100%;
+             .sha-drop-hint {
+                display: none;
+             }
+                > div:not(.sha-drop-hint) {
+                    min-height: 100vh;
+                    height: 100%;
+                }
+
+                > .sha-components-container-inner:not(:has(.sha-component)) {
+                    background: url("${getFormDesignerBackgroundSvg()}");
+                    background-size: 25vw;
+                    background-repeat: no-repeat;
+                    background-position: 50% 50%;
+                }
+            }
         }
 
         .${shaComponentGhost} {
@@ -395,8 +418,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         }
         .${shaComponent} {
             position: relative;
-            margin: 4px;
-            //margin-left: 10px;
 
             .${prefixCls}-alert.${shaDesignerWarning} {
               margin-bottom: 0;
@@ -489,4 +510,4 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
     formDesigner,
     quickEditModal,
   };
-});
+});

shesha-reactjs/src/components/formDesigner/toolbar/canvasConfig.tsx

@@ -1,32 +1,37 @@
-import React, { FC } from 'react';
-import { useStyles } from '../styles/styles';
-import { Radio } from 'antd';
-import { DesktopOutlined, MobileOutlined, TabletOutlined } from '@ant-design/icons';
-import { useCanvas } from '@/providers';
+import React, { FC } from "react";
+import { useStyles } from "../styles/styles";
+import { Button, Space, Tooltip } from "antd";
+import { ExpandOutlined, MinusOutlined, PlusOutlined } from "@ant-design/icons";
+import { useCanvas } from "@/providers";
+import { DeviceOptions } from "./mobileDropdown";
+import { DEFAULT_OPTIONS } from "@/providers/canvas/utils";
 
 export interface ICanvasConfigProps {
 
 }
 
 export const CanvasConfig: FC<ICanvasConfigProps> = () => {
   const { styles } = useStyles();
-  const { setDesignerDevice, designerDevice } = useCanvas();
+  const { setCanvasZoom, setCanvasAutoZoom, autoZoom, zoom } = useCanvas();
 
   return (
     <div className={styles.shaDesignerCanvasConfig}>
-      <Radio.Group className="radio-group" value={designerDevice} buttonStyle="solid" size="middle">
-        <Radio.Button className="radio-button" value="desktop" onClick={() => setDesignerDevice('desktop')} title="Desktop">
-          <DesktopOutlined />
-        </Radio.Button>
-
-        <Radio.Button className="radio-button" value="tablet" onClick={() => setDesignerDevice('tablet')} title="Tablet">
-          <TabletOutlined />
-        </Radio.Button>
-
-        <Radio.Button className="radio-button" value="mobile" onClick={() => setDesignerDevice('mobile')} title="Mobile">
-          <MobileOutlined />
-        </Radio.Button>
-      </Radio.Group>
+      <DeviceOptions />
+      <Space direction="horizontal" size={0} style={{ flexWrap: "nowrap" }}>
+        <Tooltip title={`${zoom}%`}>
+          <Button
+            size="small"
+            type={autoZoom ? "link" : "text"}
+            icon={<ExpandOutlined size={14} />}
+            title="Auto"
+            onClick={() => {
+              setCanvasAutoZoom();
+            }}
+          />
+        </Tooltip>
+        <Tooltip title={`${zoom}%`}><Button size="small" disabled={autoZoom} type="text" icon={<MinusOutlined />} title="Zoom out" onClick={() => setCanvasZoom(zoom - (zoom > DEFAULT_OPTIONS.minZoom ? 2 : 0))} /></Tooltip>
+        <Tooltip title={`${zoom}%`}><Button size="small" disabled={autoZoom} type="text" icon={<PlusOutlined />} title="Zoom in" onClick={() => setCanvasZoom(zoom + (zoom < DEFAULT_OPTIONS.maxZoom ? 2 : 0))} /></Tooltip>
+      </Space>
     </div>
   );
 };

shesha-reactjs/src/components/formDesigner/toolbar/formSettingsButton.tsx

@@ -3,12 +3,14 @@ import { Button } from 'antd';
 import { FormSettingsEditor } from '../formSettingsEditor';
 import { SettingOutlined } from '@ant-design/icons';
 import { useFormDesignerStateSelector } from '@/providers/formDesigner';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
 
 export interface IFormSettingsButtonProps {
   buttonText?: string;
+  size?: SizeType;
 }
 
-export const FormSettingsButton: FC<IFormSettingsButtonProps> = ({ buttonText }) => {
+export const FormSettingsButton: FC<IFormSettingsButtonProps> = ({ buttonText, size }) => {
   const [settingsVisible, setSettingsVisible] = useState(false);
   const readOnly = useFormDesignerStateSelector((x) => x.readOnly);
 
@@ -18,7 +20,7 @@ export const FormSettingsButton: FC<IFormSettingsButtonProps> = ({ buttonText })
 
   return (
         <>
-            <Button icon={<SettingOutlined />} type="link" onClick={onSettingsClick} title="Form Settings">
+            <Button icon={<SettingOutlined />} size={size} type="link" onClick={onSettingsClick} title="Form Settings">
                 { buttonText !== undefined ? buttonText : "Settings" }
             </Button>
             <FormSettingsEditor
@@ -30,4 +32,4 @@ export const FormSettingsButton: FC<IFormSettingsButtonProps> = ({ buttonText })
             />
         </>
   );
-};
+};