🖼 Update to support the new Responsive size (#38)

* 🖼 Render only the canvas

* 🕺 Update example

Author: marcofugaro

example/App.tsx

@@ -5,16 +5,13 @@ import anime from 'animejs';
 
 function App() {
   const [spline, setSpline] = useState<Application>(null);
-  const canvasParent = useRef<HTMLDivElement>(null);
   const tileRef = useRef<SPEObject>();
 
   useEffect(() => {
-    if (spline) {
-      const tile = spline.findObjectById(
-        '7ba78968-2a55-48f2-b14c-5191da3e075e'
-      );
-      tileRef.current = tile;
-    }
+    if (!spline) return;
+
+    const tile = spline.findObjectByName('Rectangle');
+    tileRef.current = tile;
   }, [spline]);
 
   function handleLoad(e: Application) {
@@ -63,9 +60,7 @@ function App() {
         </button>
       </div>
       <Spline
-        ref={canvasParent}
-        autoRender
-        scene="https://prod.spline.design/ft9KFAMYebCiRXbC/scene.spline"
+        scene="https://prod.spline.design/2fzdsSVagfszNxsd/scene.splinecode"
         onLoad={handleLoad}
       />
     </>

example/index.css

@@ -1,17 +1,29 @@
-body {
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
   margin: 0;
+  padding: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  overflow: hidden;
+}
+
+body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
 .buttons {
   position: absolute;
-}
+}

example/scene.spline

@@ -27,8 +27,11 @@
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
+  "dependencies": {
+    "react-merge-refs": "^1.1.0"
+  },
   "devDependencies": {
-    "@splinetool/runtime": "^0.9.35",
+    "@splinetool/runtime": "link:/Users/marcofugaro/Code/spline/packages/runtime",
     "@types/animejs": "^3.1.4",
     "@types/node": "^17.0.27",
     "@types/react": "^18.0.7",
@@ -41,4 +44,4 @@
     "typescript": "^4.6.3",
     "vite": "^2.9.5"
   }
-}
+}

package.json

@@ -5,14 +5,23 @@ import type {
   SplineEvent,
   SplineEventName,
 } from '@splinetool/runtime';
+import mergeRefs from 'react-merge-refs';
 
 export type { SPEObject, SplineEvent, SplineEventName };
 
-export interface SplineProps {
+type CanvasAttributes = React.CanvasHTMLAttributes<HTMLCanvasElement>;
+export interface SplineProps
+  extends Omit<
+    CanvasAttributes,
+    | 'onLoad'
+    | 'onMouseDown'
+    | 'onMouseUp'
+    | 'onMouseHover'
+    | 'onKeyDown'
+    | 'onKeyUp'
+    | 'onWheel'
+  > {
   scene: string;
-  id?: string;
-  style?: CSSProperties;
-  className?: string;
   onLoad?: (e: Application) => void;
   onMouseDown?: (e: SplineEvent) => void;
   onMouseUp?: (e: SplineEvent) => void;
@@ -26,13 +35,11 @@ export interface SplineProps {
   autoRender?: boolean;
 }
 
-const Spline = forwardRef<HTMLDivElement, SplineProps>(
+const Spline = forwardRef<HTMLCanvasElement, SplineProps>(
   (
     {
       scene,
-      id,
       style,
-      className,
       onMouseDown,
       onMouseUp,
       onMouseHover,
@@ -44,6 +51,7 @@ const Spline = forwardRef<HTMLDivElement, SplineProps>(
       onWheel,
       onLoad,
       autoRender = false,
+      ...props
     },
     ref
   ) => {
@@ -128,16 +136,14 @@ const Spline = forwardRef<HTMLDivElement, SplineProps>(
     }, [scene]);
 
     return (
-      <div
+      <canvas
+        ref={mergeRefs<HTMLCanvasElement>([ref, canvasRef])}
         style={{
-          display: `${isLoading ? 'none' : 'flex'}`,
+          display: isLoading ? 'none' : undefined,
           ...style,
         }}
-        className={className}
-        ref={ref}
-      >
-        <canvas ref={canvasRef} id={id} />
-      </div>
+        {...props}
+      />
     );
   }
 );