feat: use UI createElement

Author: FliPPeDround

examples/vue3/src/App.vue

@@ -1,18 +1,47 @@
 <script setup lang="ts">
 import { LeaferApp } from 'leafer-vue'
+import { ref } from 'vue'
+
+const x = ref(1)
+function rightMove() {
+  x.value += 10
+}
 </script>
 
 <template>
-  <LeaferApp>
-    <template
+  <div style="display: flex;">
+    <LeaferApp>
+      <!-- <template
       v-for="row in 1000"
       :key="row"
-    >
+      >
       <Rect
         v-for="col in 1000"
         :key="col"
         :x="(row - 1) * 20" :y="(col - 1) * 20"
       />
-    </template>
-  </LeaferApp>
+    </template> -->
+
+      <Box>
+        <Rect
+          :x="x"
+          :width="20"
+          :height="20"
+          fill="red"
+        />
+        <Rect
+          :x="x + 20"
+          :width="20"
+          :height="20"
+          fill="red"
+        />
+        <Text :x="x + 40" fill="red" text="aa">
+          aaaa
+        </Text>
+      </Box>
+    </LeaferApp>
+    <button @click="rightMove">
+      rightMove
+    </button>
+  </div>
 </template>

packages/vue3/components/application/index.ts

@@ -7,7 +7,7 @@ export default defineComponent({
     const canvas = ref<HTMLCanvasElement>()
 
     function mount() {
-      const context = new Leafer({ view: window })
+      const context = new Leafer({ view: canvas.value })
 
       const app = createApp({
         render: () => renderSlot(slots, 'default'),

packages/vue3/renderer/renderer.ts

@@ -1,45 +1,16 @@
-import { Rect, Text } from 'leafer-ui'
+import { UI } from 'leafer-ui'
 import { createRenderer } from 'vue'
 
 // export function createRenderer() {
 
 // }
 
-export const renderer = createRenderer<Rect, Rect>({
+export const renderer = createRenderer<UI, UI>({
   createElement(type) {
-    let element
-    switch (type) {
-      case 'Rect':
-        element = new Rect({
-          width: 15,
-          height: 15,
-          fill: 'rgb(50,205,121)',
-        })
-        break
-
-      default:
-        throw new Error(`无${type}`)
-        break
-    }
-    return element
+    return UI.one({ tag: type })
   },
   patchProp(el, key, prevValue, nextValue) {
-    switch (key) {
-      case 'fill' :
-        el.fill = nextValue
-        break
-
-      case 'x':
-        el.x = nextValue
-        break
-
-      case 'y':
-        el.y = nextValue
-        break
-
-      default:
-        break
-    }
+    el[key] = nextValue
   },
   insert(el, parent, anchor) {
     if (el && parent)
@@ -50,10 +21,10 @@ export const renderer = createRenderer<Rect, Rect>({
       el.parent.remove(el)
   },
   createText(text) {
-    return new Text({ text })
+    return new Error('a') as unknown as UI
   },
   createComment(text) {
-    return new Text({ text })
+    return new Error('a') as unknown as UI
   },
   setText(node, text) {
 
@@ -62,9 +33,24 @@ export const renderer = createRenderer<Rect, Rect>({
 
   },
   parentNode(node) {
-    return node.parent as unknown as Rect
+    return node.parent
   },
   nextSibling(node) {
     return null
   },
 })
+
+// export function createRenderer(options: { prefix?: string } = {}) {
+//   const { createElement, setText, ...nodeOps } = _nodeOps
+//   const { prefix = 'pixi' } = options
+//   const rendererOptions = rendererWithCapture({
+//     createElement: (...args) => createElement(prefix, ...args),
+//     setElementText: (...args) => setText(prefix, ...args),
+//     setText: (...args) => setText(prefix, ...args),
+//     patchProp,
+//     ...nodeOps,
+//   })
+//   return _createRenderer<Container, Container>(rendererOptions)
+// }
+
+// export const createApp = renderer.createApp