- Improvement: If a new element is added with colorLinkGroup, use the…

… current color of the color link group for the new added element - New option "productMode": Enable specific behaviours for different printing industries - New EngravedText object
Ibrahimkrohan · May 23, 2024 · ce9d9c6 · ce9d9c6
1 parent 8b06bd2
commit ce9d9c6
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 143 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
@@ -21,7 +21,8 @@ import {
     popupBlockerAlert,
     localStorageAvailable,
     formatPrice,
-    fireEvent
+    fireEvent,
+    objectGet
 } from '../helpers/utils.js';
 import { getJSON, postJSON } from '../helpers/request.js';
 import { objectHasKeys, toggleElemClasses } from '../helpers/utils.js';
@@ -37,7 +38,7 @@ import { loadFonts } from '../helpers/fonts-loader.js';
  */
 export default class FancyProductDesigner extends EventTarget {
 
-    static version = '6.2.1';
+    static version = '6.2.2';
     static forbiddenTextChars = /<|>/g;
     static proxyFileServer = '';
     static uploadsToServer = true;
@@ -286,6 +287,15 @@ export default class FancyProductDesigner extends EventTarget {
 	 * @default null
 	 */
 	bulkVariations = null;
+
+    /**
+	 * The product mode type set through main options.
+	 *
+	 * @property industryType
+	 * @type String
+	 * @default null
+	 */
+    industryType = null;
 
     loadingCustomImage = false;
     lazyBackgroundObserver = null;
@@ -347,6 +357,15 @@ export default class FancyProductDesigner extends EventTarget {
             this.pricingRulesInstance = new PricingRules(this);
 
         }
+
+        if(this.mainOptions.editorMode) {
+
+            addElemClasses(
+                document.body,
+                ['fpd-editor-mode']
+            )
+
+        }
 
         this.translator = new Translator();
         this.translator.loadLangJSON(this.mainOptions.langJSON, this.#langLoaded.bind(this));
@@ -985,13 +1004,15 @@ export default class FancyProductDesigner extends EventTarget {
             const relevantOptions = {};
 
             if(isPlainObject(view.options)) {
+
                 FancyProductDesignerView.relevantOptions.forEach(key =>  {
 
                     if(typeof view.options[key] !== 'undefined') {
                         relevantOptions[key] = view.options[key];
                     }
 
                 });
+
             }
 
 
@@ -1036,6 +1057,16 @@ export default class FancyProductDesigner extends EventTarget {
         })
 
         view.options = isPlainObject(view.options) ? deepMerge(relevantMainOptions, view.options) : relevantMainOptions;
+
+        //first view containing also product options        
+        document.body.dataset.fpdIndustryType = '';
+        this.industryType = null;
+        if(this.viewInstances.length == 0 && view.options.industry && view.options.industry.type) {
+
+            this.industryType = view.options.industry.type;
+            document.body.dataset.fpdIndustryType = this.industryType;
+
+        }
 
         let viewInstance = new FancyProductDesignerView(
             this.productStage, 
@@ -1057,6 +1088,8 @@ export default class FancyProductDesigner extends EventTarget {
             },
             'beforeElementAdd': (opts) => {
 
+                const params = opts.params;
+
                 if(this.mainBar && this.uiManager && this.uiManager.currentLayout == 'small') {
                     this.mainBar.toggleContentDisplay(false);
                 }
@@ -1294,16 +1327,16 @@ export default class FancyProductDesigner extends EventTarget {
 
             },
             'elementFillChange': ({element, colorLinking}) => {                
-
+                                
                 if(this.productCreated && colorLinking && element.colorLinkGroup && element.colorLinkGroup.length > 0) {
 
-                    const group = this.colorLinkGroups[element.colorLinkGroup];
+                    const group = this.colorLinkGroups[element.colorLinkGroup];                    
 
                     if(group && group.elements) {
 
                         group.elements.forEach((groupElem) => {
-
-                            if(element.id, groupElem.id) {
+                                                        
+                            if(element.id != groupElem.id) {
 
                                 const targetView = this.viewInstances[groupElem.viewIndex];
                                 const targetElem = targetView.fabricCanvas.getElementByID(groupElem.id);
@@ -2170,7 +2203,7 @@ export default class FancyProductDesigner extends EventTarget {
 	addCustomImage(source, title, options={}, viewIndex) {
 
 		viewIndex = viewIndex === undefined ? this.currentViewIndex : viewIndex;
-
+        
 		const image = new Image;
 		image.crossOrigin = "anonymous";
     	image.src = source;
@@ -2206,7 +2239,7 @@ export default class FancyProductDesigner extends EventTarget {
 
             let imageParams = deepMerge(currentCustomImageParameters, fixedParams);
             imageParams = deepMerge(imageParams, options);
-
+                        
             this.viewInstances[viewIndex].fabricCanvas.addElement(
     			'image',
     			source,
@@ -2314,9 +2347,9 @@ export default class FancyProductDesigner extends EventTarget {
             this.toggleSpinner(false);
             Snackbar(errorMsg);
         }
-
+        
         postJSON({
-            url: this.mainOptions.fileServerURL,
+            url: this.getFileServerURL(),
             body: formData,
             onSuccess: (data) => {
 
@@ -2362,7 +2395,7 @@ export default class FancyProductDesigner extends EventTarget {
 	}
 
 
-    addCanvasDesign(source, title, params={}) {
+    addCanvasDesign(source, title, params={}) {        
 
         if(!this.currentViewInstance) { return; }
 
@@ -2382,7 +2415,7 @@ export default class FancyProductDesigner extends EventTarget {
         if(Array.isArray(params.relatedViewImages)) {
 
             params.replaceInAllViews = false;
-
+                        
             //add main design to first view
             this.viewInstances[0].fabricCanvas.addElement(
                 'image', 
@@ -3026,6 +3059,23 @@ export default class FancyProductDesigner extends EventTarget {
         return formatPrice(price, this.mainOptions.priceFormat)
 
     }
+
+    getFileServerURL() {
+
+        let fileServerURL = new URL(this.mainOptions.fileServerURL);      
+
+        if(objectGet(this.viewInstances[0].options, 'industry.type') == 'engraving') {
+
+            if(objectGet(this.viewInstances[0].options, 'industry.opts.negative'))
+                fileServerURL.searchParams.set('filter', 'threshold_negative');
+            else
+                fileServerURL.searchParams.set('filter', 'threshold');
+
+        }
+
+        return fileServerURL.href;
+
+    }
 }
 
 window.FancyProductDesigner = FancyProductDesigner;

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

diff --git a/src/classes/Options.js b/src/classes/Options.js
@@ -1080,6 +1080,21 @@ export default class Options {
         * @version 6.1.1
         */
         cropMasks: [],
+		/**
+		* Enable specific behaviours for different printing industries.
+		* <ul>
+		* <li>'engraving': Custom Text will have an opacity. Bitmap images will be converted to black&white image with opacity. opts: {opacity:<0-1>, negative: false}</li>
+		* </ul>
+		*
+		* @property industry
+		* @memberof Options.defaults
+		* @type {Object}
+		* @default {type: null, opts: {}}
+		*/
+		industry: {
+			type: null,
+			opts: {}
+		},
 		/**
 		* An object containing the default element parameters in addition to the default Fabric Object properties. See Options.defaults.elementParameters.
 		*

diff --git a/src/fabricjs/Canvas.js b/src/fabricjs/Canvas.js
@@ -11,7 +11,8 @@ import {
     objectHasKeys,
     isUrl,
     isZero,
-    isEmpty
+    isEmpty,
+    objectGet
 } from '../helpers/utils.js';
 import {
     getFilter,
@@ -633,7 +634,7 @@ fabric.Canvas.prototype.addElements = function (elements, callback) {
  */
 fabric.Canvas.prototype.addElement = function (type, source, title, params = {}) {        
 
-    if (type === undefined || source === undefined || title === undefined) return;    
+    if (type === undefined || source === undefined || title === undefined) return;        
 
     /**
      * Gets fired as soon as an element will be added (before its added to canvas).
@@ -659,6 +660,21 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
         title = title.replace(/(<([^>]+)>)/ig, "");
     }
 
+    if(params.colorLinkGroup) {
+
+        let currentElems = this.getElements();
+        if(currentElems) {
+
+            //get first element with the same color link group and copy the fill of that element to the new element
+            const targetElem = currentElems.find(elem => elem['colorLinkGroup'] === params.colorLinkGroup);
+            if(targetElem && targetElem.fill) {
+                params.fill = targetElem.fill;
+            }
+
+        }
+
+    }
+
     //check that fill is a string
     if (typeof params.fill !== 'string' && !Array.isArray(params.fill)) {
         params.fill = false;
@@ -696,7 +712,7 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
 
     }
 
-    params._isInitial = !this.initialElementsLoaded;
+    params._isInitial = !this.initialElementsLoaded;    
 
     if (type.toLowerCase().includes('text')) {
         var defaultTextColor = params.colors[0] ? params.colors[0] : '#000000';
@@ -733,6 +749,14 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
     fabricParams = deepMerge(params, fabricParams);
 
     if (fabricParams.isCustom) {
+
+        //engraving mode
+        if(objectGet(this.viewOptions, 'industry.type') == 'engraving') {
+
+            fabricParams.opacity = objectGet(this.viewOptions, 'industry.opts.opacity', 0.5);
+
+        }
+
         this.isCustomized = true;
     }
 
@@ -840,7 +864,6 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
                     fabricParams.svgFill = params.svgFill;
                 }
 
-
                 delete fabricParams['boundingBox'];
                 delete fabricParams['originParams'];
                 delete fabricParams['colors'];
@@ -902,6 +925,7 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
 
                     fabricParams.svgFill = params.svgFill;
                 }
+
                 _fabricImageLoaded(svgGroup, fabricParams, true, { svgFill: params.svgFill });
 
             });
@@ -973,12 +997,6 @@ fabric.Canvas.prototype.addElement = function (type, source, title, params = {})
 
             fabricText = new fabric.NeonText(source, fabricParams);
 
-        }
-        //neon-text
-        else if(params.engravedText) {
-
-            fabricText = new fabric.EngravedText(source, fabricParams);
-
         }
         //i-text
         else {
@@ -1668,7 +1686,7 @@ fabric.Canvas.prototype.setElementOptions = function (parameters, element) {
             || parameters.hasOwnProperty('shadowBlur') 
         || parameters.hasOwnProperty('shadowOffsetX') 
         || parameters.hasOwnProperty('shadowOffsetY')
-        && !(element.engravedText || element.neonText)
+        && !(element.neonText)
     ) {
 
         if(parameters.shadowColor === null) {
@@ -1750,7 +1768,7 @@ fabric.Canvas.prototype.setElementOptions = function (parameters, element) {
 
     }
 
-    //change element color        
+    //change element color            
     if (parameters.fill !== undefined || parameters.svgFill !== undefined) {
 
         const fill = parameters.svgFill !== undefined ? parameters.svgFill : parameters.fill;

diff --git a/src/fabricjs/Element.js b/src/fabricjs/Element.js
@@ -6,7 +6,6 @@ import './objects/Text.js';
 import './objects/IText.js';
 import './objects/Textbox.js';
 import './objects/NeonText.js';
-import './objects/EngravedText.js';
 import tinycolor from "tinycolor2";
 
 import {
@@ -425,7 +424,7 @@ fabric.Object.prototype.checkEditable = function (checkProps) {
  * @param {Boolean} [colorLinking=true] If element is color linked, execute it.
  * @extends fabric.Canvas
  */
-fabric.Object.prototype.changeColor = function (colorData, colorLinking = true) {
+fabric.Object.prototype.changeColor = function (colorData, colorLinking = true) {     
 
     const colorizable = this.isColorizable();    
 
@@ -554,7 +553,7 @@ fabric.Object.prototype.setPattern = function (patternUrl) {
             //for all other revert to color
             else {
 
-                let color = this.fill ? this.fill : this.colors[0];
+                let color = this.fill ? this.fill : this.colors[0];                
                 color = color ? color : '#000000';
                 this.set('fill', color);