summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/NodeEditor.tsx30
-rw-r--r--src/components/ButtonMenu.tsx6
-rw-r--r--src/components/nodes/Input.tsx19
-rw-r--r--src/pages/LogIn.tsx6
-rw-r--r--src/pages/ProjectsList.tsx7
-rw-r--r--src/pages/SignUp.tsx6
6 files changed, 37 insertions, 37 deletions
diff --git a/src/NodeEditor.tsx b/src/NodeEditor.tsx
index 435aec4..a9e7c83 100644
--- a/src/NodeEditor.tsx
+++ b/src/NodeEditor.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef } from 'preact/hooks';
+import { useContext, useEffect, useMemo, useCallback, useRef } from 'preact/hooks';
import { signal, computed, batch, useSignal, useComputed, Signal } from '@preact/signals';
import { Pb } from './context.ts';
import { SocketHandlers } from './node.ts';
@@ -80,7 +80,7 @@ const NodeEditor = ({ user, project }) => {
nodes.value = nodes.value.concat(instances);
}, []);
- const onOutMouseDown: SocketHandler = (nodeId, socket, event) => {
+ const onOutMouseDown: SocketHandler = useCallback((nodeId, socket, event) => {
event.stopPropagation();
const svgRect = svgRef.current?.getBoundingClientRect();
const svgX = svgRect?.x ?? 0;
@@ -117,9 +117,9 @@ const NodeEditor = ({ user, project }) => {
window.addEventListener('mouseup', onMouseUp);
currentLink.value = {from: {nodeId, socket}, fromX, fromY, toX, toY};
- };
+ }, []);
- const onInMouseDown: SocketHandler = (nodeId, socket, event) => {
+ const onInMouseDown: SocketHandler = useCallback((nodeId, socket, event) => {
event.stopPropagation();
const i = links.value.findIndex(l => l.to.nodeId === nodeId && l.to.socket === socket);
if (i == -1) return;
@@ -154,9 +154,9 @@ const NodeEditor = ({ user, project }) => {
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
- };
+ }, []);
- const onInMouseUp: SocketHandler = (nodeId, socket, event) => {
+ const onInMouseUp: SocketHandler = useCallback((nodeId, socket, event) => {
if (!currentLink.value) return;
event.stopPropagation();
const fromNode = nodes.value.find(x => x.id === currentLink.value!.from.nodeId);
@@ -184,7 +184,7 @@ const NodeEditor = ({ user, project }) => {
];
currentLink.value = null;
});
- };
+ }, []);
const socketHandlers = {
onOutMouseDown,
@@ -192,18 +192,18 @@ const NodeEditor = ({ user, project }) => {
onInMouseUp,
};
- const onKeyDown = (event: KeyboardEvent) => {
+ const onKeyDown = useCallback((event: KeyboardEvent) => {
if (event.code === 'KeyX') {
alert('X');
}
- };
+ }, []);
useEffect(() => {
document.addEventListener('keydown', onKeyDown);
return () => document.removeEventListener('keydown', onKeyDown);
}, []);
- const onBgMouseDown = () => {
+ const onBgMouseDown = useCallback(() => {
const onMouseMove = (event: MouseEvent) => batch(() => {
offsetX.value += event.movementX;
offsetY.value += event.movementY;
@@ -216,18 +216,18 @@ const NodeEditor = ({ user, project }) => {
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
- };
+ }, []);
- const onBgWheel = (event: WheelEvent) => batch(() => {
+ const onBgWheel = useCallback((event: WheelEvent) => batch(() => {
const delta = event.deltaY * 0.001;
offsetX.value -= (event.clientX - offsetX.value) * delta;
offsetY.value -= (event.clientY - offsetY.value) * delta;
scale.value *= 1 + delta;
- });
+ }), []);
- const addNode = (node: NodeInfo) => {
+ const addNode = useCallback((node: NodeInfo) => {
nodes.value = nodes.value.concat(instantiateNode(100, 100, node));
- };
+ }, []);
return (
<div class="__NodeEditor">
diff --git a/src/components/ButtonMenu.tsx b/src/components/ButtonMenu.tsx
index 6a2b73e..f4427b3 100644
--- a/src/components/ButtonMenu.tsx
+++ b/src/components/ButtonMenu.tsx
@@ -1,5 +1,5 @@
import type { ComponentChildren } from 'preact';
-import { useEffect, useRef, useId } from 'preact/hooks';
+import { useEffect, useCallback, useRef, useId } from 'preact/hooks';
import { useSignal, batch } from '@preact/signals';
import Button from './Button.tsx';
import Menu from './Menu.tsx';
@@ -16,12 +16,12 @@ const ButtonMenu = ({ children, label }: ButtonMenuProps) => {
const x = useSignal(0);
const y = useSignal(0);
- const updateRect = () => batch(() => {
+ const updateRect = useCallback(() => batch(() => {
const rect = ref.current?.getBoundingClientRect();
if (!rect) return;
x.value = rect.x;
y.value = rect.y + rect.height + 1;
- });
+ }), []);
useEffect(updateRect, [ref.current]);
return (
diff --git a/src/components/nodes/Input.tsx b/src/components/nodes/Input.tsx
index 1160f3f..c32b32d 100644
--- a/src/components/nodes/Input.tsx
+++ b/src/components/nodes/Input.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'preact/hooks';
import { InputSocket } from '../../dataflow.ts';
import { InSocket } from './Socket.tsx';
import './Input.css';
@@ -37,9 +38,9 @@ export const InputArray = ({ name, label }: Omit<InputProps<any>, 'value'>) => {
};
const InputNum = (parseFunc: (string) => number) => ({ name, label, value }: InputProps<number>) => {
- const onInput = (event: InputEvent) => {
+ const onInput = useCallback((event: InputEvent) => {
value.value = parseFunc((event.target as HTMLInputElement).value);
- }
+ }, [value]);
return (
<Input class={'__InputNum' + (value.link.value ? ' linked' : '')}>
<InSocket name={name} />
@@ -53,20 +54,20 @@ export const InputInteger = InputNum(parseInt);
export const InputNumber = InputNum(parseFloat);
export const InputVector = ({ name, label, value }: InputProps<[number, number, number]>) => {
- const onInput = (i: 0 | 1 | 2) => (event: InputEvent) => {
+ const onInput = useCallback((i: 0 | 1 | 2, event: InputEvent) => {
const newValue: [number, number, number] = [...value.value];
newValue[i] = parseFloat((event.target as HTMLInputElement).value);
value.value = newValue;
- };
+ }, [value]);
return (
<Input class={'__InputVector' + (value.link.value ? ' linked' : '')}>
<div>
<InSocket name={name} />
{label}
</div>
- <input type="number" value={value.value[0]} onInput={onInput(0)} />
- <input type="number" value={value.value[1]} onInput={onInput(1)} />
- <input type="number" value={value.value[2]} onInput={onInput(2)} />
+ <input type="number" value={value.value[0]} onInput={e => onInput(0, e)} />
+ <input type="number" value={value.value[1]} onInput={e => onInput(1, e)} />
+ <input type="number" value={value.value[2]} onInput={e => onInput(2, e)} />
</Input>
);
};
@@ -76,9 +77,9 @@ export interface InputSelectProps extends InputProps<string> {
}
export const InputSelect = ({ name, label, value, options }: InputSelectProps) => {
- const onChange = (event: InputEvent) => {
+ const onChange = useCallback((event: InputEvent) => {
value.value = (event.target as HTMLSelectElement).value;
- }
+ }, [value]);
return (
<Input class={'__InputSelect' + (value.link.value ? ' linked' : '')}>
<InSocket name={name} />
diff --git a/src/pages/LogIn.tsx b/src/pages/LogIn.tsx
index 3142da4..296a499 100644
--- a/src/pages/LogIn.tsx
+++ b/src/pages/LogIn.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useCallback } from 'preact/hooks';
import { useSignal } from '@preact/signals';
import { route } from 'preact-router';
import { Pb } from '../context.ts';
@@ -10,13 +10,13 @@ const LogIn = () => {
const email = useSignal('');
const password = useSignal('');
- const onSubmit = async (event: SubmitEvent) => {
+ const onSubmit = useCallback(async (event: SubmitEvent) => {
event.preventDefault();
await pb.collection('users').authWithPassword(email.value, password.value);
if (pb.authStore.isValid) {
route('/' + pb.authStore.model.username);
}
- };
+ }, []);
return (
<>
diff --git a/src/pages/ProjectsList.tsx b/src/pages/ProjectsList.tsx
index 3d86358..a7e3bed 100644
--- a/src/pages/ProjectsList.tsx
+++ b/src/pages/ProjectsList.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'preact/hooks';
+import { useContext, useEffect, useCallback } from 'preact/hooks';
import { useSignal } from '@preact/signals';
import { route } from 'preact-router';
import { Pb } from '../context.ts';
@@ -6,7 +6,6 @@ import { logOut } from '../util.ts';
import { Header, Content, ContainedList, Form, FormLabel, TextInput, Button } from '../components';
const ProjectsList = ({ user }) => {
- console.log(user);
const pb = useContext(Pb);
const projects = useSignal(null);
const projectName = useSignal('');
@@ -17,14 +16,14 @@ const ProjectsList = ({ user }) => {
.then(p => projects.value = p);
}, []);
- const onCreateProject = async (event: FormEvent) => {
+ const onCreateProject = useCallback(async (event: FormEvent) => {
event.preventDefault();
const project = await pb.collection('projects').create({
name: projectName.value,
owner: pb.authStore.model.id,
});
route(`/${user}/${project.name}`);
- };
+ }, [user]);
return (
<>
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index 6e2c874..22e1512 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'preact/hooks';
+import { useContext, useCallback } from 'preact/hooks';
import { useSignal } from '@preact/signals';
import { route } from 'preact-router';
import { Pb } from '../context.ts';
@@ -12,7 +12,7 @@ const SignUp = () => {
const password = useSignal('');
const confirm = useSignal('');
- const onSubmit = async (event: SubmitEvent) => {
+ const onSubmit = useCallback(async (event: SubmitEvent) => {
event.preventDefault();
await pb.collection('users').create({
username: username.value,
@@ -24,7 +24,7 @@ const SignUp = () => {
if (pb.authStore.isValid) {
route('/' + pb.authStore.model.username);
}
- };
+ }, []);
return (
<>
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-16 08:42:41 +0000