feat(mod): mod-text-editor

examples/chart.test.mjs

@@ -3,7 +3,7 @@ import { Color } from 'newcar'
 import * as nc from 'newcar'
 import { BarChart, BubbleChart, ChartDataUnit, ChartUtil, LineChart, MixedChart } from '@newcar/mod-chart'
 
-await nc.useFont('Roboto-Regular.ttf')
+await nc.useFont('default.ttf')
 
 const engine = await new nc.CarEngine().init(
   './node_modules/canvaskit-wasm/bin/canvaskit.wasm',

examples/performance.ts

@@ -2,7 +2,7 @@ import * as nc from 'newcar'
 import * as mt from '@newcar/mod-math'
 import * as gm from '@newcar/mod-geometry'
 
-await nc.useFont('./Roboto-Regular.ttf')
+await nc.useFont('./default.ttf')
 
 const wid = new nc.Widget()
 for (let i = 0; i< 1000; i++) {

examples/scene1.ts

@@ -1,11 +1,12 @@
-import {Circle, createScene, Rect, Widget} from 'newcar'
+import {Circle, Color, createScene, move, Rect, Widget, useFont} from 'newcar'
 import TextEditor from "@newcar/mod-text-editor";
-import * as nc from "newcar";
 
-await nc.useFont('./Roboto-Regular.ttf')
+await useFont('./default.ttf')
 
 export default createScene(
-	new TextEditor('Text', {
-		dragable: true
-	})
+  new TextEditor('Hello', {
+    x: 100,
+    y: 100,
+  })
+	// new Widget()
 )

mods/mod-text-editor/src/index.ts

@@ -1,62 +1,62 @@
-import {click, Line, mouseDown, mouseMove, TextOptions, TextStyle} from '@newcar/basic'
-import { Text, mouseMoveOnCanvas } from '@newcar/basic'
-import type { Ref } from '@newcar/core'
-import { ref } from '@newcar/core'
-import {CanvasKit} from "canvaskit-wasm";
+import type { TextOptions, TextStyle } from '@newcar/basic'
+import { Text } from '@newcar/basic'
+import { changed } from '@newcar/core'
+import type { Canvas, CanvasKit } from 'canvaskit-wasm'
 
 export interface TextEditorOptions extends TextOptions {
   style?: TextEditorStyle
-  editable?: boolean
-  selectable?: boolean
 }
 
 export interface TextEditorStyle extends TextStyle {}
 
 export default class TextEditor extends Text {
-  editable: Ref<boolean>
-  selectable: Ref<boolean>
-
-  private isInText = false
-  private cursor: Line
-  private mouseStart: [number, number]
-  private mouseEnd: [number, number]
+  element: HTMLInputElement = document.createElement('input')
 
   constructor(originText: string, options?: TextEditorOptions) {
     super(originText, options)
+  }
 
-    this.editable = ref(options.editable ?? true)
-    this.selectable = ref(options.selectable ?? true)
+  init(ck: CanvasKit) {
+    super.init(ck)
 
-    this.cursor = new Line([0, 0], [0, 100]).hide()
-    this.add(this.cursor)
+    this.element.style.width = `${this.calculateRange()[2]}px`
+    this.element.style.height = `${this.calculateRange()[3]}px`
+  }
 
-    this.on(mouseMoveOnCanvas, (widget, x, y) => {
-      if (this.calculateIn(x, y)) {
-        console.log('move in!')
-        document.body.style.cursor = 'text'
-      }
-      else {
-        document.body.style.cursor = 'auto'
-      }
+  setElement(element: HTMLCanvasElement) {
+    super.setElement(element)
+    element.parentElement.appendChild(this.element)
+    this.element.style.position = 'absolute'
+    this.element.style.backgroundColor = 'rgba(0,0,0,0)'
+    this.element.style.left = `${this.x.value + element.getBoundingClientRect().left}px`
+    this.element.style.top = `${this.y.value + element.getBoundingClientRect().top}px`
+    this.element.style.border = 'none'
+    this.element.style.fontSize = `${this.style.fontSize.value}px`
+    this.element.style.color = this.style.color.toString()
+
+    changed(this.x, (v) => {
+      this.element.style.left = `${v.value + element.clientLeft}px`
     })
-
-    this.on(mouseDown, () => {
-      this.isInText = true
-      console.log('click in!')
+    changed(this.y, (v) => {
+      this.element.style.top = `${v.value + element.clientTop}px`
     })
-
-    this.on(click, (widget, x, y) => {
-      this.cursor.from.value = [x, this.calculateRange()[1]]
-      this.cursor.to.value = [x, this.calculateRange()[3]]
-      this.cursor.show()
+    changed(this.text, () => {
+      this.element.style.width = `${this.calculateRange()[2]}px`
+      this.element.style.height = `${this.calculateRange()[3]}px`
     })
 
-    this.on(mouseMove, (x, y) => {
-      this.builder.getText()
+    this.element.addEventListener('click', () => {
+      this.element.value = this.text.value
+      this.hide()
+    })
+    this.element.addEventListener('blur', () => {
+      this.text.value = this.element.value
+      this.show()
+      this.element.value = ''
     })
   }
 
-  init(ck: CanvasKit) {
-    super.init(ck)
+  draw(canvas: Canvas) {
+    super.draw(canvas)
   }
 }

packages/core/src/app.ts

@@ -115,6 +115,7 @@ export class App {
     }
 
     app.scene.root.canvasSize = [app.element.width, app.element.height]
+    canvas.clear(app.ck.BLACK)
     app.scene.root.update(
       app.scene.elapsed,
       app.ck,
@@ -195,9 +196,12 @@ export class App {
    * @returns this
    */
   setBackgroundColor(color: Color | 'transparent'): this {
-    color !== 'transparent'
-      ? (this.element.style.backgroundColor = color.toString())
-      : (this.element.style.backgroundColor = '')
+    if (color !== 'transparent') {
+      this.element.style.backgroundColor = color.toString()
+    }
+    else {
+      this.element.style.backgroundColor = ''
+    }
 
     return this
   }