FlipBook: Image replacement and event handlers#15
Conversation
| } | ||
|
|
||
| /// <summary> | ||
| /// Calculates the absolute Difference from two equal-sized images with equal channel count |
There was a problem hiding this comment.
| /// Calculates the absolute Difference from two equal-sized images with equal channel count | |
| /// Calculates the absolute difference |a - b| of two equal-sized images with equal channel count |
| if (String.IsNullOrEmpty(this.containerId)) | ||
| this.containerId = id; |
There was a problem hiding this comment.
Why do you only store it the first time?
Seems like this could yield confusing behavior if the same flip book is generated multiple times.
|
|
||
| // string json = $$""" | ||
| // { | ||
| // "width": {}, | ||
| // "height": {}, | ||
| // "containerId": "{}", | ||
| // "initialZoom": {}, | ||
| // "initialTMO": {}, | ||
| // "initialTMOOverrides": [ | ||
| // {} | ||
| // ], | ||
| // "names": [{{string.Join(',', nameStrs.Select(n => $"\"{n}\""))}}], | ||
| // "dataUrls": [{{string.Join(',', dataStrs.Select(n => $"\"{n}\""))}}], | ||
| // "types": [{{string.Join(',', typeStrs.Select(n => $"\"{n}\""))}}], | ||
| // "colorTheme": "{}", | ||
| // "groupName": "{{groupName}}", | ||
| // "hideTools": {} | ||
| // } | ||
| // """; |
There was a problem hiding this comment.
| // string json = $$""" | |
| // { | |
| // "width": {}, | |
| // "height": {}, | |
| // "containerId": "{}", | |
| // "initialZoom": {}, | |
| // "initialTMO": {}, | |
| // "initialTMOOverrides": [ | |
| // {} | |
| // ], | |
| // "names": [{{string.Join(',', nameStrs.Select(n => $"\"{n}\""))}}], | |
| // "dataUrls": [{{string.Join(',', dataStrs.Select(n => $"\"{n}\""))}}], | |
| // "types": [{{string.Join(',', typeStrs.Select(n => $"\"{n}\""))}}], | |
| // "colorTheme": "{}", | |
| // "groupName": "{{groupName}}", | |
| // "hideTools": {} | |
| // } | |
| // """; |
| var relX = event.nativeEvent.offsetX;: nativeEvent. | ||
| var relY = event.nativeEvent.offsetY;: nativeEvent. |
| if (this.props.onWheel) | ||
| { | ||
| this.props.onWheel(event.deltaY); | ||
| } | ||
|
|
||
| return; |
There was a problem hiding this comment.
Not tested, but sounds like quite awkward UX to have ALT as a means to override the zoom behavior but also then forward this wheel event in the flip book context?
| tms[book.state.selectedIdx].setPixels(images[0] as (Float32Array<ArrayBufferLike>)); | ||
| } | ||
|
|
||
| // flipBook.imageContainer.current.props.rawPixels[flipBook.state.selectedIdx] = images[0] as (Float32Array<ArrayBufferLike>); //TODO: maybe it doesnt work like that |
…eImage() only really take Images instead of whole Tuple
…l scrolling so that user can add various number of custom actions keys on c# side
| import { JSX } from 'react/jsx-runtime'; | ||
|
|
||
| export type OnClickHandler = (col: number, row: number, event: MouseEvent) => void | ||
| export type OnClickHandler = (buttom: number) => void |
There was a problem hiding this comment.
Why is the OnClickHandler now only reporting the button, not the clicked pixel?
There was a problem hiding this comment.
Because OnMouseOverHandler does that. C# stores the current pixel. In some situations, the mouse is not pressed (but only keys) and when I press keys for some actions on the c# side, I still have the current pixel coords.
pgrit
changed the title
…place magnifier around mouse (prettier)
…state also on the js side)
| export interface ListenerState { | ||
| /// Mouse state | ||
| mouseButtom: number; | ||
| mouseX: number; |
There was a problem hiding this comment.
Should document the coordinate system here: Relative to image? Screen space coordinates wrt the Container?
There was a problem hiding this comment.
"top left of image" / "relative to image" still does not specify the units ;) Is it pixels of the image? Browser pixels? Sth else?
| let magnifierResolution = 1; | ||
| let flagXSwapped = false; | ||
| let flagYSwapped = false; |
There was a problem hiding this comment.
This should be tracked in each container's individual state rather than globally.
Also, the swapping behaviour should probably reset to the default position when the mouse is clicked and only remain in the current state during move events.
| let isAnyKeyPressed = false; | ||
| export function setKeyPressed(value: boolean): void { | ||
| isAnyKeyPressed = value; | ||
| } |
There was a problem hiding this comment.
Is it a good idea to track this as global state across all flip books?
| export type OnClickHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void | ||
| export type OnWheelHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void | ||
| export type OnMouseOverHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void | ||
| export type OnKeyHandler = (mouseButton: number, mouseX: number, mouseY: number, deltaY: number, ID: string, selectedIdx: number, keyPressed: string, isPressed: boolean) => void |
There was a problem hiding this comment.
Does it make sense to send deltaY (I assume that is the mouse wheel motion?) for non-wheel events?
There was a problem hiding this comment.
And why do the click handlers now also report key event data?
|
|
||
| // Listener state that is forwared | ||
| export interface ListenerState { | ||
| /// Mouse state |
There was a problem hiding this comment.
Not really an informative comment. State of what exactly? What is the meaning of the value? How does a single number describe the state of your mouse?
| /// Key state (Handled by the Flipbook.tsx) | ||
| // ID of the Flipbook | ||
| ID: string; | ||
| // Which image is selected in a Flipbook | ||
| selectedIdx: number; | ||
| // Key pressed | ||
| keyPressed: string; | ||
| isPressed: boolean; |
There was a problem hiding this comment.
Logic here is unclear to me. Do you only track a single key at a time? What happens if multiple keys are pressed simultaneously?
…sition is possible -> set to default position
2 participants
No description provided.