diff --git a/examples/add-remove-transition/index.html b/examples/add-remove-transition/index.html index 413b59b..01eb848 100644 --- a/examples/add-remove-transition/index.html +++ b/examples/add-remove-transition/index.html @@ -9,16 +9,10 @@
+
-
-
- 1 -
-
- 2 -
-
- 3 -
+
+
1
+
2
+
3
diff --git a/examples/add-remove-transition/main.ts b/examples/add-remove-transition/main.ts index fe0f3dc..cc0084a 100644 --- 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 index 0d77950..c309772 100644 --- a/examples/document-drag-and-drop/index.html +++ b/examples/document-drag-and-drop/index.html @@ -6,13 +6,16 @@ Document drag-and-drop -
+
- Create new doc +
Create new doc
{ 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 index 6479191..6017660 100644 --- 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, b: Array): 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 index e167608..4f19f81 100644 --- a/examples/elements-transition/index.html +++ b/examples/elements-transition/index.html @@ -9,7 +9,6 @@