svelte-zoomable - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.js

@@ -616,13 +616,35 @@ (function (global, factory) {
 
+    function ramp(start, end, cb) {
+      return (t, u) => {
+        if (t <= start) {
+          t = 0;
+        } else if (t >= end) {
+          t = 1;
+        } else {
+          t = (t - start) / (end - start);
+        }
+
+        return cb(t, 1 - t);
+      };
+    }
+
     /** Simple opacity fade for zooming overview screen  */
-    function fade({node}) {
+    function fade({ node, start, end }) {
       const style = getComputedStyle(node);
       const opacity = +style.opacity;
       return {
-        css: (t, u) => `opacity: ${t * opacity}`,
+        css: ramp(start, end, (t, u) => `opacity: ${t * opacity}`),
       };
     }
 
-    /** detail transition appears to expand or contract between overview node and full area of zoomable container */
-    function zoomClipRect({ otherRect: from, node }) {
+    function none() {
+      return {
+        css: () => '',
+      };
+    }
+
+    /** detail transition appears to expand or contract between overview node and full area of zoomable container.
+     * I'm still experimenting with getting this to look good.
+     */
+    function zoomClipRect({ otherRect: from, node, start, end }) {
       let to = node.getBoundingClientRect();
@@ -651,3 +673,3 @@
       return {
-        css: (t, u) => {
+        css: ramp(start, end, (t, u) => {
           let opacityStyle = `opacity: ${t * opacity}`;
@@ -673,3 +695,3 @@
           return result;
-        },
+        }),
       };
@@ -682,3 +704,3 @@ }
      */
-    function crossfade({otherRect, activeOverviewRect, node}) {
+    function crossfade({ otherRect, activeOverviewRect, node, start, end }) {
       const from = otherRect || activeOverviewRect;
@@ -696,7 +718,13 @@ const to = node.getBoundingClientRect();
       return {
-        css: (t, u) => `
+        css: ramp(
+          start,
+          end,
+          (t, u) => `
       opacity: ${t * opacity};
       transform-origin: top left;
-      transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
+      transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${
+        t + (1 - t) * dw
+      }, ${t + (1 - t) * dh});
     `
+        ),
       };
@@ -706,3 +734,9 @@ }
     /** The siblings overview nodes all move away from the expanding detail node */
-    function flyAwayFrom({detailRect: fromDetail, activeOverviewRect: fromOverview, node}) {
+    function flyAwayFrom({
+      detailRect: fromDetail,
+      activeOverviewRect: fromOverview,
+      node,
+      start,
+      end,
+    }) {
       let current = node.getBoundingClientRect();
@@ -727,3 +761,3 @@
       return {
-        css: (t, u) => {
+        css: ramp(start, end, (t, u) => {
           let x = distanceX * u;
@@ -739,14 +773,63 @@ let y = distanceY * u;
           return result;
-        },
+        }),
       };
     }
 
+    /** Fly into the selected overview */
+    function flyIntoSelected({
+      activeOverviewRect: toOverview,
+      node,
+      start,
+      end,
+    }) {
+      const current = node.getBoundingClientRect();
+      const style = getComputedStyle(node);
+      const opacity = +style.opacity;
+
+      let currentCenterX = (current.right + current.left) / 2;
+      let currentCenterY = (current.top + current.bottom) / 2;
+
+      let destCenterX = (toOverview.right + toOverview.left) / 2;
+      let destCenterY = (toOverview.top + toOverview.bottom) / 2;
+
+      let distanceX = destCenterX - currentCenterX;
+      let distanceY = destCenterY - currentCenterY;
+
+      return {
+        css: ramp(start, end, (t, u) => {
+          let x = distanceX * u;
+          let y = distanceY * u;
+
+          let opacityStyle = `opacity: ${t * opacity}`;
+          let result = [opacityStyle, `transform: translate(${x}px, ${y}px)`].join(
+            ';'
+          );
+
+          return result;
+        }),
+      };
+    }
+
     /** All elements transition at the same time */
-    function allTogether({delay, duration, siblingData, id}) {
+    function allTogether({ siblingData, id }) {
       return {
-        delay,
-        duration,
+        start: 0,
+        end: 1,
       };
     }
 
+    /** The "other" overview elements runs their transitions simultaneously, and then the active overview and the detail run at the end.
+     */
+    function otherOverviewsParallelFirst({ siblingData, id, isDetail }) {
+      let detailId = siblingData.detail?.id;
+      let start = isDetail || id !== detailId ? 0.5 : 0;
+
+      // console.log({ id, isDetail, start });
+
+      return {
+        start,
+        end: start + 0.5,
+      };
+    }
+
     /** Presets for how the transitions work */
@@ -772,2 +855,3 @@ const presets = {
       },
+      /** Similar to the Svelte crossfade transition */
       crossfade: {
@@ -779,10 +863,29 @@ detail: crossfade,
         defaultDuration: 200,
-      }
+      },
+      /** The sibling overviews fly into the clicked one */
+      mergeSiblingsParallel: {
+        detail: crossfade,
+        selectedOverview: crossfade,
+        otherOverviews: flyIntoSelected,
+        schedule: otherOverviewsParallelFirst,
+        defaultDuration: 1000,
+      },
+      /** The sibling overviews fly into the clicked one, one at a time */
+      // Disabled due to problems with getting all the transitions in different
+      // components running at the same time. Will need another approach to make this
+      // work.
+      // mergeSiblingsSeries: {
+      //   detail: transitions.crossfade,
+      //   selectedOverview: transitions.crossfade,
+      //   otherOverviews: transitions.flyIntoSelected,
+      //   schedule: schedules.otherOverviewsSeriesFirst,
+      //   defaultDuration: 2000,
+      // },
     };
 
-
-    function zoomTransition({ delay, duration, easing } = {}) {
-      delay = delay ?? 0;
-      duration = duration ?? preset.defaultDuration;
-
+    function zoomTransition({
+      delay: delayParam,
+      duration: durationParam,
+      easing,
+    } = {}) {
       let sending = new Map();
@@ -817,5 +920,5 @@ let receiving = new Map();
             if (params.isDetail) {
-              console.log(
-                `Registered detail ${params.key} for parent ${params.parent}`
-              );
+              // console.log(
+              //   `Registered detail ${params.key} for parent ${params.parent}`
+              // );
               d.detail = {
@@ -827,5 +930,5 @@ id: params.key,
             } else {
-              console.log(
-                `Registered overview ${params.key} for parent ${params.parent}`
-              );
+              // console.log(
+              //   `Registered overview ${params.key} for parent ${params.parent}`
+              // );
               d.overviews.set(params.key, rect);
@@ -836,3 +939,3 @@ }
           return () => {
-            console.log(`Transitioning ${params.key}`);
+            // console.log(`Transitioning ${params.key}`);
             let rect = counterparts.get(params.key);
@@ -847,12 +950,26 @@ counterparts.delete(params.key);
             let style;
+
+            let duration = durationParam ?? preset.defaultDuration;
+            let delay = delayParam ?? 0;
+            let start = 0;
+            let end = 1;
             if (params.parent !== undefined) {
               let d = siblingData.get(params.parent);
               if (d) {
+                let schedule = preset.schedule({
+                  siblingData: d,
+                  id: params.key,
+                  isDetail: params.isDetail,
+                });
+
+                start = schedule.start;
+                end = schedule.end;
+
                 if (d.detail && !rect) {
                   let detailRect = d.detail.rect;
                   let zoomingOverviewRect = d.overviews.get(d.detail.id);
-                  console.log(`${params.key} is a sibling`, {
-                    detailRect,
-                    zoomingOverviewRect,
-                  });
+                  // console.log(`${params.key} is a sibling`, {
+                  //   detailRect,
+                  //   zoomingOverviewRect,
+                  // });
 
@@ -864,5 +981,9 @@ let executorParams = {
                     node,
+                    start,
+                    end,
                   };
 
-                  style = preset.otherOverviews(executorParams);
+                  style = zoomingOverviewRect
+                    ? preset.otherOverviews(executorParams)
+                    : none();
                 }
@@ -878,3 +999,3 @@
             if (!style) {
-              if(rect) {
+              if (rect) {
                 let nodeRect = node.getBoundingClientRect();
@@ -886,7 +1007,9 @@ let executorParams = {
                   node,
+                  start,
+                  end,
                 };
                 // This is one of the "active" elements
-                style = params.isDetail ?
-                  preset.detail(executorParams) :
-                  preset.selectedOverview(executorParams);
+                style = params.isDetail
+                  ? preset.detail(executorParams)
+                  : preset.selectedOverview(executorParams);
               } else {
@@ -911,5 +1034,3 @@ // There is no other element, so just do nothing.
 
-    const [send, receive] = zoomTransition({
-      duration: 200,
-    });
+    const [send, receive] = zoomTransition({});
 
@@ -1098,4 +1219,4 @@ const subscriber_queue = [];
     	var style = element("style");
-    	style.id = "svelte-6v143v-style";
-    	style.textContent = ".zoomed.svelte-6v143v{position:absolute;top:var(--zoomed-top, 0px);bottom:var(--zoomed-bottom, 0px);left:var(--zoomed-left, 0px);right:var(--zoomed-right, 0px)}.overview.svelte-6v143v{position:relative}.inactive.svelte-6v143v{display:none}";
+    	style.id = "svelte-j9y3i2-style";
+    	style.textContent = ".zoomed.svelte-j9y3i2{position:fixed;top:var(--zoomed-top, 0px);bottom:var(--zoomed-bottom, 0px);left:var(--zoomed-left, 0px);right:var(--zoomed-right, 0px)}.overview.svelte-j9y3i2{position:relative}.inactive.svelte-j9y3i2{display:none}";
     	append(document.head, style);
@@ -1138,3 +1259,3 @@ }
     			if (overview_slot) overview_slot.c();
-    			attr(div, "class", div_class_value = "overview " + /*overviewClass*/ ctx[2] + " svelte-6v143v");
+    			attr(div, "class", div_class_value = "overview " + /*overviewClass*/ ctx[2] + " svelte-j9y3i2");
     			attr(div, "id", div_id_value = /*fullId*/ ctx[6].join("-") + "-overview");
@@ -1169,3 +1290,3 @@ },
 
-    			if (!current || dirty & /*overviewClass*/ 4 && div_class_value !== (div_class_value = "overview " + /*overviewClass*/ ctx[2] + " svelte-6v143v")) {
+    			if (!current || dirty & /*overviewClass*/ 4 && div_class_value !== (div_class_value = "overview " + /*overviewClass*/ ctx[2] + " svelte-j9y3i2")) {
     				attr(div, "class", div_class_value);
@@ -1222,3 +1343,3 @@ }
 
-    // (96:0) {#if zoomed}
+    // (82:0) {#if zoomed}
     function create_if_block(ctx) {
@@ -1241,3 +1362,3 @@ let div;
     			if (detail_slot) detail_slot.c();
-    			attr(div, "class", div_class_value = "zoomed " + /*detailClass*/ ctx[4] + " svelte-6v143v");
+    			attr(div, "class", div_class_value = "zoomed " + /*detailClass*/ ctx[4] + " svelte-j9y3i2");
     			attr(div, "id", div_id_value = /*fullId*/ ctx[6].join("-") + "-zoomed");
@@ -1268,3 +1389,3 @@ },
 
-    			if (!current || dirty & /*detailClass*/ 16 && div_class_value !== (div_class_value = "zoomed " + /*detailClass*/ ctx[4] + " svelte-6v143v")) {
+    			if (!current || dirty & /*detailClass*/ 16 && div_class_value !== (div_class_value = "zoomed " + /*detailClass*/ ctx[4] + " svelte-j9y3i2")) {
     				attr(div, "class", div_class_value);
@@ -1517,3 +1638,3 @@ }
     		super();
-    		if (!document.getElementById("svelte-6v143v-style")) add_css();
+    		if (!document.getElementById("svelte-j9y3i2-style")) add_css();
 
@@ -1548,4 +1669,4 @@ init(this, options, instance, create_fragment, safe_not_equal, {
     	var style = element("style");
-    	style.id = "svelte-1o61nni-style";
-    	style.textContent = "div.svelte-1o61nni{position:relative;width:100%;height:100%;overflow:hidden}";
+    	style.id = "svelte-1p82ql8-style";
+    	style.textContent = "div.svelte-1p82ql8{position:relative;transform:translate(0px, 0px);width:100%;height:100%;overflow:hidden}";
     	append(document.head, style);
@@ -1564,3 +1685,3 @@ }
     			if (default_slot) default_slot.c();
-    			attr(div, "class", "svelte-1o61nni");
+    			attr(div, "class", "svelte-1p82ql8");
     		},
@@ -1628,3 +1749,3 @@ m(target, anchor) {
     		super();
-    		if (!document.getElementById("svelte-1o61nni-style")) add_css$1();
+    		if (!document.getElementById("svelte-1p82ql8-style")) add_css$1();
     		init(this, options, instance$1, create_fragment$1, safe_not_equal, { zoomManager: 1, transitionPreset: 2 });
@@ -1631,0 +1752,0 @@ }

package.json

 {
   "name": "svelte-zoomable",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Daniel Imfeld <dimfeld>",

README.md

@@ -8,3 +8,8 @@ # Svelte Zoomable UI
 ```svelte
-<ZoomableContainer>
+<script>
+  let zoomManager;
+</script>
+
+<h3><Breadcrumbs {zoomManager} /></h3>
+<ZoomableContainer bind:zoomManager>
   {#each data as item}
@@ -11,0 +16,0 @@ <Zoomable id={item.id} title={item.title}>

src/transition_executors.js

@@ -0,7 +1,23 @@
+import { transition_in } from 'svelte/internal';
+
+function ramp(start, end, cb) {
+  return (t, u) => {
+    if (t <= start) {
+      t = 0;
+    } else if (t >= end) {
+      t = 1;
+    } else {
+      t = (t - start) / (end - start);
+    }
+
+    return cb(t, 1 - t);
+  };
+}
+
 /** Simple opacity fade for zooming overview screen  */
-export function fade({node}) {
+export function fade({ node, start, end }) {
   const style = getComputedStyle(node);
   const opacity = +style.opacity;
   return {
-    css: (t, u) => `opacity: ${t * opacity}`,
+    css: ramp(start, end, (t, u) => `opacity: ${t * opacity}`),
   };
@@ -16,4 +32,6 @@ }
 
-/** detail transition appears to expand or contract between overview node and full area of zoomable container */
-export function zoomClipRect({ otherRect: from, node }) {
+/** detail transition appears to expand or contract between overview node and full area of zoomable container.
+ * I'm still experimenting with getting this to look good.
+ */
+export function zoomClipRect({ otherRect: from, node, start, end }) {
   let to = node.getBoundingClientRect();
@@ -42,3 +60,3 @@
   return {
-    css: (t, u) => {
+    css: ramp(start, end, (t, u) => {
       let opacityStyle = `opacity: ${t * opacity}`;
@@ -64,3 +82,3 @@
       return result;
-    },
+    }),
   };
@@ -73,3 +91,3 @@ }
  */
-export function crossfade({otherRect, activeOverviewRect, node}) {
+export function crossfade({ otherRect, activeOverviewRect, node, start, end }) {
   const from = otherRect || activeOverviewRect;
@@ -88,7 +106,13 @@ const to = node.getBoundingClientRect();
   return {
-    css: (t, u) => `
+    css: ramp(
+      start,
+      end,
+      (t, u) => `
       opacity: ${t * opacity};
       transform-origin: top left;
-      transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1-t) * dw}, ${t + (1-t) * dh});
+      transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${
+        t + (1 - t) * dw
+      }, ${t + (1 - t) * dh});
     `
+    ),
   };
@@ -98,3 +122,9 @@ }
 /** The siblings overview nodes all move away from the expanding detail node */
-export function flyAwayFrom({detailRect: fromDetail, activeOverviewRect: fromOverview, node}) {
+export function flyAwayFrom({
+  detailRect: fromDetail,
+  activeOverviewRect: fromOverview,
+  node,
+  start,
+  end,
+}) {
   let current = node.getBoundingClientRect();
@@ -119,3 +149,3 @@
   return {
-    css: (t, u) => {
+    css: ramp(start, end, (t, u) => {
       let x = distanceX * u;
@@ -131,4 +161,39 @@ let y = distanceY * u;
       return result;
-    },
+    }),
   };
 }
+
+/** Fly into the selected overview */
+export function flyIntoSelected({
+  activeOverviewRect: toOverview,
+  node,
+  start,
+  end,
+}) {
+  const current = node.getBoundingClientRect();
+  const style = getComputedStyle(node);
+  const opacity = +style.opacity;
+
+  let currentCenterX = (current.right + current.left) / 2;
+  let currentCenterY = (current.top + current.bottom) / 2;
+
+  let destCenterX = (toOverview.right + toOverview.left) / 2;
+  let destCenterY = (toOverview.top + toOverview.bottom) / 2;
+
+  let distanceX = destCenterX - currentCenterX;
+  let distanceY = destCenterY - currentCenterY;
+
+  return {
+    css: ramp(start, end, (t, u) => {
+      let x = distanceX * u;
+      let y = distanceY * u;
+
+      let opacityStyle = `opacity: ${t * opacity}`;
+      let result = [opacityStyle, `transform: translate(${x}px, ${y}px)`].join(
+        ';'
+      );
+
+      return result;
+    }),
+  };
+}

src/transition_schedulers.js

 /** All elements transition at the same time */
-export function allTogether({delay, duration, siblingData, id}) {
+export function allTogether({ siblingData, id }) {
   return {
-    delay,
-    duration,
+    start: 0,
+    end: 1,
   };
@@ -12,29 +12,27 @@ }
  */
-export function otherOverviewsSeriesFirst({delay, duration, siblingData, id}) {
-
+export function otherOverviewsSeriesFirst({ siblingData, id, isDetail }) {
   let numElements = siblingData.overviews.size;
-  let thisDuration = duration / numElements;
+  let thisDuration = 1 / numElements;
   let detailId = siblingData.detail?.id;
   let detailIncoming = siblingData.detail?.incoming;
 
-  if(id === detailId) {
-    // This is a detail so it goes last (or first if outgoing).
-    if(detailIncoming) {
-      delay += (thisDuration * (numElements - 1));
-    }
+  if (id === detailId) {
+    // This is a detail or the overview swapping with a detail.
+    let start = isDetail ? 1 - thisDuration : 0;
 
+    // console.log({ id, start, thisDuration, detailId, isDetail });
     return {
-      delay,
-      duration: thisDuration,
+      start,
+      end: start + thisDuration,
     };
   }
 
-  // See where this one came in the insertion order.
+  // See where this one came in the order.
   let thisIndex = 0;
-  for(let s of siblingData.overviews.keys()) {
-    if(s === id) {
+  for (let s of Array.from(siblingData.overviews.keys()).sort()) {
+    if (s === id) {
       break;
     }
 
-    if(s !== detailId) {
+    if (s !== detailId) {
       thisIndex++;
@@ -44,15 +42,11 @@ }
 
-  let elementSequence = thisDuration * thisIndex;
-  if(detailIncoming) {
-    delay += elementSequence;
-  } else {
-    delay += (duration - elementSequence);
-  }
+  let elementSequence = thisDuration * (thisIndex + 1);
+  let start = elementSequence;
 
+  // console.log({ id, start, thisDuration, thisIndex, detailId });
+
   return {
-    delay,
-    duration: thisDuration,
-  }
-
-
+    start,
+    end: start + thisDuration,
+  };
 }
@@ -62,14 +56,12 @@
  */
-export function otherOverviewsParallelFirst({delay, duration, siblingData, id}) {
+export function otherOverviewsParallelFirst({ siblingData, id, isDetail }) {
   let detailId = siblingData.detail?.id;
-  let detailIncoming = siblingData.detail?.incoming;
+  let start = isDetail || id !== detailId ? 0.5 : 0;
 
-  let thisDuration = duration / 2;
+  // console.log({ id, isDetail, start });
 
-  let thisIsLast = id === detailId && detailIncoming;
-
   return {
-    duration: thisDuration,
-    delay: delay + (thisIsLast ? thisDuration : 0),
+    start,
+    end: start + 0.5,
   };
 }

src/transition.js

@@ -24,2 +24,3 @@ import * as transitions from './transition_executors';
   },
+  /** Similar to the Svelte crossfade transition */
   crossfade: {
@@ -31,10 +32,29 @@ detail: transitions.crossfade,
     defaultDuration: 200,
-  }
-}
+  },
+  /** The sibling overviews fly into the clicked one */
+  mergeSiblingsParallel: {
+    detail: transitions.crossfade,
+    selectedOverview: transitions.crossfade,
+    otherOverviews: transitions.flyIntoSelected,
+    schedule: schedules.otherOverviewsParallelFirst,
+    defaultDuration: 1000,
+  },
+  /** The sibling overviews fly into the clicked one, one at a time */
+  // Disabled due to problems with getting all the transitions in different
+  // components running at the same time. Will need another approach to make this
+  // work.
+  // mergeSiblingsSeries: {
+  //   detail: transitions.crossfade,
+  //   selectedOverview: transitions.crossfade,
+  //   otherOverviews: transitions.flyIntoSelected,
+  //   schedule: schedules.otherOverviewsSeriesFirst,
+  //   defaultDuration: 2000,
+  // },
+};
 
-
-export function zoomTransition({ delay, duration, easing } = {}) {
-  delay = delay ?? 0;
-  duration = duration ?? preset.defaultDuration;
-
+export function zoomTransition({
+  delay: delayParam,
+  duration: durationParam,
+  easing,
+} = {}) {
   let sending = new Map();
@@ -69,5 +89,5 @@ let receiving = new Map();
         if (params.isDetail) {
-          console.log(
-            `Registered detail ${params.key} for parent ${params.parent}`
-          );
+          // console.log(
+          //   `Registered detail ${params.key} for parent ${params.parent}`
+          // );
           d.detail = {
@@ -79,5 +99,5 @@ id: params.key,
         } else {
-          console.log(
-            `Registered overview ${params.key} for parent ${params.parent}`
-          );
+          // console.log(
+          //   `Registered overview ${params.key} for parent ${params.parent}`
+          // );
           d.overviews.set(params.key, rect);
@@ -88,3 +108,3 @@ }
       return () => {
-        console.log(`Transitioning ${params.key}`);
+        // console.log(`Transitioning ${params.key}`);
         let rect = counterparts.get(params.key);
@@ -99,12 +119,26 @@ counterparts.delete(params.key);
         let style;
+
+        let duration = durationParam ?? preset.defaultDuration;
+        let delay = delayParam ?? 0;
+        let start = 0;
+        let end = 1;
         if (params.parent !== undefined) {
           let d = siblingData.get(params.parent);
           if (d) {
+            let schedule = preset.schedule({
+              siblingData: d,
+              id: params.key,
+              isDetail: params.isDetail,
+            });
+
+            start = schedule.start;
+            end = schedule.end;
+
             if (d.detail && !rect) {
               let detailRect = d.detail.rect;
               let zoomingOverviewRect = d.overviews.get(d.detail.id);
-              console.log(`${params.key} is a sibling`, {
-                detailRect,
-                zoomingOverviewRect,
-              });
+              // console.log(`${params.key} is a sibling`, {
+              //   detailRect,
+              //   zoomingOverviewRect,
+              // });
 
@@ -116,5 +150,9 @@ let executorParams = {
                 node,
+                start,
+                end,
               };
 
-              style = preset.otherOverviews(executorParams);
+              style = zoomingOverviewRect
+                ? preset.otherOverviews(executorParams)
+                : transitions.none();
             }
@@ -130,3 +168,3 @@
         if (!style) {
-          if(rect) {
+          if (rect) {
             let nodeRect = node.getBoundingClientRect();
@@ -138,10 +176,12 @@ let executorParams = {
               node,
+              start,
+              end,
             };
             // This is one of the "active" elements
-            style = params.isDetail ?
-              preset.detail(executorParams) :
-              preset.selectedOverview(executorParams);
+            style = params.isDetail
+              ? preset.detail(executorParams)
+              : preset.selectedOverview(executorParams);
           } else {
             // There is no other element, so just do nothing.
-            style = none();
+            style = transitions.none();
           }
@@ -163,4 +203,2 @@ }
 
-export const [send, receive] = zoomTransition({
-  duration: 200,
-});
+export const [send, receive] = zoomTransition({});

No alert changes

Improved metrics

Total package byte prevSize

126572

increased by9.05%

Number of package files

13

increased by8.33%

Lines of code

3590

increased by9.15%

Number of lines in readme file

22

increased by29.41%

No dependency changes