auto numbering/alphabet

src/controllers/keyboard.ts

@@ -12,12 +12,35 @@ cadleShell.currentText = 'A1'
 
 const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('')
 
+const incrementLetter = (matches) => {
+  let text = ''
+
+  if (matches?.length > 0) {
+    if (matches.length > 1) {
+      if (matches[1] === 'Z') {
+        text = `${matches[0]}A`
+      } else {
+        text = `${matches[0]}${alphabet[alphabet.indexOf(matches[1].toLowerCase()) + 1].toUpperCase()}`
+      }
+
+    } else {
+      if (matches[0] === 'Z') {
+        text = 'AA'
+      } else {
+        text = alphabet[alphabet.indexOf(matches[0].toLowerCase()) + 1].toUpperCase()
+      }
+
+    }
+  }
+  return text
+}
+
 const positionObject = () => {
   const drawerRect = shell.drawer.shadowRoot.querySelector('custom-pane').getBoundingClientRect()
   const actionsRect = shell.actions.getBoundingClientRect()
   return {
-    left: currentMousePosition.x - drawerRect.right - drawerRect.x,
-    top: currentMousePosition.y - actionsRect.height - actionsRect.y
+    left: currentMousePosition.x - drawerRect.right - drawerRect.x - 8,
+    top: currentMousePosition.y - actionsRect.height - actionsRect.y - 16
   }
 }
 
@@ -114,14 +137,16 @@ addEventListener('keydown', async event => {
 console.log(items);
 
     canvas.discardActiveObject();
+
 
-    for(const item of items[0]._objects) {
-          canvas.add(item);
-
-
+    items[0].dispose()
+    field.canvas.remove(items[0])
 
+      for(const item of items[0]._objects) {
+        item.set('dirty', true)
+        canvas.add(item);
     }
-    canvas.renderAll()
+    field.canvas.requestRenderAll()
   }
 
   if (event.metaKey && isMac && event.key === 'v' || event.ctrlKey && event.key === 'v' && !isMac) {
@@ -149,14 +174,22 @@ console.log(items);
       top
     }))
 
+    if (cadleShell.inputType === 'normal') return
+
+
+
+    const textMatch = cadleShell.currentText.match(/\D/g)
+
+    if (cadleShell.inputType === 'alphabet') return cadleShell.currentText = incrementLetter(textMatch)
+
     const match = cadleShell.currentText.match(/\d+/g)
 
     if (match?.length > 0) {
       const number = Number(match.join(''))
 
       if (number && number === cadleShell.lastNumber) {
         cadleShell.lastNumber += 1
-        if (cadleShell.lastNumber === 9 && globalThis.cadleShell.inputType === 'wcd') {
+        if (cadleShell.lastNumber === 9 && globalThis.cadleShell.inputType === 'socket') {
           cadleShell.lastNumber = 1
           const textMatch = cadleShell.currentText.match(/\D/g)
           let text = ''

src/elements/actions/actions.ts

@@ -16,19 +16,33 @@ declare global {
 
 @customElement('cadle-actions')
 export class CadleActions extends LitElement {
+  @property({ type: Boolean, reflect: true })
+  open: boolean = true
   static styles = [
     css`
       :host {
         display: flex;
         flex-direction: row;
         width: 100%;
+        opacity: 0;
       }
       custom-list-item {
         width: 100%;
       }
+      :host([open]) {
+        opacity: 1;
+      }
     `
   ];
 
+  show() {
+    this.open = true
+  }
+
+  hide() {
+    this.open = false
+  }
+
   #showMenu = (event) => {
     event.preventDefault()
     const target = event.composedPath()[0]
@@ -44,16 +58,31 @@ export class CadleActions extends LitElement {
           <custom-icon-font>check_box_outline_blank</custom-icon-font>
           <custom-icon-font>check_box</custom-icon-font>
         </custom-toggle>
-        
         normal
       </custom-list-item>
 
-      <custom-list-item type="menu" name="wcd">
-        <custom-toggle active="${cadleShell.inputType === 'wcd' ? 1 : 0}" slot="end">
+      <custom-list-item type="menu" name="socket">
+        <custom-toggle active="${cadleShell.inputType === 'socket' ? 1 : 0}" slot="end">
+          <custom-icon-font >check_box_outline_blank</custom-icon-font>
+          <custom-icon-font>check_box</custom-icon-font>
+        </custom-toggle>
+        sockets
+      </custom-list-item>
+
+      <custom-list-item type="menu" name="switch">
+        <custom-toggle active="${cadleShell.inputType === 'switch' ? 1 : 0}" slot="end">
+          <custom-icon-font >check_box_outline_blank</custom-icon-font>
+          <custom-icon-font>check_box</custom-icon-font>
+        </custom-toggle>
+        switches
+      </custom-list-item>
+
+      <custom-list-item type="menu" name="alphabet">
+        <custom-toggle active="${cadleShell.inputType === 'alphabet' ? 1 : 0}" slot="end">
           <custom-icon-font >check_box_outline_blank</custom-icon-font>
           <custom-icon-font>check_box</custom-icon-font>
         </custom-toggle>
-        wcd
+        alphabet
       </custom-list-item>
       `
     }
@@ -67,7 +96,7 @@ export class CadleActions extends LitElement {
   }
 
   #selected = ({detail}) => {
-    if (detail === 'wcd' || detail === 'normal') {
+    if (detail === 'alphabet' || detail === 'normal' || detail === 'switch' || detail === 'socket') {
 
       cadleShell.inputType = detail
       cadleShell.dialog.innerHTML = `

src/shell.ts

@@ -40,13 +40,19 @@ export class AppShell extends LitElement {
   projectsStore: ProjectsStore
   symbol: string
   projectName: string
-  inputType: 'wcd' | 'normal' = 'normal'
+  inputType: 'alphabet' | 'switch' | 'socket' | 'normal' = 'normal'
   lastNumber: number
   currentText: string
 
   @query('cadle-actions')
   actions
 
+  @query('draw-field')
+  field
+
+  @query('custom-drawer-layout')
+  drawerLayout
+
   @property({ type: String })
   action: string
 
@@ -75,6 +81,7 @@ export class AppShell extends LitElement {
     this._projectProvider.setValue(value)
     this._projectProvider.updateObservers()
   }
+
 
   @provide({context: catalogContext})
   @property({attribute: false})
@@ -93,6 +100,30 @@ export class AppShell extends LitElement {
     else this.inputType = 'normal'
   }
 
+  #beforePrint = () => {
+    this.drawerLayout.drawerOpen = false
+    this.drawerLayout.keepClosed = true
+    this.actions.hide()
+    this.field.style.position = 'fixed'
+    this.field.style.left = '0'
+    const {width, height} = this.getBoundingClientRect()
+    this.field.canvas.setWidth(width)
+    this.field.canvas.setHeight(height)
+    this.field.canvas.renderAll()
+  }
+
+
+  #afterPrint = () => {
+
+    this.drawer.open = true
+    this.drawerLayout.keepClosed = false
+    this.field.style.position = 'absolute'
+    this.field.style.left = 'auto'
+    this.actions.show()
+    this.field.canvas.renderAll()
+    this.drawerLayout.drawerOpen = true
+  }
+
   async connectedCallback(): Promise<void> {
     this.projectsStore = new ProjectsStore()
     super.connectedCallback()
@@ -117,6 +148,8 @@ export class AppShell extends LitElement {
 
     await this.requestUpdate('projects')
     this.dialog.addEventListener('closed', this.#dialogAction)
+    addEventListener("beforeprint", this.#beforePrint);
+    addEventListener("afterprint", this.#afterPrint);
   }
 
 
@@ -289,13 +322,6 @@ export class AppShell extends LitElement {
         flex-direction: column;
       }
 
-      header {
-        display: flex;
-        width: 100%;
-        height: 48px;
-        align-items: center;
-      }
-
       custom-pages {
         display: flex;
       }
@@ -357,9 +383,7 @@ export class AppShell extends LitElement {
       
       <project-drawer .manifest=${this.manifest} .project=${this.project} slot="drawer-content"></project-drawer>
       
-      <header  slot="top-app-bar-end">
-        <cadle-actions></cadle-actions>
-      </header>
+      <cadle-actions slot="top-app-bar-end"></cadle-actions>
 
       <custom-pages attr-for-selected="data-route">
         <home-field data-route="home"></home-field>

tsconfig.json

@@ -4,6 +4,9 @@
     "module": "ESNext",
     "moduleResolution": "nodenext",
     "experimentalDecorators": true,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "types": [
+      "@vandeurenglenn/lit-elements/elements.js"
+    ]
   }
 }

www/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap&text=%EE%A1%B2,%EE%97%92,%EE%A6%BD,%EE%85%A6,%EE%85%9A,%EF%A0%AF,%EE%8F%AC,%EE%8F%AB,%EE%9D%86,%EE%AC%B6,%EE%BD%8A,%EF%9D%97,%EF%84%88,%EF%A0%A7,%EE%97%8F,%EE%97%8E,%EE%AE%BB,%EE%85%A1,%00,%00,%00,%00,%EE%85%85,%EE%A0%B4,%EE%A0%B5,%EE%A1%B6,%EE%8B%88,%EE%8B%8C,%EE%A7%BC,%EF%82%90">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap&text=%EE%85%85,%EE%A0%B4,%EE%A0%B5,%EE%A1%B2,%EE%A1%B6,%EE%97%92,%EE%A6%BD,%EE%85%A6,%EE%85%9A,%EF%A0%AF,%EE%8F%AC,%EE%8F%AB,%EE%9D%86,%EE%AC%B6,%EE%BD%8A,%EF%9D%97,%EF%84%88,%EF%A0%A7,%EE%97%8F,%EE%97%8E,%EE%AE%BB,%EE%85%A1,%EE%8B%8C,%EE%8B%88,%EE%A7%BC,%EF%82%90">
 </head>
 <body>
   <style>