@vnejs/plugins.views.cursor 0.1.1

package/index.js

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { CursorController } from "./modules/controller";
+import { CursorView } from "./modules/view";
+
+regPlugin("CURSOR_VIEW", {}, [CursorController, CursorView]);

package/modules/controller.js

@@ -0,0 +1,28 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class CursorController extends ModuleController {
+  name = "cursor.controller";
+
+  updateEvent = this.EVENTS.CURSOR.UPDATE;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CURSOR.SHOW, this.onShow);
+    this.on(this.EVENTS.CURSOR.HIDE, this.onHide);
+    this.on(this.EVENTS.CURSOR.MOVED, this.onMoved);
+    this.on(this.EVENTS.CURSOR.VIEW_SET, this.onViewSet);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+
+  onViewSet = async ({ view } = {}) => {
+    this.updateState({ view });
+
+    return this.state.view && this.updateStateAndViewFast(await this.loadSrcs(this.state.view));
+  };
+  onMoved = () => this.updateStateAndViewFast({ x: this.globalState.cursor.x, y: this.globalState.cursor.y });
+
+  onMemoryCleared = async () => this.state.view && this.updateStateAndViewFast(await this.loadSrcs(this.state.view));
+
+  loadSrcs = async (view) => ({ srcDefault: (await this.loadIconMedia(view, "default")).src, srcPointer: (await this.loadIconMedia(view, "pointer")).src });
+  loadIconMedia = (view, type) => this.loadImageMedia(`cursor/${view}/${type}`, "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY]);
+}

package/modules/view.js

@@ -0,0 +1,12 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class CursorView extends ModuleView {
+  name = "cursor.view";
+
+  updateEvent = this.EVENTS.CURSOR.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.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": ""
+}

package/view/index.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Cursor } from "@vnejs/uis.react";
+
+const CursorView = ({ store, onMount } = {}) => {
+  const [{ isShow = false, x = 0, y = 0, srcDefault = "", srcPointer = "" }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsCursor = useMemo(() => ({ isShow, forceX: x, forceY: y, srcDefault, srcPointer }), [isShow, x, y, srcDefault, srcPointer]);
+
+  return <Cursor {...propsCursor} />;
+};
+
+export const render = (props, root) => createRoot(root).render(<CursorView {...props} />);