import { ComponentProps, createEffect, ParentProps } from "solid-js";
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";
import ZoomContext from "~/contexts/zoomContext";
import type { Zoom } from "~/interfaces";
type ZoomableContainerProps = ComponentProps<"div"> & ParentProps;
const step = 0.01;
export default function ZoomableContainer({
children,
...props
}: ZoomableContainerProps) {
const [zoom, setZoom] = createStore<Zoom>({ zoom: 30 / 2 });
function wheel(event: WheelEvent) {
event.preventDefault();
setZoom((lastZoom) => {
const newZoom = {
zoom: lastZoom.zoom + event.deltaY * step,
};
return { ...newZoom };
});
}
return (
<ZoomContext.Provider value={zoom}>
<div on:wheel={wheel} {...props}>
{children}
</div>
</ZoomContext.Provider>
);
}
import { ComponentProps, createEffect, ParentProps } from "solid-js";
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";
import ZoomContext from "~/contexts/zoomContext";
import type { Zoom } from "~/interfaces";
type ZoomableContainerProps = ComponentProps<"div"> & ParentProps;
const step = 0.01;
export default function ZoomableContainer({
children,
...props
}: ZoomableContainerProps) {
const [zoom, setZoom] = createStore<Zoom>({ zoom: 30 / 2 });
function wheel(event: WheelEvent) {
event.preventDefault();
setZoom((lastZoom) => {
const newZoom = {
zoom: lastZoom.zoom + event.deltaY * step,
};
return { ...newZoom };
});
}
return (
<ZoomContext.Provider value={zoom}>
<div on:wheel={wheel} {...props}>
{children}
</div>
</ZoomContext.Provider>
);
}