All files / src InputObserver.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274          9x       9x           9x       9x           262x 262x 262x   262x 262x 262x 262x 262x               262x 262x 262x 262x 262x     9x 15x     9x 175x     175x       175x 175x 175x 175x 175x 169x   175x 175x     9x 3988x     3917x   451x   3537x 3537x 35x   3502x       5219x 3502x 3502x   5219x 5219x           3502x           3502x 3502x   3502x 3501x     3502x       3502x 1x 1x   3501x           3501x 3x 3x 3x         9x           148x         3x   145x 145x 4x   145x 145x 145x 145x 145x   197x 8x   189x                 145x 145x           145x 110x     145x                 145x 145x 145x 136x       145x 145x 145x       145x 110x               110x 110x 7x   103x     35x                 7004x 7004x             7004x 10438x 10438x 10438x 10438x   10438x 5x 10433x   464x     9969x   20x       9949x         9x 36x     36x                   9x  
/*
 * Copyright (c) 2015 NAVER Corp.
 * egjs projects are licensed under the MIT license
 */
import { InterruptManager } from "./InterruptManager";
import { InputType, InputTypeObserver, toAxis } from "./inputType/InputType";
import { EventManager, ChangeEventOption } from "./EventManager";
import { AxisManager, Axis } from "./AxisManager";
import { AxesOption } from "./Axes";
import {
  isOutside,
  getInsidePosition,
  getCirculatedPos,
  isEndofBounce,
} from "./Coordinate";
import { map, equal } from "./utils";
import { AnimationParam } from "./types";
import { AnimationManager } from "./animation/AnimationManager";
 
export class InputObserver implements InputTypeObserver {
  public options: AxesOption;
  private _interruptManager: InterruptManager;
  private _eventManager: EventManager;
  private _axisManager: AxisManager;
  private _animationManager: AnimationManager;
  private _isOutside = false;
  private _moveDistance: Axis = null;
  private _isStopped = false;
  public constructor({
    options,
    interruptManager,
    eventManager,
    axisManager,
    animationManager,
  }: {
    options: AxesOption;
    interruptManager: InterruptManager;
    eventManager: EventManager;
    axisManager: AxisManager;
    animationManager: AnimationManager;
  }) {
    this.options = options;
    this._interruptManager = interruptManager;
    this._eventManager = eventManager;
    this._axisManager = axisManager;
    this._animationManager = animationManager;
  }
 
  public get(input: InputType): Axis {
    return this._axisManager.get(input.axes);
  }
 
  public hold(input: InputType, event) {
    Iif (this._interruptManager.isInterrupted() || !input.axes.length) {
      return;
    }
    const changeOption: ChangeEventOption = {
      input,
      event,
    };
    this._isStopped = false;
    this._interruptManager.setInterrupt(true);
    this._animationManager.stopAnimation(changeOption);
    ++this._eventManager.holdingCount;
    if (!this._moveDistance) {
      this._eventManager.hold(this._axisManager.get(), changeOption);
    }
    this._isOutside = this._axisManager.isOutside(input.axes);
    this._moveDistance = this._axisManager.get(input.axes);
  }
 
  public change(input: InputType, event, offset: Axis, useAnimation?: boolean) {
    if (
      this._isStopped ||
      !this._interruptManager.isInterrupting() ||
      this._axisManager.every(offset, (v) => v === 0)
    ) {
      return;
    }
    const nativeEvent = event.srcEvent ? event.srcEvent : event;
    if (nativeEvent.__childrenAxesAlreadyChanged) {
      return;
    }
    let depaPos: Axis = this._moveDistance || this._axisManager.get(input.axes);
    let destPos: Axis;
 
    // for outside logic
    destPos = map(depaPos, (v, k) => v + (offset[k] || 0));
    Eif (this._moveDistance) {
      this._moveDistance = this._axisManager.map(
        destPos,
        (v, { circular, range }) =>
          circular && (circular[0] || circular[1])
            ? getCirculatedPos(v, range, circular as boolean[])
            : v
      );
    }
    // from outside to inside
    Iif (
      this._isOutside &&
      this._axisManager.every(depaPos, (v, opt) => !isOutside(v, opt.range))
    ) {
      this._isOutside = false;
    }
    depaPos = this._atOutside(depaPos);
    destPos = this._atOutside(destPos);
 
    if (!this.options.nested || !this._isEndofAxis(offset, depaPos, destPos)) {
      nativeEvent.__childrenAxesAlreadyChanged = true;
    }
 
    const changeOption: ChangeEventOption = {
      input,
      event,
    };
    if (useAnimation) {
      const duration = this._animationManager.getDuration(destPos, depaPos);
      this._animationManager.animateTo(destPos, duration, changeOption);
    } else {
      const isCanceled = !this._eventManager.triggerChange(
        destPos,
        depaPos,
        changeOption,
        true
      );
      if (isCanceled) {
        this._isStopped = true;
        this._moveDistance = null;
        this._animationManager.finish(false);
      }
    }
  }
 
  public release(
    input: InputType,
    event,
    velocity: number[],
    inputDuration?: number
  ) {
    if (
      this._isStopped ||
      !this._interruptManager.isInterrupting() ||
      !this._moveDistance
    ) {
      return;
    }
    const nativeEvent = event.srcEvent ? event.srcEvent : event;
    if (nativeEvent.__childrenAxesAlreadyReleased) {
      velocity = velocity.map(() => 0);
    }
    const pos: Axis = this._axisManager.get(input.axes);
    const depaPos: Axis = this._axisManager.get();
    const displacement = this._animationManager.getDisplacement(velocity);
    const offset = toAxis(input.axes, displacement);
    let destPos: Axis = this._axisManager.get(
      this._axisManager.map(offset, (v, opt, k) => {
        if (opt.circular && (opt.circular[0] || opt.circular[1])) {
          return pos[k] + v;
        } else {
          return getInsidePosition(
            pos[k] + v,
            opt.range,
            opt.circular as boolean[],
            opt.bounce as number[]
          );
        }
      })
    );
    nativeEvent.__childrenAxesAlreadyReleased = true;
    const duration = this._animationManager.getDuration(
      destPos,
      pos,
      inputDuration
    );
 
    if (duration === 0) {
      destPos = { ...depaPos };
    }
    // prepare params
    const param: AnimationParam = {
      depaPos,
      destPos,
      duration,
      delta: this._axisManager.getDelta(depaPos, destPos),
      inputEvent: event,
      input,
      isTrusted: true,
    };
    --this._eventManager.holdingCount;
    this._eventManager.triggerRelease(param);
    if (this._eventManager.holdingCount === 0) {
      this._moveDistance = null;
    }
 
    // to contol
    const userWish = this._animationManager.getUserControl(param);
    const isEqual = equal(userWish.destPos, depaPos);
    const changeOption: ChangeEventOption = {
      input,
      event,
    };
    if (isEqual || userWish.duration === 0) {
      Iif (!isEqual) {
        this._eventManager.triggerChange(
          userWish.destPos,
          depaPos,
          changeOption,
          true
        );
      }
      this._interruptManager.setInterrupt(false);
      if (this._axisManager.isOutside()) {
        this._animationManager.restore(changeOption);
      } else {
        this._eventManager.triggerFinish(true);
      }
    } else {
      this._animationManager.animateTo(
        userWish.destPos,
        userWish.duration,
        changeOption
      );
    }
  }
 
  // when move pointer is held in outside
  private _atOutside(pos: Axis) {
    Iif (this._isOutside) {
      return this._axisManager.map(pos, (v, opt) => {
        const tn = opt.range[0] - (opt.bounce[0] as number);
        const tx = opt.range[1] + (opt.bounce[1] as number);
        return v > tx ? tx : v < tn ? tn : v;
      });
    } else {
      return this._axisManager.map(pos, (v, opt) => {
        const min = opt.range[0];
        const max = opt.range[1];
        const out = opt.bounce;
        const circular = opt.circular;
 
        if ((circular[0] && v < min) || (circular[1] && v > max)) {
          return v;
        } else if (v < min) {
          // left
          return (
            min - this._animationManager.interpolate(min - v, out[0] as number)
          );
        } else if (v > max) {
          // right
          return (
            max + this._animationManager.interpolate(v - max, out[1] as number)
          );
        }
        return v;
      });
    }
  }
 
  private _isEndofAxis(offset: Axis, depaPos: Axis, destPos: Axis) {
    return this._axisManager.every(
      depaPos,
      (value, option, key) =>
        offset[key] === 0 ||
        (depaPos[key] === destPos[key] &&
          isEndofBounce(
            value,
            option.range,
            option.bounce as number[],
            option.circular as boolean[]
          ))
    );
  }
}