Renamed layout from 'plan' to canvas', in UI strings as well as in co…

…de. Fix event handling during drag of widgets. Visual tweak of new widget and snap to grid buttons. Lazy-loading of vue-draggable-resizable library.
openhab · Sep 23, 2021 · a99b226 · a99b226
1 parent 1e13ff2
commit a99b226
Show file tree

Hide file tree

Showing 8 changed files with 346 additions and 23,310 deletions.
diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
@@ -68,17 +68,17 @@ export function OhGridLayoutDefinition () {
     ])
 }
 
-export function OhPlanItemDefinition () {
-  return new WidgetDefinition('oh-plan-item', 'Plan Item', 'Specific attributes to display widgets on a plan.')
+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('noPlanShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
+      pb('noCanvasShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
         .v((value, configuration, configDescription, parameters) => { return configuration.notStyled !== true })
     ])
 }
 
-export function OhPlanLayoutDefinition () {
-  return new WidgetDefinition('oh-plan-layout', 'Plan Layout', 'Position widgets on a plan layout with arbitrary position and size down to pixel resolution')
+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 5)')
     ])
@@ -89,7 +89,7 @@ export function OhPlanLayoutDefinition () {
       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/floor-0@2x.jpg 2x"')
     ])
-    .paramGroup(pg('shadow', 'Plan items shadow'), [
+    .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()

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
@@ -6,5 +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 OhPlanLayout } from './oh-plan-layout.vue'
-export { default as OhPlanItem } from './oh-plan-item.vue'
+export { default as OhCanvasLayout } from './oh-canvas-layout.vue'
+export { default as OhCanvasItem } from './oh-canvas-item.vue'
diff --git a/...omponents/widgets/layout/oh-plan-item.vue → ...ponents/widgets/layout/oh-canvas-item.vue b/...omponents/widgets/layout/oh-plan-item.vue → ...ponents/widgets/layout/oh-canvas-item.vue
@@ -1,6 +1,6 @@
 <template>
   <vue-draggable-resizable
-    :id="'oh-plan-item-vdr-' +id"
+    :id="'oh-canvas-item-vdr-' +id"
     :key="reloadKey"
     :x="x"
     :y="y"
@@ -9,14 +9,14 @@
     :parent="true"
     :draggable="!!context.editmode"
     :resizable="!!context.editmode && !autosize"
-    :class-name="!!context.editmode ? 'oh-plan-item-editmode' : 'oh-plan-item-runmode'"
+    :class-name="!!context.editmode ? 'oh-canvas-item-editmode' : 'oh-canvas-item-runmode'"
     :grid="gridEnable ? [gridPitch,gridPitch] : undefined"
-    v-if="visible" class="oh-plan-item no-margin"
+    v-if="visible" class="oh-canvas-item no-margin"
     @dragging="onDrag"
     @resizing="onResize"
     :on-drag-start="onDragStartCallback"
     :on-resize-start="onResizeStartCallback">
-    <f7-menu v-if="context.editmode" class="configure-plan-menu">
+    <f7-menu v-if="context.editmode" class="configure-canvas-menu">
       <f7-menu-item icon-f7="menu" dropdown icon-only>
         <f7-menu-dropdown right>
           <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component, context.parent)" href="#" text="Configure container" />
@@ -33,59 +33,59 @@
           <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 divider />
-          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent, 'plan')" href="#" text="Bring to Front" />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent, 'plan')" href="#" text="Move Up" />
-          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent, 'plan')" href="#" text="Move Down" />
-          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent, 'plan')" href="#" text="Send to Back" />
+          <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 divider />
-          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'plan')" href="#" text="Remove Item" />
+          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'canvas')" href="#" text="Remove Item" />
         </f7-menu-dropdown>
       </f7-menu-item>
     </f7-menu>
-
-    <oh-placeholder-widget v-if="context.editmode && !context.component.slots.default.length" @click="context.editmode.addWidget(context.component, null, context.parent)" class="oh-plan-item-content" />
-    <generic-widget-component v-else-if="context.component.slots.default.length" :context="childContext(context.component.slots.default[0])" @command="onCommand" class="oh-plan-item-content"
-                              :class="{
-                                'oh-plan-item-styled' : styled,
-                                'oh-plan-item-shadow' : styled && shadow
-                              }" />
-
+    <div @click.capture="eventControl" style="width: 100%; height: 100%; position:absolute;">
+      <oh-placeholder-widget v-if="context.editmode && !context.component.slots.default.length" @click="context.editmode.addWidget(context.component, null, context.parent)" class="oh-canvas-item-content" />
+      <generic-widget-component v-else-if="context.component.slots.default.length" :context="childContext(context.component.slots.default[0])" @command="onCommand" class="oh-canvas-item-content"
+                                :class="{
+                                  'oh-canvas-item-styled' : styled,
+                                  'oh-canvas-item-shadow' : styled && shadow
+                                }" />
+    </div>
     <f7-icon v-if="context.editmode" class="drag-handle" f7="move" size="15" color="gray" />
   </vue-draggable-resizable>
 </template>
 
 <style lang="stylus">
-  .oh-plan-item-editmode
+  .oh-canvas-item-editmode
     outline 1px dashed #F00
 
-  .oh-plan-item
+  .oh-canvas-item
     position: absolute
 
-    .oh-plan-item-content
+    .oh-canvas-item-content
       width 100%
       height 100%
       margin 0
 
-    .oh-plan-item-styled        // override background obscuring styles from system widgets
+    .oh-canvas-item-styled        // override background obscuring styles from system widgets
       &.card                    // apply to card items
         box-shadow: none
         background: none
         .card-content, .card-footer
           .segmented, .stepper, .toggle
             background: var(--f7-card-bg-color);
 
-    .oh-plan-item-shadow        // shadow tuned to various card widgets
+    .oh-canvas-item-shadow        // shadow tuned to various card widgets
       &.card                    // apply to card items
         .card-content, .card-footer
           .segmented, .stepper, .toggle
-            box-shadow:  var(--oh-plan-item-box-shadow)
+            box-shadow:  var(--oh-canvas-item-box-shadow)
           .oh-slider
             .range-bar, .range-knob, .range-knob-label
-              box-shadow:  var(--oh-plan-item-box-shadow)
+              box-shadow:  var(--oh-canvas-item-box-shadow)
           img, svg
-            filter: var(--oh-plan-item-svg-shadow)
+            filter: var(--oh-canvas-item-svg-shadow)
         .label-card-content
-          text-shadow: var(--oh-plan-item-text-shadow)
+          text-shadow: var(--oh-canvas-item-text-shadow)
 
     .placeholder-widget a
       height: 100%
@@ -99,7 +99,7 @@
       padding: 2px
       z-index: 1000
 
-    .configure-plan-menu        // show menu icon on upper right corner
+    .configure-canvas-menu        // show menu icon on upper right corner
       position: absolute
       top: 2px
       right: 2px
@@ -111,15 +111,16 @@
 
 <script>
 import mixin from '../widget-mixin'
-import VueDraggableResizable from 'vue-draggable-resizable'
-import OhPlaceholderWidget from '../layout/oh-placeholder-widget.vue'
-import { OhPlanItemDefinition } from '@/assets/definitions/widgets/layout'
+// import VueDraggableResizable from 'vue-draggable-resizable'
+import OhPlaceholderWidget from './oh-placeholder-widget.vue'
+import { OhCanvasItemDefinition } from '@/assets/definitions/widgets/layout'
 
 export default {
   mixins: [mixin],
-  widget: OhPlanItemDefinition,
+  widget: OhCanvasItemDefinition,
   components: {
-    VueDraggableResizable,
+    'vue-draggable-resizable':
+        () => import('vue-draggable-resizable'),
     OhPlaceholderWidget
   },
   props: {
@@ -143,7 +144,7 @@ export default {
     this.y = this.config.y || 20
     this.w = this.config.w || 100
     this.h = this.config.h || 100
-    this.shadow = !this.config.noPlanShadow
+    this.shadow = !this.config.noCanvasShadow
     this.styled = !this.config.notStyled
   },
   computed: {
@@ -154,7 +155,7 @@ export default {
   methods: {
     toggleAutoSize () {
       if (this.w === 'auto') {
-        const elem = document.getElementById('oh-plan-item-vdr-' + this.id)
+        const elem = document.getElementById('oh-canvas-item-vdr-' + this.id)
         this.w = this.context.component.config.w = elem.clientWidth
         this.h = this.context.component.config.h = elem.clientHeight
       } else {
@@ -165,7 +166,7 @@ export default {
     },
     toggleShadow () {
       this.shadow = !this.shadow
-      this.context.component.config.noPlanShadow = !this.shadow
+      this.context.component.config.noCanvasShadow = !this.shadow
     },
     onResize: function (x, y, width, height) {
       this.x = this.context.component.config.x = x
@@ -217,6 +218,14 @@ export default {
       } else {
         return true
       }
+    },
+    eventControl (ev) {
+      // Events are captured before bubbling to prevent undesired widget interaction when a widget has been
+      // added but the page is in edit mode.
+      if (this.context.editmode && this.context.component.slots.default.length > 0) {
+        ev.stopPropagation()
+        ev.preventDefault()
+      }
     }
   }
 }