@maas/vue-equipment 0.10.7 → 0.11.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.10.6"
+  "version": "0.11.0"
 }

package/dist/nuxt/module.mjs

@@ -36,17 +36,24 @@ const functions = [
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicModal/",
 		description: "modal"
 	},
+	{
+		name: "MagicNoise",
+		"package": "plugins",
+		lastUpdated: 1697183651000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicNoise/",
+		description: "noise"
+	},
 	{
 		name: "MagicPlayer",
 		"package": "plugins",
-		lastUpdated: 1695376679000,
+		lastUpdated: 1697181673000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicPlayer/",
 		description: "player"
 	},
 	{
 		name: "MagicScroll",
 		"package": "plugins",
-		lastUpdated: 1695376679000,
+		lastUpdated: 1697181673000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicScroll/",
 		description: "scroll"
 	},

package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="magic-marquee">
-    <div class="magic-marquee__track" ref="parentRef">
+  <div class="magic-marquee" ref="parentRef">
+    <div class="magic-marquee__track">
       <div class="magic-marquee__content" ref="childRef">
         <slot />
       </div>

package/dist/plugins/MagicNoise/index.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vue';
+import MagicNoise from './src/components/MagicNoise.vue.js';
+import { useNoiseApi } from './src/composables/useNoiseApi.js';
+declare const MagicNoisePlugin: Plugin;
+export { MagicNoisePlugin, MagicNoise, useNoiseApi };

package/dist/plugins/MagicNoise/index.mjs

@@ -0,0 +1,8 @@
+import MagicNoise from "./src/components/MagicNoise.vue";
+import { useNoiseApi } from "./src/composables/useNoiseApi.mjs";
+const MagicNoisePlugin = {
+  install: (app) => {
+    app.component("MagicNoise", MagicNoise);
+  }
+};
+export { MagicNoisePlugin, MagicNoise, useNoiseApi };

package/dist/plugins/MagicNoise/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponent,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/MagicNoise"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicNoise.vue"),
+      name: "MagicNoise",
+      global: true
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicNoise",
+      name: "useNoiseApi"
+    });
+  }
+});

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="magic-noise" :class="{ '-loading': !isReady }">
+    <div :class="{ '-loading': !isReady }" class="magic-noise__inner">
+      <canvas ref="canvasRef" class="magic-noise__canvas" />
+      <canvas ref="offCanvasRef" class="magic-noise__off-canvas" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, computed, watch, ref, shallowRef } from 'vue'
+import { useResizeObserver, useDebounceFn } from '@vueuse/core'
+import { useNoiseApi } from '../composables/useNoiseApi'
+
+interface Props {
+  pixelSize?: number
+  tiles?: number
+  fps?: number
+  color?: string
+  pause?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pixelSize: 2,
+  tiles: 32,
+  fps: 8,
+  color: '#000',
+  pause: false,
+})
+
+const canvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
+const offCanvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
+
+const options = computed(() => {
+  return {
+    pixelSize: props.pixelSize,
+    tiles: props.tiles,
+    fps: props.fps,
+    color: props.color,
+  }
+})
+
+const noiseApi = useNoiseApi({ canvasRef, offCanvasRef, options })
+const {
+  initialize,
+  drawControls,
+  transferControls,
+  throttledDraw,
+  throttledRotateAndTransfer,
+  isReady,
+} = noiseApi
+
+useResizeObserver(canvasRef, useDebounceFn(initialize, 100))
+
+watch(
+  () => props.pause,
+  (pause) => {
+    if (pause) {
+      drawControls.value?.pause()
+      transferControls.value?.pause()
+    } else {
+      drawControls.value?.resume()
+      transferControls.value?.resume()
+    }
+  },
+)
+
+onMounted(() => {
+  throttledDraw()
+  throttledRotateAndTransfer()
+})
+
+onUnmounted(() => {
+  isReady.value = false
+  transferControls.value?.pause()
+  drawControls.value?.pause()
+})
+</script>
+
+<style lang="css">
+:root {
+  --magic-noise-loading-background: #000;
+  --magic-noise-loading-transition: color 300ms ease, opacity 300ms ease;
+}
+
+.magic-noise {
+  position: relative;
+  user-select: none;
+  transition: var(--magic-noise-loading-transition);
+  &.-loading {
+    background: var(--magic-noise-loading-background);
+  }
+}
+
+.magic-noise__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: var(--magic-noise-loading-transition);
+  &.-loading {
+    opacity: 0;
+  }
+}
+
+.magic-noise__canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
+
+.magic-noise__off-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+</style>

package/dist/plugins/MagicNoise/src/components/MagicNoise.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: import("vue").DefineComponent<{
+    pause: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    pixelSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    tiles: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    fps: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    color: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    pause: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    pixelSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    tiles: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    fps: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    color: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>>, {
+    pause: boolean;
+    pixelSize: number;
+    tiles: number;
+    fps: number;
+    color: string;
+}, {}>;
+export default _default;

package/dist/plugins/MagicNoise/src/composables/useNoiseApi.d.ts

@@ -0,0 +1,23 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { RafControls } from '../types.js';
+type UseNoiseApiArgs = {
+    canvasRef: Ref<HTMLCanvasElement | undefined>;
+    offCanvasRef: Ref<HTMLCanvasElement | undefined>;
+    options?: MaybeRef<{
+        pixelSize?: number;
+        tiles?: number;
+        color?: string;
+        fps?: number;
+    }>;
+};
+export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNoiseApiArgs): {
+    initialize: () => void;
+    draw: () => void;
+    rotateAndTransfer: () => void;
+    throttledDraw: () => void;
+    throttledRotateAndTransfer: () => void;
+    isReady: Ref<boolean>;
+    drawControls: import("vue").ShallowRef<RafControls | undefined>;
+    transferControls: import("vue").ShallowRef<RafControls | undefined>;
+};
+export {};

package/dist/plugins/MagicNoise/src/composables/useNoiseApi.mjs

@@ -0,0 +1,182 @@
+import { shallowRef, ref, reactive } from "vue";
+import { defu } from "defu";
+import {
+  useElementSize,
+  useDevicePixelRatio,
+  useThrottleFn,
+  useRafFn
+} from "@vueuse/core";
+const defaultOptions = {
+  pixelSize: 2,
+  tiles: 32,
+  fps: 12,
+  color: "white"
+};
+export function useNoiseApi({
+  canvasRef,
+  offCanvasRef,
+  options
+}) {
+  const tiles = shallowRef([]);
+  const pixels = shallowRef([]);
+  const isReady = ref(false);
+  let context = shallowRef(null);
+  let offContext = shallowRef(null);
+  const { width, height } = useElementSize(canvasRef);
+  const { pixelRatio } = useDevicePixelRatio();
+  const drawControls = shallowRef(void 0);
+  const transferControls = shallowRef(void 0);
+  const dimensions = reactive({
+    width: 0,
+    height: 0,
+    offWidth: 0,
+    offHeight: 0
+  });
+  const mappedOptions = defu(options, defaultOptions);
+  function findBiggerNumber(target, divisor) {
+    const remainder = target % divisor;
+    if (remainder === 0) {
+      return target;
+    }
+    const biggerNumber = Math.ceil(target / divisor) * divisor;
+    return biggerNumber;
+  }
+  function resetContexts() {
+    context.value = null;
+    offContext.value = null;
+  }
+  function resetPixels() {
+    pixels.value = [];
+  }
+  function calculatePixels({
+    width: width2,
+    height: height2,
+    pixelSize,
+    rotation
+  }) {
+    if (pixelSize <= 0 || pixelSize <= 0) {
+      return [];
+    }
+    const pixels2 = [];
+    for (let y = 0; y < height2; y += pixelSize) {
+      for (let x = 0; x < width2; x += pixelSize) {
+        let radian;
+        if (rotation) {
+          const angle = getRandomRotationAngle();
+          radian = getRadianFromAngle(angle);
+        }
+        const pixel = {
+          w: pixelSize,
+          h: pixelSize,
+          x,
+          y,
+          r: radian
+        };
+        pixels2.push(pixel);
+      }
+    }
+    return pixels2;
+  }
+  function calculate() {
+    const offCanvasHeight = offCanvasRef.value?.height;
+    const offCanvasWidth = offCanvasRef.value?.width;
+    if (!offCanvasHeight || !offCanvasWidth)
+      return;
+    pixels.value = calculatePixels({
+      width: offCanvasWidth,
+      height: offCanvasHeight,
+      pixelSize: mappedOptions.pixelSize * pixelRatio.value
+    });
+    tiles.value = calculatePixels({
+      width: dimensions.width,
+      height: dimensions.height,
+      pixelSize: dimensions.offWidth,
+      rotation: true
+    });
+    isReady.value = true;
+    draw();
+    rotateAndTransfer();
+  }
+  function initialize() {
+    resetContexts();
+    if (!canvasRef.value || !offCanvasRef.value)
+      return;
+    const maxCanvasDim = Math.max(width.value, height.value) * pixelRatio.value;
+    const maxOffCanvasDim = maxCanvasDim / Math.sqrt(mappedOptions.tiles);
+    const adjustedOffCanvasDim = findBiggerNumber(
+      maxOffCanvasDim,
+      mappedOptions.pixelSize
+    );
+    canvasRef.value.width = dimensions.width = maxCanvasDim;
+    canvasRef.value.height = dimensions.height = maxCanvasDim;
+    offCanvasRef.value.width = dimensions.offWidth = adjustedOffCanvasDim;
+    offCanvasRef.value.height = dimensions.offHeight = adjustedOffCanvasDim;
+    context.value = canvasRef.value.getContext("2d", {
+      alpha: false
+    });
+    offContext.value = offCanvasRef.value.getContext("2d", {
+      alpha: false,
+      willReadFrequently: true
+    });
+    resetPixels();
+    calculate();
+  }
+  function getRandomRotationAngle() {
+    return [0, 90, 180, 270][Math.floor(Math.random() * 4)];
+  }
+  function getRadianFromAngle(angle) {
+    return angle * Math.PI / 180;
+  }
+  function rotateAndTransfer() {
+    if (!canvasRef.value || !offCanvasRef.value || !context.value || !offContext.value) {
+      return;
+    }
+    context.value.clearRect(0, 0, dimensions.width, dimensions.height);
+    for (const tile of tiles.value) {
+      context.value.translate(tile.x + tile.w / 2, tile.y + tile.h / 2);
+      context.value.rotate(tile.r);
+      context.value.drawImage(offCanvasRef.value, -tile.w / 2, -tile.h / 2);
+      context.value.resetTransform();
+    }
+  }
+  function throttledRotateAndTransfer() {
+    transferControls.value?.pause();
+    const throttled = useThrottleFn(() => {
+      rotateAndTransfer();
+    }, 600 / mappedOptions.fps);
+    transferControls.value = useRafFn(throttled);
+  }
+  function draw() {
+    if (!offContext.value || !offCanvasRef.value)
+      return;
+    offContext.value.clearRect(
+      0,
+      0,
+      offCanvasRef.value.width,
+      offCanvasRef.value.height
+    );
+    for (const pixel of pixels.value) {
+      if (Math.random() > 0.5) {
+        offContext.value.fillStyle = mappedOptions.color;
+        offContext.value.fillRect(pixel.x, pixel.y, pixel.w, pixel.h);
+      }
+    }
+  }
+  function throttledDraw() {
+    drawControls.value?.pause();
+    const throttled = useThrottleFn(() => {
+      draw();
+    }, 600 / mappedOptions.fps);
+    drawControls.value = useRafFn(throttled);
+  }
+  return {
+    initialize,
+    draw,
+    rotateAndTransfer,
+    throttledDraw,
+    throttledRotateAndTransfer,
+    isReady,
+    drawControls,
+    transferControls
+  };
+}

package/dist/plugins/MagicNoise/src/types/index.d.ts

@@ -0,0 +1,9 @@
+import type { Pausable } from '@vueuse/core';
+export type Pixel = {
+    w: number;
+    h: number;
+    x: number;
+    y: number;
+    r?: number;
+};
+export type RafControls = Pick<Pausable, 'pause' | 'resume'>;

package/dist/plugins/MagicPlayer/index.d.ts

@@ -8,7 +8,8 @@ import { usePlayerApi } from './src/composables/usePlayerApi.js';
 import { useProvidePlayer, useInjectPlayer } from './src/composables/usePlayer.js';
 import { useProvideControls, useInjectControls } from './src/composables/useControls.js';
 import { useRuntimeSourceProvider } from './src/composables/useRuntimeSourceProvider.js';
+import { MediaApiInjectionKey, PlayerApiInjectionKey, RuntimeSourceProviderInjectionKey, ControlsApiInjectionKey } from './src/symbols.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerTimeline, MagicPlayerMuxPopover, useMediaApi, usePlayerApi, useRuntimeSourceProvider, useProvidePlayer, useInjectPlayer, useProvideControls, useInjectControls, };
+export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerTimeline, MagicPlayerMuxPopover, useMediaApi, usePlayerApi, useRuntimeSourceProvider, useProvidePlayer, useInjectPlayer, useProvideControls, useInjectControls, MediaApiInjectionKey, PlayerApiInjectionKey, RuntimeSourceProviderInjectionKey, ControlsApiInjectionKey, };
 export * from './src/symbols.js';
 export type * from './src/types';

package/dist/plugins/MagicPlayer/index.mjs

@@ -10,6 +10,12 @@ import {
   useInjectControls
 } from "./src/composables/useControls.mjs";
 import { useRuntimeSourceProvider } from "./src/composables/useRuntimeSourceProvider.mjs";
+import {
+  MediaApiInjectionKey,
+  PlayerApiInjectionKey,
+  RuntimeSourceProviderInjectionKey,
+  ControlsApiInjectionKey
+} from "./src/symbols/index.mjs";
 const MagicPlayerPlugin = {
   install: (app) => {
     app.component("MagicPlayer", MagicPlayer);
@@ -30,6 +36,10 @@ export {
   useProvidePlayer,
   useInjectPlayer,
   useProvideControls,
-  useInjectControls
+  useInjectControls,
+  MediaApiInjectionKey,
+  PlayerApiInjectionKey,
+  RuntimeSourceProviderInjectionKey,
+  ControlsApiInjectionKey
 };
 export * from "./src/symbols/index.mjs";

package/dist/plugins/MagicScroll/index.d.ts

@@ -6,8 +6,9 @@ import MagicScrollCollision from './src/components/MagicScrollCollision.vue.js';
 import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
 import { useScrollApi } from './src/composables/useScrollApi.js';
 import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
+import { ScrollParentKey, ScrollPositionKey, ScrollProgressKey } from './src/symbols.js';
 import type { Plugin } from 'vue';
 declare const MagicScrollPlugin: Plugin;
-export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionEmitter, useScrollApi, useCollisionDetect, };
+export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionEmitter, useScrollApi, useCollisionDetect, ScrollParentKey, ScrollPositionKey, ScrollProgressKey, };
 export * from './src/symbols.js';
 export type * from './src/types';

package/dist/plugins/MagicScroll/index.mjs

@@ -6,6 +6,11 @@ import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
 import { useCollisionEmitter } from "./src/composables/useCollisionEmitter.mjs";
 import { useScrollApi } from "./src/composables/useScrollApi.mjs";
 import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
+import {
+  ScrollParentKey,
+  ScrollPositionKey,
+  ScrollProgressKey
+} from "./src/symbols/index.mjs";
 const MagicScrollPlugin = {
   install: (app) => {
     app.component("MagicScrollProvider", MagicScrollProvider);
@@ -24,6 +29,9 @@ export {
   MagicScrollCollision,
   useCollisionEmitter,
   useScrollApi,
-  useCollisionDetect
+  useCollisionDetect,
+  ScrollParentKey,
+  ScrollPositionKey,
+  ScrollProgressKey
 };
 export * from "./src/symbols/index.mjs";

package/dist/plugins/index.d.ts

@@ -1,6 +1,7 @@
+export * from './MagicConsent/index.js';
 export * from './MagicMarquee/index.js';
 export * from './MagicModal/index.js';
+export * from './MagicNoise/index.js';
 export * from './MagicPlayer/index.js';
 export * from './MagicScroll/index.js';
 export * from './MagicToast/index.js';
-export * from './MagicConsent/index.js';

package/dist/plugins/index.mjs

@@ -1,6 +1,7 @@
+export * from "./MagicConsent/index.mjs";
 export * from "./MagicMarquee/index.mjs";
 export * from "./MagicModal/index.mjs";
+export * from "./MagicNoise/index.mjs";
 export * from "./MagicPlayer/index.mjs";
 export * from "./MagicScroll/index.mjs";
 export * from "./MagicToast/index.mjs";
-export * from "./MagicConsent/index.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.10.7",
+  "version": "0.11.1",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",