@nordcraft/runtime 1.0.10 → 1.0.12

package/dist/utils/isElementInViewport.d.ts

@@ -0,0 +1 @@
+export declare function isElementInViewport(element: HTMLElement, thresholdPx?: number): boolean;

package/dist/utils/isElementInViewport.js

@@ -0,0 +1,10 @@
+export function isElementInViewport(element, thresholdPx = 0) {
+    const rect = element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    return (rect.top >= 0 - thresholdPx &&
+        rect.left >= 0 - thresholdPx &&
+        rect.bottom <= viewportHeight + thresholdPx &&
+        rect.right <= viewportWidth + thresholdPx);
+}
+//# sourceMappingURL=isElementInViewport.js.map

package/dist/utils/isElementInViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementInViewport.js","sourceRoot":"","sources":["../../src/utils/isElementInViewport.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,OAAoB,EACpB,WAAW,GAAG,CAAC;IAEf,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAC5C,MAAM,cAAc,GAClB,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAA;IAC7D,MAAM,aAAa,GACjB,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAA;IAE3D,OAAO,CACL,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,WAAW;QAC3B,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,WAAW;QAC5B,IAAI,CAAC,MAAM,IAAI,cAAc,GAAG,WAAW;QAC3C,IAAI,CAAC,KAAK,IAAI,aAAa,GAAG,WAAW,CAC1C,CAAA;AACH,CAAC"}

package/package.json

@@ -4,8 +4,8 @@
 "type": "module",
 "homepage": "https://github.com/nordcraftengine/nordcraft",
 "dependencies": {
-"@nordcraft/core": "1.0.10",
-"@nordcraft/std-lib": "1.0.10",
+"@nordcraft/core": "1.0.12",
+"@nordcraft/std-lib": "1.0.12",
 "fast-deep-equal": "3.1.3",
 "path-to-regexp": "6.3.0"
 },
@@ -21,5 +21,5 @@
 "files": ["dist", "src"],
 "main": "dist/page.main.js",
 "types": "dist/page.main.d.ts",
-"version": "1.0.10"
+"version": "1.0.12"
 }

package/src/editor/drag-drop/dragEnded.ts

@@ -1,3 +1,4 @@
+import { isElementInViewport } from '../../utils/isElementInViewport'
 import { tryStartViewTransition } from '../../utils/tryStartViewTransition'
 import type { DragState } from '../types'
 import { DRAG_MOVE_CLASSNAME } from './dragMove'
@@ -18,14 +19,14 @@ export async function dragEnded(dragState: DragState, canceled: boolean) {
     'dropped-item-self',
   )
   siblings.forEach((node, i) => {
-    if (node instanceof HTMLElement) {
+    if (node instanceof HTMLElement && isElementInViewport(node)) {
       node.style.setProperty(
         'view-transition-name',
         'dropped-item-sibling-' + i,
       )
     }
   })
-  dragState.repeatedNodes.forEach((node, i) => {
+  dragState.repeatedNodes.filter(isElementInViewport).forEach((node, i) => {
     node.style.setProperty('view-transition-name', 'dropped-item-repeated-' + i)
   })
   await tryStartViewTransition(() => {

package/src/editor/drag-drop/dragReorder.ts

@@ -1,3 +1,4 @@
+import { isElementInViewport } from '../../utils/isElementInViewport'
 import { tryStartViewTransition } from '../../utils/tryStartViewTransition'
 import type { DragState } from '../types'
 import { DRAG_MOVE_CLASSNAME } from './dragMove'
@@ -50,11 +51,12 @@ export function dragReorder(dragState: DragState | null) {
   ) {
     dragState.isTransitioning = true
     const siblings = Array.from(dragState.initialContainer.childNodes)
-    siblings.forEach((sibling, i) => {
-      if (sibling instanceof HTMLElement) {
+    siblings
+      .filter((sibling) => sibling instanceof HTMLElement)
+      .filter(isElementInViewport)
+      .forEach((sibling, i) => {
         sibling.style.setProperty('view-transition-name', 'item-' + i)
-      }
-    })
+      })
     dragState.element.style.setProperty('view-transition-name', '__drag-item')
 
     const prevLeft = dragState.element.offsetLeft

package/src/editor-preview.main.ts

@@ -882,18 +882,17 @@ export const createRoot = (
           const styleElem = document.createElement('style')
           styleElem.appendChild(
             document.createTextNode(`
-              @keyframes preview_timeline {
-                ${Object.values(keyframes)
-                  .map(
-                    ({ key, value, position, easing }) =>
-                      `${position * 100}% {
-                        ${key}: ${value};
-                        ${easing ? `animation-timing-function: ${easing};` : ''}
-                      }`,
-                  )
-                  .join('\n')}
-              }
-            `),
+@keyframes preview_timeline {
+  ${Object.values(keyframes)
+    .map(
+      ({ key, value, position, easing }) =>
+        `${position * 100}% {
+          ${key}: ${value};
+          ${easing ? `animation-timing-function: ${easing};` : ''}
+        }`,
+    )
+    .join('\n')}
+}`),
           )
           styleElem.setAttribute('data-timeline-keyframes', '')
           document.head.appendChild(styleElem)

package/src/utils/isElementInViewport.ts

@@ -0,0 +1,17 @@
+export function isElementInViewport(
+  element: HTMLElement,
+  thresholdPx = 0,
+): boolean {
+  const rect = element.getBoundingClientRect()
+  const viewportHeight =
+    window.innerHeight || document.documentElement.clientHeight
+  const viewportWidth =
+    window.innerWidth || document.documentElement.clientWidth
+
+  return (
+    rect.top >= 0 - thresholdPx &&
+    rect.left >= 0 - thresholdPx &&
+    rect.bottom <= viewportHeight + thresholdPx &&
+    rect.right <= viewportWidth + thresholdPx
+  )
+}