@derivesome/webtools 1.0.0 → 1.0.2

package/src/element-rect-ref.ts~

@@ -0,0 +1,53 @@
+import { derived, MaybeReference, ref, Reference, unref } from "@derivesome/core";
+import { createElementSizeRef, CreateElementSizeRefOptions } from "./element-size-ref";
+
+export type CreateElementRectRefOptions = CreateElementSizeRefOptions;
+
+export type ElementRect = {
+  x: Reference<number>;
+  y: Reference<number>;
+  w: Reference<number>;
+  h: Reference<number>;
+}
+
+
+export const createElementRectRef = (
+  element: MaybeReference<Element | null | undefined>,
+  options: CreateElementSizeRefOptions = {},
+) => {
+  const trash = new Set<() => void>;
+  const size = createElementSizeRef(element, options);
+
+  const initialElement = unref(element, true);
+  const rect = initialElement ? initialElement.getBoundingClientRect() : null;
+  
+  const elementRect: ElementRect = {
+    x: ref<number>(rect?.x ?? 0),
+    y: ref<number>(rect?.y ?? 0),
+    w: derived(() => size.size.get().width),
+    h: derived(() => size.size.get().height)
+  };
+
+  const update = () => {
+    const el = unref(element);
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    elementRect.x.set(rect.x);
+    elementRect.y.set(rect.y);
+  }
+
+  trash.add(size.size.observe(() => {
+    update()
+  }, { immediate: true }));
+
+  const dispose = () => {
+    trash.forEach(fn => fn());
+    trash.clear();
+    elementRect.x.dispose();
+    elementRect.y.dispose();
+    elementRect.w.dispose();
+    elementRect.h.dispose();
+  }
+
+  return { rect: elementRect, dispose, update }
+}

package/src/index.ts

@@ -1,2 +1,5 @@
-export * from './resize-observer-ref';
-export * from './element-size-ref';
+export * from "./window-events";
+export * from "./resize-observer-ref";
+export * from "./element-size-ref";
+export * from "./element-rect-ref";
+export * from "./mouse-position-ref";

package/src/index.ts~

@@ -1 +1,5 @@
+export * from './window-events';
 export * from './resize-observer-ref';
+export * from './element-size-ref';
+export * from './element-rect-ref';
+export * from './mouse-position-ref';

package/src/mouse-position-ref.ts

@@ -0,0 +1,33 @@
+import { ref } from "@derivesome/core";
+import { addWindowEventListener } from "./window-events";
+
+export type MousePosition = { x: number; y: number };
+
+export const createMousePositionRef = () => {
+  const pos = ref<MousePosition>({ x: 0, y: 0 });
+  if (typeof window === "undefined")
+    return { position: pos, dispose: () => {} };
+
+  const trash = new Set<() => void>();
+
+  trash.add(
+    addWindowEventListener(
+      "mousemove",
+      (ev) => {
+        pos.set({
+          x: ev.x,
+          y: ev.y,
+        });
+      },
+      true,
+    ),
+  );
+
+  const dispose = () => {
+    trash.forEach((fn) => fn());
+    trash.clear();
+    pos.dispose();
+  };
+
+  return { pos, dispose };
+};

package/src/mouse-position-ref.ts~

@@ -0,0 +1,27 @@
+import { ref } from "@derivesome/core";
+import { addWindowEventListener } from "./window-events";
+
+export type MousePosition = { x: number, y: number };
+
+
+export const createMousePositionRef = () => {
+  const pos = ref<MousePosition>({ x: 0, y: 0 });
+  if (typeof window === 'undefined') return { position: pos, dispose: () => {} };
+
+  const trash = new Set<() => void>();
+
+  trash.add(addWindowEventListener('mousemove', (ev) => {
+    pos.set({
+      x: ev.x,
+      y: ev.y
+    })
+  }, true));
+
+  const dispose = () => {
+    trash.forEach(fn => fn());
+    trash.clear();
+    pos.dispose();
+  }
+
+  return { pos, dispose }
+}

package/src/resize-observer-ref.ts

@@ -1,11 +1,11 @@
-import { Derived, derived, unref, type MaybeReference } from '@derivesome/core';
+import { Derived, derived, unref, type MaybeReference } from "@derivesome/core";
 
 export type ResizeObserverRef = Derived<ResizeObserver | null>;
 
 export const createResizeObserverRef = (
   element: MaybeReference<Element | null | undefined>,
   callback: ResizeObserverCallback,
-  options: ResizeObserverOptions = {}
+  options: ResizeObserverOptions = {},
 ): ResizeObserverRef => {
   const elref = derived(() => unref(element));
   return derived<ResizeObserver | null>((prev) => {
@@ -18,4 +18,4 @@ export const createResizeObserverRef = (
     obs.observe(el, options);
     return obs;
   });
-}
+};

package/src/window-events.ts

@@ -0,0 +1,13 @@
+import { VoidFunction } from "@derivesome/core";
+
+export const addWindowEventListener = <K extends keyof WindowEventMap>(
+  eventName: K,
+  listener: (this: Window, ev: WindowEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): VoidFunction => {
+  window.addEventListener(eventName, listener, options);
+
+  return () => {
+    window.removeEventListener(eventName, listener);
+  };
+};

package/src/window-events.ts~

@@ -0,0 +1,13 @@
+import { VoidFunction } from "@derivesome/core";
+
+export const addWindowEventListener = <K extends keyof WindowEventMap>(
+  eventName: K,
+  listener: (this: Window, ev: WindowEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+): VoidFunction => {
+  window.addEventListener(eventName, listener, options);
+
+  return () => {
+    window.removeEventListener(eventName, listener);
+  };
+};