UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

1 lines 4.32 kB
{"version":3,"file":"Spine.mjs","names":["speApp: Application","events: {\n cb?: (e: SplineEvent) => void;\n name: SplineEventName;\n }[]","ParentSize"],"sources":["../../../src/awesome/Spline/Spine.tsx"],"sourcesContent":["'use client';\n\nimport { Application } from '@splinetool/runtime';\nimport type { SplineEvent, SplineEventName } from '@splinetool/runtime';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ParentSize from './ParentSize';\nimport type { SplineProps } from './type';\n\nconst Spline = memo<SplineProps>(\n ({\n ref,\n scene,\n style,\n onMouseDown,\n onMouseUp,\n onMouseHover,\n onKeyDown,\n onKeyUp,\n onStart,\n onLookAt,\n onFollow,\n onWheel,\n onLoad,\n renderOnDemand = true,\n ...props\n }) => {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const [isLoading, setIsLoading] = useState(true);\n\n const init = async (\n speApp: Application,\n events: {\n cb?: (e: SplineEvent) => void;\n name: SplineEventName;\n }[],\n ) => {\n await speApp.load(scene);\n\n for (let event of events) {\n if (event.cb) {\n speApp.addEventListener(event.name, event.cb);\n }\n }\n\n setIsLoading(false);\n onLoad?.(speApp);\n };\n\n // Initialize runtime when component is mounted\n useEffect(() => {\n setIsLoading(true);\n\n let speApp: Application;\n const events: {\n cb?: (e: SplineEvent) => void;\n name: SplineEventName;\n }[] = [\n {\n cb: onMouseDown,\n name: 'mouseDown',\n },\n {\n cb: onMouseUp,\n name: 'mouseUp',\n },\n {\n cb: onMouseHover,\n name: 'mouseHover',\n },\n {\n cb: onKeyDown,\n name: 'keyDown',\n },\n {\n cb: onKeyUp,\n name: 'keyUp',\n },\n {\n cb: onStart,\n name: 'start',\n },\n {\n cb: onLookAt,\n name: 'lookAt',\n },\n {\n cb: onFollow,\n name: 'follow',\n },\n {\n cb: onWheel,\n name: 'scroll',\n },\n ];\n\n if (canvasRef.current) {\n speApp = new Application(canvasRef.current, { renderOnDemand });\n init(speApp, events);\n }\n\n return () => {\n for (let event of events) {\n if (event.cb) {\n speApp.removeEventListener(event.name, event.cb);\n }\n }\n speApp.dispose();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [scene]);\n\n return (\n <ParentSize debounceTime={50} parentSizeStyles={style} ref={ref} {...props}>\n {() => {\n return (\n <canvas\n ref={canvasRef}\n style={{\n display: isLoading ? 'none' : 'block',\n }}\n />\n );\n }}\n </ParentSize>\n );\n },\n);\n\nSpline.displayName = 'Spline';\n\nexport default Spline;\n\nexport { type SPEObject, type SplineEvent, type SplineEventName } from '@splinetool/runtime';\n"],"mappings":";;;;;;;;AASA,MAAM,SAAS,MACZ,EACC,KACA,OACA,OACA,aACA,WACA,cACA,WACA,SACA,SACA,UACA,UACA,SACA,QACA,iBAAiB,MACjB,GAAG,YACC;CACJ,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,OAAO,OACX,QACA,WAIG;AACH,QAAM,OAAO,KAAK,MAAM;AAExB,OAAK,IAAI,SAAS,OAChB,KAAI,MAAM,GACR,QAAO,iBAAiB,MAAM,MAAM,MAAM,GAAG;AAIjD,eAAa,MAAM;AACnB,WAAS,OAAO;;AAIlB,iBAAgB;AACd,eAAa,KAAK;EAElB,IAAIA;EACJ,MAAMC,SAGA;GACJ;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACF;AAED,MAAI,UAAU,SAAS;AACrB,YAAS,IAAI,YAAY,UAAU,SAAS,EAAE,gBAAgB,CAAC;AAC/D,QAAK,QAAQ,OAAO;;AAGtB,eAAa;AACX,QAAK,IAAI,SAAS,OAChB,KAAI,MAAM,GACR,QAAO,oBAAoB,MAAM,MAAM,MAAM,GAAG;AAGpD,UAAO,SAAS;;IAGjB,CAAC,MAAM,CAAC;AAEX,QACE,oBAACC;EAAW,cAAc;EAAI,kBAAkB;EAAY;EAAK,GAAI;kBAC5D;AACL,UACE,oBAAC;IACC,KAAK;IACL,OAAO,EACL,SAAS,YAAY,SAAS,SAC/B;KACD;;GAGK;EAGlB;AAED,OAAO,cAAc;AAErB,oBAAe"}