@visns-studio/visns-components 4.10.24 → 4.10.26

package/package.json

@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.24",
+    "version": "4.10.26",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/MultiSelect.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import CustomFetch from './Fetch';
 import SelectList from './SelectList';
 import Select, { createFilter } from 'react-select';
@@ -19,6 +19,7 @@ function MultiSelect({
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
+    const prevInputValueRef = useRef();
 
     useEffect(() => {
         const _options = Array.isArray(options)
@@ -32,14 +33,34 @@ function MultiSelect({
     }, [options]);
 
     useEffect(() => {
-        const _values = Array.isArray(inputValue)
-            ? inputValue.map((a) => ({
-                  value: a.id,
-                  label: a.label || a.name || a.description || 'Unknown',
-                  ...a,
-              }))
-            : [];
-        setSelectValue(_values);
+        // Only update if `inputValue` content has changed
+        if (
+            JSON.stringify(prevInputValueRef.current) !==
+            JSON.stringify(inputValue)
+        ) {
+            const _values = Array.isArray(inputValue)
+                ? inputValue.map((a) => ({
+                      value: a.id,
+                      label: a.label || a.name || a.description || 'Unknown',
+                      ...a,
+                  }))
+                : inputValue && typeof inputValue === 'object'
+                ? [
+                      {
+                          value: inputValue.id,
+                          label:
+                              inputValue.label ||
+                              inputValue.name ||
+                              inputValue.description ||
+                              'Unknown',
+                          ...inputValue,
+                      },
+                  ]
+                : [];
+
+            setSelectValue(_values);
+            prevInputValueRef.current = inputValue;
+        }
     }, [inputValue]);
 
     const handleCreate = async (inputValue) => {

package/src/components/crm/sketch/SketchField.jsx

@@ -87,14 +87,47 @@ class SketchField extends PureComponent {
                 crossOrigin: 'anonymous', // Enable CORS
             });
 
+            const imgWidth = img.width;
+            const imgHeight = img.height;
+
+            // Get the aspect ratio of the image
+            const aspectRatio = imgWidth / imgHeight;
+
+            // Calculate the new canvas dimensions based on aspect ratio
+            const { width, height } = this.props; // Default width and height
+
+            let newWidth, newHeight;
+            if (aspectRatio > 1) {
+                // Landscape orientation: Set width to max and adjust height
+                newWidth = width;
+                newHeight = width / aspectRatio;
+            } else {
+                // Portrait orientation: Set height to max and adjust width
+                newHeight = height;
+                newWidth = height * aspectRatio;
+            }
+
+            // Set the new canvas dimensions
+            this._fc.setWidth(newWidth);
+            this._fc.setHeight(newHeight);
+
             // Scale the image to fit the canvas dimensions
-            img.scaleToWidth(this._fc.width);
-            img.scaleToHeight(this._fc.height);
-            img.set({ selectable: false, evented: false });
+            img.scaleToWidth(newWidth);
+            img.scaleToHeight(newHeight);
+
+            // Center the image both horizontally and vertically
+            img.set({
+                left: (newWidth - img.getScaledWidth()) / 2,
+                top: (newHeight - img.getScaledHeight()) / 2,
+                selectable: false,
+                evented: false,
+            });
 
-            // Set the image directly as the background
+            // Set the image as the background directly
             this._fc.backgroundImage = img;
-            this._fc.renderAll(); // Render the canvas immediately
+
+            // Render the canvas to apply changes
+            this._fc.requestRenderAll();
         } catch (error) {
             console.error('Failed to load background image:', error);
         }
@@ -193,6 +226,8 @@ class SketchField extends PureComponent {
                 }
             } else {
                 this._fc.clear(); // If no previous state, clear the canvas
+
+                this.setBackgroundImage(this.props.backgroundImage);
             }
             this._fc.renderAll(); // Re-render canvas
             this.props.onChange && this.props.onChange();
@@ -271,7 +306,6 @@ class SketchField extends PureComponent {
 
         // Load the defaultValue to set the initial state of the canvas
         if (defaultValue) {
-            console.info('test');
             // Show loading toast
             const toastId = toast.loading('Loading Canvas...');
             setTimeout(() => {
@@ -334,10 +368,6 @@ class SketchField extends PureComponent {
             this.fromJSON(this.props.defaultValue);
         } else {
             if (this.props.backgroundImage !== prevProps.backgroundImage) {
-                // console.log(
-                //     'Setting new background image:',
-                //     this.props.backgroundImage
-                // );
                 this.setBackgroundImage(this.props.backgroundImage);
             }
         }