From fb51f1fdc1e962f73686eb9b4a90dd7b5e75f20a Mon Sep 17 00:00:00 2001 From: Jonas de Luna Skulberg Date: Mon, 16 Oct 2023 15:44:58 +0200 Subject: [PATCH] Update labeltext on point to work --- src/Components/Arc.ts | 7 +++++ src/Components/Label.ts | 38 +++++++++++++---------- src/Components/Line.ts | 4 +-- src/Components/Point.ts | 2 +- src/Components/Shape.ts | 17 +++++----- src/Components/Text.ts | 18 +++++++++-- src/index.ts | 69 ++++++++++++----------------------------- 7 files changed, 75 insertions(+), 80 deletions(-) diff --git a/src/Components/Arc.ts b/src/Components/Arc.ts index f92eda9..0d1c180 100644 --- a/src/Components/Arc.ts +++ b/src/Components/Arc.ts @@ -188,5 +188,12 @@ class Arc extends Component { this._text.setText(Math.round((angle * 180) / Math.PI).toString() + " °"); this._text.position.set(-60 / cameraZoom, 0, this._text.position.z); } + + public getAngle(unit = "radians"): number { + if (unit === "degrees") { + return this._calcAngle() * (180 / Math.PI); + } + return this._calcAngle(); + } } export default Arc; diff --git a/src/Components/Label.ts b/src/Components/Label.ts index 95dd946..7fa311b 100644 --- a/src/Components/Label.ts +++ b/src/Components/Label.ts @@ -8,26 +8,33 @@ import { InputPosition } from "./types"; const SCALING_FACTOR = 10; type LabelOptions = { - text: string; start: InputPosition; - deltaX?: number; - deltaY?: number; + deltaX: number; + deltaY: number; +}; + +const defaultLabelOptions: LabelOptions = { + start: new Vector2(0, 0), + deltaX: 4, + deltaY: 20, }; class Label extends Component { - position: Vector3; object: Object3D; draggable = undefined; - constructor({ - text, - start = new Vector2(0, 0), - deltaX = 20, - deltaY = 4, - }: LabelOptions) { + constructor(text: string, options?: LabelOptions) { + const { start, deltaX, deltaY } = { + ...defaultLabelOptions, + ...options, + }; super(); // set position of the point instance - this.position = toVector3(start); + this.position.set( + toVector3(start).x, + toVector3(start).y, + toVector3(start).z + ); // calculate break and end points const breakPoint = this.calculateBreakPoint(deltaX, deltaY); @@ -38,15 +45,14 @@ class Label extends Component { const line2 = new Line(breakPoint, endPoint); const textComponent = new Text(text, { color: "black", - fontSize: 22, + fontSize: 15, anchorY: "middle", anchorX: deltaX < 0 ? "right" : "left", }); - textComponent.position.set( + textComponent.setPosition([ endPoint.x + (deltaX < 0 ? -1 : 1) * 10, endPoint.y, - 0.1 - ); + ]); // Create a group to contain both lines and text this.object = new Group(); @@ -55,7 +61,7 @@ class Label extends Component { this.object.add(textComponent); // set position of the group - this.object.position.set(this.position.x, this.position.y, 0); + this.object.position.set(1, 5, 5); } private calculateEndPoint(deltaX: number, deltaY: number) { diff --git a/src/Components/Line.ts b/src/Components/Line.ts index 718f8f4..ac71f0e 100644 --- a/src/Components/Line.ts +++ b/src/Components/Line.ts @@ -160,10 +160,10 @@ class Line extends Component implements Collider { (this.geometry as LineGeometry).setPositions([ startPosition.x, startPosition.y, - 1, + 1.1, endPosition.x, endPosition.y, - 1, + 1.1, ]); } diff --git a/src/Components/Point.ts b/src/Components/Point.ts index 4719b1f..b60fecd 100644 --- a/src/Components/Point.ts +++ b/src/Components/Point.ts @@ -28,7 +28,6 @@ const defaultPointOptions = { class Point extends Component implements Collider, DragListener { dragListeners: ((point: Point) => void)[]; - constructor(x = 0, y = 0, options?: PointOptions) { super(); const { color, draggable, decimals, label, dragListeners } = { @@ -63,6 +62,7 @@ class Point extends Component implements Collider, DragListener { anchorY: "middle", anchorX: "left", position: [15, 0], + responsiveScale: false, } ); text.name = "label"; diff --git a/src/Components/Shape.ts b/src/Components/Shape.ts index f24a732..8c7c28d 100644 --- a/src/Components/Shape.ts +++ b/src/Components/Shape.ts @@ -76,7 +76,13 @@ class Polygon extends Component implements Collider, DragListener { lines.push([lastVertex, firstVertex]); lines.forEach((l) => { - group.add(new Line(l[0], l[1], { color: 0x080007, opacity: opacity })); + group.add( + new Line(l[0], l[1], { + color: 0x080007, + opacity: opacity, + draggable: undefined, + }) + ); }); this.add(group); this.object = group; @@ -127,15 +133,6 @@ class Polygon extends Component implements Collider, DragListener { toVector2(position).y, this.position.z ); - this.children.forEach((child) => { - if (child instanceof Object3D) { - child.position.set( - toVector2(position).x, - toVector2(position).y, - this.position.z - ); - } - }); } /* update(camera: OrthographicCamera) { diff --git a/src/Components/Text.ts b/src/Components/Text.ts index bc7a318..ead243b 100644 --- a/src/Components/Text.ts +++ b/src/Components/Text.ts @@ -13,6 +13,7 @@ type TextOptions = { anchorY?: "top" | "middle" | "bottom"; anchorX?: "left" | "center" | "right"; weight?: fontWeight; + responsiveScale?: boolean; }; const defaultTextOptions = { @@ -22,6 +23,7 @@ const defaultTextOptions = { anchorX: "left", anchorY: "bottom", weight: "regular" as fontWeight, + responsiveScale: true, }; const fontMap = { @@ -36,11 +38,20 @@ type TroikaTextType = InstanceType; class Text extends Component implements Collider { draggable = undefined; renderText: TroikaTextType; + responsiveScale: boolean; constructor(text?: string, options?: TextOptions) { super(); - const { position, color, fontSize, anchorX, anchorY, weight } = { + const { + position, + color, + fontSize, + anchorX, + anchorY, + weight, + responsiveScale, + } = { ...defaultTextOptions, ...options, }; @@ -58,6 +69,7 @@ class Text extends Component implements Collider { this.renderText = renderText; this.add(renderText); this.position.set(pos.x, pos.y, 0.1); + this.responsiveScale = responsiveScale; } collidesWith(other: Object3D): boolean { @@ -99,7 +111,9 @@ class Text extends Component implements Collider { } update(camera: OrthographicCamera) { - this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1); + if (this.responsiveScale) { + this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1); + } } } diff --git a/src/index.ts b/src/index.ts index 0a4689b..abb3089 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,49 +1,20 @@ -// export { default as Graphica } from "./Graphica"; -// export { default as Arc } from "./Components/Arc"; -// export { default as Bracket } from "./Components/Bracket"; -// export { default as Button } from "./Components/Button"; -// export { default as Circle } from "./Components/Circle"; -// export { default as Grid } from "./Components/Grid"; -// export { default as InfiniteLine } from "./Components/InfiniteLine"; -// export { default as InputField } from "./Components/InputField"; -// export { default as Label } from "./Components/Label"; -// export { default as Latex } from "./Components/Latex"; -// export { default as Line } from "./Components/Line"; -// export { default as Plot } from "./Components/Plot"; -// export { default as Point } from "./Components/Point"; -// export { default as Polygon } from "./Components/Shape"; -// export { default as Slider } from "./Components/Slider"; -// export { default as Text } from "./Components/Text"; -// export { default as Vector } from "./Components/Vector"; -// export { default as Fraction } from "./Components/Derived/Fraction"; -// export { default as SVGLoader } from "./Components/SVGLoader"; - -import { Vector3 } from "three"; -import Arc from "./Components/Arc"; -import Grid from "./Components/Grid"; -import Line from "./Components/Line"; -import Point from "./Components/Point"; -import Polygon from "./Components/Shape"; -import Vector from "./Components/Vector"; -import Graphica from "./Graphica"; - -// export * as three from "three"; - -const g = new Graphica(); -const gg = new Grid(); - -const v = new Line([-2, 2], [-10, 0], { - draggable: "unrestricted", -}); - -const p = new Polygon([ - [1, 1], - [2, 3], - [4, 4], -]); - -g.add(p); -g.add(v); -g.add(gg); -console.log(g.draggables); -g.run((t) => {}); +export { default as Graphica } from "./Graphica"; +export { default as Arc } from "./Components/Arc"; +export { default as Bracket } from "./Components/Bracket"; +export { default as Button } from "./Components/Button"; +export { default as Circle } from "./Components/Circle"; +export { default as Grid } from "./Components/Grid"; +export { default as InfiniteLine } from "./Components/InfiniteLine"; +export { default as InputField } from "./Components/InputField"; +export { default as Label } from "./Components/Label"; +export { default as Latex } from "./Components/Latex"; +export { default as Line } from "./Components/Line"; +export { default as Plot } from "./Components/Plot"; +export { default as Point } from "./Components/Point"; +export { default as Polygon } from "./Components/Shape"; +export { default as Slider } from "./Components/Slider"; +export { default as Text } from "./Components/Text"; +export { default as Vector } from "./Components/Vector"; +export { default as Fraction } from "./Components/Derived/Fraction"; +export { default as SVGLoader } from "./Components/SVGLoader"; +export * as three from "three";