Merge 85ced5756e into 634e1dbde8

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -113,6 +113,22 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     }
   }
 
+  private _handleImageClick(ev: MouseEvent) {
+    if (!this._config) return;
+
+    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();
+    const x = ((ev.clientX - rect.left) / rect.width) * 100;
+    const y = ((ev.clientY - rect.top) / rect.height) * 100;
+
+    this.dispatchEvent(
+      new CustomEvent("picture-elements-clicked", {
+        detail: { x, y },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   protected render() {
     if (!this.hass || !this._config) {
       return nothing;
@@ -149,6 +165,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
             .aspectRatio=${this._config.aspect_ratio}
             .darkModeFilter=${this._config.dark_mode_filter}
             .darkModeImage=${this._config.dark_mode_image}
+            @click=${this._handleImageClick}
           ></hui-image>
           ${this._elements}
         </div>

src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts

@@ -225,6 +225,54 @@ export class HuiPictureElementsCardEditor
     }
   };
 
+  private _handleImageClick = (ev: CustomEvent<{ x: number; y: number }>) => {
+    const { x, y } = ev.detail;
+
+    // Only handle clicks when actively editing an element
+    if (
+      !this._subElementEditorConfig?.elementConfig ||
+      this._subElementEditorConfig.type !== "element"
+    ) {
+      return;
+    }
+
+    const elementConfig = this._subElementEditorConfig
+      .elementConfig as LovelaceElementConfig;
+
+    const currentPosition = elementConfig.style?.position;
+    if (currentPosition && currentPosition !== "absolute") {
+      return;
+    }
+
+    const newElement = {
+      ...elementConfig,
+      style: {
+        ...(elementConfig.style || {}),
+        left: `${Math.round(x)}%`,
+        top: `${Math.round(y)}%`,
+      },
+    };
+
+    const updateEvent = new CustomEvent("config-changed", {
+      detail: { config: newElement },
+    });
+    updateEvent.stopPropagation = () => undefined;
+    this._handleSubElementChanged(updateEvent);
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("picture-elements-clicked", this._handleImageClick);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener(
+      "picture-elements-clicked",
+      this._handleImageClick
+    );
+    super.disconnectedCallback();
+  }
+
   static get styles(): CSSResultGroup {
     return [configElementStyle];
   }
@@ -234,4 +282,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "hui-picture-elements-card-editor": HuiPictureElementsCardEditor;
   }
+
+  interface WindowEventMap {
+    "picture-elements-clicked": CustomEvent<{ x: number; y: number }>;
+  }
 }