Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Cant use Computed on Box position #30

Open
DNAScanner opened this issue Aug 28, 2023 · 3 comments
Open

bug: Cant use Computed on Box position #30

DNAScanner opened this issue Aug 28, 2023 · 3 comments
Labels
bug Something isn't working

Comments

@DNAScanner
Copy link

Bug description Cant set Box rectangle.column / rectangle.row via Computed

Expected behavior Auto update the Box' position using Signal and Computed

Reproduction Code to reproduce the behavior:

import {crayon} from "https://deno.land/x/crayon@3.3.3/mod.ts";
import {Computed, Signal, Tui, handleInput, handleKeyboardControls, handleMouseControls} from "https://deno.land/x/tui@2.1.1/mod.ts";
import {Box} from "https://deno.land/x/tui@2.1.1/src/components/mod.ts";

const tui = new Tui({
	refreshRate: 1000 / 60, // Run in 60FPS
});

tui.dispatch(); // Close Tui on CTRL+C

handleInput(tui);
handleMouseControls(tui);
handleKeyboardControls(tui);

const x = new Signal(15);
const y = new Signal(15);

const box = new Box({
	parent: tui,
	zIndex: 0,
	theme: {
		base: crayon.bgBlue,
	},
	rectangle: {
		column: new Computed(() => y.value),
		row: new Computed(() => x.value),
		height: 5,
		width: 10,
	},
});

tui.on("keyPress", (event) => {
	switch (event.key) {
		case "w":
		case "up":
			y.value += 1;
			console.log("up");
			break;

		case "s":
		case "down":
			y.value -= 1;
			console.log("down");
			break;

		case "a":
		case "left":
			x.value -= 1;
			console.log("left");
			break;

		case "d":
		case "right":
			y.value += 1;
			console.log("right");
			break;
	}
});

tui.run();

Information (please complete) It seems, that the rectangle.column and rectangle.row, dont currently support Computed properties as their values.

  • OS: Windows_NT DNAScanner 6.2 9200 x86_64 MS/Windows
  • Deno version:

deno 1.36.3 (release, x86_64-pc-windows-msvc)
v8 11.6.189.12
typescript 5.1.6

@DNAScanner DNAScanner added the bug Something isn't working label Aug 28, 2023
@Im-Beast
Copy link
Owner

Im-Beast commented Sep 2, 2023

Sorry for delayed response, I was on vacations.

Properties of rectangle cannot be set as Signal/Computed but rectangle itself can be.
You can do

const rectangle = { column: 0, row: 0, width: 0, height: 0 };
const box = new Box({
   ...,
   rectangle: new Computed(() => {
     rectangle.column = x.value;
     rectangle.row = y.value;
     return rectangle;
   }),
});

I have plans for improving working with objects using signals, because I can see how this can become annoying/tedious.

@DNAScanner
Copy link
Author

This works, thank you. Wouldnt it be nice though, if there was native support for Computed values for rectangle.column directly instead of that workaround?

@Im-Beast
Copy link
Owner

Im-Beast commented Sep 6, 2023

When I will have more time I plan to add support for easier usage of Signal/Computed on objects, I agree that's definitely something that can be improved.

If you feel like this is enough for now, feel free to close this issue, otherwise you can leave it open until it gets improved from the deno_tui.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants