pixi-solid 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/bind-props/bind-children.js.map +1 -1
- package/dist/components/bind-props/bind-props.js +3 -7
- package/dist/components/bind-props/bind-props.js.map +1 -1
- package/dist/components/bind-props/set-event-property.js.map +1 -1
- package/dist/components/bind-props/set-point-property.js.map +1 -1
- package/dist/components/bind-props/set-prop.js.map +1 -1
- package/dist/components/component-factories.js.map +1 -1
- package/dist/components/components.js.map +1 -1
- package/dist/delay.js.map +1 -1
- package/dist/on-resize.js.map +1 -1
- package/dist/on-tick.js.map +1 -1
- package/dist/pixi-application/context.js.map +1 -1
- package/dist/pixi-application/get-pixi-app.js.map +1 -1
- package/dist/pixi-application/get-ticker.js.map +1 -1
- package/dist/pixi-application/pixi-application-provider.js.map +1 -1
- package/dist/pixi-canvas.js.map +1 -1
- package/dist/use-pixi-screen/use-pixi-screen.js.map +1 -1
- package/dist/utils/smooth-damp.js.map +1 -1
- package/dist/utils/spring.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bind-children.js","sources":["../../../src/components/bind-props/bind-children.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { children as resolveChildren, createRenderEffect } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\n\nexport class InvalidChildTypeError extends Error {\n constructor(cause: Error) {\n super(\n \"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?\",\n { cause },\n );\n this.name = \"InvalidChildTypeError\";\n }\n}\n\nexport const bindChildrenToContainer = (parent: Pixi.Container, children?: JSX.Element) => {\n const resolvedChildren = resolveChildren(() => children);\n\n const canAddChild = \"addChildAt\" in parent;\n\n if (!canAddChild) {\n throw new Error(\"Parent does not support children.\");\n }\n\n createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n try {\n if (prevChildren) {\n for (let i = 0; i < prevChildren.length; i += 1) {\n const child = prevChildren[i];\n if (nextChildren.includes(child)) continue;\n parent.removeChild(child);\n child.destroy({ children: true });\n }\n }\n\n for (let i = 0; i < nextChildren.length; i += 1) {\n parent.addChildAt(nextChildren[i], i);\n }\n } catch (error) {\n if (error instanceof Error) {\n console.error(\"Invalid children\", nextChildren);\n throw new InvalidChildTypeError(error);\n } else {\n throw error;\n }\n }\n\n return nextChildren;\n });\n};\n\nexport const bindChildrenToRenderLayer = (parent: Pixi.RenderLayer
|
|
1
|
+
{"version":3,"file":"bind-children.js","sources":["../../../src/components/bind-props/bind-children.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { children as resolveChildren, createRenderEffect } from \"solid-js\";\nimport type { JSX } from \"solid-js\";\n\nexport class InvalidChildTypeError extends Error {\n constructor(cause: Error) {\n super(\n \"Invalid pixi-solid child type. Children must be pixi-solid or PixiJS element. Did you accidentally pass an invalid child to a pixi-solid parent?\",\n { cause },\n );\n this.name = \"InvalidChildTypeError\";\n }\n}\n\nexport const bindChildrenToContainer = (parent: Pixi.Container, children?: JSX.Element): void => {\n const resolvedChildren = resolveChildren(() => children);\n\n const canAddChild = \"addChildAt\" in parent;\n\n if (!canAddChild) {\n throw new Error(\"Parent does not support children.\");\n }\n\n createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n try {\n if (prevChildren) {\n for (let i = 0; i < prevChildren.length; i += 1) {\n const child = prevChildren[i];\n if (nextChildren.includes(child)) continue;\n parent.removeChild(child);\n child.destroy({ children: true });\n }\n }\n\n for (let i = 0; i < nextChildren.length; i += 1) {\n parent.addChildAt(nextChildren[i], i);\n }\n } catch (error) {\n if (error instanceof Error) {\n console.error(\"Invalid children\", nextChildren);\n throw new InvalidChildTypeError(error);\n } else {\n throw error;\n }\n }\n\n return nextChildren;\n });\n};\n\nexport const bindChildrenToRenderLayer = (\n parent: Pixi.RenderLayer,\n children?: JSX.Element,\n): void => {\n const resolvedChildren = resolveChildren(() => children);\n\n createRenderEffect((prevChildren: Pixi.Container[] | undefined) => {\n const nextChildren = resolvedChildren.toArray().filter(Boolean) as unknown as Pixi.Container[];\n\n try {\n if (prevChildren) {\n for (let i = 0; i < prevChildren.length; i += 1) {\n const child = prevChildren[i];\n if (nextChildren.includes(child)) continue;\n\n parent.detach(child);\n }\n }\n\n for (let i = 0; i < nextChildren.length; i += 1) {\n parent.attach(nextChildren[i]);\n }\n } catch (error) {\n if (error instanceof Error) {\n console.error(\"Invalid children\", nextChildren);\n throw new InvalidChildTypeError(error);\n } else {\n throw error;\n }\n }\n\n return nextChildren;\n });\n};\n"],"names":["children","resolveChildren"],"mappings":";AAIO,MAAM,8BAA8B,MAAM;AAAA,EAC/C,YAAY,OAAc;AACxB;AAAA,MACE;AAAA,MACA,EAAE,MAAA;AAAA,IAAM;AAEV,SAAK,OAAO;AAAA,EACd;AACF;AAEO,MAAM,0BAA0B,CAAC,QAAwBA,eAAiC;AAC/F,QAAM,mBAAmBC,SAAgB,MAAMD,UAAQ;AAEvD,QAAM,cAAc,gBAAgB;AAEpC,MAAI,CAAC,aAAa;AAChB,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAEA,qBAAmB,CAAC,iBAA+C;AACjE,UAAM,eAAe,iBAAiB,QAAA,EAAU,OAAO,OAAO;AAE9D,QAAI;AACF,UAAI,cAAc;AAChB,iBAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,gBAAM,QAAQ,aAAa,CAAC;AAC5B,cAAI,aAAa,SAAS,KAAK,EAAG;AAClC,iBAAO,YAAY,KAAK;AACxB,gBAAM,QAAQ,EAAE,UAAU,KAAA,CAAM;AAAA,QAClC;AAAA,MACF;AAEA,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,eAAO,WAAW,aAAa,CAAC,GAAG,CAAC;AAAA,MACtC;AAAA,IACF,SAAS,OAAO;AACd,UAAI,iBAAiB,OAAO;AAC1B,gBAAQ,MAAM,oBAAoB,YAAY;AAC9C,cAAM,IAAI,sBAAsB,KAAK;AAAA,MACvC,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AACH;AAEO,MAAM,4BAA4B,CACvC,QACAA,eACS;AACT,QAAM,mBAAmBC,SAAgB,MAAMD,UAAQ;AAEvD,qBAAmB,CAAC,iBAA+C;AACjE,UAAM,eAAe,iBAAiB,QAAA,EAAU,OAAO,OAAO;AAE9D,QAAI;AACF,UAAI,cAAc;AAChB,iBAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,gBAAM,QAAQ,aAAa,CAAC;AAC5B,cAAI,aAAa,SAAS,KAAK,EAAG;AAElC,iBAAO,OAAO,KAAK;AAAA,QACrB;AAAA,MACF;AAEA,eAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,eAAO,OAAO,aAAa,CAAC,CAAC;AAAA,MAC/B;AAAA,IACF,SAAS,OAAO;AACd,UAAI,iBAAiB,OAAO;AAC1B,gBAAQ,MAAM,oBAAoB,YAAY;AAC9C,cAAM,IAAI,sBAAsB,KAAK;AAAA,MACvC,OAAO;AACL,cAAM;AAAA,MACR;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AACH;"}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
+
import { createRenderEffect, on } from "solid-js";
|
|
1
2
|
import { bindChildrenToRenderLayer, bindChildrenToContainer } from "./bind-children.js";
|
|
2
3
|
import { setProp } from "./set-prop.js";
|
|
3
|
-
import { getOwner, runWithOwner, createRenderEffect, on } from "solid-js";
|
|
4
4
|
const bindProps = (instance, props, defer) => {
|
|
5
|
-
const owner = getOwner();
|
|
6
5
|
for (const key in props) {
|
|
7
6
|
if (key === "as") continue;
|
|
8
7
|
if (key === "ref") {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
props[key](instance);
|
|
12
|
-
});
|
|
13
|
-
});
|
|
8
|
+
props[key](instance);
|
|
9
|
+
continue;
|
|
14
10
|
} else if (key === "children") {
|
|
15
11
|
if ("attach" in instance && "detach" in instance) {
|
|
16
12
|
bindChildrenToRenderLayer(instance, props.children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bind-props.js","sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { ContainerProps } from \"../component-factories\";\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { setProp } from \"./set-prop\";\
|
|
1
|
+
{"version":3,"file":"bind-props.js","sources":["../../../src/components/bind-props/bind-props.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createRenderEffect, on } from \"solid-js\";\n\nimport type { ContainerProps } from \"../component-factories\";\n\nimport { bindChildrenToContainer, bindChildrenToRenderLayer } from \"./bind-children\";\nimport { setProp } from \"./set-prop\";\n\n/**\n * Applies the props to a Pixi instance with subscriptions to maintain reactivity.\n *\n * @param instance The Pixi instance we want to apply props to.\n * @param props The props object.\n * @param defer Defers the createRenderEffect so the props aren't set on the first run.\n * This is useful because setting initialisation props can have unintended side effects.\n * Notably in AnimatedSprite, if we set the textures property after instantiation it will stop the instance from playing.\n */\nexport const bindProps = <\n InstanceType extends Pixi.Container,\n OptionsType extends ContainerProps<InstanceType>,\n>(\n instance: InstanceType,\n props: OptionsType,\n defer?: boolean,\n): void => {\n for (const key in props) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n (props[key] as unknown as (arg: any) => void)(instance);\n\n continue;\n } else if (key === \"children\") {\n if (\"attach\" in instance && \"detach\" in instance) {\n bindChildrenToRenderLayer(instance as unknown as Pixi.RenderLayer, props.children);\n } else {\n bindChildrenToContainer(instance, props.children);\n }\n continue;\n }\n\n if (defer) {\n createRenderEffect(\n on<OptionsType[keyof OptionsType], OptionsType[keyof OptionsType] | undefined>(\n () => props[key as keyof typeof props],\n (_input, _prevInput, prevValue) => {\n return setProp(instance, key, props[key as keyof typeof props], prevValue);\n },\n { defer },\n ),\n );\n continue;\n }\n\n createRenderEffect((prevValue) =>\n setProp(instance, key, props[key as keyof typeof props], prevValue),\n );\n }\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,YAAY,CAIvB,UACA,OACA,UACS;AACT,aAAW,OAAO,OAAO;AACvB,QAAI,QAAQ,KAAM;AAElB,QAAI,QAAQ,OAAO;AAChB,YAAM,GAAG,EAAoC,QAAQ;AAEtD;AAAA,IACF,WAAW,QAAQ,YAAY;AAC7B,UAAI,YAAY,YAAY,YAAY,UAAU;AAChD,kCAA0B,UAAyC,MAAM,QAAQ;AAAA,MACnF,OAAO;AACL,gCAAwB,UAAU,MAAM,QAAQ;AAAA,MAClD;AACA;AAAA,IACF;AAEA,QAAI,OAAO;AACT;AAAA,QACE;AAAA,UACE,MAAM,MAAM,GAAyB;AAAA,UACrC,CAAC,QAAQ,YAAY,cAAc;AACjC,mBAAO,QAAQ,UAAU,KAAK,MAAM,GAAyB,GAAG,SAAS;AAAA,UAC3E;AAAA,UACA,EAAE,MAAA;AAAA,QAAM;AAAA,MACV;AAEF;AAAA,IACF;AAEA;AAAA,MAAmB,CAAC,cAClB,QAAQ,UAAU,KAAK,MAAM,GAAyB,GAAG,SAAS;AAAA,IAAA;AAAA,EAEtE;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"set-event-property.js","sources":["../../../src/components/bind-props/set-event-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { PIXI_EVENT_NAMES } from \"./event-names\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./event-names\";\n\nexport const isEventProperty = (name: string): boolean => PIXI_EVENT_HANDLER_NAME_SET.has(name);\n\nexport const setEventProperty = (\n node: Pixi.Container,\n name: string,\n eventHandler: any,\n prevEventHandler?: any,\n): void => {\n // Remove the 'on' prefix to get the actual event name.\n const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n if (prevEventHandler) {\n node.removeEventListener(eventName, prevEventHandler);\n }\n node.addEventListener(eventName, eventHandler);\n};\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"set-event-property.js","sources":["../../../src/components/bind-props/set-event-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport type { PIXI_EVENT_NAMES } from \"./event-names\";\nimport { PIXI_EVENT_HANDLER_NAME_SET } from \"./event-names\";\n\nexport const isEventProperty = (name: string): boolean => PIXI_EVENT_HANDLER_NAME_SET.has(name);\n\nexport const setEventProperty = (\n node: Pixi.Container,\n name: string,\n eventHandler: any,\n prevEventHandler?: any,\n): void => {\n // Remove the 'on' prefix to get the actual event name.\n const eventName = name.slice(2) as (typeof PIXI_EVENT_NAMES)[number];\n\n if (prevEventHandler) {\n node.removeEventListener(eventName, prevEventHandler);\n }\n node.addEventListener(eventName, eventHandler);\n};\n"],"names":[],"mappings":";AAKO,MAAM,kBAAkB,CAAC,SAA0B,4BAA4B,IAAI,IAAI;AAEvF,MAAM,mBAAmB,CAC9B,MACA,MACA,cACA,qBACS;AAET,QAAM,YAAY,KAAK,MAAM,CAAC;AAE9B,MAAI,kBAAkB;AACpB,SAAK,oBAAoB,WAAW,gBAAgB;AAAA,EACtD;AACA,OAAK,iBAAiB,WAAW,YAAY;AAC/C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"set-point-property.js","sources":["../../../src/components/bind-props/set-point-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n ALL_VALID_PROP_NAMES_SET,\n POINT_PROP_AXIS_NAMES_SET,\n POINT_PROP_NAMES_SET,\n} from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): boolean =>\n ALL_VALID_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: string, value: T): void => {\n if (typeof value === \"object\" && value !== null) {\n (node as any)[name].set((value as any).x, (value as any).y);\n return;\n }\n\n if (typeof value === \"number\") {\n if (POINT_PROP_NAMES_SET.has(name)) {\n (node as any)[name].set(value);\n } else if (POINT_PROP_AXIS_NAMES_SET.has(name)) {\n const axisName = name[name.length - 1].toLowerCase();\n const propertyName = name.slice(0, -1);\n (node as any)[propertyName][axisName] = value;\n }\n }\n};\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"set-point-property.js","sources":["../../../src/components/bind-props/set-point-property.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport {\n ALL_VALID_PROP_NAMES_SET,\n POINT_PROP_AXIS_NAMES_SET,\n POINT_PROP_NAMES_SET,\n} from \"./point-property-names\";\n\nexport const isPointProperty = (propName: string): boolean =>\n ALL_VALID_PROP_NAMES_SET.has(propName);\n\nexport const setPointProperty = <T>(node: Pixi.Container, name: string, value: T): void => {\n if (typeof value === \"object\" && value !== null) {\n (node as any)[name].set((value as any).x, (value as any).y);\n return;\n }\n\n if (typeof value === \"number\") {\n if (POINT_PROP_NAMES_SET.has(name)) {\n (node as any)[name].set(value);\n } else if (POINT_PROP_AXIS_NAMES_SET.has(name)) {\n const axisName = name[name.length - 1].toLowerCase();\n const propertyName = name.slice(0, -1);\n (node as any)[propertyName][axisName] = value;\n }\n }\n};\n"],"names":[],"mappings":";AAQO,MAAM,kBAAkB,CAAC,aAC9B,yBAAyB,IAAI,QAAQ;AAEhC,MAAM,mBAAmB,CAAI,MAAsB,MAAc,UAAmB;AACzF,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC9C,SAAa,IAAI,EAAE,IAAK,MAAc,GAAI,MAAc,CAAC;AAC1D;AAAA,EACF;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,QAAI,qBAAqB,IAAI,IAAI,GAAG;AACjC,WAAa,IAAI,EAAE,IAAI,KAAK;AAAA,IAC/B,WAAW,0BAA0B,IAAI,IAAI,GAAG;AAC9C,YAAM,WAAW,KAAK,KAAK,SAAS,CAAC,EAAE,YAAA;AACvC,YAAM,eAAe,KAAK,MAAM,GAAG,EAAE;AACpC,WAAa,YAAY,EAAE,QAAQ,IAAI;AAAA,IAC1C;AAAA,EACF;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"set-prop.js","sources":["../../../src/components/bind-props/set-prop.ts"],"sourcesContent":["import { isEventProperty, setEventProperty } from \"./set-event-property\";\nimport { isPointProperty, setPointProperty } from \"./set-point-property\";\
|
|
1
|
+
{"version":3,"file":"set-prop.js","sources":["../../../src/components/bind-props/set-prop.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\n\nimport { isEventProperty, setEventProperty } from \"./set-event-property\";\nimport { isPointProperty, setPointProperty } from \"./set-point-property\";\n\nexport const setProp = <T = unknown>(\n instance: Pixi.Container,\n key: string,\n value: T,\n prevValue?: T,\n): T | undefined => {\n if (isPointProperty(key)) {\n setPointProperty(instance, key, value as number);\n return value;\n }\n\n if (key in instance) {\n (instance as any)[key] = value;\n return value;\n }\n\n if (isEventProperty(key)) {\n setEventProperty(instance, key, value, prevValue);\n return value;\n }\n};\n"],"names":[],"mappings":";;AAKO,MAAM,UAAU,CACrB,UACA,KACA,OACA,cACkB;AAClB,MAAI,gBAAgB,GAAG,GAAG;AACxB,qBAAiB,UAAU,KAAK,KAAe;AAC/C,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,UAAU;AAClB,aAAiB,GAAG,IAAI;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB,GAAG,GAAG;AACxB,qBAAiB,UAAU,KAAK,OAAO,SAAS;AAChD,WAAO;AAAA,EACT;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\nimport
|
|
1
|
+
{"version":3,"file":"component-factories.js","sources":["../../src/components/component-factories.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, Ref } from \"solid-js\";\nimport { createRenderEffect, on, splitProps } from \"solid-js\";\n\nimport { bindProps } from \"./bind-props\";\nimport type { PixiEventHandlerMap } from \"./bind-props/event-names\";\nimport { PIXI_SOLID_EVENT_HANDLER_NAMES } from \"./bind-props/event-names\";\nimport type { PointAxisPropName } from \"./bind-props/point-property-names\";\nimport { POINT_PROP_AXIS_NAMES } from \"./bind-props/point-property-names\";\n\n/**\n * This is a utility type useful for extending the props of custom components to allow props to be passed through to the underlying Pixi instance.\n *\n * If you don't require them all it's recommended to narrow the type by using Pick or Omit the props to only allow the ones you need.\n *\n * @example PixiComponentProps<Pixi.SpriteOptions>.\n */\nexport type PixiComponentProps<\n ComponentOptions extends Pixi.ContainerOptions = Pixi.ContainerOptions,\n> = PixiEventHandlerMap & PointAxisProps & Omit<ComponentOptions, \"children\">;\n\n/**\n * Prop definition for components that CAN have children\n */\nexport type ContainerProps<Component> = PixiEventHandlerMap &\n PointAxisProps & {\n ref?: Ref<Component>;\n as?: Component;\n children?: JSX.Element;\n };\n\nexport type PointAxisProps = Partial<Record<PointAxisPropName, number>>;\n\n/**\n * Prop definition for components that CANNOT have children\n */\nexport type LeafProps<Component> = Omit<ContainerProps<Component>, \"children\">;\n\n/**\n * Prop definition for filter components\n */\nexport type FilterProps<Component> = {\n ref?: Ref<Component>;\n as?: Component;\n};\n\n// Keys that are specific to Solid components and not Pixi props\nexport const SOLID_PROP_KEYS = [\"ref\", \"as\", \"children\"] as const;\n\nexport const createContainerComponent = <\n InstanceType extends Pixi.Container,\n OptionsType extends object,\n>(\n PixiClass: new (props: OptionsType) => InstanceType,\n): ((\n props: Omit<OptionsType, \"children\"> & ContainerProps<InstanceType>,\n) => InstanceType & JSX.Element) => {\n return (props): InstanceType & JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\n ...SOLID_PROP_KEYS,\n ...PIXI_SOLID_EVENT_HANDLER_NAMES,\n ...POINT_PROP_AXIS_NAMES,\n ]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n bindProps(instance, initialisationProps, true);\n bindProps(instance, runtimeProps);\n\n return instance as InstanceType & JSX.Element;\n };\n};\n\nexport const createLeafComponent = <\n InstanceType extends Pixi.Container,\n OptionsType extends object,\n>(\n PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n return (\n props: Omit<OptionsType, \"children\"> & LeafProps<InstanceType>,\n ): InstanceType & JSX.Element => {\n return createContainerComponent<InstanceType, OptionsType>(PixiClass)(props);\n };\n};\n\nexport const createFilterComponent = <InstanceType extends Pixi.Filter, OptionsType extends object>(\n PixiClass: new (props: OptionsType) => InstanceType,\n) => {\n return (props: OptionsType & FilterProps<InstanceType>): InstanceType & JSX.Element => {\n const [runtimeProps, initialisationProps] = splitProps(props, [\"ref\", \"as\"]);\n\n const instance = props.as || new PixiClass(initialisationProps as any);\n\n for (const key in initialisationProps) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n } else if (key === \"children\") {\n throw new Error(`Cannot set children on non-container instance.`);\n } else {\n createRenderEffect(\n on(\n () => props[key as keyof typeof initialisationProps],\n () => {\n (instance as any)[key] = initialisationProps[key];\n },\n { defer: true },\n ),\n );\n }\n }\n\n for (const key in runtimeProps) {\n if (key === \"as\") continue;\n\n if (key === \"ref\") {\n createRenderEffect(() => {\n // Solid converts the ref prop to a callback function\n (props[key] as unknown as (arg: any) => void)(instance);\n });\n }\n }\n\n return instance as InstanceType & JSX.Element;\n };\n};\n"],"names":[],"mappings":";;;;AA+CO,MAAM,kBAAkB,CAAC,OAAO,MAAM,UAAU;AAEhD,MAAM,2BAA2B,CAItC,cAGkC;AAClC,SAAO,CAAC,UAAsC;AAC5C,UAAM,CAAC,cAAc,mBAAmB,IAAI,WAAW,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,WAAW,MAAM,MAAM,IAAI,UAAU,mBAA0B;AAErE,cAAU,UAAU,qBAAqB,IAAI;AAC7C,cAAU,UAAU,YAAY;AAEhC,WAAO;AAAA,EACT;AACF;AAEO,MAAM,sBAAsB,CAIjC,cACG;AACH,SAAO,CACL,UAC+B;AAC/B,WAAO,yBAAoD,SAAS,EAAE,KAAK;AAAA,EAC7E;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../../src/components/components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n AnimatedSprite as PixiAnimatedSprite,\n BitmapText as PixiBitmapText,\n Container as PixiContainer,\n Graphics as PixiGraphics,\n HTMLText as PixiHTMLText,\n MeshPlane as PixiMeshPlane,\n MeshRope as PixiMeshRope,\n NineSliceSprite as PixiNineSliceSprite,\n ParticleContainer as PixiParticleContainer,\n PerspectiveMesh as PixiPerspectiveMesh,\n RenderContainer as PixiRenderContainer,\n RenderLayer as PixiRenderLayer,\n Sprite as PixiSprite,\n Text as PixiText,\n TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\nimport { createContainerComponent, createLeafComponent } from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n PixiContainer,\n);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<\n PixiNineSliceSprite,\n Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<\n PixiParticleContainer,\n Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<\n PixiPerspectiveMesh,\n Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<\n PixiRenderContainer,\n Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n// PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n// PixiPerspectivePlaneGeometry,\n// Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["AnimatedSprite","createLeafComponent","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../../src/components/components.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport {\n AnimatedSprite as PixiAnimatedSprite,\n BitmapText as PixiBitmapText,\n Container as PixiContainer,\n Graphics as PixiGraphics,\n HTMLText as PixiHTMLText,\n MeshPlane as PixiMeshPlane,\n MeshRope as PixiMeshRope,\n NineSliceSprite as PixiNineSliceSprite,\n ParticleContainer as PixiParticleContainer,\n PerspectiveMesh as PixiPerspectiveMesh,\n RenderContainer as PixiRenderContainer,\n RenderLayer as PixiRenderLayer,\n Sprite as PixiSprite,\n Text as PixiText,\n TilingSprite as PixiTilingSprite,\n} from \"pixi.js\";\n\nimport { createContainerComponent, createLeafComponent } from \"./component-factories\";\n\n/**\n * A SolidJS component that renders a `PIXI.AnimatedSprite`.\n */\nexport const AnimatedSprite = createLeafComponent<PixiAnimatedSprite, Pixi.AnimatedSpriteOptions>(\n PixiAnimatedSprite,\n);\n/**\n * A SolidJS component that renders a `PIXI.BitmapText`.\n */\nexport const BitmapText = createLeafComponent<PixiBitmapText, Pixi.TextOptions>(PixiBitmapText);\n/**\n * A SolidJS component that renders a `PIXI.Container`.\n */\nexport const Container = createContainerComponent<PixiContainer, Pixi.ContainerOptions>(\n PixiContainer,\n);\n/**\n * A SolidJS component that renders a `PIXI.Graphics`.\n * Use a ref to access the underlying graphics instance and draw with it.\n */\nexport const Graphics = createLeafComponent<PixiGraphics, Pixi.GraphicsOptions>(PixiGraphics);\n/**\n * A SolidJS component that renders a `PIXI.HTMLText`.\n */\nexport const HTMLText = createLeafComponent<PixiHTMLText, Pixi.HTMLTextOptions>(PixiHTMLText);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshPlane`.\n */\nexport const MeshPlane = createLeafComponent<PixiMeshPlane, Pixi.MeshPlaneOptions>(PixiMeshPlane);\n\n/**\n * A SolidJS component that renders a `PIXI.MeshRope`.\n */\nexport const MeshRope = createLeafComponent<PixiMeshRope, Pixi.MeshRopeOptions>(PixiMeshRope);\n\n/**\n * A SolidJS component that renders a `PIXI.NineSliceSprite`.\n */\nexport const NineSliceSprite = createLeafComponent<\n PixiNineSliceSprite,\n Pixi.NineSliceSpriteOptions\n>(PixiNineSliceSprite);\n\n/**\n * A SolidJS component that renders a `PIXI.ParticleContainer`.\n *\n * Particles should be added and removed from this component imperatively. Please see the docs for a reference example.\n */\nexport const ParticleContainer = createLeafComponent<\n PixiParticleContainer,\n Pixi.ParticleContainerOptions\n>(PixiParticleContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.PerspectiveMesh`.\n */\nexport const PerspectiveMesh = createLeafComponent<\n PixiPerspectiveMesh,\n Pixi.PerspectivePlaneOptions\n>(PixiPerspectiveMesh);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderContainer`.\n */\nexport const RenderContainer = createContainerComponent<\n PixiRenderContainer,\n Pixi.RenderContainerOptions\n>(PixiRenderContainer);\n\n/**\n * A SolidJS component that renders a `PIXI.RenderLayer`.\n */\nexport const RenderLayer = createContainerComponent<PixiRenderLayer, Pixi.RenderLayerOptions>(\n PixiRenderLayer,\n);\n\n/**\n * A SolidJS component that renders a `PIXI.Sprite`.\n */\nexport const Sprite = createLeafComponent<PixiSprite, Pixi.SpriteOptions>(PixiSprite);\n/**\n * A SolidJS component that renders a `PIXI.Text`.\n */\nexport const Text = createLeafComponent<PixiText, Pixi.CanvasTextOptions>(PixiText);\n\n/**\n * A SolidJS component that renders a `PIXI.TilingSprite`.\n */\nexport const TilingSprite = createLeafComponent<PixiTilingSprite, Pixi.TilingSpriteOptions>(\n PixiTilingSprite,\n);\n\n// export const MeshGeometry = createLeafComponent<PixiMeshGeometry, Pixi.MeshGeometryOptions>(PixiMeshGeometry);\n\n// export const NineSliceGeometry = createLeafComponent<PixiNineSliceGeometry, Pixi.NineSliceGeometryOptions>(\n// PixiNineSliceGeometry\n// );\n\n// export const Particle = createLeafComponent<PixiParticle, Pixi.ParticleOptions>(PixiParticle);\n\n// export const PerspectivePlaneGeometry = createLeafComponent<\n// PixiPerspectivePlaneGeometry,\n// Pixi.PerspectivePlaneGeometryOptions\n// >(PixiPerspectivePlaneGeometry);\n\n// export const PlaneGeometry = createLeafComponent<PixiPlaneGeometry, Pixi.PlaneGeometryOptions>(PixiPlaneGeometry);\n\n// export const RopeGeometry = createLeafComponent<PixiRopeGeometry, Pixi.RopeGeometryOptions>(PixiRopeGeometry);\n\n// TODO: Do we need a component for the Culler. It needs to interact with the stage directly.\n// export const Culler = createLeafComponent<PixiCuller, Pixi.Culler>(PixiCuller);\n"],"names":["AnimatedSprite","createLeafComponent","PixiAnimatedSprite","BitmapText","PixiBitmapText","Container","createContainerComponent","PixiContainer","Graphics","PixiGraphics","HTMLText","PixiHTMLText","MeshPlane","PixiMeshPlane","MeshRope","PixiMeshRope","NineSliceSprite","PixiNineSliceSprite","ParticleContainer","PixiParticleContainer","PerspectiveMesh","PixiPerspectiveMesh","RenderContainer","PixiRenderContainer","RenderLayer","PixiRenderLayer","Sprite","PixiSprite","Text","PixiText","TilingSprite","PixiTilingSprite"],"mappings":";;AAwBO,MAAMA,iBAAiBC,oBAC5BC,gBACF;AAIO,MAAMC,aAAaF,oBAAsDG,YAAc;AAIvF,MAAMC,YAAYC,yBACvBC,WACF;AAKO,MAAMC,WAAWP,oBAAwDQ,UAAY;AAIrF,MAAMC,WAAWT,oBAAwDU,UAAY;AAKrF,MAAMC,YAAYX,oBAA0DY,WAAa;AAKzF,MAAMC,WAAWb,oBAAwDc,UAAY;AAKrF,MAAMC,kBAAkBf,oBAG7BgB,iBAAmB;AAOd,MAAMC,oBAAoBjB,oBAG/BkB,mBAAqB;AAKhB,MAAMC,kBAAkBnB,oBAG7BoB,iBAAmB;AAKd,MAAMC,kBAAkBhB,yBAG7BiB,iBAAmB;AAKd,MAAMC,cAAclB,yBACzBmB,aACF;AAKO,MAAMC,SAASzB,oBAAoD0B,QAAU;AAI7E,MAAMC,OAAO3B,oBAAsD4B,MAAQ;AAK3E,MAAMC,eAAe7B,oBAC1B8B,cACF;"}
|
package/dist/delay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"delay.js","sources":["../src/delay.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { TickerContext } from \"./pixi-application
|
|
1
|
+
{"version":3,"file":"delay.js","sources":["../src/delay.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * Runs a callback when a given number of milliseconds has passed on the ticker.\n *\n * It is guaranteed to be in sync with the shared ticker and uses accumulated deltaMs not an external time measurement.\n *\n * @param delayMs - Number of milliseconds to wait (measured in the ticker's time units).\n *\n * @param callback - A callback function that will fire when the delayMs time has passed.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @note It will not run the callback if the ticker is paused or stopped.\n *\n */\nexport const delay = (delayMs: number, callback?: () => void): void => {\n const ticker = useContext(TickerContext);\n if (!ticker) {\n throw new Error(\"`delay` must be used within a PixiApplicationProvider or a TickerProvider.\");\n }\n\n let timeDelayed = 0;\n\n const internalCallback = () => {\n timeDelayed += ticker.deltaMS;\n if (timeDelayed < delayMs) return;\n callback?.();\n ticker.remove(internalCallback);\n };\n\n ticker.add(internalCallback);\n};\n\nconst asyncDelay = async (ticker: Pixi.Ticker, delayMs: number, signal?: AbortSignal) => {\n let timeDelayed = 0;\n let resolvePromise: (value: void | PromiseLike<void>) => void;\n\n const promise = new Promise<void>((resolve) => {\n resolvePromise = resolve;\n });\n\n const internalCallback = () => {\n timeDelayed += ticker.deltaMS;\n if (timeDelayed < delayMs) return;\n resolvePromise();\n };\n\n const handleAbort = () => {\n ticker.remove(internalCallback);\n resolvePromise();\n };\n\n if (signal?.aborted) {\n // Already aborted before we even started\n return;\n }\n\n signal?.addEventListener(\"abort\", handleAbort);\n\n ticker.add(internalCallback);\n await promise;\n ticker.remove(internalCallback);\n signal?.removeEventListener(\"abort\", handleAbort);\n};\n\n/**\n * Create a delay function that waits until a given number of milliseconds has passed on the current Ticker context before resolving.\n *\n * This function must be called inside a `PixiApplicationProvider` or `TickerProvider` context.\n *\n * @param signal - Optional AbortSignal to resolve the delay early\n * @returns An async function we can await to delay events in sync with time passed on the Ticker.\n *\n * Simply await for it to resolve in an async context. If the signal aborts, the promise resolves immediately.\n *\n * @note It will not resolve if the ticker is paused or stopped.\n *\n * @throws {Error} If called outside of a `PixiApplicationProvider` or `TickerProvider` context.\n */\nexport const createAsyncDelay = (): ((delayMs: number, signal?: AbortSignal) => Promise<void>) => {\n const ticker = useContext(TickerContext);\n\n if (!ticker) {\n throw new Error(\n \"`createAsyncDelay` must be used within a PixiApplicationProvider or a TickerProvider. The returned delay function can be called in an async context but `createAsyncDelay` must be called in a synchronous scope within a PixiApplicationProvider or a TickerProvider\",\n );\n }\n const delayWithTicker = (delayMs: number, signal?: AbortSignal) =>\n asyncDelay(ticker, delayMs, signal);\n\n return delayWithTicker;\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,QAAQ,CAAC,SAAiB,aAAgC;AACrE,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AAEA,MAAI,cAAc;AAElB,QAAM,mBAAmB,MAAM;AAC7B,mBAAe,OAAO;AACtB,QAAI,cAAc,QAAS;AAC3B,eAAA;AACA,WAAO,OAAO,gBAAgB;AAAA,EAChC;AAEA,SAAO,IAAI,gBAAgB;AAC7B;AAEA,MAAM,aAAa,OAAO,QAAqB,SAAiB,WAAyB;AACvF,MAAI,cAAc;AAClB,MAAI;AAEJ,QAAM,UAAU,IAAI,QAAc,CAAC,YAAY;AAC7C,qBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,mBAAmB,MAAM;AAC7B,mBAAe,OAAO;AACtB,QAAI,cAAc,QAAS;AAC3B,mBAAA;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,WAAO,OAAO,gBAAgB;AAC9B,mBAAA;AAAA,EACF;AAEA,MAAI,QAAQ,SAAS;AAEnB;AAAA,EACF;AAEA,UAAQ,iBAAiB,SAAS,WAAW;AAE7C,SAAO,IAAI,gBAAgB;AAC3B,QAAM;AACN,SAAO,OAAO,gBAAgB;AAC9B,UAAQ,oBAAoB,SAAS,WAAW;AAClD;AAgBO,MAAM,mBAAmB,MAAkE;AAChG,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,QAAM,kBAAkB,CAAC,SAAiB,WACxC,WAAW,QAAQ,SAAS,MAAM;AAEpC,SAAO;AACT;"}
|
package/dist/on-resize.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n }\n\n const handleResize = () => {\n resizeCallback(pixiApp.renderer.screen);\n };\n\n handleResize();\n\n pixiApp.renderer.addListener(\"resize\", handleResize);\n\n onCleanup(() => {\n pixiApp.renderer.removeListener(\"resize\", handleResize);\n });\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"on-resize.js","sources":["../src/on-resize.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup } from \"solid-js\";\n\nimport { getPixiApp } from \"./pixi-application\";\n\n/**\n *\n * A SolidJS hook that runs a callback function whenever the PixiJS renderer is resized.\n * The callback is automatically removed when the component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @param resizeCallback - A callback function that receives the updated screen dimensions as a `Pixi.Rectangle` object. This function will be called immediately upon hook initialization and then on every subsequent resize event.\n *\n * We listen for the renderer's \"resize\" event so this hook will work correctly whether the window is resized or just the DOM element the PixiCanvas is inside of changes size.\n */\nexport const onResize = (resizeCallback: (screen: Pixi.Rectangle) => void): void => {\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\"onResize must be used within a PixiApplicationProvider or a PixiCanvas\");\n }\n\n const handleResize = () => {\n resizeCallback(pixiApp.renderer.screen);\n };\n\n handleResize();\n\n pixiApp.renderer.addListener(\"resize\", handleResize);\n\n onCleanup(() => {\n pixiApp.renderer.removeListener(\"resize\", handleResize);\n });\n};\n"],"names":[],"mappings":";;AAgBO,MAAM,WAAW,CAAC,mBAA2D;AAClF,MAAI;AAEJ,MAAI;AACF,cAAU,WAAA;AAAA,EACZ,QAAQ;AACN,UAAM,IAAI,MAAM,wEAAwE;AAAA,EAC1F;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,QAAQ,SAAS,MAAM;AAAA,EACxC;AAEA,eAAA;AAEA,UAAQ,SAAS,YAAY,UAAU,YAAY;AAEnD,YAAU,MAAM;AACd,YAAQ,SAAS,eAAe,UAAU,YAAY;AAAA,EACxD,CAAC;AACH;"}
|
package/dist/on-tick.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"on-tick.js","sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: Pixi.TickerCallback<Pixi.Ticker>): void => {\n const ticker = useContext(TickerContext);\n\n if (!ticker) {\n throw new Error(\n \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n );\n }\n\n ticker.add(tickerCallback);\n\n onCleanup(() => {\n ticker.remove(tickerCallback);\n });\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"on-tick.js","sources":["../src/on-tick.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { onCleanup, useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./pixi-application\";\n\n/**\n * onTick\n *\n * A custom SolidJS hook that registers a callback function to be executed on every frame\n * of the PIXI.Application's ticker. The callback is automatically removed when the\n * component or hook's owning computation is cleaned up.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas`,\n * `PixiApplicationProvider`, or `TickerProvider`.\n *\n * @param tickerCallback - The function to call on each ticker update. It receives\n * the `Pixi.Ticker` instance as its argument.\n *\n */\nexport const onTick = (tickerCallback: Pixi.TickerCallback<Pixi.Ticker>): void => {\n const ticker = useContext(TickerContext);\n\n if (!ticker) {\n throw new Error(\n \"onTick must be used within a PixiApplicationProvider, PixiCanvas or a TickerProvider\",\n );\n }\n\n ticker.add(tickerCallback);\n\n onCleanup(() => {\n ticker.remove(tickerCallback);\n });\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,SAAS,CAAC,mBAA2D;AAChF,QAAM,SAAS,WAAW,aAAa;AAEvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,SAAO,IAAI,cAAc;AAEzB,YAAU,MAAM;AACd,WAAO,OAAO,cAAc;AAAA,EAC9B,CAAC;AACH;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../src/pixi-application/context.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createContext } from \"solid-js\";\nimport type { PixiScreenDimensions } from \"../use-pixi-screen/pixi-screen-store\";\n\nexport const PixiAppContext = createContext<{\n app: Pixi.Application;\n pixiScreenStore: Readonly<PixiScreenDimensions>;\n}>();\n\nexport const TickerContext = createContext<Pixi.Ticker>();\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../src/pixi-application/context.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { createContext } from \"solid-js\";\n\nimport type { PixiScreenDimensions } from \"../use-pixi-screen/pixi-screen-store\";\n\nexport const PixiAppContext = createContext<{\n app: Pixi.Application;\n pixiScreenStore: Readonly<PixiScreenDimensions>;\n}>();\n\nexport const TickerContext = createContext<Pixi.Ticker>();\n"],"names":[],"mappings":";AAKO,MAAM,iBAAiB,cAAA;AAKvB,MAAM,gBAAgB,cAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-pixi-app.js","sources":["../../src/pixi-application/get-pixi-app.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Application instance provided by the `PixiApplication` component.\n */\nexport const getPixiApp = (): Pixi.Application => {\n const appContext = useContext(PixiAppContext);\n\n if (!appContext) {\n throw new Error(\"getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas\");\n }\n\n return appContext.app;\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"get-pixi-app.js","sources":["../../src/pixi-application/get-pixi-app.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"./context\";\n\n/**\n * A custom SolidJS hook to access the root Pixi.Application instance.\n * This hook must be called from a component that is a descendant of `PixiApplicationProvider` or `PixiCanvas`.\n *\n * @returns The Pixi.Application instance provided by the `PixiApplication` component.\n */\nexport const getPixiApp = (): Pixi.Application => {\n const appContext = useContext(PixiAppContext);\n\n if (!appContext) {\n throw new Error(\"getPixiApp must be used within a PixiApplicationProvider or a PixiCanvas\");\n }\n\n return appContext.app;\n};\n"],"names":[],"mappings":";;AAWO,MAAM,aAAa,MAAwB;AAChD,QAAM,aAAa,WAAW,cAAc;AAE5C,MAAI,CAAC,YAAY;AACf,UAAM,IAAI,MAAM,0EAA0E;AAAA,EAC5F;AAEA,SAAO,WAAW;AACpB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-ticker.js","sources":["../../src/pixi-application/get-ticker.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\nimport { TickerContext } from \"./context\";\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Pixi.Ticker => {\n const ticker = useContext(TickerContext);\n if (!ticker) {\n throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n }\n return ticker;\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"get-ticker.js","sources":["../../src/pixi-application/get-ticker.ts"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport { useContext } from \"solid-js\";\n\nimport { TickerContext } from \"./context\";\n\n/**\n * getTicker\n *\n * A custom SolidJS hook that provides access to the PIXI.Application's shared Ticker instance.\n * This hook must be called from a component that is a descendant of `PixiApplication`.\n * Or a descendant of `TickerProvider` if being used for testing without an application.\n *\n * @returns The PIXI.Ticker instance from the application context.\n * @throws Will throw an error if used outside of a `PixiApplication` or `TickerProvider` context.\n */\nexport const getTicker = (): Pixi.Ticker => {\n const ticker = useContext(TickerContext);\n if (!ticker) {\n throw new Error(\"getTicker must be used within a PixiApplication or a TickerProvider\");\n }\n return ticker;\n};\n"],"names":[],"mappings":";;AAeO,MAAM,YAAY,MAAmB;AAC1C,QAAM,SAAS,WAAW,aAAa;AACvC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n children?: JSX.Element;\n existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps) => {\n const [appResource] = createResource(async () => {\n const existingContext = useContext(PixiAppContext);\n if (existingContext?.app) {\n return existingContext.app;\n }\n const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n return await createPixiApplication(initialisationProps);\n });\n\n onCleanup(() => {\n appResource()?.destroy(true, { children: true });\n });\n\n return (\n <Show when={appResource()}>\n {(app) => {\n const pixiScreenStore = createPixiScreenStore(app().renderer);\n const contextValue = {\n app: app(),\n pixiScreenStore,\n };\n\n return (\n <PixiAppContext.Provider value={contextValue}>\n <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n </PixiAppContext.Provider>\n );\n }}\n </Show>\n );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application, usually for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"names":["PixiApplicationProvider","props","appResource","createResource","existingContext","useContext","PixiAppContext","app","initialisationProps","splitProps","createPixiApplication","onCleanup","destroy","children","_$createComponent","Show","when","pixiScreenStore","createPixiScreenStore","renderer","contextValue","Provider","value","TickerContext","ticker","TickerProvider"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"pixi-application-provider.js","sources":["../../src/pixi-application/pixi-application-provider.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX, ParentProps } from \"solid-js\";\nimport { createResource, onCleanup, Show, splitProps, useContext } from \"solid-js\";\n\nimport { createPixiScreenStore } from \"../use-pixi-screen/pixi-screen-store\";\n\nimport { PixiAppContext, TickerContext } from \"./context\";\nimport { createPixiApplication } from \"./pixi-application\";\n\n/**\n * Props for the `PixiApplication` component. It extends the PIXI.ApplicationOptions\n * minus the `children` and `resizeTo` properties, which are handled by pixi-solid internally.\n * There is also an optional `existingApp` property to pass in an already created Pixi.Application instance, which will be used instead of creating a new one.\n */\nexport type PixiApplicationProps = Partial<\n Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">\n> & {\n children?: JSX.Element;\n existingApp?: Pixi.Application;\n};\n\n/**\n * A SolidJS component that creates a Pixi.Application instance and works as a context provider.\n * It provides the application instance through context to be used by child components\n * and custom hooks like `getPixiApp`, `onTick`, `getTicker` and `usePixiScreen`.\n *\n * This component should only be used once in your application.\n *\n * @param props The properties to configure the Pixi.js Application.\n *\n */\nexport const PixiApplicationProvider = (props: PixiApplicationProps) => {\n const [appResource] = createResource(async () => {\n const existingContext = useContext(PixiAppContext);\n if (existingContext?.app) {\n return existingContext.app;\n }\n const [, initialisationProps] = splitProps(props, [\"children\", \"existingApp\"]);\n return await createPixiApplication(initialisationProps);\n });\n\n onCleanup(() => {\n appResource()?.destroy(true, { children: true });\n });\n\n return (\n <Show when={appResource()}>\n {(app) => {\n const pixiScreenStore = createPixiScreenStore(app().renderer);\n const contextValue = {\n app: app(),\n pixiScreenStore,\n };\n\n return (\n <PixiAppContext.Provider value={contextValue}>\n <TickerContext.Provider value={app().ticker}>{props.children}</TickerContext.Provider>\n </PixiAppContext.Provider>\n );\n }}\n </Show>\n );\n};\n\nexport type TickerProviderProps = ParentProps<{ ticker: Pixi.Ticker }>;\n\n/**\n * This is only required if you want a ticker without the Pixi Application, usually for testing a store that relies on the ticker related utilities.\n * It provides context for the `onTick`, `delay`, `createAsyncDelay` and `getTicker` utilities.\n *\n * The ticker instance you want to use needs to be passed in as a prop so it can be manually controlled from the outside for testing.\n */\nexport const TickerProvider = (props: TickerProviderProps) => {\n return <TickerContext.Provider value={props.ticker}>{props.children}</TickerContext.Provider>;\n};\n"],"names":["PixiApplicationProvider","props","appResource","createResource","existingContext","useContext","PixiAppContext","app","initialisationProps","splitProps","createPixiApplication","onCleanup","destroy","children","_$createComponent","Show","when","pixiScreenStore","createPixiScreenStore","renderer","contextValue","Provider","value","TickerContext","ticker","TickerProvider"],"mappings":";;;;;AA+BO,MAAMA,0BAA0BA,CAACC,UAAgC;AACtE,QAAM,CAACC,WAAW,IAAIC,eAAe,YAAY;AAC/C,UAAMC,kBAAkBC,WAAWC,cAAc;AACjD,QAAIF,iBAAiBG,KAAK;AACxB,aAAOH,gBAAgBG;AAAAA,IACzB;AACA,UAAM,CAAA,EAAGC,mBAAmB,IAAIC,WAAWR,OAAO,CAAC,YAAY,aAAa,CAAC;AAC7E,WAAO,MAAMS,sBAAsBF,mBAAmB;AAAA,EACxD,CAAC;AAEDG,YAAU,MAAM;AACdT,gBAAAA,GAAeU,QAAQ,MAAM;AAAA,MAAEC,UAAU;AAAA,IAAA,CAAM;AAAA,EACjD,CAAC;AAED,SAAAC,gBACGC,MAAI;AAAA,IAAA,IAACC,OAAI;AAAA,aAAEd,YAAAA;AAAAA,IAAa;AAAA,IAAAW,UACrBN,CAAAA,QAAQ;AACR,YAAMU,kBAAkBC,sBAAsBX,IAAAA,EAAMY,QAAQ;AAC5D,YAAMC,eAAe;AAAA,QACnBb,KAAKA,IAAAA;AAAAA,QACLU;AAAAA,MAAAA;AAGF,aAAAH,gBACGR,eAAee,UAAQ;AAAA,QAACC,OAAOF;AAAAA,QAAY,IAAAP,WAAA;AAAA,iBAAAC,gBACzCS,cAAcF,UAAQ;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAEf,MAAMiB;AAAAA,YAAM;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAGZ,MAAMY;AAAAA,YAAQ;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAGlE;AAAA,EAAA,CAAC;AAGP;AAUO,MAAMY,iBAAiBA,CAACxB,UAA+B;AAC5D,SAAAa,gBAAQS,cAAcF,UAAQ;AAAA,IAAA,IAACC,QAAK;AAAA,aAAErB,MAAMuB;AAAAA,IAAM;AAAA,IAAA,IAAAX,WAAA;AAAA,aAAGZ,MAAMY;AAAAA,IAAQ;AAAA,EAAA,CAAA;AACrE;"}
|
package/dist/pixi-canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount, splitProps } from \"solid-js\";\nimport { bindProps } from \"./components/bind-props\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\nexport type PixiCanvasProps = {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n class?: string;\n} & Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst InnerPixiCanvas = (\n props: Pick<PixiCanvasProps, \"children\" | \"style\" | \"class\">,\n): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\n \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n );\n }\n\n bindProps(pixiApp.stage, props);\n\n let previousResizeTo: HTMLElement | Window;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n ref={canvasWrapElement}\n style={{\n position: \"relative\",\n /* Disables the callout/menu on long-press */\n [\"-webkit-touch-callout\"]: \"none\",\n /* Disables text selection */\n [\"-webkit-user-select\"]: \"none\",\n [\"user-select\"]: \"none\",\n ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.class}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props.style - CSS styles to apply to the canvas wrapper.\n * @param props.class - CSS class to apply to the canvas wrapper.\n * @param props - Additional Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n const [, applicationOptions] = splitProps(props, [\"children\", \"style\", \"class\"]);\n return (\n <PixiApplicationProvider {...applicationOptions}>\n <InnerPixiCanvas style={props.style} class={props.class}>\n {props.children}\n </InnerPixiCanvas>\n </PixiApplicationProvider>\n );\n};\n"],"names":["InnerPixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","Error","bindProps","stage","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","undefined","_el$","_tmpl$","_ref$","_$use","_$insert","canvas","_$effect","_p$","_v$","style","_v$2","class","e","_$style","t","_$className","PixiCanvas","applicationOptions","splitProps","_$createComponent","PixiApplicationProvider","_$mergeProps","children"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"pixi-canvas.js","sources":["../src/pixi-canvas.tsx"],"sourcesContent":["import type * as Pixi from \"pixi.js\";\nimport type { JSX } from \"solid-js\";\nimport { onCleanup, onMount, splitProps } from \"solid-js\";\n\nimport { bindProps } from \"./components/bind-props\";\nimport { getPixiApp, PixiApplicationProvider } from \"./pixi-application\";\n\nexport type PixiCanvasProps = {\n children: JSX.Element;\n style?: JSX.CSSProperties | undefined;\n class?: string;\n} & Partial<Omit<Pixi.ApplicationOptions, \"children\" | \"resizeTo\">>;\n\nconst InnerPixiCanvas = (\n props: Pick<PixiCanvasProps, \"children\" | \"style\" | \"class\">,\n): JSX.Element => {\n let canvasWrapElement: HTMLDivElement | undefined;\n let pixiApp: Pixi.Application;\n\n try {\n pixiApp = getPixiApp();\n } catch {\n throw new Error(\n \"InnerPixiCanvas must be used within a PixiApplicationProvider or a PixiCanvas\",\n );\n }\n\n bindProps(pixiApp.stage, props);\n\n let previousResizeTo: HTMLElement | Window;\n let resizeObserver: ResizeObserver | undefined;\n\n onMount(() => {\n if (!canvasWrapElement) return;\n previousResizeTo = pixiApp.resizeTo;\n pixiApp.resizeTo = canvasWrapElement;\n pixiApp.queueResize();\n resizeObserver = new ResizeObserver(() => {\n pixiApp.queueResize();\n });\n resizeObserver.observe(canvasWrapElement);\n });\n\n onCleanup(() => {\n if (!canvasWrapElement) return;\n pixiApp.resizeTo = previousResizeTo;\n resizeObserver?.disconnect();\n resizeObserver = undefined;\n });\n\n return (\n <div\n ref={canvasWrapElement}\n style={{\n position: \"relative\",\n /* Disables the callout/menu on long-press */\n [\"-webkit-touch-callout\"]: \"none\",\n /* Disables text selection */\n [\"-webkit-user-select\"]: \"none\",\n [\"user-select\"]: \"none\",\n ...(typeof props.style === \"object\" ? props.style : {}),\n }}\n class={props.class}\n >\n {pixiApp.canvas}\n </div>\n );\n};\n\n/**\n * PixiCanvas\n *\n * A small wrapper that mounts the PIXI application's canvas element into the DOM\n * and automatically resizes it.\n *\n * - Works with or without a surrounding `PixiApplicationProvider` component.\n * - If used inside `PixiApplicationProvider`, it will use the provided context.\n * - If used standalone, it will create its own PixiApplication and provide context.\n * - Accepts pixi-solid components as children, which will be rendered inside the canvas.\n *\n * Props:\n * @param props.children - JSX content to render inside the canvas wrapper.\n * @param props.style - CSS styles to apply to the canvas wrapper.\n * @param props.class - CSS class to apply to the canvas wrapper.\n * @param props - Additional Pixi ApplicationOptions (except 'children' and 'resizeTo').\n */\n\nexport const PixiCanvas = (props: PixiCanvasProps): JSX.Element => {\n const [, applicationOptions] = splitProps(props, [\"children\", \"style\", \"class\"]);\n return (\n <PixiApplicationProvider {...applicationOptions}>\n <InnerPixiCanvas style={props.style} class={props.class}>\n {props.children}\n </InnerPixiCanvas>\n </PixiApplicationProvider>\n );\n};\n"],"names":["InnerPixiCanvas","props","canvasWrapElement","pixiApp","getPixiApp","Error","bindProps","stage","previousResizeTo","resizeObserver","onMount","resizeTo","queueResize","ResizeObserver","observe","onCleanup","disconnect","undefined","_el$","_tmpl$","_ref$","_$use","_$insert","canvas","_$effect","_p$","_v$","style","_v$2","class","e","_$style","t","_$className","PixiCanvas","applicationOptions","splitProps","_$createComponent","PixiApplicationProvider","_$mergeProps","children"],"mappings":";;;;;;AAaA,MAAMA,kBAAkBA,CACtBC,UACgB;AAChB,MAAIC;AACJ,MAAIC;AAEJ,MAAI;AACFA,cAAUC,WAAAA;AAAAA,EACZ,QAAQ;AACN,UAAM,IAAIC,MACR,+EACF;AAAA,EACF;AAEAC,YAAUH,QAAQI,OAAON,KAAK;AAE9B,MAAIO;AACJ,MAAIC;AAEJC,UAAQ,MAAM;AACZ,QAAI,CAACR,kBAAmB;AACxBM,uBAAmBL,QAAQQ;AAC3BR,YAAQQ,WAAWT;AACnBC,YAAQS,YAAAA;AACRH,qBAAiB,IAAII,eAAe,MAAM;AACxCV,cAAQS,YAAAA;AAAAA,IACV,CAAC;AACDH,mBAAeK,QAAQZ,iBAAiB;AAAA,EAC1C,CAAC;AAEDa,YAAU,MAAM;AACd,QAAI,CAACb,kBAAmB;AACxBC,YAAQQ,WAAWH;AACnBC,oBAAgBO,WAAAA;AAChBP,qBAAiBQ;AAAAA,EACnB,CAAC;AAED,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAA,QAAAC,QAESlB;AAAiB,WAAAkB,UAAA,aAAAC,IAAAD,OAAAF,IAAA,IAAjBhB,oBAAiBgB;AAAAI,WAAAJ,MAAA,MAYrBf,QAAQoB,MAAM;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAXR;AAAA;AAAA,QAGL,CAAC,uBAAuB,GAAG;AAAA;AAAA,QAE3B,CAAC,qBAAqB,GAAG;AAAA,QACzB,CAAC,aAAa,GAAG;AAAA,QACjB,GAAI,OAAOzB,MAAM0B,UAAU,WAAW1B,MAAM0B,QAAQ,CAAA;AAAA,MAAC,GACtDC,OACM3B,MAAM4B;AAAKJ,UAAAK,IAAAC,MAAAb,MAAAQ,KAAAD,IAAAK,CAAA;AAAAF,eAAAH,IAAAO,KAAAC,UAAAf,MAAAO,IAAAO,IAAAJ,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAK,GAAAb;AAAAA,MAAAe,GAAAf;AAAAA,IAAAA,CAAA;AAAA,WAAAC;AAAAA,EAAA,GAAA;AAKxB;AAoBO,MAAMgB,aAAaA,CAACjC,UAAwC;AACjE,QAAM,CAAA,EAAGkC,kBAAkB,IAAIC,WAAWnC,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAC/E,SAAAoC,gBACGC,yBAAuBC,WAAKJ,oBAAkB;AAAA,IAAA,IAAAK,WAAA;AAAA,aAAAH,gBAC5CrC,iBAAe;AAAA,QAAA,IAAC2B,QAAK;AAAA,iBAAE1B,MAAM0B;AAAAA,QAAK;AAAA,QAAA,KAAA,OAAA,IAAA;AAAA,iBAAS1B,MAAM4B;AAAAA,QAAK;AAAA,QAAA,IAAAW,WAAA;AAAA,iBACpDvC,MAAMuC;AAAAA,QAAQ;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA,CAAA;AAIvB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pixi-screen.js","sources":["../../src/use-pixi-screen/use-pixi-screen.ts"],"sourcesContent":["import { useContext } from \"solid-js\";\nimport { PixiAppContext } from \"../pixi-application\";\nimport type { PixiScreenDimensions } from \"./pixi-screen-store\";\n\n/**\n *\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @returns An object containing the width and height of the Pixi screen.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n const pixiAppContext = useContext(PixiAppContext);\n if (!pixiAppContext) {\n throw new Error(\"usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas\");\n }\n return pixiAppContext.pixiScreenStore;\n};\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-pixi-screen.js","sources":["../../src/use-pixi-screen/use-pixi-screen.ts"],"sourcesContent":["import { useContext } from \"solid-js\";\n\nimport { PixiAppContext } from \"../pixi-application\";\n\nimport type { PixiScreenDimensions } from \"./pixi-screen-store\";\n\n/**\n *\n * A hook that provides the current dimensions of the Pixi application's screen as a reactive object.\n * The properties of the returned object will update automatically when the screen size changes and can be subscribed to reactively.\n *\n * This hook must be called from a component that is a descendant of `PixiCanvas` or `PixiApplicationProvider`.\n *\n * @returns An object containing the width and height of the Pixi screen.\n */\nexport const usePixiScreen = (): Readonly<PixiScreenDimensions> => {\n const pixiAppContext = useContext(PixiAppContext);\n if (!pixiAppContext) {\n throw new Error(\"usePixiScreen must be used within a PixiApplicationProvider or PixiCanvas\");\n }\n return pixiAppContext.pixiScreenStore;\n};\n"],"names":[],"mappings":";;AAeO,MAAM,gBAAgB,MAAsC;AACjE,QAAM,iBAAiB,WAAW,cAAc;AAChD,MAAI,CAAC,gBAAgB;AACnB,UAAM,IAAI,MAAM,2EAA2E;AAAA,EAC7F;AACA,SAAO,eAAe;AACxB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-damp.js","sources":["../../src/utils/smooth-damp.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\nimport { onTick } from \"../on-tick\";\n\n/**\n * Smoothly dampens a value towards a target over time.\n * This is similar to Unity's Mathf.SmoothDamp function.\n *\n * @param current - The current value.\n * @param target - The target value.\n * @param velocity - A reference to the current velocity. This should be persistent between calls.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @param deltaTime - The time since the last call in seconds. Defaults to 1/60 (assuming 60 FPS).\n * @param precision - Optionally, the threshold for snapping the value to the target. If the absolute difference between the current and target value is less than this, it snaps to the target. Defaults to 0.01.\n * @returns The new current value.\n */\nexport const smoothDamp = (\n current: number,\n target: number,\n velocity: { value: number },\n smoothTimeMs: number = 300,\n maxSpeed: number = Infinity,\n deltaTime: number = 1 / 60,\n precision: number = 0.01, // Added precision parameter with a default\n): number => {\n if (current === target) return current;\n\n // Check precision and velocity before doing calculations\n if (Math.abs(current - target) < precision && Math.abs(velocity.value) < precision) {\n velocity.value = 0; // Reset velocity\n return target; // Snap to target and return early\n }\n\n const smoothTime = smoothTimeMs / 1000; // Convert smoothTimeMs to seconds\n const omega = 2 / smoothTime;\n const x = omega * deltaTime;\n const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n const change = current - target;\n const temp = (velocity.value + omega * change) * deltaTime;\n velocity.value = (velocity.value - omega * temp) * exp;\n\n let result = target + (change + temp) * exp;\n\n // Clamp to max speed\n if (maxSpeed !== Infinity) {\n const maxChange = maxSpeed * deltaTime;\n result = current + Math.max(-maxChange, Math.min(maxChange, result - current));\n }\n\n return result;\n};\n\n/**\n * A SolidJS hook that provides a smoothly damped signal towards a target value.\n * Internally manages velocity and continuous updates synced to the Pixi ticker.\n *\n * @param to - An accessor for the target value to damp towards.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster. Defaults to 300ms.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @returns A signal containing the current damped value.\n */\n\nexport type UseSmoothDampProps = {\n to: () => number;\n smoothTimeMs?: () => number;\n maxSpeed?: () => number;\n};\n\nexport type SmoothDamp = {\n value: Accessor<number>;\n velocity: Accessor<number>;\n};\n\nexport const useSmoothDamp = (props: UseSmoothDampProps): SmoothDamp => {\n const [current, setCurrent] = createSignal(props.to());\n const velocity = createMutable({ value: 0 });\n\n const update = (deltaTimeMS: number) => {\n const currentValue = current();\n const currentTarget = props.to();\n\n if (currentValue === currentTarget) {\n velocity.value = 0;\n return;\n }\n\n const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n const newCurrent = smoothDamp(\n currentValue,\n currentTarget,\n velocity,\n props.smoothTimeMs?.(),\n props.maxSpeed?.(),\n deltaTime,\n );\n setCurrent(newCurrent);\n };\n\n onTick((ticker) => {\n update(ticker.deltaMS);\n });\n\n return {\n value: current,\n velocity: () => velocity.value,\n };\n};\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"smooth-damp.js","sources":["../../src/utils/smooth-damp.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { createMutable } from \"solid-js/store\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * Smoothly dampens a value towards a target over time.\n * This is similar to Unity's Mathf.SmoothDamp function.\n *\n * @param current - The current value.\n * @param target - The target value.\n * @param velocity - A reference to the current velocity. This should be persistent between calls.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @param deltaTime - The time since the last call in seconds. Defaults to 1/60 (assuming 60 FPS).\n * @param precision - Optionally, the threshold for snapping the value to the target. If the absolute difference between the current and target value is less than this, it snaps to the target. Defaults to 0.01.\n * @returns The new current value.\n */\nexport const smoothDamp = (\n current: number,\n target: number,\n velocity: { value: number },\n smoothTimeMs: number = 300,\n maxSpeed: number = Infinity,\n deltaTime: number = 1 / 60,\n precision: number = 0.01, // Added precision parameter with a default\n): number => {\n if (current === target) return current;\n\n // Check precision and velocity before doing calculations\n if (Math.abs(current - target) < precision && Math.abs(velocity.value) < precision) {\n velocity.value = 0; // Reset velocity\n return target; // Snap to target and return early\n }\n\n const smoothTime = smoothTimeMs / 1000; // Convert smoothTimeMs to seconds\n const omega = 2 / smoothTime;\n const x = omega * deltaTime;\n const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);\n const change = current - target;\n const temp = (velocity.value + omega * change) * deltaTime;\n velocity.value = (velocity.value - omega * temp) * exp;\n\n let result = target + (change + temp) * exp;\n\n // Clamp to max speed\n if (maxSpeed !== Infinity) {\n const maxChange = maxSpeed * deltaTime;\n result = current + Math.max(-maxChange, Math.min(maxChange, result - current));\n }\n\n return result;\n};\n\n/**\n * A SolidJS hook that provides a smoothly damped signal towards a target value.\n * Internally manages velocity and continuous updates synced to the Pixi ticker.\n *\n * @param to - An accessor for the target value to damp towards.\n * @param smoothTimeMs - The approximate time it will take to reach the target in milliseconds. Smaller values will reach the target faster. Defaults to 300ms.\n * @param maxSpeed - Optionally, the maximum speed the value can move in units per second. Defaults to Infinity.\n * @returns A signal containing the current damped value.\n */\n\nexport type UseSmoothDampProps = {\n to: () => number;\n smoothTimeMs?: () => number;\n maxSpeed?: () => number;\n};\n\nexport type SmoothDamp = {\n value: Accessor<number>;\n velocity: Accessor<number>;\n};\n\nexport const useSmoothDamp = (props: UseSmoothDampProps): SmoothDamp => {\n const [current, setCurrent] = createSignal(props.to());\n const velocity = createMutable({ value: 0 });\n\n const update = (deltaTimeMS: number) => {\n const currentValue = current();\n const currentTarget = props.to();\n\n if (currentValue === currentTarget) {\n velocity.value = 0;\n return;\n }\n\n const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n const newCurrent = smoothDamp(\n currentValue,\n currentTarget,\n velocity,\n props.smoothTimeMs?.(),\n props.maxSpeed?.(),\n deltaTime,\n );\n setCurrent(newCurrent);\n };\n\n onTick((ticker) => {\n update(ticker.deltaMS);\n });\n\n return {\n value: current,\n velocity: () => velocity.value,\n };\n};\n"],"names":[],"mappings":";;;AAmBO,MAAM,aAAa,CACxB,SACA,QACA,UACA,eAAuB,KACvB,WAAmB,UACnB,YAAoB,IAAI,IACxB,YAAoB,SACT;AACX,MAAI,YAAY,OAAQ,QAAO;AAG/B,MAAI,KAAK,IAAI,UAAU,MAAM,IAAI,aAAa,KAAK,IAAI,SAAS,KAAK,IAAI,WAAW;AAClF,aAAS,QAAQ;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,eAAe;AAClC,QAAM,QAAQ,IAAI;AAClB,QAAM,IAAI,QAAQ;AAClB,QAAM,MAAM,KAAK,IAAI,IAAI,OAAO,IAAI,IAAI,QAAQ,IAAI,IAAI;AACxD,QAAM,SAAS,UAAU;AACzB,QAAM,QAAQ,SAAS,QAAQ,QAAQ,UAAU;AACjD,WAAS,SAAS,SAAS,QAAQ,QAAQ,QAAQ;AAEnD,MAAI,SAAS,UAAU,SAAS,QAAQ;AAGxC,MAAI,aAAa,UAAU;AACzB,UAAM,YAAY,WAAW;AAC7B,aAAS,UAAU,KAAK,IAAI,CAAC,WAAW,KAAK,IAAI,WAAW,SAAS,OAAO,CAAC;AAAA,EAC/E;AAEA,SAAO;AACT;AAuBO,MAAM,gBAAgB,CAAC,UAA0C;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,MAAM,IAAI;AACrD,QAAM,WAAW,cAAc,EAAE,OAAO,GAAG;AAE3C,QAAM,SAAS,CAAC,gBAAwB;AACtC,UAAM,eAAe,QAAA;AACrB,UAAM,gBAAgB,MAAM,GAAA;AAE5B,QAAI,iBAAiB,eAAe;AAClC,eAAS,QAAQ;AACjB;AAAA,IACF;AAEA,UAAM,YAAY,cAAc;AAChC,UAAM,aAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,eAAA;AAAA,MACN,MAAM,WAAA;AAAA,MACN;AAAA,IAAA;AAEF,eAAW,UAAU;AAAA,EACvB;AAEA,SAAO,CAAC,WAAW;AACjB,WAAO,OAAO,OAAO;AAAA,EACvB,CAAC;AAED,SAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU,MAAM,SAAS;AAAA,EAAA;AAE7B;"}
|
package/dist/utils/spring.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spring.js","sources":["../../src/utils/spring.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\nimport { onTick } from \"../on-tick\";\n\n/**\n * @typedef {Object} UseSpringProps\n * @property {Accessor<number>} to - An accessor for the target value for the spring.\n * @property {Accessor<number>} [stiffness=10] - Effective range from 0 - 100. Controls the spring's resistance to displacement.\n * @property {Accessor<number>} [damping=30] - Effective range from 0 - 100. Controls the amount of friction or resistance to motion.\n * @property {Accessor<number>} [mass=20] - Effective range from 0 - 100. Controls the inertia of the spring.\n */\nexport type UseSpringProps = {\n to: () => number;\n stiffness?: () => number;\n damping?: () => number;\n mass?: () => number;\n};\n\nexport type Spring = {\n value: Accessor<number>;\n velocity: Accessor<number>;\n};\n\n/**\n * A SolidJS hook that provides a spring-animated signal towards a target value.\n * Internally manages the spring physics and continuous updates synced to the Pixi ticker.\n *\n * @param {UseSpringProps} props - The properties for the spring animation.\n * @returns {Accessor<number>} A signal containing the current spring-animated value.\n */\nexport const useSpring = (props: UseSpringProps): Spring => {\n const [value, setValue] = createSignal(props.to());\n const [velocity, setVelocity] = createSignal(0);\n\n const update = (deltaTimeMS: number) => {\n const targetInput = props.to();\n const currentValue = value();\n const currentVelocity = velocity();\n\n if (targetInput === currentValue) return;\n\n // Settling condition: if output is very close to input and velocity is negligible,\n // snap to input and stop calculations.\n if (Math.abs(currentVelocity) < 0.1 && Math.abs(currentValue - targetInput) < 0.01) {\n setVelocity(0);\n setValue(targetInput);\n return;\n }\n\n const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n\n // Get current spring properties, using defaults if not provided\n const stiffness = percentToValueBetweenRange(props.stiffness?.() ?? 10, -1, -300);\n const damping = percentToValueBetweenRange(props.damping?.() ?? 30, -0.4, -20);\n const mass = percentToValueBetweenRange(props.mass?.() ?? 20, 0.1, 10);\n\n const springX = stiffness * (currentValue - targetInput);\n const damperX = damping * currentVelocity;\n const amplitude = (springX + damperX) / mass;\n\n setVelocity((prev) => prev + amplitude * deltaTime);\n setValue(currentValue + currentVelocity * deltaTime);\n };\n\n onTick((ticker) => {\n update(ticker.deltaMS);\n });\n\n return { value, velocity };\n};\n\n// Helper to convert 0-100 percent range to internal calculation range\nconst percentToValueBetweenRange = (percent: number, min: number, max: number) =>\n (percent * (max - min)) / 100 + min;\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"spring.js","sources":["../../src/utils/spring.ts"],"sourcesContent":["import type { Accessor } from \"solid-js\";\nimport { createSignal } from \"solid-js\";\n\nimport { onTick } from \"../on-tick\";\n\n/**\n * @typedef {Object} UseSpringProps\n * @property {Accessor<number>} to - An accessor for the target value for the spring.\n * @property {Accessor<number>} [stiffness=10] - Effective range from 0 - 100. Controls the spring's resistance to displacement.\n * @property {Accessor<number>} [damping=30] - Effective range from 0 - 100. Controls the amount of friction or resistance to motion.\n * @property {Accessor<number>} [mass=20] - Effective range from 0 - 100. Controls the inertia of the spring.\n */\nexport type UseSpringProps = {\n to: () => number;\n stiffness?: () => number;\n damping?: () => number;\n mass?: () => number;\n};\n\nexport type Spring = {\n value: Accessor<number>;\n velocity: Accessor<number>;\n};\n\n/**\n * A SolidJS hook that provides a spring-animated signal towards a target value.\n * Internally manages the spring physics and continuous updates synced to the Pixi ticker.\n *\n * @param {UseSpringProps} props - The properties for the spring animation.\n * @returns {Accessor<number>} A signal containing the current spring-animated value.\n */\nexport const useSpring = (props: UseSpringProps): Spring => {\n const [value, setValue] = createSignal(props.to());\n const [velocity, setVelocity] = createSignal(0);\n\n const update = (deltaTimeMS: number) => {\n const targetInput = props.to();\n const currentValue = value();\n const currentVelocity = velocity();\n\n if (targetInput === currentValue) return;\n\n // Settling condition: if output is very close to input and velocity is negligible,\n // snap to input and stop calculations.\n if (Math.abs(currentVelocity) < 0.1 && Math.abs(currentValue - targetInput) < 0.01) {\n setVelocity(0);\n setValue(targetInput);\n return;\n }\n\n const deltaTime = deltaTimeMS / 1000; // Convert milliseconds to seconds\n\n // Get current spring properties, using defaults if not provided\n const stiffness = percentToValueBetweenRange(props.stiffness?.() ?? 10, -1, -300);\n const damping = percentToValueBetweenRange(props.damping?.() ?? 30, -0.4, -20);\n const mass = percentToValueBetweenRange(props.mass?.() ?? 20, 0.1, 10);\n\n const springX = stiffness * (currentValue - targetInput);\n const damperX = damping * currentVelocity;\n const amplitude = (springX + damperX) / mass;\n\n setVelocity((prev) => prev + amplitude * deltaTime);\n setValue(currentValue + currentVelocity * deltaTime);\n };\n\n onTick((ticker) => {\n update(ticker.deltaMS);\n });\n\n return { value, velocity };\n};\n\n// Helper to convert 0-100 percent range to internal calculation range\nconst percentToValueBetweenRange = (percent: number, min: number, max: number) =>\n (percent * (max - min)) / 100 + min;\n"],"names":[],"mappings":";;AA+BO,MAAM,YAAY,CAAC,UAAkC;AAC1D,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,MAAM,IAAI;AACjD,QAAM,CAAC,UAAU,WAAW,IAAI,aAAa,CAAC;AAE9C,QAAM,SAAS,CAAC,gBAAwB;AACtC,UAAM,cAAc,MAAM,GAAA;AAC1B,UAAM,eAAe,MAAA;AACrB,UAAM,kBAAkB,SAAA;AAExB,QAAI,gBAAgB,aAAc;AAIlC,QAAI,KAAK,IAAI,eAAe,IAAI,OAAO,KAAK,IAAI,eAAe,WAAW,IAAI,MAAM;AAClF,kBAAY,CAAC;AACb,eAAS,WAAW;AACpB;AAAA,IACF;AAEA,UAAM,YAAY,cAAc;AAGhC,UAAM,YAAY,2BAA2B,MAAM,iBAAiB,IAAI,IAAI,IAAI;AAChF,UAAM,UAAU,2BAA2B,MAAM,eAAe,IAAI,MAAM,GAAG;AAC7E,UAAM,OAAO,2BAA2B,MAAM,YAAY,IAAI,KAAK,EAAE;AAErE,UAAM,UAAU,aAAa,eAAe;AAC5C,UAAM,UAAU,UAAU;AAC1B,UAAM,aAAa,UAAU,WAAW;AAExC,gBAAY,CAAC,SAAS,OAAO,YAAY,SAAS;AAClD,aAAS,eAAe,kBAAkB,SAAS;AAAA,EACrD;AAEA,SAAO,CAAC,WAAW;AACjB,WAAO,OAAO,OAAO;AAAA,EACvB,CAAC;AAED,SAAO,EAAE,OAAO,SAAA;AAClB;AAGA,MAAM,6BAA6B,CAAC,SAAiB,KAAa,QAC/D,WAAW,MAAM,OAAQ,MAAM;"}
|