Color picker in the code pane (#4761)

* add color plugin Signed-off-by: Jess Frazelle <github@jessfraz.com> * fixes Signed-off-by: Jess Frazelle <github@jessfraz.com> * fmt Signed-off-by: Jess Frazelle <github@jessfraz.com> * snapshot test goober Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest-8-cores) * A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest-8-cores) --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-12-11 16:45:39 -08:00
parent 7bc8bae0ec
commit f38c6b90b7
7 changed files with 438 additions and 4 deletions
--- a/e2e/playwright/snapshot-tests.spec.ts
+++ b/e2e/playwright/snapshot-tests.spec.ts
@ -1164,3 +1164,109 @@ test.fixme('theme persists', async ({ page, context }) => {
    maxDiffPixels: 100,
  })
 })
+
+test.describe('code color goober', { tag: '@snapshot' }, () => {
+  test('code color goober', async ({ page, context }) => {
+    const u = await getUtils(page)
+    await context.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `// Create a pipe using a sweep.
+
+// Create a path for the sweep.
+sweepPath = startSketchOn('XZ')
+  |> startProfileAt([0.05, 0.05], %)
+  |> line([0, 7], %)
+  |> tangentialArc({ offset = 90, radius = 5 }, %)
+  |> line([-3, 0], %)
+  |> tangentialArc({ offset = -90, radius = 5 }, %)
+  |> line([0, 7], %)
+
+sweepSketch = startSketchOn('XY')
+  |> startProfileAt([2, 0], %)
+  |> arc({
+       angleEnd = 360,
+       angleStart = 0,
+       radius = 2
+     }, %)
+  |> sweep({
+    path = sweepPath,
+  }, %)
+  |> appearance({
+       color = "#bb00ff",
+       metalness = 90,
+       roughness = 90
+     }, %)
+`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 1000 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.clearAndCloseDebugPanel()
+
+    await expect(page, 'expect small color widget').toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+  })
+
+  test('code color goober opening window', async ({ page, context }) => {
+    const u = await getUtils(page)
+    await context.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `// Create a pipe using a sweep.
+
+// Create a path for the sweep.
+sweepPath = startSketchOn('XZ')
+  |> startProfileAt([0.05, 0.05], %)
+  |> line([0, 7], %)
+  |> tangentialArc({ offset = 90, radius = 5 }, %)
+  |> line([-3, 0], %)
+  |> tangentialArc({ offset = -90, radius = 5 }, %)
+  |> line([0, 7], %)
+
+sweepSketch = startSketchOn('XY')
+  |> startProfileAt([2, 0], %)
+  |> arc({
+       angleEnd = 360,
+       angleStart = 0,
+       radius = 2
+     }, %)
+  |> sweep({
+    path = sweepPath,
+  }, %)
+  |> appearance({
+       color = "#bb00ff",
+       metalness = 90,
+       roughness = 90
+     }, %)
+`
+      )
+    })
+
+    await page.setViewportSize({ width: 1200, height: 1000 })
+
+    await u.waitForAuthSkipAppStart()
+
+    await u.openDebugPanel()
+    await u.expectCmdLog('[data-message-type="execution-done"]')
+    await u.clearAndCloseDebugPanel()
+
+    await expect(page.locator('.cm-css-color-picker-wrapper')).toBeVisible()
+
+    // Click the color widget
+    await page.locator('.cm-css-color-picker-wrapper input').click()
+
+    await expect(
+      page,
+      'expect small color widget to have window open'
+    ).toHaveScreenshot({
+      maxDiffPixels: 100,
+    })
+  })
+})