feat: added Color Space option to Rendering panel (#24)

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@motion-canvas/ui",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@motion-canvas/ui",
-      "version": "1.5.1",
+      "version": "1.7.0",
       "license": "MIT",
       "devDependencies": {
-        "@motion-canvas/core": "^6.0.0",
+        "@motion-canvas/core": "^9.0.0",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
@@ -264,15 +264,16 @@
       "dev": true
     },
     "node_modules/@motion-canvas/core": {
-      "version": "6.0.0",
-      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/6.0.0/fa3060dd59ce81b08c9350fdaaea95348ae1d2a68bf97527c339f1f5737f0d8b",
-      "integrity": "sha512-gZZrTIQ9ixI7Bx23EGjXTFecmnvqJOo8ns5ay3OGEq3ZSUepNNoMWa7fyz4Wt/Rmi7VyoisUAlPgG2On5Y7Gdw==",
+      "version": "9.0.0",
+      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/9.0.0/529f396054e82235c17f523026b6eb09488202ca6c22fad42429e1b8964c886d",
+      "integrity": "sha512-cczSEgOAbPXQI4gYhBHnq/vRK83Bbq4Suf1Oa4Ll3Fx2g4/UB6MTN1mGVvdrlhFTDLhStu+tpMIJqD6Vl1Mtgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prismjs": "^1.26.0",
         "@types/three": "^0.141.0",
         "@types/webpack-env": "^1.17.0",
+        "colorjs.io": "^0.3.0",
         "html-webpack-plugin": "^5.5.0",
         "image-size": "^1.0.1",
         "konva": "^8.3.9",
@@ -2117,6 +2118,12 @@
       "integrity": "sha512-rHDY1i4V4JBCXHnHwaVyA202CKSj2kUrjI5cSJQbTdnFeI4ShV3e19Fe7EQfzL2tjSrvYyWugdGAtEc1lLvGDg==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.3.0.tgz",
+      "integrity": "sha512-F1FD3/LWZDjd66KUAVErCLDrij/ukHntf5bWtfhrnSV2IT5ZUivuv7KKW3QbZLbjKPTsVPjmxeugQgnNYWMdrA==",
+      "dev": true
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -11269,14 +11276,15 @@
       "dev": true
     },
     "@motion-canvas/core": {
-      "version": "6.0.0",
-      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/6.0.0/fa3060dd59ce81b08c9350fdaaea95348ae1d2a68bf97527c339f1f5737f0d8b",
-      "integrity": "sha512-gZZrTIQ9ixI7Bx23EGjXTFecmnvqJOo8ns5ay3OGEq3ZSUepNNoMWa7fyz4Wt/Rmi7VyoisUAlPgG2On5Y7Gdw==",
+      "version": "9.0.0",
+      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/9.0.0/529f396054e82235c17f523026b6eb09488202ca6c22fad42429e1b8964c886d",
+      "integrity": "sha512-cczSEgOAbPXQI4gYhBHnq/vRK83Bbq4Suf1Oa4Ll3Fx2g4/UB6MTN1mGVvdrlhFTDLhStu+tpMIJqD6Vl1Mtgg==",
       "dev": true,
       "requires": {
         "@types/prismjs": "^1.26.0",
         "@types/three": "^0.141.0",
         "@types/webpack-env": "^1.17.0",
+        "colorjs.io": "^0.3.0",
         "html-webpack-plugin": "^5.5.0",
         "image-size": "^1.0.1",
         "konva": "^8.3.9",
@@ -12747,6 +12755,12 @@
       "integrity": "sha512-rHDY1i4V4JBCXHnHwaVyA202CKSj2kUrjI5cSJQbTdnFeI4ShV3e19Fe7EQfzL2tjSrvYyWugdGAtEc1lLvGDg==",
       "dev": true
     },
+    "colorjs.io": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.3.0.tgz",
+      "integrity": "sha512-F1FD3/LWZDjd66KUAVErCLDrij/ukHntf5bWtfhrnSV2IT5ZUivuv7KKW3QbZLbjKPTsVPjmxeugQgnNYWMdrA==",
+      "dev": true
+    },
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",

package.json

@@ -27,7 +27,7 @@
     "dist/main.js"
   ],
   "devDependencies": {
-    "@motion-canvas/core": "^6.0.0",
+    "@motion-canvas/core": "^9.0.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",

src/components/sidebar/Rendering.tsx

@@ -1,20 +1,23 @@
 import {usePlayer, usePlayerState, useSubscribable} from '../../hooks';
-import {useMemo} from 'preact/hooks';
 import {Button, Group, Input, Label, Select} from '../controls';
 import {Pane} from '../tabs';
+import type {CanvasColorSpace} from '@motion-canvas/core/lib/types';
 
 export function Rendering() {
   const player = usePlayer();
   const state = usePlayerState();
   const {width, height} = player.project.getSize();
 
-  const scales = useMemo(() => {
-    return [
-      {value: 0.5, text: `0.5x (Half)`},
-      {value: 1, text: `1.0x (Full)`},
-      {value: 2, text: `2.0x (Double)`},
-    ];
-  }, [width, height]);
+  const scales = [
+    {value: 0.5, text: `0.5x (Half)`},
+    {value: 1, text: `1.0x (Full)`},
+    {value: 2, text: `2.0x (Double)`},
+  ];
+
+  const colorSpaces = [
+    {value: 'srgb', text: 'sRGB'},
+    {value: 'display-p3', text: 'DCI-P3'},
+  ];
 
   useSubscribable(
     player.onFrameRendered,
@@ -103,6 +106,14 @@ export function Rendering() {
           onChange={value => player.setScale(value)}
         />
       </Group>
+      <Group>
+        <Label>Color Space</Label>
+        <Select
+          options={colorSpaces}
+          value={state.colorSpace}
+          onChange={value => player.setColorSpace(value as CanvasColorSpace)}
+        />
+      </Group>
       <Group>
         <Label />
         <Button main onClick={() => player.toggleRendering()}>

src/components/viewport/View.tsx

@@ -9,6 +9,7 @@ import {
   useSize,
   useStorage,
   useSubscribable,
+  usePlayerState,
 } from '../../hooks';
 import {Debug} from './Debug';
 import {Grid} from './Grid';
@@ -25,6 +26,7 @@ export function View() {
   const viewportRef = useRef<HTMLCanvasElement>();
   const overlayRef = useRef<HTMLDivElement>();
   const size = useSize(containerRef);
+  const playerState = usePlayerState();
 
   const [state, setState] = useStorage<ViewportState>('viewport', {
     width: 1920,
@@ -60,7 +62,7 @@ export function View() {
 
   useEffect(() => {
     player.project.setCanvas(viewportRef.current);
-  }, [viewportRef.current]);
+  }, [playerState.colorSpace]);
 
   useSubscribable(
     player.onReloaded,
@@ -171,7 +173,7 @@ export function View() {
           }}
           id={'viewport'}
         >
-          <canvas ref={viewportRef} />
+          <canvas key={playerState.colorSpace} ref={viewportRef} />
         </div>
         <Grid />
         <Debug />