update to latest koestlich version

coconut-xr · Jul 25, 2023 · 1db564d · 1db564d
1 parent dbc69ba
commit 1db564d
Show file tree

Hide file tree

Showing 7 changed files with 1,036 additions and 1,373 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coconut-xr/input",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "homepage": "https://coconut-xr.github.io/input",
   "license": "SEE LICENSE IN LICENSE",
   "description": "input fields in 3D UIs for @coconut-xr/koestlich",
@@ -26,31 +26,31 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "check": "run-s check:prettier check:eslint",
-    "check:prettier": "prettier --check src/**/*.{ts,tsx}",
+    "check:prettier": "prettier --check src/**/*.ts",
     "check:eslint": "eslint src",
     "fix": "run-s fix:prettier fix:eslint",
-    "fix:prettier": "prettier --write src/**/*.{ts,tsx}",
+    "fix:prettier": "prettier --write src/**/*.ts",
     "fix:eslint": "eslint src --fix"
   },
   "devDependencies": {
-    "@react-three/fiber": "^8.9.1",
-    "@types/react": "^18.0.26",
-    "@types/three": "^0.146.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.1",
-    "@typescript-eslint/parser": "^5.45.1",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "@react-three/fiber": "^8.13.5",
+    "@types/react": "^18.2.16",
+    "@types/three": "^0.154.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.0",
+    "prettier": "^3.0.0",
     "react": "^18.2.0",
-    "three": "^0.147.0",
-    "typescript": "^4.9.3",
-    "@coconut-xr/koestlich": "0.0.2"
+    "three": "^0.154.0",
+    "typescript": "^5.1.6",
+    "@coconut-xr/koestlich": "0.3.2"
   },
   "peerDependencies": {
-    "@coconut-xr/koestlich": "*"
+    "@coconut-xr/koestlich": ">=0.3.0"
   }
 }
diff --git a/src/area.ts b/src/area.ts
@@ -2,9 +2,8 @@ import { GlyphProperties, getPropertyChanges } from "@coconut-xr/glyph";
 import {
   buildComponent,
   buildRoot,
-  ContainerProperties,
+  containerDefaults,
   flexAPI,
-  InvertOptional,
   resolveGlyphWrapper,
   textDefaults,
   TextProperties,
@@ -46,6 +45,7 @@ export function useTextArea(
     horizontalAlign,
     verticalAlign,
     value,
+    material,
     ...props
   }: TextAreaProperties,
 ): undefined {
@@ -75,10 +75,11 @@ export function useTextArea(
     node.target.opacity.set(opacity ?? textDefaults["opacity"]);
     node.onChange = props.onChange;
 
+    node.setBackgroundMaterialClass(material ?? containerDefaults["material"]);
+
     const { hasStructuralChanges } = getPropertyChanges(node.glyphProperties, glyphProperties);
 
     node.updateGlyphProperties(node.text ?? "", glyphProperties, hasStructuralChanges);
-
     node.setProperties(props);
 
     if (value != null) {

diff --git a/src/input.ts b/src/input.ts
@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { GlyphProperties, getPropertyChanges } from "@coconut-xr/glyph";
 import {
   buildComponent,
   buildRoot,
+  containerDefaults,
   ContainerProperties,
   flexAPI,
   InvertOptional,
@@ -14,12 +16,9 @@ import {
   useFont,
 } from "@coconut-xr/koestlich";
 import { useEffect, useMemo } from "react";
-import { Color, PlaneGeometry } from "three";
+import { Color } from "three";
 import { TextHandler } from "./text-handler.js";
 
-const geometry = new PlaneGeometry();
-geometry.translate(0.5, -0.5, 0);
-
 export type InputState = TextState;
 
 function createTextInputElement() {
@@ -60,6 +59,7 @@ export function useInput(
     horizontalAlign,
     verticalAlign,
     value,
+    material,
     ...props
   }: InputProperties,
 ): undefined {
@@ -89,10 +89,11 @@ export function useInput(
     node.target.opacity.set(opacity ?? inputDefaults["opacity"]);
     node.onChange = props.onChange;
 
+    node.setBackgroundMaterialClass(material ?? containerDefaults["material"]);
+
     const { hasStructuralChanges } = getPropertyChanges(node.glyphProperties, glyphProperties);
 
     node.updateGlyphProperties(node.text ?? "", glyphProperties, hasStructuralChanges);
-
     node.setProperties(props);
 
     if (value != null) {

diff --git a/src/text-handler.ts b/src/text-handler.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { InstancedGlypthMesh, measureGlyph } from "@coconut-xr/glyph";
 import { TextNode, TextState } from "@coconut-xr/koestlich";
 import { ThreeEvent } from "@react-three/fiber/dist/declarations/src/core/events.js";
@@ -12,7 +14,7 @@ export type TextAreaState = TextState;
 function getCursorPosition(e: ThreeEvent<PointerEvent>): number {
   const intersection = e.intersections.find((i) => i.object instanceof InstancedGlypthMesh);
   const charIdx = intersection?.instanceId ?? 0;
-  const endOffset = (intersection?.uv2?.x ?? 0) < 0.5 ? 0 : 1;
+  const endOffset = ((intersection as any)?.uv2?.x ?? 0) < 0.5 ? 0 : 1;
   return charIdx + endOffset;
 }
 

diff --git a/tests/manual/app.tsx b/tests/manual/app.tsx
@@ -1,8 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/no-unknown-property */
 import React, { Suspense } from "react";
 import { Text, DefaultStyleProvider, clippingEvents, RootContainer } from "@coconut-xr/koestlich";
 import { Canvas } from "@react-three/fiber";
-import { Fullscreen } from "./fullscreen";
 import { OrbitControls } from "@react-three/drei";
 import { MOUSE } from "three";
 import { loadYoga } from "@coconut-xr/flex";
@@ -24,64 +24,57 @@ export default function Index() {
     >
       <directionalLight shadow-mapSize={2048} castShadow intensity={0.5} position={[0.1, 0.1, 1]} />
       <ambientLight color={0xffffff} intensity={0.5} />
-      <Fullscreen
-        camera={(ratio) => (
-          <OrbitControls
-            target={[0.5 * ratio, -0.5, 0]}
-            enableZoom={false}
-            enablePan={false}
-            minDistance={1}
-            maxDistance={1}
-            mouseButtons={{
-              LEFT: MOUSE.RIGHT,
-              MIDDLE: MOUSE.MIDDLE,
-              RIGHT: MOUSE.LEFT,
-            }}
-          />
-        )}
+      <OrbitControls
+        target={[0, 0, 0]}
+        enableZoom={false}
+        enablePan={false}
+        minDistance={1}
+        maxDistance={1}
+        mouseButtons={{
+          LEFT: MOUSE.RIGHT,
+          MIDDLE: MOUSE.MIDDLE,
+          RIGHT: MOUSE.LEFT,
+        }}
+      />
+      <RootContainer
+        loadYoga={loadYoga}
+        border={0.02}
+        padding={0.03}
+        borderRadius={0.1}
+        overflow="scroll"
+        borderColor={0xffffff}
+        id="root"
+        sizeX={1}
+        sizeY={1}
       >
-        {(width, height) => (
-          <RootContainer
-            loadYoga={loadYoga}
-            backgroundColor={0}
-            border={0.02}
-            padding={0.03}
-            borderRadius={0.1}
-            overflow="scroll"
-            borderColor={0xffffff}
-            backgroundOpacity={1}
-            id="root"
-            width={width}
-            height={height}
-          >
-            <DefaultStyleProvider<any, typeof tailwindAPI> bgColor={0x0}>
-              <Suspense>
-                <Text color="white" onClick={() => setText("hallo")}>
-                  Test
-                </Text>
-              </Suspense>
-              <Suspense fallback={null}>
-                <Input
-                  color={0xffff}
-                  value={text}
-                  border={0.0025}
-                  onChange={setText}
-                  borderColor={0xffff00}
-                ></Input>
-              </Suspense>
-              <Suspense fallback={null}>
-                <TextArea
-                  color={0xffff}
-                  value={text}
-                  onChange={setText}
-                  border={0.0025}
-                  borderColor={0xffff00}
-                />
-              </Suspense>
-            </DefaultStyleProvider>
-          </RootContainer>
-        )}
-      </Fullscreen>
+        <DefaultStyleProvider<any, typeof tailwindAPI> bgColor={0x0}>
+          <Suspense>
+            <Text backgroundColor="red" color="white" onClick={() => setText("hallo")}>
+              Test
+            </Text>
+          </Suspense>
+          <Suspense fallback={null}>
+            <Input
+              color={0xffff}
+              value={text}
+              border={0.0025}
+              onChange={setText}
+              borderColor={0xffff00}
+              backgroundColor="red"
+            ></Input>
+          </Suspense>
+          <Suspense fallback={null}>
+            <TextArea
+              color={0xff0000}
+              value={text}
+              onChange={setText}
+              border={0.0025}
+              borderColor={0xffff00}
+              backgroundColor={0xffffff}
+            />
+          </Suspense>
+        </DefaultStyleProvider>
+      </RootContainer>
     </Canvas>
   );
 }