@operato/board 1.4.71 → 1.4.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.71",
+  "version": "1.4.73",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "b33419d8c667b6457f2a93424afe2845faa63350"
+  "gitHead": "815c4b813f8c6a960867ef0aff00290bcba4041b"
 }

package/src/modeller/edit-toolbar-style.ts

@@ -171,6 +171,10 @@ export const style = css`
     background-position-y: -1142px;
   }
 
+  #databind-copy {
+    background-position-y: -692px;
+  }
+
   #context-menu {
     background-position-y: -692px;
   }

package/src/modeller/edit-toolbar.ts

@@ -25,6 +25,8 @@ export class EditToolbar extends LitElement {
   @query('#undo') private undo!: HTMLElement
 
   @query('#fullscreen') private fullscreen!: HTMLElement
+  @query('#style-copy') private styleCopy!: HTMLElement
+  @query('#databind-copy') private databindCopy!: HTMLElement
   @query('#cut') private cut!: HTMLElement
   @query('#copy') private copy!: HTMLElement
   @query('#paste') private paste!: HTMLElement
@@ -59,6 +61,8 @@ export class EditToolbar extends LitElement {
     this.undo.addEventListener('tap', this.onTapUndo.bind(this) as EventListener)
     this.redo.addEventListener('tap', this.onTapRedo.bind(this) as EventListener)
     this.fullscreen.addEventListener('tap', this.onTapFullscreen.bind(this) as EventListener)
+    this.styleCopy.addEventListener('tap', this.onStartStylePasteMode.bind(this) as EventListener)
+    this.databindCopy.addEventListener('tap', this.onStartDatabindPasteMode.bind(this) as EventListener)
     this.cut.addEventListener('tap', this.onTapCut.bind(this) as EventListener)
     this.copy.addEventListener('tap', this.onTapCopy.bind(this) as EventListener)
     this.paste.addEventListener('tap', this.onTapPaste.bind(this) as EventListener)
@@ -94,6 +98,11 @@ export class EditToolbar extends LitElement {
 
         <span class="vline"></span>
 
+        <span button id="style-copy" title="style copy (${this.getShortcutString('cmd', '1')})"> </span>
+        <span button id="databind-copy" title="databind copy (${this.getShortcutString('cmd', '2')})"> </span>
+
+        <span class="vline"></span>
+
         <span button id="cut" title="cut (${this.getShortcutString('cmd', 'x')})"> </span>
         <span button id="copy" title="copy (${this.getShortcutString('cmd', 'c')})"> </span>
         <span button id="paste" title="paste (${this.getShortcutString('cmd', 'v')})"> </span>
@@ -106,11 +115,6 @@ export class EditToolbar extends LitElement {
 
         <span class="vline"></span>
 
-        <!-- TODO Implement style-copy
-        <span button id="style-copy" title="format painter"></span>
-        <span class="vline"></span>
-      -->
-
         <span
           button
           data-align="left"
@@ -275,6 +279,12 @@ export class EditToolbar extends LitElement {
       case 'KeyY':
         if (ctrlKey && !shiftKey) this.onTapRedo()
         break
+      case 'Digit1':
+        if (ctrlKey) this.onStartStylePasteMode()
+        break
+      case 'Digit2':
+        if (ctrlKey) this.onStartDatabindPasteMode()
+        break
       case 'KeyC':
         if (ctrlKey && !shiftKey) this.onTapCopy()
         else if (altKey && shiftKey) this.onTapAlign('center')
@@ -306,12 +316,6 @@ export class EditToolbar extends LitElement {
         else if (ctrlKey && shiftKey) this.scene?.zorder('back')
         else if (altKey && shiftKey) this.onTapAlign('bottom')
         break
-      // case 'Equal':
-      //   if (ctrlKey) this.onTapZoom(zoomin)
-      //   break
-      // case 'Minus':
-      //   if (ctrlKey) this.onTapZoom(zoomout)
-      //   break
       case 'KeyH':
         if (ctrlKey && !shiftKey) this.onTapToggle()
         else if (altKey && shiftKey) this.onTapDistribute('HORIZONTAL')
@@ -400,13 +404,6 @@ export class EditToolbar extends LitElement {
     }
   }
 
-  // @query('#align-left') private alignLeft!: HTMLElement
-  // @query('#align-center') private alignCenter!: HTMLElement
-  // @query('#align-right') private alignRight!: HTMLElement
-  // @query('#align-top') private alignTop!: HTMLElement
-  // @query('#align-middle') private alignMiddle!: HTMLElement
-  // @query('#align-bottom') private alignBottom!: HTMLElement
-
   onSelectedChanged(after: Component[], before: Component[]) {
     var alignable = after.length > 1
 
@@ -433,6 +430,14 @@ export class EditToolbar extends LitElement {
     this.scene?.redo()
   }
 
+  onStartStylePasteMode() {
+    this.scene?.startStylePasteMode()
+  }
+
+  onStartDatabindPasteMode() {
+    this.scene?.startDatabindPasteMode()
+  }
+
   onTapCut() {
     this.scene?.cut()
   }

package/src/ox-board-modeller.ts

@@ -7,7 +7,7 @@ import './modeller/scene-viewer/ox-scene-viewer.js'
 import './ox-board-viewer'
 
 import { saveAs } from 'file-saver'
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
 import { Scene, SCENE_MODE } from '@hatiolab/things-scene'
@@ -19,6 +19,7 @@ import { ComponentToolbar } from './modeller/component-toolbar/component-toolbar
 import { EditToolbar } from './modeller/edit-toolbar'
 import { PropertySidebar } from './modeller/property-sidebar/property-sidebar'
 import { ComponentGroup, ComponentTemplate } from './types'
+import OxSceneViewer from './modeller/scene-viewer/ox-scene-viewer.js'
 
 const MACOS = isMacOS()
 
@@ -160,6 +161,7 @@ export class BoardModeller extends ScopedElementsMixin(LitElement) {
   @property({ type: Array }) propertyEditor: any[] = []
 
   @query('edit-toolbar') private editToolbar!: EditToolbar
+  @query('ox-scene-viewer') private viewer!: OxSceneViewer
 
   private group: string = ''
   private shortcutHandler?: (e: KeyboardEvent) => void
@@ -273,6 +275,7 @@ export class BoardModeller extends ScopedElementsMixin(LitElement) {
             <ox-scene-layer type="decotag-layer"></ox-scene-layer>
             <ox-scene-handler type="text-editor"></ox-scene-handler>
             <ox-scene-handler type="move-handler"></ox-scene-handler>
+            <ox-scene-handler type="paste-handler"></ox-scene-handler>
           </ox-scene-viewer>
 
           <mwc-fab icon="save" @click=${() => this.onTapSave()} title="save"> </mwc-fab>
@@ -296,10 +299,49 @@ export class BoardModeller extends ScopedElementsMixin(LitElement) {
   }
 
   disconnectedCallback(): void {
+    if (this.scene) {
+      this.scene.stopStylePasteMode()
+      this.scene.stopDatabindPasteMode()
+    }
+
     super.disconnectedCallback()
     this.unbindShortcutEvent()
   }
 
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('scene')) {
+      const old = changes.get('scene')
+
+      if (old) {
+        old.off('stylepastestart')
+        old.off('stylepastestop')
+        old.off('databindpastestart')
+        old.off('databindpastestop')
+
+        if (old) {
+          old.stopStylePasteMode()
+          old.stopDatabindPasteMode()
+        }
+      }
+
+      const scene = this.scene
+      if (scene) {
+        this.scene?.on('stylepastestart', () => {
+          this.viewer.style.cursor = 'copy'
+        })
+        this.scene?.on('stylepastestop', () => {
+          this.viewer.style.cursor = 'default'
+        })
+        this.scene?.on('databindpastestart', () => {
+          this.viewer.style.cursor = 'context-menu'
+        })
+        this.scene?.on('databindpastestop', () => {
+          this.viewer.style.cursor = 'default'
+        })
+      }
+    }
+  }
+
   close() {
     this.model = null
     this.requestUpdate()