New fixed layout: canvas (#1100)

Addition of a fixed canvas layout able to freely position and resize widgets
over a background. Can be used for floorplans or schemas (as an alternative
to floorplan pages), with the controls rendered over the image.

Rework layout type selection - default to responsive - and allow to select
a fixed type layout when the page is empty.

Signed-off-by: Gautier Taravella <[email protected]>
Also-off-by: Yannick Schaus <[email protected]>

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

@@ -87,6 +87,8 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
 | Component | Name | Description |
 |--------|------|-------------|
 | [`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-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 |
 | [`oh-grid-row`](./oh-grid-row.html) |  [Layout Grid Row](./oh-grid-row.html) | A row in a grid layout |

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

@@ -0,0 +1,96 @@
+---
+title: oh-canvas-item - Canvas Item
+component: oh-canvas-item
+label: Canvas Item
+description: Specific attributes to display widgets on a canvas.
+source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-canvas-item.md
+prev: /docs/ui/components/
+---
+
+# oh-canvas-item - Canvas Item
+
+<!-- Put a screenshot here if relevant:
+![](./images/oh-canvas-item/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 -->
+Specific attributes to display widgets on a canvas.
+<!-- GENERATED /componentDescription -->
+
+## Configuration
+
+<!-- DO NOT REMOVE the following comments -->
+<!-- GENERATED props -->
+### Layout Settings
+<div class="props">
+<PropGroup name="appearance" label="Layout Settings">
+<PropBlock type="BOOLEAN" name="notStyled" label="Preserve classic style">
+  <PropDescription>
+    Preserve classic appearance of widgets as in standard layout pages.
+  </PropDescription>
+</PropBlock>
+<PropBlock type="BOOLEAN" name="noCanvasShadow" label="No elements shadow">
+  <PropDescription>
+    Do not shadow inner elements of standard widgets
+  </PropDescription>
+</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-item.
+
+-->
+
+<!-- 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-item/example1.jpg)
+
+```yaml
+component: oh-canvas-item
+config:
+  prop1: value1
+  prop2: value2
+```
+
+### Example 2
+
+![](./images/oh-canvas-item/example2.jpg)
+
+::: details YAML
+```yaml
+component: oh-canvas-item
+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/doc/components/oh-canvas-layout.md

@@ -0,0 +1,143 @@
+---
+title: oh-canvas-layout - Canvas Layout
+component: oh-canvas-layout
+label: Canvas Layout
+description: Position widgets on a canvas layout with arbitrary position and size down to pixel resolution
+source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md
+prev: /docs/ui/components/
+---
+
+# oh-canvas-layout - Canvas Layout
+
+<!-- Put a screenshot here if relevant:
+![](./images/oh-canvas-layout/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 -->
+Position widgets on a canvas layout with arbitrary position and size down to pixel resolution
+<!-- GENERATED /componentDescription -->
+
+## Configuration
+
+<!-- DO NOT REMOVE the following comments -->
+<!-- GENERATED props -->
+### Layout Settings
+<div class="props">
+<PropGroup name="layout" label="Layout Settings">
+<PropBlock type="INTEGER" name="grid" label="Grid size">
+  <PropDescription>
+    Grid size in pixels used to snap content (default 20)
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+### Screen Settings
+<div class="props">
+<PropGroup name="screenSettings" label="Screen Settings">
+<PropBlock type="INTEGER" name="screenWidth" label="Screen Width">
+  <PropDescription>
+    Screen width in pixels (default 1280)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="INTEGER" name="screenHeight" label="Screen Height">
+  <PropDescription>
+    Screen width in pixels (default 720)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="BOOLEAN" name="scale" label="Scaling">
+  <PropDescription>
+    Scale content to screen width (can lead to unexpected styling issues) (default false)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="imageUrl" label="Image URL" context="url">
+  <PropDescription>
+    The URL of the image to display as background
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="imageSrcSet" label="Image Source Set">
+  <PropDescription>
+    The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/[email protected] 2x"
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+### Canvas items shadow
+<div class="props">
+<PropGroup name="shadow" label="Canvas items shadow">
+<PropBlock type="TEXT" name="boxShadow" label="Box shadow">
+  <PropDescription>
+    Shadow applied to box elements (box-shadow CSS syntax).
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="textShadow" label="Text shadow">
+  <PropDescription>
+    Shadow applied to text elements or font icons (text-shadow CSS syntax)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="filterShadow" label="Fitler Shadow">
+  <PropDescription>
+    Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)
+  </PropDescription>
+</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-layout.
+
+-->
+
+<!-- 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-layout/example1.jpg)
+
+```yaml
+component: oh-canvas-layout
+config:
+  prop1: value1
+  prop2: value2
+```
+
+### Example 2
+
+![](./images/oh-canvas-layout/example2.jpg)
+
+::: details YAML
+```yaml
+component: oh-canvas-layout
+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/package.json

@@ -88,6 +88,7 @@
     "vue": "^2.6.12",
     "vue-async-computed": "^3.9.0",
     "vue-codemirror": "^4.0.6",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-echarts": "^4.1.0",
     "vue-fragment": "^1.5.1",
     "vue-fullscreen": "^2.2.0",

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

@@ -67,3 +67,31 @@ export function OhGridLayoutDefinition () {
       pb('showFullscreenIcon', 'Show Fullscreen Icon', 'Show a fullscreen icon on the top right corner (default false)')
     ])
 }
+
+export function OhCanvasItemDefinition () {
+  return new WidgetDefinition('oh-canvas-item', 'Canvas Item', 'Specific attributes to display widgets on a canvas.')
+    .paramGroup(pg('appearance', 'Layout Settings'), [
+      pb('notStyled', 'Preserve classic style', 'Preserve classic appearance of widgets as in standard layout pages.'),
+      pb('noCanvasShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
+        .v((value, configuration, configDescription, parameters) => { return configuration.notStyled !== true })
+    ])
+}
+
+export function OhCanvasLayoutDefinition () {
+  return new WidgetDefinition('oh-canvas-layout', 'Canvas Layout', 'Position widgets on a canvas layout with arbitrary position and size down to pixel resolution')
+    .paramGroup(pg('layout', 'Layout Settings'), [
+      pn('grid', 'Grid size', 'Grid size in pixels used to snap content (default 20)')
+    ])
+    .paramGroup(pg('screenSettings', 'Screen Settings'), [
+      pn('screenWidth', 'Screen Width', 'Screen width in pixels (default 1280)'),
+      pn('screenHeight', 'Screen Height', 'Screen width in pixels (default 720)'),
+      pb('scale', 'Scaling', 'Scale content to screen width (can lead to unexpected styling issues) (default false)'),
+      pt('imageUrl', 'Image URL', 'The URL of the image to display as background').c('url'),
+      pt('imageSrcSet', 'Image Source Set', 'The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/[email protected] 2x"')
+    ])
+    .paramGroup(pg('shadow', 'Canvas items shadow'), [
+      pt('boxShadow', 'Box shadow', 'Shadow applied to box elements (box-shadow CSS syntax).').a(),
+      pt('textShadow', 'Text shadow', 'Shadow applied to text elements or font icons (text-shadow CSS syntax)').a(),
+      pt('filterShadow', 'Fitler Shadow', 'Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)').a()
+    ])
+}

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

@@ -6,3 +6,5 @@ export { default as OhGridCol } from './oh-grid-col.vue'
 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 OhCanvasItem } from './oh-canvas-item.vue'