@vnejs/plugins.feature.cursor 0.1.1

package/const/events.js

@@ -0,0 +1,13 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:cursor:show",
+  HIDE: "vne:cursor:hide",
+  UPDATE: "vne:cursor:update",
+
+  CLICK: "vne:cursor:click",
+
+  VIEW_SET: "vne:cursor:view_set",
+
+  MOVE: "vne:cursor:move",
+  MOVED: "vne:cursor:moved",
+  SHIFT: "vne:cursor:shift",
+};

package/const/params.js

@@ -0,0 +1,2 @@
+export const DEFAULT_VIEW = "default";
+export const DEFAULT_SHIFT_SPEED = 16;

package/const/settings.js

@@ -0,0 +1,3 @@
+export const SETTINGS_KEYS = {
+  SHIFT_SPEED: "vne:cursor:shift_speed",
+};

package/index.js

@@ -0,0 +1,10 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+import { SETTINGS_KEYS } from "./const/settings";
+
+import { Cursor } from "./modules/cursor";
+
+regPlugin("CURSOR", { constants, events: SUBSCRIBE_EVENTS, settings: SETTINGS_KEYS, params }, [Cursor]);

package/modules/cursor.js

@@ -0,0 +1,73 @@
+import { Module } from "@vnejs/module";
+
+export class Cursor extends Module {
+  name = "cursor";
+
+  maxX = document.documentElement.clientWidth;
+  maxY = document.documentElement.clientHeight;
+
+  mouseMoveHandler = (e = {}) => this.emit(this.EVENTS.CURSOR.MOVE, { x: e.clientX, y: e.clientY });
+
+  subscribe = () => {
+    this.on(this.EVENTS.CURSOR.CLICK, this.onClick);
+
+    this.on(this.EVENTS.CURSOR.MOVE, this.onMove);
+    this.on(this.EVENTS.CURSOR.SHIFT, this.onShift);
+
+    this.on(this.EVENTS.CURSOR.VIEW_SET, this.onViewSet);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.onStarted);
+    this.on(this.EVENTS.SYSTEM.RESIZE, this.onResize);
+  };
+
+  init = () => {
+    document.addEventListener("mousemove", this.mouseMoveHandler);
+
+    return this.emit(this.EVENTS.SETTINGS.INIT, { name: this.SETTINGS.CURSOR.SHIFT_SPEED, value: this.PARAMS.CURSOR.DEFAULT_SHIFT_SPEED });
+  };
+
+  onClick = () =>
+    document
+      .elementFromPoint(this.state.x, this.state.y)
+      .dispatchEvent(new MouseEvent("click", { view: window, bubbles: true, cancelable: true, clientX: this.state.x, clientY: this.state.y, button: 0 }));
+
+  onMove = ({ x, y } = {}) => {
+    this.emit(this.EVENTS.CURSOR.SHOW);
+
+    return this.setXandY(x, y);
+  };
+  onShift = ({ x, y } = {}) => {
+    const shiftSpeed = this.shared.settings[this.SETTINGS.CURSOR.SHIFT_SPEED];
+
+    return this.setXandY(this.state.x + shiftSpeed * x, this.state.y + shiftSpeed * y);
+  };
+
+  onViewSet = ({ view = this.PARAMS.CURSOR.DEFAULT_VIEW } = {}) => this.updateState({ view });
+
+  onStarted = () => {
+    this.emit(this.EVENTS.CURSOR.VIEW_SET, { view: this.PARAMS.CURSOR.DEFAULT_VIEW });
+    this.emit(this.EVENTS.CURSOR.SHOW);
+    this.emit(this.EVENTS.CURSOR.MOVED);
+  };
+  onStateSet = ({ [this.name]: { view = this.PARAMS.CURSOR.DEFAULT_VIEW } = {} } = {}) => this.emit(this.EVENTS.CURSOR.VIEW_SET, { view });
+  onStateClear = () => this.emit(this.EVENTS.CURSOR.VIEW_SET, { view: this.PARAMS.CURSOR.DEFAULT_VIEW });
+  onResize = () => {
+    this.maxX = document.documentElement.clientWidth;
+    this.maxY = document.documentElement.clientHeight;
+
+    this.setXandY(this.state.x, this.state.y);
+  };
+
+  setXandY = (x, y) => {
+    if (this.state.x === x && this.state.y === y) return;
+
+    this.updateState({ x: Math.min(Math.max(x, 0), this.maxX), y: Math.min(Math.max(y, 0), this.maxY) });
+
+    this.emit(this.EVENTS.CURSOR.MOVED);
+  };
+
+  getDefaultState = () => ({ view: this.PARAMS.CURSOR.DEFAULT_VIEW, x: this.maxX / 2, y: this.maxY / 2 });
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.feature.cursor",
+  "version": "0.1.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm version major && npm publish --access public",
+    "publish:minor": "npm version minor && npm publish --access public",
+    "publish:patch": "npm version patch && npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}