[Assets]: Fix focal point position on screen resize and add button to…

… remove focal point (#331)

* fix temporary focal point position on screen resize, adds the button to remove the focal point once set

* remove console log

* change delete focal point icon

* fix contextmenu focal point removal

* append asset id to add/remove focal point button id

* refactor getFocalPointcoordinates

* rename to updateFocalPointCoordinates

* fix removed marker bug

public/css/icons.css

@@ -1558,6 +1558,11 @@
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/focal_point.svg) center center no-repeat !important;
 }
 
+.pimcore_icon_focal_point_remove {
+    background: url(/bundles/pimcoreadmin/img/flat-color-icons/focal_point.svg) center center no-repeat !important;
+    filter: invert(1);
+}
+
 .pimcore_icon_icons {
     background: url(/bundles/pimcoreadmin/img/flat-color-icons/library.svg) center center no-repeat !important;
 }

public/js/pimcore/asset/image.js

@@ -16,7 +16,7 @@ pimcore.registerNS("pimcore.asset.image");
  * @private
  */
 pimcore.asset.image = Class.create(pimcore.asset.asset, {
-
+    focalPointCoordinates: {'x': -100,'y': -100},
     initialize: function (id, options) {
 
         this.options = options;
@@ -134,13 +134,25 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, {
                 bodyStyle: "padding: 10px;",
                 items: [{
                     xtype: "button",
+                    id: "add_focal_point_" + this.id,
                     text: t("set_focal_point"),
                     iconCls: "pimcore_icon_focal_point",
                     width: "100%",
                     textAlign: "left",
                     handler: function () {
                         this.addFocalPoint();
                     }.bind(this)
+                },{
+                    xtype: "button",
+                    id: "remove_focal_point_" + this.id,
+                    text: t("remove_focal_point"),
+                    iconCls: "pimcore_icon_focal_point_remove",
+                    width: "100%",
+                    textAlign: "left",
+                    hidden: this["marker"] !== false,
+                    handler: function () {
+                        this.removeFocalPoint();
+                    }.bind(this)
                 }, {
                     xtype: "container",
                     html: "<hr>"
@@ -368,6 +380,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, {
             });
 
             this.displayPanel.on('resize', function () {
+                this.updateFocalPointCoordinates();
                 this.initPreviewImage();
             }.bind(this));
         }
@@ -377,19 +390,27 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, {
 
     initPreviewImage: function () {
 
-        var html = '<img src="' + this.data.imageInfo['previewUrl'] + '">';
+        let html = '<img src="' + this.data.imageInfo['previewUrl'] + '">';
         Ext.get(this.previewContainerId).setHtml(html);
-        this.marker = false;
 
         let area = this.displayPanel.getEl().down('img');
         if(area) {
             area.setStyle('max-width', (this.displayPanel.getWidth() - 340) + "px");
             area.setStyle('max-height', (this.displayPanel.getHeight() - 40) + "px");
         }
 
-        if(this.data['customSettings']) {
-            if (this.data['customSettings']['focalPointX']) {
-                this.addFocalPoint(this.data['customSettings']['focalPointX'], this.data['customSettings']['focalPointY']);
+        let focalPointX = this.focalPointCoordinates['x'];
+        let focalPointY = this.focalPointCoordinates['y'];
+
+        //on init, the marker is undefined (on init) or set (on resize), is false when removing focal point
+        if (this.marker !== false) {
+            this.marker = false;
+            if (focalPointX > -100 && focalPointY > -100) {
+                this.addFocalPoint(focalPointX, focalPointY);
+            } else if (this.data['customSettings']) {
+                if (this.data['customSettings']['focalPointX'] && this.data['customSettings']['focalPointY']) {
+                    this.addFocalPoint(this.data['customSettings']['focalPointX'], this.data['customSettings']['focalPointY']);
+                }
             }
         }
     },
@@ -411,8 +432,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, {
                 text: t("delete"),
                 iconCls: "pimcore_icon_delete",
                 handler: function (el) {
-                    marker.remove();
-                    this.marker = false;
+                    this.removeFocalPoint();
                 }.bind(this)
             }));
 
@@ -427,30 +447,46 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, {
 
         var markerDD = new Ext.dd.DD(marker);
 
-        this.marker = marker;
-    },
+        Ext.getCmp('remove_focal_point_' + this.id).setVisible(true);
+        Ext.getCmp('add_focal_point_' + this.id).setVisible(false);
 
-    getSaveData : function ($super, only) {
-        var parameters = $super(only);
+        this.marker = marker;
 
+    },
+    removeFocalPoint: function () {
         if(this["marker"]) {
+            this.marker.remove();
+            this["marker"] = false;
+            Ext.getCmp('remove_focal_point_' + this.id).setVisible(false);
+            Ext.getCmp('add_focal_point_' + this.id).setVisible(true);
+            this.focalPointCoordinates = {x: -100, y: -100};
+        }
+    },
+    updateFocalPointCoordinates: function () {
+        if (this["marker"]) {
+            let top = intval(this.marker.getStyle('top'));
+            let left = intval(this.marker.getStyle('left'));
 
-            var top = intval(this.marker.getStyle('top'));
-            var left = intval(this.marker.getStyle('left'));
+            let boundingBox = this.marker.up().getSize();
 
-            var boundingBox = this.marker.up().getSize();
+            let x = round(left * 100 / boundingBox.width, 8);
+            let y = round(top * 100 / boundingBox.height, 8);
+            this.focalPointCoordinates = {x: x, y: y};
+        }
+    },
+    getSaveData: function ($super, only) {
+        let parameters = $super(only);
 
-            var x = round(left * 100 / boundingBox.width, 8);
-            var y = round(top  * 100 / boundingBox.height, 8);
+        if (this["marker"]) {
+            this.updateFocalPointCoordinates();
 
             parameters["image"] = Ext.encode({
                 "focalPoint": {
-                    "x": x,
-                    "y": y
+                    "x": this.focalPointCoordinates['x'],
+                    "y": this.focalPointCoordinates['y']
                 }
             });
         }
-
         return parameters;
     }
 });

translations/admin.en.yaml

@@ -723,6 +723,7 @@ setup_two_factor: 'Setup Two Factor Authentication'
 2fa_setup_message: 'Two Factor Authentication is required for your account! You have to set it up in your profile settings, otherwise you will not be able to sign in again.'
 2fa_wrong: 'Wrong code entered!'
 set_focal_point: 'Set Focal Point'
+remove_focal_point: 'Remove Focal Point'
 quicksearch: 'Quick Search'
 standard_preview: 'Standard Preview'
 upload_new_version: 'Upload new version'