Merge pull request #4 from CatsJuice/fix/blur-on-gap

fix(core): blur event will trigger on gap outside dock-wrapper
CatsJuice · Jul 16, 2023 · 289acaa · 289acaa
2 parents ec50adf + 640e976
commit 289acaa
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 38 deletions.
diff --git a/packages/dockbar/index.html b/packages/dockbar/index.html
@@ -89,9 +89,10 @@
 <body>
   <button id="toggleDirection">Change direction(horizontal)</button>
   <button id="togglePosition">Change Position(bottom)</button>
-  padding: <input type="range" id="padding" value="0" min="0" max="100" />
+  padding: <input type="range" id="padding" value="8" min="0" max="100" />
   maxScale: <input type="range" id="maxScale" value="0" min="0" max="10" />
   size: <input type="range" id="size" value="40" min="20" max="100" />
+  gap: <input type="range" id="gap" value="8" min="0" max="100" />
 
 
   <dock-wrapper class="glass" id="dock">
@@ -116,6 +117,7 @@
     const paddingInput = $id('padding')
     const maxScaleInput = $id('maxScale')
     const sizeInput = $id('size')
+    const gapInput = $id('gap')
     const dock = $id('dock')
 
     paddingInput.oninput = function (e) {
@@ -127,7 +129,10 @@
     sizeInput.oninput = function (e) {
       dock.setAttribute('size', e.target.value)
     }
-
+    gapInput.oninput = function (e) {
+      dock.setAttribute('gap', e.target.value)
+    }
+
     // const fragment = document.createDocumentFragment()
     // for (let i = 0; i < 15; i++) {
     //   const dockItem = document.createElement('dock-item')

diff --git a/packages/dockbar/src/components/dock-item.ts b/packages/dockbar/src/components/dock-item.ts
@@ -13,7 +13,10 @@ export class DockItem extends LitElement {
   @property({ type: Number })
   scale = 1
 
-  get liStyle() {
+  @property({ type: Number })
+  gap = 8
+
+  get sizeStyle() {
     const styleObj = {
       width: `${this.size}px`,
       height: `${this.size}px`,
@@ -24,11 +27,21 @@ export class DockItem extends LitElement {
     }, '')
   }
 
+  get gapStyle() {
+    return `--gap: ${this.gap}px`
+  }
+
+  get liStyle() {
+    return `${this.sizeStyle};${this.gapStyle}`
+  }
+
   render() {
     return html`
-      <li class="dock-item">
-        <div class="dock-item__scale" style=${this.liStyle}>
-          <slot></slot>
+      <li class="dock-item" style=${this.liStyle}>
+        <div class="dock-item__pos">
+          <div class="dock-item__scale" style=${this.sizeStyle}>
+            <slot></slot>
+          </div>
         </div>
       </li>
     `
@@ -40,8 +53,17 @@ export class DockItem extends LitElement {
   }
 
   onScaleChanged(scale: number) {
+    const sizeEl = this.shadowRoot?.querySelector('.dock-item')
+    const scaleEl = this.shadowRoot?.querySelector('.dock-item__scale')
+    anime({
+      targets: sizeEl,
+      width: `${this.size * scale}px`,
+      height: `${this.size * scale}px`,
+      duration: 100,
+      easing: this.easing,
+    })
     anime({
-      targets: this.shadowRoot?.querySelector('.dock-item__scale'),
+      targets: scaleEl,
       scale,
       duration: 100,
       easing: this.easing,
@@ -50,11 +72,30 @@ export class DockItem extends LitElement {
 
   static styles = css`
     li.dock-item {
+      position: relative;
+    }
+    li.dock-item .dock-item__pos {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translateX(-50%) translateY(-50%) scale(var(--scale, 1));
     }
+    li::before,
+    li::after {
+      content: "";
+      width: var(--gap, 0px);
+      height: 100%;
+      position: absolute;
+      top: 0;
+      /* For debug */
+      /* background: red; */
+    }
+    li::before {
+      right: 100%
+    }
+    li::after {
+      left: 100%;
+    }
     .dock-item__scale {
       display: flex;
       justify-content: center;

diff --git a/packages/dockbar/src/components/dock-wrapper.ts b/packages/dockbar/src/components/dock-wrapper.ts
@@ -1,6 +1,5 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import anime from 'animejs/lib/anime.es.js'
 
 export type DockPosition = 'top' | 'right' | 'bottom' | 'left'
 export type DockDirection = 'horizontal' | 'vertical'
@@ -54,12 +53,6 @@ export class DockWrapper extends LitElement {
     this._children = nodes.filter(
       (node: any) => node.nodeName.toUpperCase() === 'DOCK-ITEM',
     )
-    this._children.forEach((element: any) => {
-      element.style.setProperty('flex-shrink', '0')
-      element.style.setProperty('display', 'flex')
-      element.style.setProperty('position', 'relative')
-    })
-    this.onSizeChanged(this.size)
     this.onWillChangeChanged(this.willChange)
     this.observe()
     this.provideSharedProps()
@@ -104,13 +97,6 @@ export class DockWrapper extends LitElement {
 
   resetAll() {
     this._children.forEach((child) => {
-      anime({
-        targets: child,
-        width: `${this.size}px`,
-        height: `${this.size}px`,
-        duration: 100,
-        easing: this.easing,
-      })
       child.setAttribute('scale', '1')
     })
   }
@@ -152,13 +138,6 @@ export class DockWrapper extends LitElement {
         = distance > this.maxRange
           ? 1
           : 1 + (this.maxScale - 1) * (1 - distance / this.maxRange)
-      anime({
-        targets: child,
-        width: `${this.size * scale}px`,
-        height: `${this.size * scale}px`,
-        duration: 100,
-        easing: this.easing,
-      })
       child.setAttribute('scale', `${scale}`)
     })
   }
@@ -203,14 +182,7 @@ export class DockWrapper extends LitElement {
     this._children?.forEach((el) => {
       el.setAttribute('size', `${this.size}`)
       el.setAttribute('easing', `${this.easing}`)
-    })
-  }
-
-  onSizeChanged(size: number) {
-    this.provideSharedProps()
-    this._children.forEach((child) => {
-      child.style.setProperty('width', `${size}px`)
-      child.style.setProperty('height', `${size}px`)
+      el.setAttribute('gap', `${this.gap}`)
     })
   }
 
@@ -219,8 +191,8 @@ export class DockWrapper extends LitElement {
       setTimeout(this.onResize.bind(this))
     if (changedProperties.has('willChange'))
       this.onWillChangeChanged(this.willChange)
-    if (changedProperties.has('size'))
-      this.onSizeChanged(this.size)
+    if (['size', 'gap', 'easing'].some(key => changedProperties.has(key)))
+      this.provideSharedProps()
   }
 
   static styles = css`