middle croffle code

middle.tsx

// Original: https://daybrush.com/moveable/storybook2/?path=/story/combination-with-other-components--use-selecto-with-multiple-group

import { deepFlat } from "@daybrush/utils";
import { useKeycon } from "!croffle!keycon";
import Selecto from "!croffle!selecto";
import Moveable, { MoveableTargetGroupsType } from "!croffle!moveable";
import "./cube.css";
import { GroupManager } from "@moveable/helper";
export default function App() {
  function $created() {
    const { isKeydown: isCommand } = useKeycon({ keys: "meta" });
    (this.isCommand = isCommand) as CroffleNamed<
      Import<"react-keycon", "useKeycon">,
      Named<"isKeydown">
    >;
    const { isKeydown: isShift } = useKeycon({ keys: "shift" });
    (this.isShift = isShift) as CroffleNamed<
      Import<"react-keycon", "useKeycon">,
      Named<"isKeydown">
    >;
    (this.groupManagerRef = undefiend) as CroffleRef;
    (this.targets = []) as CroffleState;
    (this.moveableRef = null) as CroffleRef;
    (this.selectoRef = null) as CroffleRef;
    (this.cubes = []) as CroffleAny;
    for (let i = 0; i < 30; ++i) {
      this.cubes.push(i);
    }
    (this.setSelectedTargets = (nextTargetes: MoveableTargetGroupsType) => {
      this.selectoRef.setSelectedTargets(deepFlat(nextTargetes));
      this.targets = nextTargetes;
    }) as CroffleMethod;
    (this.onClickGroup = (e) => {
      if (!e.moveableTarget) {
        this.setSelectedTargets([]);
        return;
      }
      if (e.isDouble) {
        const nextTargets = this.groupManagerRef!.selectNextChild(
          this.targets,
          e.moveableTarget
        );
        this.setSelectedTargets(nextTargets);
        return;
      }
      this.selectoRef!.clickTarget(e.inputEvent, e.moveableTarget);
    }) as CroffleMethod;
    (this.onDrag = (e) => {
      e.target.style.transform = e.transform;
    }) as CroffleMethod;
    (this.onRenderGroup = (e) => {
      e.events.forEach((ev) => {
        ev.target.style.cssText += ev.cssText;
      });
    }) as CroffleMethod;
    (this.onDragStart = (e) => {
      const moveable = this.moveableRef!;
      const target = e.inputEvent.target;
      // Must have use deep flat
      const flatted = this.targets.flat(3) as Array<HTMLElement | SVGElement>;
      if (
        moveable.isMoveableElement(target) ||
        flatted.some((t) => t === target || t.contains(target))
      ) {
        e.stop();
      }
    }) as CroffleMethod;
    (this.onSelectEnd = (e) => {
      const { isDragStart, isClick, added, removed, inputEvent } = e;
      const moveable = this.moveableRef!;
      if (isDragStart) {
        inputEvent.preventDefault();
        moveable.waitToChangeTarget().then(() => {
          moveable.dragStart(inputEvent);
        });
      }
      const groupManager = this.groupManagerRef!;
      let nextTargets = this.targets;
      if (isDragStart || isClick) {
        if (this.isCommand) {
          nextTargets = groupManager.selectSingleTargets(
            this.targets,
            added,
            removed
          );
        } else {
          nextTargets = groupManager.selectCompletedTargets(
            this.targets,
            added,
            removed,
            this.isShift
          );
        }
      } else {
        nextTargets = groupManager.selectSameDepthTargets(
          this.targets,
          added,
          removed
        );
      }
      this.setSelectedTargets(nextTargets);
    }) as CroffleMethod;
  }
  interface $props {}
  function $render(
    { Moveable, Selecto },
    {
      moveableRef,
      targets,
      onClickGroup,
      onDrag,
      onRenderGroup,
      selectoRef,
      onDragStart,
      onSelectEnd,
      cubes,
    }
  ) {
    return (
      <div class="root">
        <div class="container">
          <Moveable
            ref={this.moveableRef}
            draggable={true}
            rotatable={true}
            scalable={true}
            target={this.targets}
            onClickGroup={this.onClickGroup}
            onDrag={this.onDrag}
            onRenderGroup={this.onRenderGroup}
          ></Moveable>
          <Selecto
            ref={this.selectoRef}
            dragContainer={window}
            selectableTargets={[".selecto-area .cube"]}
            hitRate={0}
            selectByClick={true}
            selectFromInside={false}
            toggleContinueSelect={["shift"]}
            ratio={0}
            onDragStart={this.onDragStart}
            onSelectEnd={this.onSelectEnd}
          ></Selecto>
          <p>[[0, 1], 2] is group</p>
          <p>[5, 6, 7] is group</p>

          <div class="elements selecto-area">
            <ForContainer list={this.cubes} value={i}>
              <div class="cube" key={i}>
                {i}
              </div>
            </ForContainer>
          </div>
          <div class="empty elements"></div>
        </div>
      </div>
    );
  }
  function $mounted() {
    $$mounted(() => {
      // [[0, 1], 2], 3, 4, [5, 6], 7, 8, 9
      const elements = this.selectoRef!.getSelectableElements();
      this.groupManagerRef = new GroupManager(
        [
          [[elements[0], elements[1]], elements[2]],
          [elements[5], elements[6], elements[7]],
        ],
        elements
      );
    });
  }
}