Fix: Image Transform button not working

addons/html_editor/static/src/main/media/image_transform_button.js

@@ -3,53 +3,36 @@ import { toolbarButtonProps } from "@html_editor/main/toolbar/toolbar";
 import { registry } from "@web/core/registry";
 import { ImageTransformation } from "./image_transformation";
 
-export class ImageTransformButton extends Component {
-    static template = "html_editor.ImageTransformButton";
-    static props = {
-        id: String,
-        icon: String,
-        title: String,
-        getSelectedImage: Function,
-        resetImageTransformation: Function,
-        addStep: Function,
-        document: { validate: (p) => p.nodeType === Node.DOCUMENT_NODE },
-        editable: { validate: (p) => p.nodeType === Node.ELEMENT_NODE },
-        ...toolbarButtonProps,
-        activeTitle: String,
-    };
-
-    setup() {
-        this.state = useState({ active: false });
-        this.pointerDownInsideTransform = false;
-        // We close the image transform when we click outside any element not
-        // related to it. When the pointerdown of the click is inside the image
-        // transform and pointerup is outside while resizing or rotating the
-        // image it will consider the click as being done outside image
-        // transform. So we need to keep track if the pointerdown is inside or
-        // outside to know if we want to close the image transform component or
-        // not.
-        useExternalListener(this.props.document, "pointerdown", (ev) => {
-            if (this.isNodeInsideTransform(ev.target)) {
-                this.pointerDownInsideTransform = true;
-            } else {
-                this.closeImageTransformation();
-                this.pointerDownInsideTransform = false;
-            }
-        });
-        useExternalListener(this.props.document, "click", (ev) => {
-            if (!this.isNodeInsideTransform(ev.target) && !this.pointerDownInsideTransform) {
-                this.closeImageTransformation();
-            }
-            this.pointerDownInsideTransform = false;
-        });
-        // When we click on any character the image is deleted and we need to close the image transform
-        // We handle this by selectionchange
-        useExternalListener(this.props.document, "selectionchange", (ev) => {
-            this.closeImageTransformation();
-        });
-    }
+export function useTransformOperations(state, document, editable, addStep) {
+    let pointerDownInsideTransform = false;
+    // We close the image transform when we click outside any element not
+    // related to it. When the pointerdown of the click is inside the image
+    // transform and pointerup is outside while resizing or rotating the
+    // image it will consider the click as being done outside image
+    // transform. So we need to keep track if the pointerdown is inside or
+    // outside to know if we want to close the image transform component or
+    // not.
+    useExternalListener(document, "pointerdown", (ev) => {
+        if (isNodeInsideTransform(ev.target)) {
+            pointerDownInsideTransform = true;
+        } else {
+            closeImageTransformation();
+            pointerDownInsideTransform = false;
+        }
+    });
+    useExternalListener(document, "click", (ev) => {
+        if (!isNodeInsideTransform(ev.target) && !pointerDownInsideTransform) {
+            closeImageTransformation();
+        }
+        pointerDownInsideTransform = false;
+    });
+    // When we click on any character the image is deleted and we need to close the image transform
+    // We handle this by selectionchange
+    useExternalListener(document, "selectionchange", (ev) => {
+        closeImageTransformation();
+    });
 
-    isNodeInsideTransform(node) {
+    function isNodeInsideTransform(node) {
         if (!node) {
             return false;
         }
@@ -60,7 +43,7 @@ export class ImageTransformButton extends Component {
             return true;
         }
         if (
-            this.isImageTransformationOpen() &&
+            isImageTransformationOpen() &&
             node.matches(
                 ".transfo-container, .transfo-container div, .transfo-container i, .transfo-container span"
             )
@@ -70,41 +53,74 @@ export class ImageTransformButton extends Component {
         return false;
     }
 
-    onButtonClick() {
-        this.handleImageTransformation(this.props.getSelectedImage());
-    }
-
-    handleImageTransformation(image) {
-        if (this.isImageTransformationOpen()) {
-            this.props.resetImageTransformation(image);
-            this.closeImageTransformation();
-        } else {
-            this.openImageTransformation(image);
-        }
-    }
-
-    openImageTransformation(image) {
-        this.state.active = true;
+    function openImageTransformation(image) {
+        state.active = true;
         registry.category("main_components").add("ImageTransformation", {
             Component: ImageTransformation,
             props: {
                 image,
-                document: this.props.document,
-                editable: this.props.editable,
-                destroy: () => this.closeImageTransformation(),
-                onChange: () => this.props.addStep(),
+                document: document,
+                editable: editable,
+                destroy: () => closeImageTransformation(),
+                onChange: () => addStep(),
             },
         });
     }
 
-    isImageTransformationOpen() {
+    function isImageTransformationOpen() {
         return registry.category("main_components").contains("ImageTransformation");
     }
 
-    closeImageTransformation() {
-        this.state.active = false;
-        if (this.isImageTransformationOpen()) {
+    function closeImageTransformation() {
+        state.active = false;
+        if (isImageTransformationOpen()) {
             registry.category("main_components").remove("ImageTransformation");
         }
     }
+
+    return {
+        pointerDownInsideTransform: pointerDownInsideTransform,
+        isNodeInsideTransform: isNodeInsideTransform,
+        openImageTransformation: openImageTransformation,
+        isImageTransformationOpen: isImageTransformationOpen,
+        closeImageTransformation: closeImageTransformation,
+    }
+}
+export class ImageTransformButton extends Component {
+    static template = "html_editor.ImageTransformButton";
+    static props = {
+        id: String,
+        icon: String,
+        title: String,
+        getSelectedImage: Function,
+        resetImageTransformation: Function,
+        addStep: Function,
+        document: { validate: (p) => p.nodeType === Node.DOCUMENT_NODE },
+        editable: { validate: (p) => p.nodeType === Node.ELEMENT_NODE },
+        ...toolbarButtonProps,
+        activeTitle: String,
+    };
+
+    setup() {
+        this.state = useState({ active: false });
+        Object.assign(this.props, useTransformOperations(
+            this.state,
+            this.props.document,
+            this.props.editable,
+            this.props.addStep
+        ));
+    }
+
+    onButtonClick() {
+        this.handleImageTransformation(this.props.getSelectedImage());
+    }
+
+    handleImageTransformation(image) {
+        if (this.props.isImageTransformationOpen()) {
+            this.props.resetImageTransformation(image);
+            this.props.closeImageTransformation();
+        } else {
+            this.props.openImageTransformation(image);
+        }
+    }
 }

addons/website/static/src/builder/plugins/image/image_tool_option.js

@@ -2,13 +2,22 @@ import { BaseOptionComponent } from "@html_builder/core/utils";
 import { ImageShapeOption } from "./image_shape_option";
 import { ImageFilterOption } from "./image_filter_option";
 import { ImageFormatOption } from "./image_format_option";
+import { ImageTransformButton } from "./image_transform_button";
+import { useDomState } from "@html_builder/core/utils";
 
 export class ImageToolOption extends BaseOptionComponent {
     static template = "html_builder.ImageToolOption";
     static components = {
         ImageShapeOption,
         ImageFilterOption,
         ImageFormatOption,
+        ImageTransformButton,
     };
     static props = {};
+    setup() {
+        super.setup();
+        this.state = useDomState((editingElement) => {
+            return {isImageAnimated: editingElement.classList.contains("o_animate")};
+        });
+    }
 }

addons/website/static/src/builder/plugins/image/image_tool_option.xml

@@ -19,8 +19,7 @@
     <BuilderRow label.translate="Transform" preview="false">
         <BuilderButton title.translate="Crop image" action="'cropImage'" icon="'fa-crop'" id="'cropImage'" />
         <BuilderButton title.translate="Reset crop" action="'resetCrop'" t-if="this.isActiveItem('cropImage')">Reset</BuilderButton>
-        <BuilderButton title.translate="Transform the picture" action="'transformImage'" icon="'fa-object-ungroup'" id="'transformImage'" />
-        <BuilderButton title.translate="Reset transformation" action="'resetTransformImage'" t-if="this.isActiveItem('transformImage')">Reset</BuilderButton>
+        <ImageTransformButton id="'transformImage'"/>
     </BuilderRow>
     <ImageFilterOption />
     <BuilderRow label.translate="Size">

addons/website/static/src/builder/plugins/image/image_tool_option_plugin.js

@@ -77,23 +77,6 @@ class ImageToolOptionPlugin extends Plugin {
                     updateImageAttributes();
                 },
             },
-            transformImage: {
-                isApplied: ({ editingElement }) => editingElement.matches(`[style*="transform"]`),
-                apply: () => {
-                    this.dependencies.userCommand.getCommand("transformImage").run();
-                },
-            },
-            resetTransformImage: {
-                apply: ({ editingElement }) => {
-                    editingElement.setAttribute(
-                        "style",
-                        (editingElement.getAttribute("style") || "").replace(
-                            /[^;]*transform[\w:]*;?/g,
-                            ""
-                        )
-                    );
-                },
-            },
             replaceMedia: {
                 load: async ({ editingElement }) => {
                     let icon;

addons/website/static/src/builder/plugins/image/image_transform_button.js

@@ -0,0 +1,54 @@
+import { Component, useState } from "@odoo/owl";
+import { useTransformOperations } from "@html_editor/main/media/image_transform_button";
+import { _t } from "@web/core/l10n/translation";
+import { useDomState } from "@html_builder/core/utils";
+
+export class ImageTransformButton extends Component {
+    static template = "html_builder.ImageTransformButton";
+    static props = { id: String };
+
+    setup() {
+        this.state = useState({ active: false });
+        this.domState = useDomState(
+            (editingElement) => ({
+                applied: editingElement.matches(`[style*="transform"]`)
+            })
+        );
+        this.document = this.env.editor.document;
+        this.editable = this.env.editor.editable;
+        this.addStep = this.env.editor.shared.history.addStep.bind(this);
+        Object.assign(this.props, useTransformOperations(
+            this.state,
+            this.document,
+            this.editable,
+            this.addStep,
+        ));
+    }
+
+    getSelectedImage() {
+        const selectedNodes = this.env.editor.shared.selection.getSelectedNodes();
+        return selectedNodes.find((node) => node.tagName === "IMG");
+    }
+
+    onResetButtonClick() {
+        this.resetImageTransformation(this.getSelectedImage());
+        if (this.props.isImageTransformationOpen()) {
+            this.props.closeImageTransformation();
+        }
+    }
+
+    resetImageTransformation(image) {
+        image.setAttribute(
+            "style",
+            (image.getAttribute("style") || "").replace(/[^;]*transform[\w:]*;?/g, "")
+        );
+        this.addStep();
+    }
+
+    onTransformButtonClick() {
+        let image = this.getSelectedImage();
+        if (!this.props.isImageTransformationOpen()) {
+            this.props.openImageTransformation(image);
+        }
+    }
+}

addons/website/static/src/builder/plugins/image/image_transform_button.xml

@@ -0,0 +1,6 @@
+<templates xml:space="preserve">
+    <t t-name="html_builder.ImageTransformButton">
+        <button type="button" class="btn btn-primary fa fa-fw" t-att-class="'fa-object-ungroup' + (state.active ? ' active' : '')" style="min-width: min-content;" title="Transform the picture" t-on-click="onTransformButtonClick" />
+        <button type="button" class="btn btn-primary" style="min-width: min-content;" title="Reset transformation" t-on-click="onResetButtonClick" t-if="domState.applied">Reset</button>
+    </t>
+</templates>

addons/website/static/src/builder/plugins/image_tool_option_animate_option.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.ImageToolOptionAnimateOption" t-inherit="html_builder.ImageToolOption" t-inherit-mode="extension">
+    <xpath expr="//ImageTransformButton[@id=&quot;'transformImage'&quot;]" position="attributes">
+        <attribute name="t-if">!this.state.isImageAnimated</attribute>
+    </xpath>
+</t>
+
+</templates>

addons/website/static/src/builder/plugins/options/animate_option.js

@@ -34,6 +34,7 @@ export class AnimateOption extends BaseOptionComponent {
                     .getDirectionsItems(editingElement)
                     .filter((i) => !i.check || i.check(editingElement)),
                 isInDropdown: editingElement.closest(".dropdown"),
+                isTransformActive: editingElement.matches(`[style*="transform"]`),
             };
         });
     }

addons/website/static/src/builder/plugins/options/animate_option.xml

@@ -4,7 +4,7 @@
 <t t-name="html_builder.AnimateOption">
     <t t-if="this.state.isOptionActive">
         <BuilderRow label.translate="Animation">
-            <BuilderSelect t-if="!this.isActiveItem('transformImage')" preview="false">
+            <BuilderSelect t-if="!this.state.isTransformActive" preview="false">
                 <BuilderSelectItem action="'setAnimationMode'" actionValue="''"
                             classAction="''"
                             id="'no_animation_opt'">None</BuilderSelectItem>