From d0087461e3e099c7f07ae72bf0d4b4032e19ad2a Mon Sep 17 00:00:00 2001 From: jiajia Date: Thu, 2 Nov 2023 09:45:53 +0100 Subject: [PATCH 1/8] fix temporary focal point position on screen resize, adds the button to remove the focal point once set --- public/js/pimcore/asset/image.js | 69 ++++++++++++++++++++++++-------- translations/admin.en.yaml | 1 + 2 files changed, 54 insertions(+), 16 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index 1c67a31620..b14a82f1d2 100644 --- a/public/js/pimcore/asset/image.js +++ b/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,6 +134,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { bodyStyle: "padding: 10px;", items: [{ xtype: "button", + id: "add_focal_point", text: t("set_focal_point"), iconCls: "pimcore_icon_focal_point", width: "100%", @@ -141,6 +142,18 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { handler: function () { this.addFocalPoint(); }.bind(this) + },{ + xtype: "button", + id: "remove_focal_point", + text: t("remove_focal_point"), + iconCls: "pimcore_icon_focal_point", + width: "100%", + textAlign: "left", + hidden: this["marker"] !== false, + handler: function () { + console.log(this["marker"]); + this.removeFocalPoint(); + }.bind(this) }, { xtype: "container", html: "
" @@ -368,6 +381,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { }); this.displayPanel.on('resize', function () { + this.getFocalPointCoordinates(); this.initPreviewImage(); }.bind(this)); } @@ -377,7 +391,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { initPreviewImage: function () { - var html = ''; + let html = ''; Ext.get(this.previewContainerId).setHtml(html); this.marker = false; @@ -387,8 +401,13 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { area.setStyle('max-height', (this.displayPanel.getHeight() - 40) + "px"); } - if(this.data['customSettings']) { - if (this.data['customSettings']['focalPointX']) { + let focalPointX = this.focalPointCoordinates['x']; + let focalPointY = this.focalPointCoordinates['y']; + + 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']); } } @@ -427,30 +446,48 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { var markerDD = new Ext.dd.DD(marker); - this.marker = marker; - }, + Ext.getCmp('remove_focal_point').setVisible(true); + Ext.getCmp('add_focal_point').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').setVisible(false); + Ext.getCmp('add_focal_point').setVisible(true); + } + }, + getFocalPointCoordinates: function () { + let x = -100; + let y = -100; - var top = intval(this.marker.getStyle('top')); - var left = intval(this.marker.getStyle('left')); + if (this["marker"]) { + let top = intval(this.marker.getStyle('top')); + let left = intval(this.marker.getStyle('left')); - var boundingBox = this.marker.up().getSize(); + let boundingBox = this.marker.up().getSize(); - var x = round(left * 100 / boundingBox.width, 8); - var y = round(top * 100 / boundingBox.height, 8); + x = round(left * 100 / boundingBox.width, 8); + y = round(top * 100 / boundingBox.height, 8); + } + this.focalPointCoordinates = {x: x, y: y}; + }, + getSaveData: function ($super, only) { + let parameters = $super(only); + + if (this["marker"]) { + this.getFocalPointCoordinates(); parameters["image"] = Ext.encode({ "focalPoint": { - "x": x, - "y": y + "x": this.focalPointCoordinates['x'], + "y": this.focalPointCoordinates['y'] } }); } - return parameters; } }); diff --git a/translations/admin.en.yaml b/translations/admin.en.yaml index fd63b958c7..e927aadcda 100644 --- a/translations/admin.en.yaml +++ b/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' From 40a5a6cac129ccd0b5eb7c4fa02d4a2a77e57ec0 Mon Sep 17 00:00:00 2001 From: jiajia Date: Thu, 2 Nov 2023 09:47:42 +0100 Subject: [PATCH 2/8] remove console log --- public/js/pimcore/asset/image.js | 1 - 1 file changed, 1 deletion(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index b14a82f1d2..72ab211333 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -151,7 +151,6 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { textAlign: "left", hidden: this["marker"] !== false, handler: function () { - console.log(this["marker"]); this.removeFocalPoint(); }.bind(this) }, { From 858754585c47df5997020ef9302f95c88ffb2bb6 Mon Sep 17 00:00:00 2001 From: jiajia Date: Thu, 2 Nov 2023 09:55:00 +0100 Subject: [PATCH 3/8] change delete focal point icon --- public/css/icons.css | 5 +++++ public/js/pimcore/asset/image.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/public/css/icons.css b/public/css/icons.css index b5ad831848..afa8085da1 100644 --- a/public/css/icons.css +++ b/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; } diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index 72ab211333..3531d1138e 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -146,7 +146,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { xtype: "button", id: "remove_focal_point", text: t("remove_focal_point"), - iconCls: "pimcore_icon_focal_point", + iconCls: "pimcore_icon_focal_point_remove", width: "100%", textAlign: "left", hidden: this["marker"] !== false, From 15685e1ed732d09dc5bbeb3ff2b017b4e587680c Mon Sep 17 00:00:00 2001 From: JiaJia Ji Date: Thu, 2 Nov 2023 12:14:28 +0100 Subject: [PATCH 4/8] fix contextmenu focal point removal --- public/js/pimcore/asset/image.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index 3531d1138e..c2db98cbbc 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -429,8 +429,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) })); From 04189de00b3f55ce184cf168252706e85b393ee7 Mon Sep 17 00:00:00 2001 From: JiaJia Ji Date: Fri, 3 Nov 2023 11:52:00 +0100 Subject: [PATCH 5/8] append asset id to add/remove focal point button id --- public/js/pimcore/asset/image.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index c2db98cbbc..ff5e2ef17c 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -134,7 +134,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { bodyStyle: "padding: 10px;", items: [{ xtype: "button", - id: "add_focal_point", + id: "add_focal_point_" + this.id, text: t("set_focal_point"), iconCls: "pimcore_icon_focal_point", width: "100%", @@ -144,7 +144,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { }.bind(this) },{ xtype: "button", - id: "remove_focal_point", + id: "remove_focal_point_" + this.id, text: t("remove_focal_point"), iconCls: "pimcore_icon_focal_point_remove", width: "100%", @@ -444,8 +444,8 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { var markerDD = new Ext.dd.DD(marker); - Ext.getCmp('remove_focal_point').setVisible(true); - Ext.getCmp('add_focal_point').setVisible(false); + Ext.getCmp('remove_focal_point_' + this.id).setVisible(true); + Ext.getCmp('add_focal_point_' + this.id).setVisible(false); this.marker = marker; @@ -454,8 +454,8 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { if(this["marker"]) { this.marker.remove(); this["marker"] = false; - Ext.getCmp('remove_focal_point').setVisible(false); - Ext.getCmp('add_focal_point').setVisible(true); + Ext.getCmp('remove_focal_point_' + this.id).setVisible(false); + Ext.getCmp('add_focal_point_' + this.id).setVisible(true); } }, getFocalPointCoordinates: function () { From b95886e193b0f31069fbe7973d190047adf88374 Mon Sep 17 00:00:00 2001 From: jiajia Date: Mon, 6 Nov 2023 11:10:36 +0100 Subject: [PATCH 6/8] refactor getFocalPointcoordinates --- public/js/pimcore/asset/image.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index ff5e2ef17c..6836004109 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -380,7 +380,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { }); this.displayPanel.on('resize', function () { - this.getFocalPointCoordinates(); + this.setFocalPointCoordinates(); this.initPreviewImage(); }.bind(this)); } @@ -458,26 +458,23 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { Ext.getCmp('add_focal_point_' + this.id).setVisible(true); } }, - getFocalPointCoordinates: function () { - let x = -100; - let y = -100; - + setFocalPointCoordinates: function () { if (this["marker"]) { let top = intval(this.marker.getStyle('top')); let left = intval(this.marker.getStyle('left')); let boundingBox = this.marker.up().getSize(); - x = round(left * 100 / boundingBox.width, 8); - y = round(top * 100 / boundingBox.height, 8); + let x = round(left * 100 / boundingBox.width, 8); + let y = round(top * 100 / boundingBox.height, 8); + this.focalPointCoordinates = {x: x, y: y}; } - this.focalPointCoordinates = {x: x, y: y}; }, getSaveData: function ($super, only) { let parameters = $super(only); if (this["marker"]) { - this.getFocalPointCoordinates(); + this.setFocalPointCoordinates(); parameters["image"] = Ext.encode({ "focalPoint": { From 4057b0081a69673f6102d8958764ec26f53ec468 Mon Sep 17 00:00:00 2001 From: jiajia Date: Mon, 6 Nov 2023 11:22:42 +0100 Subject: [PATCH 7/8] rename to updateFocalPointCoordinates --- public/js/pimcore/asset/image.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index 6836004109..4218bd803c 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -380,7 +380,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { }); this.displayPanel.on('resize', function () { - this.setFocalPointCoordinates(); + this.updateFocalPointCoordinates(); this.initPreviewImage(); }.bind(this)); } @@ -458,7 +458,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { Ext.getCmp('add_focal_point_' + this.id).setVisible(true); } }, - setFocalPointCoordinates: function () { + updateFocalPointCoordinates: function () { if (this["marker"]) { let top = intval(this.marker.getStyle('top')); let left = intval(this.marker.getStyle('left')); @@ -474,7 +474,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { let parameters = $super(only); if (this["marker"]) { - this.setFocalPointCoordinates(); + this.updateFocalPointCoordinates(); parameters["image"] = Ext.encode({ "focalPoint": { From a59e16ff7339a2575b55f9bb23af63835b107d14 Mon Sep 17 00:00:00 2001 From: jiajia Date: Mon, 6 Nov 2023 14:11:30 +0100 Subject: [PATCH 8/8] fix removed marker bug --- public/js/pimcore/asset/image.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/public/js/pimcore/asset/image.js b/public/js/pimcore/asset/image.js index 4218bd803c..9b34d00ffb 100644 --- a/public/js/pimcore/asset/image.js +++ b/public/js/pimcore/asset/image.js @@ -392,7 +392,6 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { let html = ''; Ext.get(this.previewContainerId).setHtml(html); - this.marker = false; let area = this.displayPanel.getEl().down('img'); if(area) { @@ -403,11 +402,15 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { let focalPointX = this.focalPointCoordinates['x']; let focalPointY = this.focalPointCoordinates['y']; - 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']); + //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']); + } } } }, @@ -456,6 +459,7 @@ pimcore.asset.image = Class.create(pimcore.asset.asset, { 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 () {