{
+ collapsed = !collapsed;
+ }}
+>
+
+
+{#if !collapsed}
+
+
+
+ Action
+
+
+
+
+
+
+
+
+
+{/if}
+
+
+
+
+
+
diff --git a/src/lib/Modal/PictureElements/ElementsPanel.svelte b/src/lib/Modal/PictureElements/ElementsPanel.svelte
new file mode 100644
index 00000000..9a821bb3
--- /dev/null
+++ b/src/lib/Modal/PictureElements/ElementsPanel.svelte
@@ -0,0 +1,372 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Elements
+
+
+
+
+
+
+ {#each layers as shape (shape.id)}
+ {@const konvaStoreEquivalent = $konvaStore?.children?.find(
+ (item) => item?.attrs?.id === shape?.attrs?.id
+ )}
+
+
+
+
+
diff --git a/src/lib/Modal/PictureElements/HelpOverlay.svelte b/src/lib/Modal/PictureElements/HelpOverlay.svelte
new file mode 100644
index 00000000..9678d29f
--- /dev/null
+++ b/src/lib/Modal/PictureElements/HelpOverlay.svelte
@@ -0,0 +1,218 @@
+
+
+ node?.attrs?.id === shape?.attrs?.id)}
+ on:dragstart={() => handleDragStart(shape?.attrs?.id)}
+ on:click={async (event) => {
+ // blur any active attr input to trigger onchange before switching layer
+ if (
+ document?.activeElement instanceof HTMLInputElement ||
+ document?.activeElement instanceof HTMLTextAreaElement
+ ) {
+ document?.activeElement?.blur?.();
+ await tick();
+ }
+ konva.handleElementClick(event, shape?.attrs?.id);
+ }}
+ >
+
+
+
+
+
+ {#if shape?.attrs?.type === 'icon' || shape?.attrs?.type === 'state-icon'}
+ {#if shape?.attrs?.type === 'state-icon' && !shape?.attrs?.entity_id}
+
+ {/each}
+
+ 
+
+
+ {:else}
+ {$lang('picture_elements')}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if showHelp}
+ (resizing = true)}>
+
+
diff --git a/src/lib/Modal/PictureElements/SelectedAttributes.svelte b/src/lib/Modal/PictureElements/SelectedAttributes.svelte
new file mode 100644
index 00000000..96fc3a97
--- /dev/null
+++ b/src/lib/Modal/PictureElements/SelectedAttributes.svelte
@@ -0,0 +1,408 @@
+
+
+
+ {#if selectedShapes?.length === 0}
+
+
+
+
+
diff --git a/src/lib/Modal/PictureElements/TextPanel.svelte b/src/lib/Modal/PictureElements/TextPanel.svelte
new file mode 100644
index 00000000..65c3181e
--- /dev/null
+++ b/src/lib/Modal/PictureElements/TextPanel.svelte
@@ -0,0 +1,377 @@
+
+
+
+
+
+
+ {#if attr.type === 'button'}
+
+
+ {:else if attr.type === 'color'}
+
+ setAttribute(selectedShape?.attrs?.id, attr?.id, event)}
+ on:input={(event) => handleInput(selectedShape?.attrs?.id, attr?.id, event)}
+ style:width={attr?.width}
+ disabled={attr?.disabled}
+ />
+ {:else}
+
+ setAttribute(selectedShape?.attrs?.id, attr?.id, event)}
+ style:width={attr?.width}
+ disabled={attr?.disabled}
+ />
+ {/if}
+
+ {/each}
+
+ {/if}
+ {:else if selectedShapes?.length > 1}
+
+
+
+ {
+ collapsed = !collapsed;
+ }}
+>
+
+
+{#if !collapsed}
+
+
+
+ Text
+
+
+
+
+
+
+
+
+
+{/if}
+
+
diff --git a/src/lib/Modal/PictureElements/Toolbar.svelte b/src/lib/Modal/PictureElements/Toolbar.svelte
new file mode 100644
index 00000000..173b5eb0
--- /dev/null
+++ b/src/lib/Modal/PictureElements/Toolbar.svelte
@@ -0,0 +1,123 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/Modal/PictureElements/TransformAttributes.svelte b/src/lib/Modal/PictureElements/TransformAttributes.svelte
new file mode 100644
index 00000000..7be90b3d
--- /dev/null
+++ b/src/lib/Modal/PictureElements/TransformAttributes.svelte
@@ -0,0 +1,243 @@
+
+
+
+
+
+
+
+ handleInput(attr?.id, 'fontFamily', event)}
+ on:change={(event) => setAttribute(attr?.id, 'fontFamily', event)}
+ {disabled}
+ />
+
+
+
+
+
+
+ setAttribute(attr?.id, 'fontSize', event)}
+ {disabled}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ setAttribute(attr?.id, 'letterSpacing', event)}
+ {disabled}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#each attributes as attr}
+
+
+
diff --git a/src/lib/Modal/PictureElements/computeIcon.ts b/src/lib/Modal/PictureElements/computeIcon.ts
new file mode 100644
index 00000000..626c5337
--- /dev/null
+++ b/src/lib/Modal/PictureElements/computeIcon.ts
@@ -0,0 +1,717 @@
+import type { HassEntities, HassEntity } from 'home-assistant-js-websocket';
+import { getDomain } from '$lib/Utils';
+
+/**
+ * New computeIcon.ts for picture elements
+ * This should replace computeIcon.svelte
+ */
+
+// https://github.com/home-assistant/frontend/blob/dev/src/common/const.ts
+const FIXED_DOMAIN_ICONS: Record
+ {#if attr.type === 'button'}
+
+ {:else}
+
+
+ handleInput(attr, event)}
+ disabled={attr?.disabled}
+ />
+ {/if}
+
+ {/each}
+
+
+
+
+
+
+
+
+
+
+
+