@vnejs/plugins.canvas.layer 0.1.1 → 0.1.3

package/const/events.js

@@ -14,5 +14,7 @@ export const SUBSCRIBE_EVENTS = {
 
   CHILD_GET: "vne:layer:child_get",
 
+  FILTER_SET: "vne:layer:filter_set",
+
   STATE_GET: "vne:layer:state_get",
 };

package/const/params.js

@@ -1 +1,10 @@
 export const DEFAULT_QUALITY = "1080p";
+
+export const FILTERS = {
+  blur10: "blur(10px)",
+  blur3: "blur(3px)",
+  sunset: `opacity(95%) drop-shadow(0 0 0 #fad6a5) brightness(95%)`,
+  night: `opacity(90%) drop-shadow(0 0 0 #546bab) brightness(80%)`,
+  deepnight: `opacity(85%) drop-shadow(0 0 0 #2e4482) brightness(70%)`,
+  sunrise: `opacity(95%) drop-shadow(0 0 0 #fa7b62) brightness(95%)`,
+};

package/index.js

@@ -6,5 +6,7 @@ import * as params from "./const/params";
 import { SETTINGS_KEYS } from "./const/settings";
 
 import { LayerQuality } from "./modules/quality";
+import { LayerFilters } from "./modules/filters";
+import { LayerViewport } from "./modules/viewport";
 
-regPlugin("LAYER", { constants, events: SUBSCRIBE_EVENTS, params, settings: SETTINGS_KEYS }, [LayerQuality]);
+regPlugin("LAYER", { constants, events: SUBSCRIBE_EVENTS, params, settings: SETTINGS_KEYS }, [LayerQuality, LayerFilters, LayerViewport]);

package/modules/filters.js

@@ -0,0 +1,45 @@
+import { Module } from "@vnejs/module";
+
+export class LayerFilters extends Module {
+  name = "layer.filters";
+
+  subscribe = () => {
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+  };
+
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: "filter", handler: this.lineExecHandler });
+
+  lineExecHandler = async (line) => {
+    const [layer, filter, duration] = line.split(" ");
+
+    const promise = this.setFilter(layer, filter === "unset" ? "" : filter, Number(duration));
+
+    if (filter === "unset") delete this.state.filters[layer];
+    else this.state.filters[layer] = filter;
+
+    if (!line.endsWith("async")) await promise;
+
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+
+  setFilter = (layer, filter, duration) => this.emit(this.EVENTS.LAYER.FILTER_SET, { layer, filter, duration });
+
+  onStateSet = ({ [this.name]: state } = {}) => {
+    const oldLayers = Object.keys(this.state.filters);
+    const newLayers = Object.keys(state.filters);
+
+    const promises = [];
+
+    oldLayers.forEach((layer) => !newLayers.includes(layer) && promises.push(this.setFilter(layer, "", 0)));
+    newLayers.forEach((layer) => promises.push(this.setFilter(layer, state.filters[layer], 0)));
+
+    this.setState(state);
+
+    return Promise.all(promises);
+  };
+
+  onStateClear = () => Promise.all(Object.keys(this.state.filters).map((layer) => this.setFilter(layer, "", 0)));
+
+  getDefaultState = () => ({ filters: {} });
+}

package/modules/quality.js

@@ -17,15 +17,15 @@ export class LayerQuality extends Module {
 
   onSettingChange = ({ name, value } = {}) => name === this.SETTINGS.LAYER.QUALITY && this.setNewSizes(this.CONST.LAYER.SCREEN_SIZES[value]);
 
-  setNewSizes = ({ width, height } = {}) => {
+  setNewSizes = async ({ width, height } = {}) => {
     document.documentElement.style.setProperty("--vne-canvas-width", `${width}px`);
     document.documentElement.style.setProperty("--vne-canvas-height", `${height}px`);
 
-    return Promise.all([
+    await Promise.all([
       this.emit(this.EVENTS.SETTINGS.SET, { name: this.SETTINGS.LAYER.WIDTH, value: width }),
       this.emit(this.EVENTS.SETTINGS.SET, { name: this.SETTINGS.LAYER.HEIGHT, value: height }),
-    ]).then(this.emitMemoryClear);
-  };
+    ]);
 
-  emitMemoryClear = () => this.emit(this.EVENTS.MEMORY.CLEAR, { isForceClear: true });
+    return this.emit(this.EVENTS.MEMORY.CLEAR);
+  };
 }

package/modules/viewport.js

@@ -0,0 +1,28 @@
+import { Module } from "@vnejs/module";
+
+export class LayerViewport extends Module {
+  name = "layer.viewport";
+
+  layerSizesSettingsNames = [this.SETTINGS.LAYER.WIDTH, this.SETTINGS.LAYER.HEIGHT];
+
+  subscribe = async () => {
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingsChanged);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.setNewSize);
+  };
+
+  init = () => {
+    this.viewportElement = document.createElement("meta");
+    this.viewportElement.setAttribute("name", "viewport");
+
+    document.head.appendChild(this.viewportElement);
+  };
+
+  onSettingsChanged = ({ name } = {}) => this.layerSizesSettingsNames.includes(name) && this.setNewSize();
+
+  setNewSize = () => {
+    const [width, height] = [this.shared.settings[this.SETTINGS.LAYER.WIDTH], this.shared.settings[this.SETTINGS.LAYER.HEIGHT]];
+
+    this.viewportElement.setAttribute("content", `width=${width},height=${height},user-scalable=no`);
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.canvas.layer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",