packages/react-moveable/src/ables/Clickable.ts

  1. import {
  2.     MoveableManagerInterface, MoveableGroupInterface,
  3.     ClickableProps, OnClick, OnClickGroup,
  4. } from "../types";
  5. import { triggerEvent, fillParams } from "../utils";
  6. import { findIndex } from "@daybrush/utils";
  7. import { makeAble } from "./AbleManager";
  9. export default makeAble("clickable", {
  10.     props: [
  11.         "clickable",
  12.     ] as const,
  13.     events: [
  14.         "click",
  15.         "clickGroup",
  16.     ] as const,
  17.     always: true,
  18.     dragRelation: "weak",
  19.     // eslint-disable-next-line @typescript-eslint/no-unused-vars
  20.     dragStart() {
  21.         return;
  22.     },
  23.     dragControlStart() {
  24.         return;
  25.     },
  26.     dragGroupStart(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
  27.         e.datas.inputTarget = e.inputEvent && e.inputEvent.target;
  28.     },
  29.     dragEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
  30.         const target = moveable.props.target!;
  31.         const inputEvent = e.inputEvent;
  32.         const inputTarget = e.inputTarget;
  33.         const isMoveableElement = moveable.isMoveableElement(inputTarget);
  34.         const containsElement = !isMoveableElement && moveable.controlBox.contains(inputTarget);
  36.         if (
  37.             !inputEvent || !inputTarget || e.isDrag
  38.             || moveable.isMoveableElement(inputTarget)
  39.             || containsElement
  40.             // External event duplicate target or dragAreaElement
  41.         ) {
  42.             return;
  43.         }
  44.         const containsTarget = target.contains(inputTarget);
  46.         triggerEvent(moveable, "onClick", fillParams<OnClick>(moveable, e, {
  47.             isDouble: e.isDouble,
  48.             inputTarget,
  49.             isTarget: target === inputTarget,
  50.             moveableTarget: moveable.props.target!,
  51.             containsTarget,
  52.         }));
  53.     },
  54.     dragGroupEnd(moveable: MoveableGroupInterface<ClickableProps>, e: any) {
  55.         const inputEvent = e.inputEvent;
  56.         const inputTarget = e.inputTarget;
  58.         if (
  59.             !inputEvent || !inputTarget || e.isDrag
  60.             || moveable.isMoveableElement(inputTarget)
  61.             // External event duplicate target or dragAreaElement
  62.             || e.datas.inputTarget === inputTarget
  63.         ) {
  64.             return;
  65.         }
  66.         const targets = moveable.props.targets!;
  67.         let targetIndex = targets.indexOf(inputTarget);
  68.         const isTarget = targetIndex > -1;
  69.         let containsTarget = false;
  71.         if (targetIndex === -1) {
  72.             targetIndex = findIndex(targets, parentTarget => parentTarget.contains(inputTarget));
  73.             containsTarget = targetIndex > -1;
  74.         }
  76.         triggerEvent(moveable, "onClickGroup", fillParams<OnClickGroup>(moveable, e, {
  77.             isDouble: e.isDouble,
  78.             targets,
  79.             inputTarget,
  80.             targetIndex,
  81.             isTarget,
  82.             containsTarget,
  83.             moveableTarget: targets[targetIndex],
  84.         }));
  85.     },
  86.     dragControlEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
  87.         this.dragEnd(moveable, e);
  88.     },
  89.     dragGroupControlEnd(moveable: MoveableManagerInterface<ClickableProps>, e: any) {
  90.         this.dragEnd(moveable, e);
  91.     },
  92. });
  94. /**
  95.  * When you click on the element, the `click` event is called.
  96.  * @memberof Moveable
  97.  * @event click
  98.  * @param {Moveable.OnClick} - Parameters for the `click` event
  99.  * @example
  100.  * import Moveable from "moveable";
  101.  *
  102.  * const moveable = new Moveable(document.body, {
  103.  *     target: document.querySelector(".target"),
  104.  * });
  105.  * moveable.on("click", ({ hasTarget, containsTarget, targetIndex }) => {
  106.  *     // If you click on an element other than the target and not included in the target, index is -1.
  107.  *     console.log("onClickGroup", target, hasTarget, containsTarget, targetIndex);
  108.  * });
  109.  */
  111. /**
  112.  * When you click on the element inside the group, the `clickGroup` event is called.
  113.  * @memberof Moveable
  114.  * @event clickGroup
  115.  * @param {Moveable.OnClickGroup} - Parameters for the `clickGroup` event
  116.  * @example
  117.  * import Moveable from "moveable";
  118.  *
  119.  * const moveable = new Moveable(document.body, {
  120.  *     target: [].slice.call(document.querySelectorAll(".target")),
  121.  * });
  122.  * moveable.on("clickGroup", ({ inputTarget, isTarget, containsTarget, targetIndex }) => {
  123.  *     // If you click on an element other than the target and not included in the target, index is -1.
  124.  *     console.log("onClickGroup", inputTarget, isTarget, containsTarget, targetIndex);
  125.  * });
  126.  */