From ed54bf6d23878e2351c9d278b51a49e55e01d33f Mon Sep 17 00:00:00 2001 From: stefan-hoehn Date: Tue, 19 Nov 2024 00:38:42 +0100 Subject: [PATCH] Canvas Interactive SVG: Prevent image caching & Add id in config dialog (#2881) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit prevent url caching in edit mode, add svg element id to dialog title Signed-off-by: Stefan Höhn --- .../widgets/layout/oh-canvas-embedded-svg-mixin.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js index 70842a09d8..8b11e973f3 100644 --- a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js +++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js @@ -17,8 +17,9 @@ export default { * @returns {Promise} */ embedSvg () { - // Load the real SVG content - return fetch(this.config.imageUrl) + // Load the real SVG content, in editmode we add a random number to the URL to prevent caching + const svgUrl = (this.context.editmode) ? this.config.imageUrl + `?rnd=${Math.random()}` : this.config.imageUrl + return fetch(svgUrl) .then(response => response.text()) .then(svgCode => { this.$refs.canvasBackground.innerHTML = svgCode @@ -46,7 +47,7 @@ export default { const that = this this.$f7router.navigate({ url: 'on-svg-click-settings', route: { path: 'on-svg-click-settings', popup } }, { props: { - widget: new WidgetDefinition('onSvgClickSettings', 'SVG onClick Action', '') + widget: new WidgetDefinition('onSvgClickSettings', `SVG onClick Action for ${id}`, '') .paramGroup(pg('state', 'State', 'Defines if and how the state is represented in the SVG'), [ pi('stateItems', 'State Item(s)', 'Item(s) that should be used to determine the state').m().a(), pb('useProxyElementForState', 'Use State Proxy Element', 'Use "flash" element to highlight the active state. The element is marked with the attribute flash: true and must be part of the elements group').a(),