Bug: Text is not synced when empty using textLinkGroup

Bug: Wrong CSS class for align tool Bug: When ruler is enabled, the preview and download action does not work Bug. Patterns wrapper is duplicated for text Improvement: Close button for zoom wrapper Improvement: Ruler size calculation & style Improvement: Do not add fpd-no-modules-mode class in editorMode New: Option "rulerPosition" - to set the position of the ruler (canvas or printing box) New: Option "rulerFixed" - display the ruler Version 6.2.1
Ibrahimkrohan · May 15, 2024 · 8b06bd2 · 8b06bd2
1 parent 795f4dd
commit 8b06bd2
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 59 deletions.
diff --git a/dist/css/FancyProductDesigner.css b/dist/css/FancyProductDesigner.css
diff --git a/dist/css/FancyProductDesigner.min.css b/dist/css/FancyProductDesigner.min.css
diff --git a/dist/js/FancyProductDesigner.js b/dist/js/FancyProductDesigner.js
diff --git a/dist/js/FancyProductDesigner.min.js b/dist/js/FancyProductDesigner.min.js
diff --git a/src/classes/FancyProductDesigner.js b/src/classes/FancyProductDesigner.js
@@ -37,7 +37,7 @@ import { loadFonts } from '../helpers/fonts-loader.js';
  */
 export default class FancyProductDesigner extends EventTarget {
 
-    static version = '6.2.0';
+    static version = '6.2.1';
     static forbiddenTextChars = /<|>/g;
     static proxyFileServer = '';
     static uploadsToServer = true;
@@ -1800,7 +1800,7 @@ export default class FancyProductDesigner extends EventTarget {
     calcDisplaySize(element) {
 
         let unit = this.mainOptions.rulerUnit;
-        let unitFactor = unit == 'cm' ? 100 : 1;
+        let unitFactor = unit == 'cm' ? 10 : 1;
         let widthRatio = 1;
         let heightRatio = 1;
         let dpi = null;
@@ -1827,7 +1827,7 @@ export default class FancyProductDesigner extends EventTarget {
 
         let sizeWidth = parseInt((element.width * element.scaleX) * widthRatio);
         sizeWidth = parseInt(sizeWidth / unitFactor);
-
+        
         let sizeHeight = parseInt((element.height * element.scaleY) * heightRatio);
         sizeHeight = parseInt(sizeHeight / unitFactor);
 
@@ -1844,7 +1844,7 @@ export default class FancyProductDesigner extends EventTarget {
 
         if(!element) return;
 
-        //text link group        
+        //text link group                
         if(!isEmpty(element.textLinkGroup)) {
 
             const textLinkGroupProps = this.mainOptions.textLinkGroupProps || [];
@@ -1858,7 +1858,7 @@ export default class FancyProductDesigner extends EventTarget {
                         && fabricObj.textLinkGroup === element.textLinkGroup
                     ) {
 
-                        if(options.text) {
+                        if(typeof options.text === 'string') {
 
                             fabricObj.set('text', element.text);
                             fabricObj.fire('changed');
@@ -1990,8 +1990,8 @@ export default class FancyProductDesigner extends EventTarget {
         )
 
         this.#toggleUndoRedoBtns();
-        this.currentViewInstance.fabricCanvas.snapToGrid = false;
-        this.currentViewInstance.fabricCanvas.enableRuler = false;
+        this.currentViewInstance.fabricCanvas.snapToGrid = false;        
+        this.currentViewInstance.fabricCanvas.enableRuler = this.mainOptions.rulerFixed;
 
         //reset view canvas size
         this.currentViewInstance.fabricCanvas.resetSize();

diff --git a/src/classes/FancyProductDesignerView.js b/src/classes/FancyProductDesignerView.js
@@ -69,7 +69,9 @@ export default class FancyProductDesignerView extends EventTarget {
         'snapGridSize',
         'rulerUnit',
         'namesNumbersEntryPrice',
-        'applySizeWhenReplacing'
+        'applySizeWhenReplacing',
+        'rulerPosition',
+        'rulerFixed'
     ];
 
     /**

diff --git a/src/classes/Options.js b/src/classes/Options.js
@@ -999,6 +999,26 @@ export default class Options {
         */
         rulerUnit: 'px',
 		/**
+        * The position of ruler. Display the ruler for the whole canvas or for around the current view printing box. Possible values: 'canvas', 'pb'.
+        *
+        * @property rulerPosition
+        * @memberof Options.defaults
+        * @type {String}
+        * @default 'canvas'
+        * @version 6.2.1
+        */
+        rulerPosition: 'canvas',
+		/**
+        * The ruler is always visible.
+        *
+        * @property rulerFixed
+        * @memberof Options.defaults
+        * @type {Boolean}
+        * @default false
+        * @version 6.2.1
+        */
+        rulerFixed: false,
+		/**
         * An object to define the AI service.
         *
         * @property aiService

diff --git a/src/fabricjs/canvas/Ruler.js b/src/fabricjs/canvas/Ruler.js
@@ -15,67 +15,123 @@ const Ruler = (canvas) => {
             const tickSize = 10;
             const majorTickSize = 100;
             const unit = canvas.viewOptions.rulerUnit;
+            const rulerPosition = canvas.viewOptions.rulerPosition;
+            const pb = canvas.viewOptions.printingBox;
+            const zoom = canvas.getZoom();
+            const ctx = canvas.getSelectionContext();    
+            const viewWidth = canvas.viewOptions.stageWidth;
+            const viewHeight = canvas.viewOptions.stageHeight; 
+
+            const _calculateTickInterval = (inputWidth) => {
+
+                const rawInterval = inputWidth / tickSize;
+                const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
+                const residual = rawInterval / magnitude;
+
+                if (residual >= 5) {
+                    return 5 * magnitude;
+                } else if (residual >= 2) {
+                    return 2 * magnitude;
+                } else {
+                    return magnitude;
+                }
+            }
+
             let unitFactor = unit == 'cm' ? 10 : 1;
-            let viewWidth = canvas.viewOptions.stageWidth;
             let widthRatio = 1;
-            let viewHeight = canvas.viewOptions.stageHeight;
             let heightRatio = 1;
-
+            let viewOutput;
+
             if(unit != 'px' 
-                && objectHasKeys(canvas.viewOptions.printingBox, ['left','top','width','height']) 
+                && objectHasKeys(pb, ['left','top','width','height']) 
                 && objectHasKeys(canvas.viewOptions.output, ['width','height'])
             ) {
 
-                //one pixel in mm
-                widthRatio = canvas.viewOptions.output.width / canvas.viewOptions.printingBox.width;
-                heightRatio = canvas.viewOptions.output.height / canvas.viewOptions.printingBox.height;               
+                viewOutput = canvas.viewOptions.output;
 
+                //one pixel in mm                
+                widthRatio = viewOutput.width / pb.width;                
+                heightRatio = viewOutput.height / pb.height; 
+
+
             }
             else {
                 unitFactor = 1;
             }
 
-            const zoom = canvas.getZoom();
-            const ctx = canvas.getSelectionContext();
+            let rulerXHeight = 20 * zoom,
+                rulerYWidth = 20 * zoom,
+                rulerXLeft = 0,
+                rulerXTop = 0,
+                rulerYLeft = canvas.width - rulerYWidth,
+                rulerYTop = 0,
+                rulerXWidth = viewWidth,
+
+                rulerYHeight = viewHeight,
+                loopXWidth = viewWidth * widthRatio,
+                loopYHeight = viewHeight * heightRatio;
+
+            if(rulerPosition == 'pb' && viewOutput) {
+
+                rulerXLeft = pb.left * zoom;
+                rulerXTop = (pb.top-rulerXHeight) * zoom;
+                rulerXWidth = pb.width * zoom;
+
+                rulerYLeft = (pb.left+pb.width) * zoom;
+                rulerYTop = pb.top * zoom;
+                rulerYHeight = pb.height * zoom;
+
+                loopXWidth = viewOutput.width;
+                loopYHeight = viewOutput.height;
+
+            }
 
             // Render the ruler on the X axis
-            const rulerXHeight = 20;
             ctx.fillStyle = canvas.rulerBg;
-            ctx.fillRect(0, 0, viewWidth, rulerXHeight);
-
-            for (var i = 0; i <= viewWidth * widthRatio; i += tickSize) {
+            ctx.fillRect(rulerXLeft, rulerXTop, rulerXWidth, rulerXHeight);
+                            
+            for (var i = 0; i <= loopXWidth; i += _calculateTickInterval(loopXWidth)) {
 
-                const tickHeight = i % majorTickSize === 0 ? rulerXHeight : rulerXHeight / 2;
-                const tickX = ((i * zoom) / widthRatio) * unitFactor;           
-                ctx.fillRect(tickX, 0, 1, tickHeight);
+                const tickHeight = i % majorTickSize === 0 ? rulerXHeight : rulerXHeight / 3;
+                const tickX = ((i * zoom) / widthRatio);
 
+                ctx.fillRect(rulerXLeft+tickX, rulerXTop, 1, tickHeight);
+
                 if (i % majorTickSize === 0) {
 
                     ctx.fillStyle = canvas.rulerTickColor;
-                    ctx.font = '10px Arial';                    
-                    ctx.fillText(Math.round(i / unitFactor), tickX+2, rulerXHeight);
+                    ctx.font = '10px Arial';   
+
+                    let tickLabelX = rulerXLeft + tickX;
+                    const textMetrics = ctx.measureText(Math.round(i / unitFactor));
+                    tickLabelX += i == 0 ? 2 : -(textMetrics.width+2);
+
+                    ctx.fillText(Math.round(i / unitFactor) + (i == 0 ? ' '+unit.toUpperCase() : ''), tickLabelX, rulerXTop+rulerXHeight-2);
 
                 }
 
             }
 
             // Render the ruler on the Y axis
-            const rulerYWidth = 20;
             ctx.fillStyle = canvas.rulerBg;
-            ctx.fillRect(canvas.width - rulerYWidth, 0, rulerYWidth, viewHeight);
-
-            for (var j = 0; j <= viewHeight * heightRatio; j += tickSize) {
+            ctx.fillRect(rulerYLeft, rulerYTop, rulerYWidth, rulerYHeight);
 
-                const tickWidth = canvas.width - (i % majorTickSize === 0 ? rulerYWidth : rulerYWidth / 2);
-                const tickY = ((j * zoom) / heightRatio) * unitFactor; 
+            for (var j = 0; j <= loopYHeight; j += _calculateTickInterval(loopYHeight)) {
 
-                ctx.fillRect(tickWidth, tickY, rulerYWidth, 1);
+                const tickWidth = (j % majorTickSize === 0 ? rulerYWidth : rulerYWidth / 3);
+                const tickY = ((j * zoom) / heightRatio); 
+
+                ctx.fillRect(rulerYLeft, rulerYTop+tickY, tickWidth, 1);
 
                 if (j % majorTickSize === 0) {
 
                     ctx.fillStyle = canvas.rulerTickColor;
                     ctx.font = '10px Arial';
-                    ctx.fillText(Math.round(j / unitFactor), canvas.width - rulerYWidth, tickY + (10 * zoom));
+
+                    let tickLabelY = rulerYTop + tickY;
+                    tickLabelY += j == 0 ? 12 : -2;
+
+                    ctx.fillText(Math.round(j / unitFactor), rulerYLeft, tickLabelY);
 
                 }
 

diff --git a/src/helpers/utils.js b/src/helpers/utils.js
@@ -804,6 +804,19 @@ const formatPrice = (price, priceFormatOpts = {}) => {
 
 export { formatPrice }
 
+const toDecimal = (value) => {
+
+    if (value <= 1) {
+        return value;
+    }
+
+    const intPartLength = Math.floor(value).toString().length;
+    return value / Math.pow(10, intPartLength);
+
+}
+
+export { toDecimal }
+
 const showModal = ((...args) => {   
     Modal(...args);
 });

diff --git a/src/ui/controller/ActionsBar.js b/src/ui/controller/ActionsBar.js
@@ -356,6 +356,8 @@ export default class ActionsBar extends EventTarget {
 		}
 		else if (action === 'preview-lightbox') {
 
+			this.fpdInstance.currentViewInstance.fabricCanvas.enableRuler = false;
+
 			this.fpdInstance.getProductDataURL((dataURL) => {
 
 				const image = new Image();
@@ -380,6 +382,9 @@ export default class ActionsBar extends EventTarget {
 
 				}
 
+				this.fpdInstance.currentViewInstance.fabricCanvas.enableRuler = this.fpdInstance.mainOptions.rulerFixed;
+				this.fpdInstance.currentViewInstance.fabricCanvas.renderAll();
+
 			});
 
 		}
@@ -431,6 +436,24 @@ export default class ActionsBar extends EventTarget {
 				}
 			)
 
+			const closeElem = document.createElement('div');
+			closeElem.className = "fpd-close";
+			closeElem.innerHTML = '<span class="fpd-icon-close"></span>';
+			zoomWrapper.append(closeElem);
+
+			addEvents(
+				closeElem,
+				'click',
+				(evt) => {
+
+					if (zoomWrapper) {
+						zoomWrapper.remove();
+					}
+
+
+				}
+			)
+
 			this.fpdInstance.mainWrapper.container.append(zoomWrapper);
 
 		}
@@ -467,12 +490,18 @@ export default class ActionsBar extends EventTarget {
 				'click',
 				(evt) => {
 
+					this.fpdInstance.currentViewInstance.fabricCanvas.enableRuler = false;
+
 					this.downloadFile(
 						evt.currentTarget.dataset.value,
 						downloadModal.querySelector('.fpd-switch').checked
 					);
 
 					downloadModal.remove();
+
+					this.fpdInstance.currentViewInstance.fabricCanvas.enableRuler = this.fpdInstance.mainOptions.rulerFixed;
+					this.fpdInstance.currentViewInstance.fabricCanvas.renderAll();
+
 				}
 			)
 

diff --git a/src/ui/controller/ElementToolbar.js b/src/ui/controller/ElementToolbar.js
@@ -902,14 +902,16 @@ export default class ElementToolbar extends EventTarget {
     #update(element) {
 
         this.#reset();
-        removeElemClasses(this.container, ['fpd-type-image'])
+        removeElemClasses(this.container, ['fpd-type-image']);
+
+        let colorPanel;
 
 		//COLOR: colors array, true=svg colorization       
 		if(element.hasColorSelection()) {
 
             let availableColors = elementAvailableColors(element, this.fpdInstance);
 
-            let colorPanel;
+
             if(element.type === 'group' && element.getObjects().length > 1) {
 
                 const paletterPerPath = (Array.isArray(element.colors) && element.colors.length > 1);
@@ -1025,9 +1027,9 @@ export default class ElementToolbar extends EventTarget {
 		}
 
         //enable only patterns
-		if((element.isSVG() || element.getType() === 'text') && element.patterns && element.patterns.length) {
+		if(!colorPanel && (element.isSVG() || element.getType() === 'text') && element.patterns && element.patterns.length) {
 
-            let colorPanel = ColorPanel(this.fpdInstance, {
+            colorPanel = ColorPanel(this.fpdInstance, {
                 colors: [],
                 patterns: element.patterns,
                 onPatternChange: (patternImg) => {

diff --git a/src/ui/controller/Mainbar.js b/src/ui/controller/Mainbar.js
@@ -638,7 +638,7 @@ export default class Mainbar extends EventTarget {
         const navElem = this.container.querySelector('.fpd-navigation');
 
         //if only one modules exist, select it and hide nav
-        if(modules.length == 0) {
+        if(modules.length == 0 && !this.fpdInstance.mainOptions.editorMode) {
 
             addElemClasses(this.fpdInstance.container, ['fpd-no-modules-mode']);
 

diff --git a/src/ui/controller/ViewsNav.js b/src/ui/controller/ViewsNav.js
@@ -14,7 +14,7 @@ import Snackbar from '../view/comps/Snackbar.js';
 export default class ViewsNav extends EventTarget {
 
     #maxStageSize = 1000; //when adding blank page or editing size, this will be max. canvas width/height
-    #pbOffset = 50;
+    #pbOffset = 100;
 
     constructor(fpdInstance) {
 
@@ -219,10 +219,10 @@ export default class ViewsNav extends EventTarget {
 
     checkDimensionLimits(type, input) {
 
-        const inputVal = parseInt(input.value);
+        let inputVal = parseInt(input.value);
 
 		if(type == 'width') {
-
+            
 			if(inputVal < this.minWidth) { inputVal = this.minWidth; }
 			else if(inputVal > this.maxWidth) { inputVal = this.maxWidth; }
 

diff --git a/src/ui/html/element-toolbar.html b/src/ui/html/element-toolbar.html
@@ -464,7 +464,7 @@
     <div class="fpd-panel-position">
 
         <div class="fpd-panel-tabs">
-            <span data-tab="align" data-defaulttext="Align" class="fpd-tool-text-stroke">toolbar.align</span>
+            <span data-tab="align" data-defaulttext="Align">toolbar.align</span>
             <span data-tab="arrange" data-defaulttext="Arrange" class="fpd-active">toolbar.arrange</span>
         </div>