major performance update

TahaSh · Jul 28, 2024 · a7a9c72 · a7a9c72
1 parent 3c56a1c
commit a7a9c72
Show file tree

Hide file tree

Showing 21 changed files with 564 additions and 132 deletions.
diff --git a/examples/add-remove-transition/index.html b/examples/add-remove-transition/index.html
@@ -9,16 +9,10 @@
     <div class="action-buttons">
       <div class="action-button add">+</div>
     </div>
-    <div class="cards">
-      <div class="card" data-vel-view="card" data-vel-plugin="AddRemovePlugin">
-        1
-      </div>
-      <div class="card" data-vel-view="card" data-vel-plugin="AddRemovePlugin">
-        2
-      </div>
-      <div class="card" data-vel-view="card" data-vel-plugin="AddRemovePlugin">
-        3
-      </div>
+    <div class="cards" data-vel-plugin="AddRemovePlugin" data-vel-view="root">
+      <div class="card" data-vel-view="card">1</div>
+      <div class="card" data-vel-view="card">2</div>
+      <div class="card" data-vel-view="card">3</div>
     </div>
     <script type="module" src="./main.ts"></script>
   </body>

diff --git a/examples/add-remove-transition/main.ts b/examples/add-remove-transition/main.ts
@@ -3,6 +3,12 @@ import './style.css'
 import { PluginFactory, createApp, View } from '../../src'
 
 const AddRemovePlugin: PluginFactory = (context) => {
+  context.setup(() => {
+    const root = context.getView('root')!
+    root.position.setAnimator('spring')
+    root.scale.setAnimator('spring')
+    root.layoutTransition(true)
+  })
   context.onViewAdded((view) => {
     if (view.name === 'card') {
       configureCard(view)
@@ -12,7 +18,6 @@ const AddRemovePlugin: PluginFactory = (context) => {
   function configureCard(card: View) {
     card.position.setAnimator('spring')
     card.opacity.setAnimator('tween')
-    card.layoutTransition(true)
 
     if (context.initialized) {
       card.onAdd({

diff --git a/examples/document-drag-and-drop/index.html b/examples/document-drag-and-drop/index.html
@@ -6,13 +6,16 @@
     <title>Document drag-and-drop</title>
   </head>
   <body>
-    <div class="documents-container">
+    <div
+      class="documents-container"
+      data-vel-plugin="DocumentDragPlugin"
+      data-vel-view="documents-container"
+    >
       <div
         class="document-placeholder"
-        data-vel-view="document-container"
-        data-vel-plugin="DocumentDragPlugin"
+        data-vel-view="document-placeholder-container"
       >
-        Create new doc
+        <div>Create new doc</div>
       </div>
       <div
         class="document"

diff --git a/examples/document-drag-and-drop/index.ts b/examples/document-drag-and-drop/index.ts
@@ -26,6 +26,11 @@ const DocumentDargPlugin: PluginFactory = (context) => {
   let actionDoneTimer: number
 
   context.setup(() => {
+    const documentsContainer = context.getView('documents-container')!
+    documentsContainer.position.setAnimator('dynamic')
+    documentsContainer.scale.setAnimator('dynamic')
+    documentsContainer.layoutTransition(true)
+
     documents = context.getViews('document')
     actionsContainer = context.getView('actions-container')!
     archiveAction = context.getView('archive-action')!
@@ -41,20 +46,25 @@ const DocumentDargPlugin: PluginFactory = (context) => {
         onDocumentDrag(event)
       }
     })
+
+    const documentContainers = context.getViews('document-container')
+    documentContainers.forEach((doc) => {
+      setupDocumentContainer(doc)
+    })
   })
 
+  function setupDocumentContainer(view: View) {
+    view.position.setAnimator('spring', { stiffness: 0.3 })
+    view.opacity.setAnimator('tween')
+    view.onRemove((v, done) => {
+      v.styles.zIndex = '-1'
+      v.opacity.set(0)
+      v.opacity.animator.onComplete(done)
+    })
+  }
+
   context.onViewAdded((view) => {
-    if (view.name === 'document-container') {
-      view.position.setAnimator('spring', { stiffness: 0.3 })
-      view.opacity.setAnimator('tween')
-      view.layoutTransition(true)
-      view.inverseEffect(false)
-      view.onRemove((v, done) => {
-        v.styles.zIndex = '-1'
-        v.opacity.set(0)
-        v.opacity.animator.onComplete(done)
-      })
-    } else if (
+    if (
       ['drop-action-text-archived', 'drop-action-text-deleted'].includes(
         view.name
       )
@@ -85,6 +95,8 @@ const DocumentDargPlugin: PluginFactory = (context) => {
       document.position.setAnimator('dynamic')
       document.scale.setAnimator('dynamic')
       document.rotation.setAnimator('dynamic')
+
+      document.layoutTransition(false)
       document.onRemove((view, done) => {
         view.position.setAnimator('dynamic', { speed: 8 })
         view.scale.setAnimator('dynamic', { speed: 8 })

diff --git a/examples/drag-to-reorder-layout/main.ts b/examples/drag-to-reorder-layout/main.ts
@@ -3,6 +3,10 @@ import './style.css'
 import { PluginFactory, View, createApp } from '../../src'
 import { DragEvent, DragEventPlugin } from '../../src'
 
+function arrayEqual(a: Array<any>, b: Array<any>): boolean {
+  return a.every((val, i) => val === b[i])
+}
+
 export class ReorderEvent {
   itemIdsJson: string
   constructor(event: { itemIdsJson: string }) {
@@ -44,7 +48,7 @@ export const DragToReorderPlugin: PluginFactory = (context) => {
       .getViews('item')
       .filter((v: View) => v.id !== dragging.id)
     if (event.isDragging) {
-      const localCurrentOrder = currentOrder()
+      const localCurrentOrder = [...currentOrder()]
       dragging.position.set({ x: event.x, y: event.y }, false)
       dragging.styles.zIndex = '2'
       const draggingIndex = localCurrentOrder.indexOf(dragging.data.itemId)
@@ -65,7 +69,10 @@ export const DragToReorderPlugin: PluginFactory = (context) => {
         }
       })
       localCurrentOrder.splice(newIndex, 0, dragging.data.itemId)
-      updateOrderedIds(localCurrentOrder)
+
+      if (!arrayEqual(currentOrder(), localCurrentOrder)) {
+        updateOrderedIds(localCurrentOrder)
+      }
     } else {
       dragging.position.reset()
       dragging.styles.zIndex = '1'

diff --git a/examples/elements-transition/index.html b/examples/elements-transition/index.html
@@ -9,23 +9,20 @@
     <template id="list-a">
       <div
         class="element element-a"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-a"
       >
         A
       </div>
       <div
         class="element element-b"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-a"
       >
         B
       </div>
       <div
         class="element element-c"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-a"
       >
@@ -35,31 +32,38 @@
     <template id="list-b">
       <div
         class="element element-a"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-b"
       >
         D
       </div>
       <div
         class="element element-b"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-b"
       >
         E
       </div>
       <div
         class="element element-c"
-        data-vel-plugin="ElementsTransitionPlugin"
         data-vel-view="item"
         data-vel-layout-id="list-b"
       >
         F
       </div>
     </template>
-    <div id="container-a" class="container"></div>
-    <div id="container-b" class="container"></div>
+    <div
+      id="container-a"
+      class="container"
+      data-vel-plugin="ElementsTransitionPlugin"
+      data-vel-view="container"
+    ></div>
+    <div
+      id="container-b"
+      class="container"
+      data-vel-plugin="ElementsTransitionPlugin"
+      data-vel-view="container"
+    ></div>
     <script type="module" src="./main.ts"></script>
     <script>
       function initList(listId, containerId) {

diff --git a/examples/expand-transition-test/main.ts b/examples/expand-transition-test/main.ts
@@ -5,8 +5,8 @@ import { PluginFactory, createApp } from '../../src'
 const ExpandTransitionPlugin: PluginFactory = (context) => {
   context.onViewAdded((view) => {
     view.layoutTransition(true)
-    view.position.setAnimator('spring')
-    view.scale.setAnimator('spring')
+    view.position.setAnimator('dynamic', { speed: 5 })
+    view.scale.setAnimator('dynamic', { speed: 5 })
   })
 }
 

diff --git a/examples/expand-transition-text/index.html b/examples/expand-transition-text/index.html
@@ -11,16 +11,18 @@
       data-vel-plugin="ExpandTransitionPlugin"
       data-vel-view="container"
     >
-      <div class="header">Header</div>
+      <div class="header"><div data-vel-layout-position>Header</div></div>
       <div class="text" data-vel-view="text">
-        <div>
+        <div data-vel-layout-position>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque
           temporibus laboriosam inventore autem consequatur officiis praesentium
           eum unde perferendis consequuntur? Nihil inventore dicta sequi quos
           voluptatum tempora exercitationem fugit earum?
         </div>
       </div>
-      <div class="footer" data-vel-view="footer">Footer</div>
+      <div class="footer" data-vel-view="footer">
+        <div data-vel-layout-position>Footer</div>
+      </div>
     </div>
     <script type="module" src="./main.ts"></script>
     <script type="module">

diff --git a/examples/expand-transition-text/main.ts b/examples/expand-transition-text/main.ts
@@ -3,19 +3,11 @@ import './style.css'
 import { PluginFactory, createApp } from '../../src'
 
 const ExpandTransitionPlugin: PluginFactory = (context) => {
-  context.onViewAdded((view) => {
-    if (view.name === 'container') {
-      view.layoutTransition(true)
-      view.scale.setAnimator('tween')
-      view.position.setAnimator('tween')
-    } else if (view.name === 'text') {
-      view.layoutTransition(true)
-      view.position.setAnimator('tween')
-      view.scale.setAnimator('tween')
-    } else if (view.name === 'footer') {
-      view.layoutTransition(true)
-      view.position.setAnimator('tween')
-    }
+  context.setup(() => {
+    const container = context.getView('container')!
+    container.scale.setAnimator('tween')
+    container.position.setAnimator('tween')
+    container.layoutTransition(true)
   })
 }
 

diff --git a/examples/expand-transition-text/style.css b/examples/expand-transition-text/style.css
@@ -30,6 +30,8 @@ body {
   flex-direction: column;
   /* overflow: hidden; */
   position: relative;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .text {
@@ -39,14 +41,23 @@ body {
   background: rgba(255, 0, 0, 0.5);
   min-height: 100px;
   border: 1px solid green;
+  overflow: hidden;
 }
 
 .card.toggled .text {
   min-height: 200px;
 }
 
+.card.toggled {
+  width: 400px;
+}
+
 .footer {
   border: 1px solid red;
   height: 50px;
   background: blue;
 }
+
+.header {
+  display: flex;
+}
diff --git a/examples/shared-transition/index.html b/examples/shared-transition/index.html
@@ -6,12 +6,11 @@
     <title>Shared Transition</title>
   </head>
   <body>
-    <ul class="tabs">
+    <ul class="tabs" data-vel-plugin="SharedLayoutPlugin" data-vel-view="root">
       <li class="tab">
         A
         <div
           class="underline"
-          data-vel-plugin="SharedLayoutPlugin"
           data-vel-view="underline"
           data-vel-layout-id="line"
         ></div>

diff --git a/src/builtin-plugins/DragEventPlugin.ts b/src/builtin-plugins/DragEventPlugin.ts
@@ -20,6 +20,7 @@ export class DragEvent {
   width: number
   height: number
   distance: number
+  stopped: boolean
   constructor(
     public props: {
       view: View
@@ -33,6 +34,7 @@ export class DragEvent {
       height: number
       distance: number
       isDragging: boolean
+      stopped: boolean
       target: EventTarget | null
       directions: Array<Direction>
     }
@@ -48,6 +50,7 @@ export class DragEvent {
     this.distance = props.distance
     this.view = props.view
     this.isDragging = props.isDragging
+    this.stopped = props.stopped
     this.target = props.target
     this.directions = props.directions
   }
@@ -63,6 +66,7 @@ export class DragEventPlugin extends EventPlugin {
   private _pointerDownPerView: Map<string, boolean> = new Map()
   private _targetPerView: Map<string, EventTarget | null> = new Map()
   private _viewPointerPositionLog: Map<string, Array<Vec2>> = new Map()
+  private _stopTimer = 0
 
   setup() {
     document.addEventListener('selectstart', this.onSelect.bind(this))
@@ -133,12 +137,21 @@ export class DragEventPlugin extends EventPlugin {
             currentPointer
           )
           this._emitEvent(view, directions)
+
+          clearTimeout(this._stopTimer)
+          this._stopTimer = setTimeout(() => {
+            this._emitEvent(view, directions, true)
+          }, 120)
         }
       })
     })
   }
 
-  _emitEvent(view: View, directions: Array<Direction>) {
+  _emitEvent(
+    view: View,
+    directions: Array<Direction>,
+    stopped: boolean = false
+  ) {
     const logs = this._viewPointerPositionLog.get(view.id)
     const previousPointer =
       logs && logs.length >= 2 ? logs[logs.length - 2] : null
@@ -183,7 +196,8 @@ export class DragEventPlugin extends EventPlugin {
       width,
       height,
       isDragging,
-      directions
+      directions,
+      stopped
     }
     this.emit(DragEvent, eventData)
   }