From e0c9626d6886caedb2b7898f7365efc94a862d02 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Wed, 3 Aug 2022 11:22:03 -0400
Subject: [PATCH] dev: Add "reading obj value" playground test

---
 .../src/tests/reading-obj-value/index.tsx     |  66 ++++++++
 ...ading obj value.theatre-project-state.json | 156 ++++++++++++++++++
 2 files changed, 222 insertions(+)
 create mode 100644 packages/playground/src/tests/reading-obj-value/index.tsx
 create mode 100644 packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json

diff --git a/packages/playground/src/tests/reading-obj-value/index.tsx b/packages/playground/src/tests/reading-obj-value/index.tsx
new file mode 100644
index 0000000..4886def
--- /dev/null
+++ b/packages/playground/src/tests/reading-obj-value/index.tsx
@@ -0,0 +1,66 @@
+import studio from '@theatre/studio'
+import {getProject, types} from '@theatre/core'
+import state from './reading obj value.theatre-project-state.json'
+studio.initialize({usePersistentStorage: false})
+
+const project = getProject('reading obj value', {state})
+const TOTAL_ELEMENTS = 300
+const TOTAL_ELEMENTS_R = 1 / TOTAL_ELEMENTS
+const playbackControlObj = project
+  .sheet('controls sheet')
+  .object('playback control', {
+    interval: types.number(50, {
+      range: [1, 20000],
+    }),
+  })
+const elements = new Array(TOTAL_ELEMENTS).fill(0).map((_, idx) => {
+  const sheet = project.sheet('sample sheet', `#${idx}`)
+  const obj = sheet.object('sample object', {
+    position: {
+      x: 0,
+      y: 0,
+    },
+  })
+
+  const el = document.createElement('div')
+
+  Object.assign(el.style, {
+    position: 'absolute',
+    height: '2rem',
+    width: '2rem',
+    borderRadius: '50%',
+    background: `hsl(${idx * 360 * TOTAL_ELEMENTS_R}, 100%, 80%)`,
+    left: 'var(--x)',
+    top: 'var(--y)',
+  })
+
+  document.body.appendChild(el)
+
+  return {el, sheet, obj}
+})
+
+project.ready.then(() => {
+  // select the playback controls obj so it shows as a tweakable control
+  studio.setSelection([playbackControlObj])
+  for (let i = 0; i < elements.length; i++) {
+    const sheet = elements[i].sheet
+    sheet.sequence.position = i * TOTAL_ELEMENTS_R * 5
+    sheet.sequence.play({
+      iterationCount: Infinity,
+    })
+  }
+})
+
+function render() {
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i]
+    // read directly from value to test keepHot from https://linear.app/theatre/issue/P-217/if-objvalue-is-read-make-sure-its-derivation-remains-hot-for-a-while
+    const value = element.obj.value
+    element.el.style.setProperty('--x', value.position.x + 'px')
+    element.el.style.setProperty('--y', value.position.y + 'px')
+  }
+
+  setTimeout(render, playbackControlObj.value.interval)
+}
+
+render()
diff --git a/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json b/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json
new file mode 100644
index 0000000..dcb4d9b
--- /dev/null
+++ b/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json	
@@ -0,0 +1,156 @@
+{
+  "sheetsById": {
+    "sample sheet": {
+      "staticOverrides": {
+        "byObject": {
+          "sample object": {
+            "position": {
+              "x": 303,
+              "y": 268
+            },
+            "interval": 50
+          }
+        }
+      },
+      "sequence": {
+        "subUnitsPerUnit": 30,
+        "length": 10,
+        "type": "PositionalSequence",
+        "tracksByObject": {
+          "sample object": {
+            "trackData": {
+              "2LcFioJysu": {
+                "type": "BasicKeyframedTrack",
+                "__debugName": "sample object:[\"position\",\"x\"]",
+                "keyframes": [
+                  {
+                    "id": "Kxy5pUojNt",
+                    "position": 0,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 303
+                  },
+                  {
+                    "id": "Gw4Mws7OD9",
+                    "position": 1.833,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 30.799745441261848
+                  },
+                  {
+                    "id": "Hf8yST9Wh5",
+                    "position": 8,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 414
+                  },
+                  {
+                    "id": "yVYv4gA4oO",
+                    "position": 10,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 303
+                  }
+                ]
+              },
+              "oWt_kxiglj": {
+                "type": "BasicKeyframedTrack",
+                "__debugName": "sample object:[\"position\",\"y\"]",
+                "keyframes": [
+                  {
+                    "id": "idPYVcMMFV",
+                    "position": 0,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 268
+                  },
+                  {
+                    "id": "DkaWGJJs5y",
+                    "position": 3.1,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 136.76766033714398
+                  },
+                  {
+                    "id": "wSMOxRFOHI",
+                    "position": 5,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 518
+                  },
+                  {
+                    "id": "iurvWeyPBD",
+                    "position": 7.3,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 274.6142665912034
+                  },
+                  {
+                    "id": "9IRlJBphrf",
+                    "position": 10,
+                    "connectedRight": true,
+                    "handles": [
+                      0.5,
+                      1,
+                      0.5,
+                      0
+                    ],
+                    "value": 268
+                  }
+                ]
+              }
+            },
+            "trackIdByPropPath": {
+              "[\"position\",\"x\"]": "2LcFioJysu",
+              "[\"position\",\"y\"]": "oWt_kxiglj"
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": [
+    "B_AcNZ7EnqbSzdJj"
+  ]
+}
\ No newline at end of file