diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 62cefd38..305eaf00 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -77,16 +77,6 @@ export const Block = memo(function Block(
});
let entity_set = useEntitySetContext();
- let { isLongPress, handlers } = useLongPress(() => {
- if (isTextBlock[props.type]) return;
- if (isLongPress.current) {
- focusBlock(
- { type: props.type, value: props.entityID, parent: props.parent },
- { type: "start" },
- );
- }
- });
-
let selected = useUIState(
(s) => !!s.selectedBlocks.find((b) => b.value === props.entityID),
);
@@ -117,7 +107,7 @@ export const Block = memo(function Block(
return (
{
+ isScrolling = true;
+ if (scrollTimeout) window.clearTimeout(scrollTimeout);
+ scrollTimeout = window.setTimeout(() => {
+ isScrolling = false;
+ }, 150);
+ },
+ true,
+ );
+}
export function useBlockMouseHandlers(props: Block) {
let entity_set = useEntitySetContext();
let isMobile = useIsMobile();
@@ -22,7 +40,7 @@ export function useBlockMouseHandlers(props: Block) {
if ((e.target as Element).tagName === "BUTTON") return;
if ((e.target as Element).tagName === "SELECT") return;
if ((e.target as Element).tagName === "OPTION") return;
- if (isMobile) return;
+ if (isMobile && isScrolling) return;
if (!entity_set.permissions.write) return;
useSelectingMouse.setState({ start: props.value });
if (e.shiftKey) {
@@ -57,7 +75,7 @@ export function useBlockMouseHandlers(props: Block) {
);
let onMouseEnter = useCallback(
async (e: MouseEvent) => {
- if (isMobile) return;
+ if (isMobile && isScrolling) return;
if (!entity_set.permissions.write) return;
if (debounce) window.clearTimeout(debounce);
debounce = window.setTimeout(async () => {
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 3b3b5903..71861954 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -290,7 +290,7 @@ function CanvasBlock(props: {
},
[props, rep, permissions],
);
- let { dragDelta, handlers } = useDrag({
+ let { dragDelta, handlers: dragHandlers } = useDrag({
onDragEnd,
delay: isMobile,
});
@@ -339,18 +339,20 @@ function CanvasBlock(props: {
);
let rotateHandle = useDrag({ onDragEnd: RotateOnDragEnd });
- let { isLongPress, handlers: longPressHandlers } = useLongPress(() => {
- if (isLongPress.current && permissions.write) {
- focusBlock(
- {
- type: type?.data.value || "text",
- value: props.entityID,
- parent: props.parent,
- },
- { type: "start" },
- );
- }
- });
+ let { isLongPress, longPressHandlers: longPressHandlers } = useLongPress(
+ () => {
+ if (isLongPress.current && permissions.write) {
+ focusBlock(
+ {
+ type: type?.data.value || "text",
+ value: props.entityID,
+ parent: props.parent,
+ },
+ { type: "start" },
+ );
+ }
+ },
+ );
let angle = 0;
if (rotateHandle.dragDelta) {
let originX = rect.x + rect.width / 2;
@@ -395,8 +397,7 @@ function CanvasBlock(props: {
return (
{/* the gripper show on hover, but longpress logic needs to be added for mobile*/}
- {!props.preview && permissions.write &&
}
+ {!props.preview && permissions.write &&
}
diff --git a/src/hooks/useLongPress.ts b/src/hooks/useLongPress.ts
index 3a4a6816..591a3ee0 100644
--- a/src/hooks/useLongPress.ts
+++ b/src/hooks/useLongPress.ts
@@ -90,7 +90,7 @@ export const useLongPress = (cb: () => void, cancel?: boolean) => {
return useMemo(
() => ({
isLongPress: isLongPress,
- handlers: {
+ longPressHandlers: {
onPointerDown,
onPointerUp: end,
onClickCapture: click,