Addition of graphical layer management for canvas layouts

bundles/org.openhab.ui/doc/components/index.md

@@ -88,6 +88,7 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
 |--------|------|-------------|
 | [`oh-block`](./oh-block.html) |  [Layout Grid Block](./oh-block.html) | A block in a grid layout |
 | [`oh-canvas-item`](./oh-canvas-item.html) |  [Canvas Item](./oh-canvas-item.html) | Specific attributes to display widgets on a canvas. |
+| [`oh-canvas-layer`](./oh-canvas-layer.html) |  [Canvas Layer](./oh-canvas-layer.html) | Layer for grouping widgets in canvas |
 | [`oh-canvas-layout`](./oh-canvas-layout.html) |  [Canvas Layout](./oh-canvas-layout.html) | Position widgets on a canvas layout with arbitrary position and size down to pixel resolution |
 | [`oh-grid-col`](./oh-grid-col.html) |  [Layout Grid Column](./oh-grid-col.html) | A column in a grid layout |
 | [`oh-grid-layout`](./oh-grid-layout.html) |  [Fixed Grid Layout](./oh-grid-layout.html) | Arranges widgets on a grid of squares with user-defined sizes |

bundles/org.openhab.ui/doc/components/oh-canvas-layer.md

@@ -0,0 +1,116 @@
+---
+title: oh-canvas-layer - Canvas Layer
+component: oh-canvas-layer
+label: Canvas Layer
+description: Layer for grouping widgets in canvas
+source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-canvas-layer.md
+prev: /docs/ui/components/
+---
+
+# oh-canvas-layer - Canvas Layer
+
+<!-- Put a screenshot here if relevant:
+![](./images/oh-canvas-layer/header.jpg)
+-->
+
+[[toc]]
+
+<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
+<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
+<!-- GENERATED componentDescription -->
+Layer for grouping widgets in canvas
+<!-- GENERATED /componentDescription -->
+
+## Configuration
+
+<!-- DO NOT REMOVE the following comments -->
+<!-- GENERATED props -->
+### General
+<div class="props">
+<PropGroup label="General">
+<PropBlock type="TEXT" name="layerName" label="Name">
+  <PropDescription>
+    Layer name (for editor)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="BOOLEAN" name="preload" label="Pre-load">
+  <PropDescription>
+    Pre-load layer contents so that switching layer visibility is faster and dynamic widgets are immediately displayed in their current state. Initial page load might be longer (default false)
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+### Visibility Options
+<div class="props">
+<PropGroup name="visibility" label="Visibility Options">
+<PropBlock type="TEXT" name="visible" label="Visible">
+  <PropDescription>
+    Enter an expression to hide the widget conditionally or false to never display it
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="visibleTo" label="Visible only to">
+  <PropDescription>
+    Role(s) this widget will be visible to (in the code view you can restrict to specific users with the <code>user:userid</code> syntax).<br/><strong>PLEASE NOTE: this should NOT be considered a security feature! Items can still be controlled by other means.</strong>
+  </PropDescription>
+  <PropOptions multiple="true">
+    <PropOption value="role:administrator" label="Administrators" />
+    <PropOption value="role:user" label="Users" />
+  </PropOptions>
+</PropBlock>
+</PropGroup>
+</div>
+
+
+<!-- GENERATED /props -->
+
+<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
+### Inherited Properties
+
+-->
+
+<!-- If applicable describe the slots recognized by the component and what they represent:
+### Slots
+
+#### `default`
+
+The contents of the oh-canvas-layer.
+
+-->
+
+<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
+## Examples
+
+### Example 1
+
+![](./images/oh-canvas-layer/example1.jpg)
+
+```yaml
+component: oh-canvas-layer
+config:
+  prop1: value1
+  prop2: value2
+```
+
+### Example 2
+
+![](./images/oh-canvas-layer/example2.jpg)
+
+::: details YAML
+```yaml
+component: oh-canvas-layer
+config:
+  prop1: value1
+  prop2: value2
+slots
+```
+:::
+
+-->
+
+<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
+## Community Resources
+
+- [Community Post 1](https://community.openhab.org/t/12345)
+- [Community Post 2](https://community.openhab.org/t/23456)
+-->

bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js

@@ -1,6 +1,7 @@
 // definitions for the layout widgets
 
 import { WidgetDefinition, po, pt, pn, pb, pg } from '../helpers.js'
+import { VisibilityGroup, VisibilityParameters } from '../visibility.js'
 
 export function OhBlockDescription () {
   return new WidgetDefinition('oh-block', 'Layout Grid Block', 'A block in a grid layout')
@@ -95,3 +96,12 @@ export function OhCanvasLayoutDefinition () {
       pt('filterShadow', 'Fitler Shadow', 'Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)').a()
     ])
 }
+
+export function OhCanvasLayerDefinition () {
+  return new WidgetDefinition('oh-canvas-layer', 'Canvas Layer', 'Layer for grouping widgets in canvas')
+    .params([
+      pt('layerName', 'Name', 'Layer name (for editor)'),
+      pb('preload', 'Pre-load', 'Pre-load layer contents so that switching layer visibility is faster and dynamic widgets are immediately displayed in their current state. Initial page load might be longer (default false)').a()
+    ])
+    .paramGroup(VisibilityGroup(), VisibilityParameters())
+}

bundles/org.openhab.ui/web/src/components/widgets/layout/index.js

@@ -7,4 +7,5 @@ export { default as OhGridCells } from './oh-grid-cells.vue'
 export { default as OhMasonry } from './oh-masonry.vue'
 export { default as OhGridLayout } from './oh-grid-layout.vue'
 export { default as OhCanvasLayout } from './oh-canvas-layout.vue'
+export { default as OhCanvasLayer } from './oh-canvas-layer.vue'
 export { default as OhCanvasItem } from './oh-canvas-item.vue'

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue

@@ -34,13 +34,14 @@
           </f7-menu-dropdown-item>
           <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" divider />
           <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component, context.parent)" href="#" text="Copy" />
+          <f7-menu-dropdown-item @click="context.editmode.cutWidget(context.component, context.parent)" href="#" text="Cut" />
           <f7-menu-dropdown-item divider />
-          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent, 'canvas')" href="#" text="Bring to Front" />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent, 'canvas')" href="#" text="Move Up" />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent, 'canvas')" href="#" text="Move Down" />
-          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent, 'canvas')" href="#" text="Send to Back" />
+          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent)" href="#" text="Bring to Front" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent)" href="#" text="Move Up" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent)" href="#" text="Move Down" />
+          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent)" href="#" text="Send to Back" />
           <f7-menu-dropdown-item divider />
-          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'canvas')" href="#" text="Remove Item" />
+          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent)" href="#" text="Remove Item" />
         </f7-menu-dropdown>
       </f7-menu-item>
     </f7-menu>
@@ -62,6 +63,7 @@
 
   .oh-canvas-item
     position absolute
+    pointer-events auto
 
     .oh-canvas-item-content
       width 100%

bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layer.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-if="layerPreload || layerVisible" v-show="!layerPreload || layerVisible" ref="ohCanvasLayer" class="oh-canvas-layer">
+    <oh-canvas-item
+      v-for="obj in layer"
+      :key="obj.id"
+      :id="obj.id"
+      :grid-enable="gridEnable"
+      :grid-pitch="gridPitch"
+      :context="childContext(obj.item)" />
+  </div>
+</template>
+
+<style lang="stylus">
+.oh-canvas-layer
+  height 100%
+  width 100%
+  position fixed
+  pointer-events none
+</style>
+
+<script>
+import mixin from '../widget-mixin'
+import OhCanvasItem from './oh-canvas-item'
+import { OhCanvasLayerDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhCanvasLayerDefinition,
+  components: {
+    OhCanvasItem
+  },
+  props: {
+    gridPitch: Number,
+    gridEnable: Boolean,
+    id: String
+  },
+  data () {
+    return {
+      layer: []
+    }
+  },
+  created () {
+    this.computeLayer()
+  },
+  computed: {
+    layerPreload () {
+      return this.config?.preload === true
+    },
+    layerVisible () {
+      return (!this.context.editmode && this.visible) || (this.context.editmode && this.editVisible)
+    },
+    editVisible () {
+      return !(this.config && (this.config.editVisible === false))
+    }
+  },
+  methods: {
+    computeLayer () {
+      let layer = []
+      if (this.context.component.slots) {
+        this.context.component.slots?.default.forEach((item) => {
+          if (item.component === 'oh-canvas-item') {
+            layer.push({
+              item: item,
+              id: Math.random().toString(36).substring(2)
+            })
+          } else {
+            console.log('Wrong component type in canvas layer: ' + item.component)
+          }
+        })
+      }
+      this.layer = layer
+    }
+  }
+}
+</script>