refactor(65%): playground

playground/src/App.vue

@@ -17,6 +17,11 @@ import {
  CommandItem,
  CommandList,
 } from './components/ui/command'
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from './components/ui/resizable'
 import SettingDash from './components/SettingDash.vue'
 import { init, process } from './process'
 
@@ -47,12 +52,20 @@ export default function (nc, app) {
 const width = ref(window.innerWidth / 2)
 const height = ref(width.value / 16 * 9)
 
+const realWidth = ref(1600)
+const realHeight = ref(900)
+
 const status = ref<'play' | 'pause'>('pause')
 
 const canvas = ref<HTMLCanvasElement>()
 
-let back = () => {}
-let forward = () => {}
+let back = () => { }
+let forward = () => { }
+
+const fps = ref<number>()
+const elapsed = ref<number>()
+
+let set: (skia: string) => void
 
 onMounted(() => {
  const editor = monaco.editor.create(editorElement.value, {
@@ -62,20 +75,26 @@ onMounted(() => {
  fontSize: 16,
  })
 
- init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm', canvas.value)
- .then((app) => {
- watch(status, (v) => {
- if (v === 'play') {
- process(editor.getValue(), app)
+ function set(skia: string) {
+ init(skia, canvas.value)
+ .then((app) => {
+ watch(status, (v) => {
+ if (v === 'play') {
+ process(editor.getValue(), app)
+ }
+ })
+ back = () => {
+ app.scene.elapsed -= 1
  }
+ forward = () => {
+ app.scene.elapsed += 1
+ }
+ setInterval(() => fps.value = app.reactiveFramePerSecond, 1000)
+ setInterval(() => elapsed.value = app.scene.elapsed, 10)
  })
- back = () => {
- app.scene.elapsed -= 1
- }
- forward = () => {
- app.scene.elapsed += 1
- }
- })
+ }
+
+ set('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
 })
 </script>
 
@@ -87,7 +106,13 @@ onMounted(() => {
  <span class="float-left font-thin text-2xl p-2">Newcar Playground</span>
  </div>
  <div class="float-right p-3">
- <SettingDash>
+ <SettingDash
+ skia="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm" :width="1600" :height="900" :action="(skia, width, height) => {
+ realWidth = width
+ realHeight = height
+ set(skia)
+ }"
+ >
  <Settings class="float-left w-6 h-6 mx-3 text-gray-500 hover:text-black" />
  </SettingDash>
  <Share2 class="float-left w-6 h-6 mx-3 text-gray-500 hover:text-black" />
@@ -137,12 +162,12 @@ onMounted(() => {
  <div ref="editorElement" class="w-[50%] h-full" />
  <div class="w-[50%] h-full">
  <canvas
- ref="canvas" width="1600" height="900" class="bg-black" :style="{
+ ref="canvas" :width="realWidth" :height="realHeight" class="bg-black" :style="{
  width: `${width}px`,
  height: `${height}px`,
  }"
  />
- <div class="text-center pt-10">
+ <div class="text-center pt-10 pb-5">
  <Button class="bg-white border hover:bg-gray-200" @click="back()">
  <StepBack class="text-gray-500" />
  </Button>
@@ -154,6 +179,27 @@ onMounted(() => {
  <StepForward class="text-gray-500" />
  </Button>
  </div>
+ <div>
+ <ResizablePanelGroup direction="horizontal" class="h-full">
+ <ResizablePanel>
+ <div class="text-center">
+ Info
+ </div>
+ <hr>
+ <div class="float-left">
+ <p>FPS: {{ fps }}</p>
+ <p>ELAPSED: {{ elapsed }}</p>
+ </div>
+ </ResizablePanel>
+ <ResizableHandle with-handle />
+ <ResizablePanel>
+ <div class="text-center">
+ Options
+ </div>
+ <hr>
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ </div>
  </div>
  </div>
  </div>

playground/src/components/SettingDash.vue

@@ -1,9 +1,22 @@
 <script setup lang="ts">
+import { defineProps, ref } from 'vue'
 import {
  Dialog,
  DialogContent,
  DialogTrigger,
 } from './ui/dialog'
+import { Input } from './ui/input'
+
+const props = defineProps<{
+ skia: string
+ width: number
+ height: number
+ action: (skia: string, width: number, height: number) => void
+}>()
+
+const skia = ref<string>(props.skia)
+const width = ref<string>(props.width.toString())
+const height = ref<string>(props.height.toString())
 </script>
 
 <template>
@@ -12,7 +25,22 @@ import {
  <slot />
  </DialogTrigger>
  <DialogContent class="sm:max-w-[425px]">
- www
+ <div class="mx-5 flex flex-col gap-5">
+ <div class="py-1 flex flex-col">
+ Skia (CanvasKit-WASM) location: <Input v-model="skia" />
+ </div>
+ <div class="py-1">
+ Width: <Input v-model="width" />
+ </div>
+ <div class="py-1 flex flex-col">
+ Height: <Input v-model="height" />
+ </div>
+ </div>
+ <div class="text-center">
+ <Button @click="props.action(skia, Number(width), Number(height))">
+ Submit
+ </Button>
+ </div>
  </DialogContent>
  </Dialog>
 </template>

playground/src/components/ui/input/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+ defaultValue?: string | number
+ modelValue?: string | number
+ class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+ (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+ passive: true,
+ defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+ <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>

playground/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

playground/src/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { GripVertical } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+ const { class: _, ...delegated } = props
+ return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+ <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+ <template v-if="props.withHandle">
+ <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+ <GripVertical class="h-2.5 w-2.5" />
+ </div>
+ </template>
+ </SplitterResizeHandle>
+</template>

playground/src/components/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+ const { class: _, ...delegated } = props
+ return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+ <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+ <slot />
+ </SplitterGroup>
+</template>

playground/src/components/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'