@vnejs/plugins.views.screens.gallery.full 0.1.2 → 0.1.3

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,5 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.gallery.full.contract";
+import { GalleryFullController } from "./modules/controller.js";
+import { GalleryFullView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [GalleryFullController, GalleryFullView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,18 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { GalleryFullPluginConstants, GalleryFullPluginEvents, GalleryFullPluginParams, GalleryFullPluginSettings } from "../types.js";
+import type { GalleryFullChoosePayload, GalleryFullPluginState } from "../utils/gallery.full.js";
+export declare class GalleryFullController extends ModuleController<GalleryFullPluginEvents, GalleryFullPluginConstants, GalleryFullPluginSettings, GalleryFullPluginParams, GalleryFullPluginState> {
+    name: string;
+    updateEvent: "vne:gallery_full:update";
+    emitHide: () => undefined;
+    controls: {
+        abstract_back: () => undefined;
+        abstract_menu: () => undefined;
+        abstract_gamemenu: () => undefined;
+    };
+    controlsIndex: number;
+    subscribe: () => void;
+    beforeShow: (args?: {}) => Promise<void>;
+    afterHide: () => void;
+    onGalleryViewChoose: ({ index }?: GalleryFullChoosePayload) => undefined;
+}

package/dist/modules/controller.js

@@ -0,0 +1,27 @@
+import { ModuleController } from "@vnejs/module.components";
+export class GalleryFullController extends ModuleController {
+    name = "gallery.full.controller";
+    updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
+    emitHide = () => void this.emit(this.EVENTS.GALLERY_FULL_VIEW.HIDE);
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+        [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+        [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+    };
+    controlsIndex = this.PARAMS.GALLERY_FULL_VIEW.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.GALLERY_FULL_VIEW.SHOW, this.onShow);
+        this.on(this.EVENTS.GALLERY_FULL_VIEW.HIDE, this.onHide);
+        this.on(this.EVENTS.GALLERY.CHOOSE, this.onGalleryViewChoose);
+    };
+    beforeShow = async (args = {}) => {
+        const { index = 0 } = args;
+        const galleryState = this.globalState?.["gallery.controller"];
+        const { fullName = "", mediaType = "" } = galleryState?.currentItems?.[index] ?? {};
+        return this.updateState({
+            bgSrc: (await this.loadImageMedia(fullName, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src,
+        });
+    };
+    afterHide = () => this.setDefaultState();
+    onGalleryViewChoose = ({ index } = {}) => void this.emit(this.EVENTS.GALLERY_FULL_VIEW.SHOW, { index });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { GalleryFullPluginConstants, GalleryFullPluginEvents, GalleryFullPluginParams, GalleryFullPluginSettings } from "../types.js";
+import type { GalleryFullPluginState } from "../utils/gallery.full.js";
+export declare class GalleryFullView extends ModuleView<GalleryFullPluginEvents, GalleryFullPluginConstants, GalleryFullPluginSettings, GalleryFullPluginParams, GalleryFullPluginState> {
+    name: string;
+    animationTime: number;
+    updateEvent: "vne:gallery_full:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<GalleryFullPluginState>;
+    updateHandler: (state?: GalleryFullPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,9 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class GalleryFullView extends ModuleView {
+    name = "gallery.full.view";
+    animationTime = this.PARAMS.GALLERY_FULL_VIEW.TRANSITION;
+    updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as GalleryPluginName, SubscribeEvents as GallerySubscribeEvents } from "@vnejs/plugins.views.screens.gallery.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.gallery.full.contract";
+export type GalleryFullPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<GalleryPluginName, GallerySubscribeEvents>;
+export type GalleryFullPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type GalleryFullPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+export type GalleryFullPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/gallery.full.d.ts

@@ -0,0 +1,18 @@
+export type GalleryFullPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    bgSrc?: string;
+};
+export type GalleryFullShowPayload = {
+    index?: number;
+};
+export type GalleryFullChoosePayload = {
+    index?: number;
+};
+export type GalleryControllerGlobalItem = {
+    fullName?: string;
+    mediaType?: string;
+};
+export type GalleryControllerGlobalState = {
+    currentItems?: GalleryControllerGlobalItem[];
+};

package/dist/utils/gallery.full.js

@@ -0,0 +1 @@
+export {};

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { GalleryFullPluginState } from "../utils/gallery.full.js";
+export declare const render: ViewRenderFunc<GalleryFullPluginState>;

package/dist/view/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PositionBox, Screen, Svg, createRenderFunc, useCallback, useMemo, useStoreState } from "@vnejs/uis.react";
+const GalleryFull = ({ store, onMount, PARAMS, emit, EVENTS }) => {
+    const { isShow = false, isForce = false, bgSrc = "" } = useStoreState(store, onMount);
+    const propsView = PARAMS.GALLERY_FULL_VIEW.VIEW_PROPS;
+    const propsScreen = useMemo(() => ({ ...propsView.screen, isShow, isForce, isDisableAutoread: isShow, bgSrc }), [isShow, isForce, bgSrc, propsView.screen]);
+    const onClose = useCallback(() => void emit(EVENTS.GALLERY_FULL_VIEW.HIDE), [emit, EVENTS.GALLERY_FULL_VIEW.HIDE]);
+    const propsClose = useMemo(() => ({ ...propsView.close.props, onClick: onClose }), [propsView.close.props, onClose]);
+    return (_jsx(Screen, { ...propsScreen, children: _jsx(PositionBox, { ...propsView.close.position, children: _jsx(Svg.Cross, { ...propsClose }) }) }));
+};
+export const render = createRenderFunc(GalleryFull);

package/package.json

@@ -1,17 +1,47 @@
 {
   "name": "@vnejs/plugins.views.screens.gallery.full",
-  "version": "0.1.2",
-  "main": "index.js",
+  "version": "0.1.3",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "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"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.screens.gallery.full.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.views.screens.gallery.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,7 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.gallery.full.contract";
+
+import { GalleryFullController } from "./modules/controller.js";
+import { GalleryFullView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [GalleryFullController, GalleryFullView]);

package/src/modules/controller.ts

@@ -0,0 +1,50 @@
+import { ModuleController } from "@vnejs/module.components";
+
+import type { GalleryFullPluginConstants, GalleryFullPluginEvents, GalleryFullPluginParams, GalleryFullPluginSettings } from "../types.js";
+import type {
+  GalleryControllerGlobalState,
+  GalleryFullChoosePayload,
+  GalleryFullPluginState,
+  GalleryFullShowPayload,
+} from "../utils/gallery.full.js";
+
+export class GalleryFullController extends ModuleController<
+  GalleryFullPluginEvents,
+  GalleryFullPluginConstants,
+  GalleryFullPluginSettings,
+  GalleryFullPluginParams,
+  GalleryFullPluginState
+> {
+  name = "gallery.full.controller";
+
+  updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
+
+  emitHide = () => void this.emit(this.EVENTS.GALLERY_FULL_VIEW.HIDE);
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+  };
+  controlsIndex = this.PARAMS.GALLERY_FULL_VIEW.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.GALLERY_FULL_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.GALLERY_FULL_VIEW.HIDE, this.onHide);
+
+    this.on(this.EVENTS.GALLERY.CHOOSE, this.onGalleryViewChoose);
+  };
+
+  beforeShow = async (args = {}) => {
+    const { index = 0 } = args as GalleryFullShowPayload;
+    const galleryState = this.globalState?.["gallery.controller"] as GalleryControllerGlobalState | undefined;
+    const { fullName = "", mediaType = "" } = galleryState?.currentItems?.[index] ?? {};
+
+    return this.updateState({
+      bgSrc: (await this.loadImageMedia(fullName, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src,
+    });
+  };
+  afterHide = () => this.setDefaultState();
+
+  onGalleryViewChoose = ({ index }: GalleryFullChoosePayload = {}) => void this.emit(this.EVENTS.GALLERY_FULL_VIEW.SHOW, { index });
+}

package/src/modules/view.ts

@@ -0,0 +1,21 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { GalleryFullPluginConstants, GalleryFullPluginEvents, GalleryFullPluginParams, GalleryFullPluginSettings } from "../types.js";
+import type { GalleryFullPluginState } from "../utils/gallery.full.js";
+
+export class GalleryFullView extends ModuleView<
+  GalleryFullPluginEvents,
+  GalleryFullPluginConstants,
+  GalleryFullPluginSettings,
+  GalleryFullPluginParams,
+  GalleryFullPluginState
+> {
+  name = "gallery.full.view";
+
+  animationTime = this.PARAMS.GALLERY_FULL_VIEW.TRANSITION;
+  updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,15 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as GalleryPluginName, SubscribeEvents as GallerySubscribeEvents } from "@vnejs/plugins.views.screens.gallery.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.gallery.full.contract";
+
+export type GalleryFullPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<GalleryPluginName, GallerySubscribeEvents>;
+
+export type GalleryFullPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type GalleryFullPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+
+export type GalleryFullPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/src/utils/gallery.full.ts

@@ -0,0 +1,22 @@
+export type GalleryFullPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  bgSrc?: string;
+};
+
+export type GalleryFullShowPayload = {
+  index?: number;
+};
+
+export type GalleryFullChoosePayload = {
+  index?: number;
+};
+
+export type GalleryControllerGlobalItem = {
+  fullName?: string;
+  mediaType?: string;
+};
+
+export type GalleryControllerGlobalState = {
+  currentItems?: GalleryControllerGlobalItem[];
+};

package/src/view/index.tsx

@@ -0,0 +1,37 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { PositionBox, Screen, Svg, createRenderFunc, useCallback, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { GalleryFullPluginConstants, GalleryFullPluginEvents, GalleryFullPluginParams, GalleryFullPluginSettings } from "../types.js";
+import type { GalleryFullPluginState } from "../utils/gallery.full.js";
+
+type GalleryFullComponentProps = ReactComponentProps<
+  GalleryFullPluginEvents,
+  GalleryFullPluginConstants,
+  GalleryFullPluginSettings,
+  GalleryFullPluginParams,
+  GalleryFullPluginState
+>;
+
+const GalleryFull = ({ store, onMount, PARAMS, emit, EVENTS }: GalleryFullComponentProps) => {
+  const { isShow = false, isForce = false, bgSrc = "" } = useStoreState<GalleryFullPluginState>(store, onMount);
+
+  const propsView = PARAMS.GALLERY_FULL_VIEW.VIEW_PROPS;
+
+  const propsScreen = useMemo(
+    () => ({ ...propsView.screen, isShow, isForce, isDisableAutoread: isShow, bgSrc }),
+    [isShow, isForce, bgSrc, propsView.screen],
+  );
+  const onClose = useCallback(() => void emit(EVENTS.GALLERY_FULL_VIEW.HIDE), [emit, EVENTS.GALLERY_FULL_VIEW.HIDE]);
+  const propsClose = useMemo(() => ({ ...propsView.close.props, onClick: onClose }), [propsView.close.props, onClose]);
+
+  return (
+    <Screen {...propsScreen}>
+      <PositionBox {...propsView.close.position}>
+        <Svg.Cross {...propsClose} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<GalleryFullPluginState> = createRenderFunc(GalleryFull);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,5 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SHOW: "vne:gallery_full:show",
-  HIDE: "vne:gallery_full:hide",
-  UPDATE: "vne:gallery_full:update",
-};

package/const/params.js

@@ -1,7 +0,0 @@
-export const TRANSITION = 500;
-export const ZINDEX = 9000;
-
-export const VIEW_PROPS = {
-  screen: { isIgnoreOnScreenshot: true, zIndex: ZINDEX, transition: TRANSITION },
-  close: { position: { right: 120, top: 90 }, props: { size: 60 } },
-};

package/index.js

@@ -1,9 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { GalleryFullController } from "./modules/controller";
-import { GalleryFullView } from "./modules/view";
-
-regPlugin("GALLERY_FULL_VIEW", { events: SUBSCRIBE_EVENTS, params }, [GalleryFullController, GalleryFullView]);

package/modules/controller.js

@@ -1,32 +0,0 @@
-import { ModuleController } from "@vnejs/module.components";
-
-export class GalleryFullController extends ModuleController {
-  name = "gallery.full.controller";
-
-  updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
-
-  emitHide = () => this.emit(this.EVENTS.GALLERY_FULL_VIEW.HIDE);
-
-  controls = {
-    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
-  };
-  controlsIndex = this.PARAMS.GALLERY_FULL_VIEW.ZINDEX;
-
-  subscribe = () => {
-    this.on(this.EVENTS.GALLERY_FULL_VIEW.SHOW, this.onShow);
-    this.on(this.EVENTS.GALLERY_FULL_VIEW.HIDE, this.onHide);
-
-    this.on(this.EVENTS.GALLERY.CHOOSE, this.onGalleryViewChoose);
-  };
-
-  beforeShow = async ({ index } = {}) => {
-    const { fullName, mediaType } = this.globalState?.["gallery.controller"].currentItems[index];
-
-    return this.updateState({ bgSrc: (await this.loadImageMedia(fullName, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src });
-  };
-  afterHide = () => this.setDefaultState();
-
-  onGalleryViewChoose = ({ index } = {}) => this.emit(this.EVENTS.GALLERY_FULL_VIEW.SHOW, { index });
-}

package/modules/view.js

@@ -1,13 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class GalleryFullView extends ModuleView {
-  name = "gallery.full.view";
-
-  animationTime = this.PARAMS.GALLERY_FULL_VIEW.TRANSITION;
-  updateEvent = this.EVENTS.GALLERY_FULL_VIEW.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/index.jsx

@@ -1,26 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { PositionBox, Screen, Svg } from "@vnejs/uis.react";
-
-const GalleryFull = ({ store, onMount, ...props } = {}) => {
-  const [{ isShow = false, isForce = false, bgSrc = "" }, setState] = useState({});
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const propsView = props.PARAMS.GALLERY_FULL_VIEW.VIEW_PROPS;
-
-  const propsScreen = useMemo(() => ({ ...propsView.screen, isShow, isForce, isDisableAutoread: isShow, bgSrc }), [isShow, isForce, bgSrc]);
-  const propsClose = useMemo(() => ({ ...propsView.close.props, onClick: () => props.emit(props.EVENTS.GALLERY_FULL_VIEW.HIDE) }), []);
-
-  return (
-    <Screen {...propsScreen}>
-      <PositionBox {...propsView.close.position}>
-        <Svg.Cross {...propsClose} />
-      </PositionBox>
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<GalleryFull {...props} />);