feat: draggable scroll content - fix #374

examples/example/src/app.component.ts

@@ -2,9 +2,10 @@ import { container, ContainerComponent } from "@tu/tulip";
 import { dataComponent } from "data.component";
 // import { testComponent } from "test.component";
 // import { textsComponent } from "texts.component";
-import { inputsComponent } from "inputs.component";
+// import {inputsComponent} from "inputs.component";
 // import { playerComponent } from "player.component";
 // import { dragComponent } from "drag.component";
+import { scrollablesComponent } from "./scrollables.component";
 
 type Props = {};
 type Mutable = {};
@@ -14,8 +15,9 @@ export const appComponent: ContainerComponent<Props, Mutable> = () => {
 
   // $container.add(textsComponent());
   // $container.add(playerComponent());
-  $container.add(inputsComponent());
+  // $container.add(inputsComponent());
   // $container.add(dragComponent());
+  $container.add(scrollablesComponent());
 
   const a = dataComponent({ test: "Abc12312311333" });
 

examples/example/src/scrollables.component.ts

@@ -0,0 +1,156 @@
+import {
+  container,
+  ContainerComponent,
+  EventMode,
+  scrollableContainer,
+  sprite,
+  text,
+} from "@tu/tulip";
+
+type Props = {
+  label: string;
+};
+
+export const scrollablesComponent: ContainerComponent<Props> = (props) => {
+  const $container = container(props);
+
+  const $tulips1 = [];
+  for (let i = 0; i < 4; i++) {
+    $tulips1.push(
+      text({
+        text: `🌷 tulip ${i} 🌷 `,
+        font: "Pixel",
+        color: 0xeb34a8,
+        size: 4,
+        position: {
+          x: 0,
+          y: i * 20,
+        },
+      }),
+    );
+  }
+
+  const $tulips2 = [];
+  for (let i = 0; i < 20; i++) {
+    $tulips2.push(
+      text({
+        text: `🌷 tulip ${i} 🌷 `,
+        font: "Pixel",
+        color: 0xeb34a8,
+        size: 4,
+        position: {
+          x: 0,
+          y: i * 20,
+        },
+      }),
+    );
+  }
+
+  const $scrollable1 = scrollableContainer({
+    position: {
+      x: 0,
+      y: 0,
+    },
+    size: {
+      width: 50,
+      height: 100,
+    },
+    jump: 3,
+    verticalScroll: true,
+    horizontalScroll: true,
+    components: [
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "A",
+        metadata: "scroll-button-top",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "B",
+        metadata: "scroll-button-bottom",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "X",
+        metadata: "scroll-selector-y",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "A",
+        metadata: "scroll-button-left",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "B",
+        metadata: "scroll-button-right",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "X",
+        metadata: "scroll-selector-x",
+      }),
+    ],
+    eventMode: EventMode.STATIC,
+  });
+
+  const $scrollable2 = scrollableContainer({
+    position: {
+      x: 70,
+      y: 0,
+    },
+    size: {
+      width: 50,
+      height: 100,
+    },
+    jump: 3,
+    verticalScroll: true,
+    horizontalScroll: true,
+    components: [
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "A",
+        metadata: "scroll-button-top",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "B",
+        metadata: "scroll-button-bottom",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "X",
+        metadata: "scroll-selector-y",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "A",
+        metadata: "scroll-button-left",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "B",
+        metadata: "scroll-button-right",
+      }),
+      sprite({
+        spriteSheet: "fonts/default-font-bold.json",
+        texture: "X",
+        metadata: "scroll-selector-x",
+      }),
+    ],
+    eventMode: EventMode.STATIC,
+    draggableContent: true,
+  });
+
+  $container.add($scrollable1);
+  $container.add($scrollable2);
+
+  $tulips1.forEach(($tulip) => {
+    $scrollable1.add($tulip);
+  });
+
+  $tulips2.forEach(($tulip) => {
+    $scrollable2.add($tulip);
+  });
+
+  return $container.getComponent(scrollablesComponent);
+};

src/components/prefabs/scrollable-container.component.ts

@@ -25,6 +25,7 @@ export const scrollableContainer: ContainerComponent<
   verticalScroll,
   horizontalScroll,
   jump,
+  draggableContent,
   components = [],
   ...$props
 }) => {
@@ -57,7 +58,7 @@ export const scrollableContainer: ContainerComponent<
   $maskContainer.setMask(mask);
 
   const $content = container({
-    // eventMode: EventMode.NONE,
+    eventMode: EventMode.STATIC,
   });
   $maskContainer.add($content);
 
@@ -169,33 +170,63 @@ export const scrollableContainer: ContainerComponent<
           tint: 0x00ff00,
         }),
     );
-    let isScrollSelectorSelected = false;
+
+    let isDragging = false;
+    let draggingSource = null; // Tracks the origin of the drag ("scrollSelector" or "content")
     let previous = 0;
 
-    scrollSelector.on(DisplayObjectEvent.POINTER_DOWN, () => {
+    function scrollPointerDown(source) {
       if (!isScrollable()) return;
-      isScrollSelectorSelected = true;
+      isDragging = true;
+      draggingSource = source;
       previous = global.cursor.getPosition()[isX ? "x" : "y"];
       global.cursor.setCursor(Cursor.GRABBING);
-    });
-    scrollSelector.on(DisplayObjectEvent.POINTER_UP, () => {
-      if (!isScrollable()) return;
-      isScrollSelectorSelected = false;
+    }
+
+    function scrollPointerUp(source) {
+      if (!isScrollable() || draggingSource !== source) return;
+      isDragging = false;
+      draggingSource = null;
       global.cursor.setCursor(Cursor.DEFAULT);
-    });
-    scrollSelector.on(DisplayObjectEvent.POINTER_UP_OUTSIDE, () => {
-      if (!isScrollable()) return;
-      isScrollSelectorSelected = false;
+    }
+
+    function scrollPointerUpOutside(source) {
+      if (!isScrollable() || draggingSource !== source) return;
+      isDragging = false;
+      draggingSource = null;
       global.cursor.setCursor(Cursor.DEFAULT);
-    });
-    scrollSelector.on(DisplayObjectEvent.GLOBAL_POINTER_MOVE, () => {
-      if (!isScrollSelectorSelected) return;
+    }
+
+    function scrollGlobalPointerMove(source) {
+      if (!isDragging || draggingSource !== source) return;
       global.cursor.setCursor(Cursor.GRABBING);
       const current = global.cursor.getPosition()[isX ? "x" : "y"];
-      const increment = previous - current;
+      const delta = previous - current;
       previous = current;
-      moveScrollSelector(increment);
+
+      if (source === "content") {
+        moveFromDraggingContent(delta);
+      } else if (source === "scrollSelector") {
+        moveFromScrollSelector(delta);
+      }
+    }
+
+    const dragComponents = [
+      { target: scrollSelector, name: "scrollSelector" },
+      ...(draggableContent ? [{ target: $content, name: "content" }] : []),
+    ];
+
+    dragComponents.forEach(({ target, name }) => {
+      target.on(DisplayObjectEvent.POINTER_DOWN, () => scrollPointerDown(name));
+      target.on(DisplayObjectEvent.POINTER_UP, () => scrollPointerUp(name));
+      target.on(DisplayObjectEvent.POINTER_UP_OUTSIDE, () =>
+        scrollPointerUpOutside(name),
+      );
+      target.on(DisplayObjectEvent.GLOBAL_POINTER_MOVE, () =>
+        scrollGlobalPointerMove(name),
+      );
     });
+
     const calculateScrollBounds = () => {
       const maxSize = Math.max(
         initialScrollButton.getBounds()[reversedSizeStr],
@@ -224,7 +255,8 @@ export const scrollableContainer: ContainerComponent<
         isX ? maxSize : size[sizeStr] - middleScrollSelectorPosition,
       );
     };
-    const moveScrollSelector = (increment: number = 1) => {
+
+    const moveFromScrollSelector = (increment: number = 1) => {
       if (!isScrollable()) return;
       const scrollAreaSize =
         size[sizeStr] -
@@ -254,6 +286,28 @@ export const scrollableContainer: ContainerComponent<
       calculateScrollBounds();
     };
 
+    function moveFromDraggingContent(delta: number) {
+      const contentHeight = $content.getBounds()[sizeStr] - size[sizeStr];
+      const scrollAreaSize =
+        size[sizeStr] -
+        initialScrollButton.getBounds()[sizeStr] -
+        finalScrollButton.getBounds()[sizeStr];
+      const selectorValue = scrollSelector.getBounds()[sizeStr];
+
+      const maxContentOffset = contentHeight;
+      const currentOffset = $content.getPivot()[posStr];
+      const newOffset = Math.max(
+        0,
+        Math.min(maxContentOffset, currentOffset + delta),
+      );
+
+      $content[pivotFuncStr](newOffset);
+
+      const percentage = -newOffset / contentHeight;
+      const newSelectorOffset = percentage * (scrollAreaSize - selectorValue);
+      scrollSelector[pivotFuncStr](newSelectorOffset);
+    }
+
     const initialScrollSelector = graphics({
       type: GraphicType.RECTANGLE,
       width: 0,
@@ -332,10 +386,25 @@ export const scrollableContainer: ContainerComponent<
   horizontalScroll && renderScroll("x");
 
   const add = (...displayObjects: DisplayObjectMutable<DisplayObject>[]) => {
-    $content.add(...displayObjects);
+    const children = $content.getChildren();
+    const childrenLength = children.length;
+    if (childrenLength > 0) {
+      const bg = children[childrenLength - 1];
+      $content.remove(bg);
+    }
 
     const contentBounds = $content.getBounds();
 
+    const newBg = graphics({
+      type: GraphicType.RECTANGLE,
+      width: $container.getBounds().width,
+      height: contentBounds.height,
+      tint: 0x000000,
+      zIndex: -1,
+    });
+
+    $content.add(...displayObjects, newBg);
+
     isXScrollable = contentBounds.width > size.width;
     isYScrollable = contentBounds.height > size.height;
 

src/types/components/scrollable.types.ts

@@ -6,6 +6,7 @@ export type PartialScrollableProps = {
   jump: number;
   horizontalScroll?: boolean;
   verticalScroll?: boolean;
+  draggableContent?: boolean;
   components?: ContainerMutable[];
 };