chore(web): fix story block bugs (#829)

Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Nov 26, 2023 · d6bf3ef · d6bf3ef
1 parent 7fcaa22
commit d6bf3ef
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 24 deletions.
diff --git a/web/src/beta/components/DragAndDropList/Item.tsx b/web/src/beta/components/DragAndDropList/Item.tsx
@@ -102,7 +102,11 @@ const Item: FC<Props> = ({
   drop(contentRef);
   return shouldUseCustomHandler ? (
     <ItemContext.Provider value={ref}>
-      <SItem ref={preview} data-handler-id={handlerId} isDragging={isDragging}>
+      <SItem
+        customHandler={shouldUseCustomHandler}
+        ref={preview}
+        data-handler-id={handlerId}
+        isDragging={isDragging}>
         <div ref={contentRef}>{children}</div>
       </SItem>
     </ItemContext.Provider>
@@ -115,7 +119,7 @@ const Item: FC<Props> = ({
 
 export default memo(Item);
 
-const SItem = styled.div<{ isDragging: boolean }>`
+const SItem = styled.div<{ isDragging: boolean; customHandler?: boolean }>`
   ${({ isDragging }) => `opacity: ${isDragging ? 0 : 1};`}
-  cursor: move;
+  cursor: ${({ customHandler }) => (customHandler ? "default" : "move")};
 `;
diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Timeline/hook.ts b/web/src/beta/lib/core/StoryPanel/Block/builtin/Timeline/hook.ts
@@ -250,7 +250,7 @@ export default ({
       if (!handleOnDrag || !e.target || !range) {
         return;
       }
-      if (target && target.style.pointerEvents === "none") {
+      if (target && target.style.pointerEvents === "none" && !inEditor) {
         const evt = e;
         let newPosition = evt.clientX - distX.current;
         newPosition = Math.max(newPosition, 16);
@@ -260,17 +260,17 @@ export default ({
         committer?.id && handleOnDrag(new Date(conv), committer?.id);
       }
     },
-    [committer?.id, handleOnDrag, range, target],
+    [committer?.id, handleOnDrag, inEditor, range, target],
   );
 
   const handleOnClick: MouseEventHandler = useCallback(
     e => {
-      if (range) {
+      if (!inEditor && range) {
         const conv = convertPositionToTime(e as unknown as MouseEvent, range.start, range.end);
         committer?.id && handleOnDrag(new Date(conv), committer?.id);
       }
     },
-    [range, committer?.id, handleOnDrag],
+    [inEditor, range, committer?.id, handleOnDrag],
   );
   const handleTimelineCommitterChange = useCallback(
     (committer: TimelineCommitter) => {

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -30,6 +30,7 @@ type Props = {
   settingsEnabled?: boolean;
   onClick?: () => void;
   onRemove?: () => void;
+  onBlockDoubleClick?: () => void;
   onPropertyUpdate?: (
     propertyId?: string,
     schemaItemId?: string,
@@ -63,6 +64,7 @@ const BlockWrapper: React.FC<Props> = ({
   dndEnabled = true,
   settingsEnabled = true,
   onClick,
+  onBlockDoubleClick,
   onRemove,
   onPropertyUpdate,
   onPropertyItemAdd,
@@ -80,12 +82,14 @@ const BlockWrapper: React.FC<Props> = ({
     handleEditModeToggle,
     handleSettingsToggle,
     handleBlockClick,
+    handleDoubleClick,
   } = useHooks({
     name,
     isSelected,
     property,
     isEditable,
     onClick,
+    onBlockDoubleClick,
   });
 
   return (
@@ -113,7 +117,8 @@ const BlockWrapper: React.FC<Props> = ({
           isEditable={isEditable}
           onClick={e => {
             handleBlockClick(e);
-          }}>
+          }}
+          onDoubleClick={handleDoubleClick}>
           {children ?? (isEditable && <Template icon={icon} />)}
         </Block>
         {editMode && groupId && propertyId && settingsEnabled && (

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts
@@ -1,6 +1,7 @@
-import { MouseEvent, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, MouseEvent } from "react";
 
 import { Spacing } from "@reearth/beta/lib/core/mantle";
+import useDoubleClick from "@reearth/beta/utils/use-double-click";
 
 import { calculatePaddingValue } from "../../../utils";
 
@@ -12,35 +13,35 @@ export default ({
   property,
   isEditable,
   onClick,
+  onBlockDoubleClick,
 }: {
   name?: string | null;
   isSelected?: boolean;
   property?: any;
   isEditable?: boolean;
   onClick: (() => void) | undefined;
+  onBlockDoubleClick: (() => void) | undefined;
 }) => {
   const [editMode, setEditMode] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const title = useMemo(() => name ?? property?.title, [name, property?.title]);
-  const [clickCount, setClickCount] = useState(0);
+
+  const handleBlockDoubleClick = useCallback(() => {
+    onBlockDoubleClick?.(), setEditMode(true);
+  }, [onBlockDoubleClick]);
+
+  const [handleSingleClick, handleDoubleClick] = useDoubleClick(
+    () => onClick?.(),
+    () => handleBlockDoubleClick?.(),
+  );
 
   const handleBlockClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
       if ((showSettings && isSelected) || editMode) return;
-      if (clickCount === 0) {
-        setClickCount(1);
-        onClick?.();
-        setTimeout(() => {
-          setClickCount(0);
-        }, 300);
-      } else if (clickCount === 1) {
-        setClickCount(0);
-        setEditMode(true);
-        onClick?.();
-      }
+      handleSingleClick();
     },
-    [showSettings, isSelected, editMode, clickCount, onClick],
+    [showSettings, isSelected, editMode, handleSingleClick],
   );
 
   const defaultSettings = useMemo(() => property?.default ?? property?.title, [property]);
@@ -79,5 +80,6 @@ export default ({
     handleEditModeToggle,
     handleSettingsToggle,
     handleBlockClick,
+    handleDoubleClick,
   };
 };
diff --git a/web/src/beta/lib/core/StoryPanel/Block/types.ts b/web/src/beta/lib/core/StoryPanel/Block/types.ts
@@ -10,6 +10,7 @@ export type BlockProps = {
   block?: StoryBlock;
   layer?: Layer;
   onClick?: () => void;
+  onBlockDoubleClick?: () => void;
 };
 
 export type CommonProps = {
@@ -20,6 +21,7 @@ export type CommonProps = {
   theme?: Theme;
   currentCamera?: Camera;
   onClick?: () => void;
+  onBlockDoubleClick?: () => void;
   onClickAway?: () => void;
   onRemove?: (pageId?: string, id?: string) => void;
   onPropertyUpdate?: (

diff --git a/web/src/beta/lib/core/StoryPanel/Page/index.tsx b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
@@ -42,6 +42,7 @@ type Props = {
     v?: ValueTypes[ValueType],
   ) => Promise<void>;
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
+  onBlockDoubleClick?: (blockId?: string) => void;
   onPropertyItemAdd?: (propertyId?: string, schemaGroupId?: string) => Promise<void>;
   onPropertyItemMove?: (
     propertyId?: string,
@@ -71,6 +72,7 @@ const StoryPanel: React.FC<Props> = ({
   onBlockCreate,
   onBlockDelete,
   onBlockSelect,
+  onBlockDoubleClick,
   onBlockMove,
   onPropertyUpdate,
   onPropertyItemAdd,
@@ -122,7 +124,7 @@ const StoryPanel: React.FC<Props> = ({
 
   return (
     <SelectableArea
-      title={page?.title ?? t("Page")}
+      title={page?.title !== "Untitled" ? page?.title : t("Page")}
       position="left-bottom"
       icon="storyPage"
       noBorder
@@ -156,6 +158,7 @@ const StoryPanel: React.FC<Props> = ({
               isEditable={isEditable}
               isSelected={selectedStoryBlockId === titleId}
               onClick={() => onBlockSelect?.(titleId)}
+              onBlockDoubleClick={() => onBlockDoubleClick?.(titleId)}
               onPropertyUpdate={onPropertyUpdate}
               onPropertyItemAdd={onPropertyItemAdd}
               onPropertyItemMove={onPropertyItemMove}
@@ -199,6 +202,7 @@ const StoryPanel: React.FC<Props> = ({
                     isSelected={selectedStoryBlockId === b.id}
                     isEditable={isEditable}
                     onClick={() => onBlockSelect?.(b.id)}
+                    onBlockDoubleClick={() => onBlockDoubleClick?.(b.id)}
                     onRemove={onBlockDelete}
                     onPropertyUpdate={onPropertyUpdate}
                     onPropertyItemAdd={onPropertyItemAdd}

diff --git a/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx b/web/src/beta/lib/core/StoryPanel/PanelContent/index.tsx
@@ -29,6 +29,7 @@ export type Props = {
   onBlockMove?: (id: string, targetId: number, blockId: string) => void;
   onBlockDelete?: (pageId?: string | undefined, blockId?: string | undefined) => Promise<void>;
   onBlockSelect?: (blockId?: string) => void;
+  onBlockDoubleClick?: (blockId?: string) => void;
   onPropertyUpdate?: (
     propertyId?: string,
     schemaItemId?: string,
@@ -66,6 +67,7 @@ const StoryContent: React.FC<Props> = ({
   onBlockCreate,
   onBlockDelete,
   onBlockSelect,
+  onBlockDoubleClick,
   onBlockMove,
   onPropertyUpdate,
   onPropertyItemAdd,
@@ -104,6 +106,7 @@ const StoryContent: React.FC<Props> = ({
             onPropertyItemAdd={onPropertyItemAdd}
             onPropertyItemMove={onPropertyItemMove}
             onPropertyItemDelete={onPropertyItemDelete}
+            onBlockDoubleClick={onBlockDoubleClick}
           />
           <PageGap height={pageGap} onClick={() => onPageSelect?.(p.id)} />
         </Fragment>

diff --git a/web/src/beta/lib/core/StoryPanel/hooks.ts b/web/src/beta/lib/core/StoryPanel/hooks.ts
@@ -43,7 +43,7 @@ export default (
     (pageId?: string) => {
       if (!isEditable) return;
       if (selectedBlockId) {
-        setSelectedBlockId(undefined);
+        setSelectedBlockId(selectedBlockId);
       }
       setSelectedPageId(pid => (pageId && pid !== pageId ? pageId : undefined));
     },
@@ -61,6 +61,10 @@ export default (
     [selectedPageId, isEditable],
   );
 
+  const handleBlockDouleClick = useCallback((blockId?: string) => {
+    setSelectedBlockId(id => (!blockId || id === blockId ? blockId : blockId));
+  }, []);
+
   const onTimeChange = useCallback(
     (time: Date) => {
       return visualizer?.current?.timeline?.current?.commit({
@@ -168,6 +172,7 @@ export default (
     handlePageSettingsToggle,
     handlePageSelect,
     handleBlockSelect,
+    handleBlockDouleClick,
     handleCurrentPageChange,
   };
 };

diff --git a/web/src/beta/lib/core/StoryPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/index.tsx
@@ -82,6 +82,7 @@ export const StoryPanel = memo(
         handlePageSettingsToggle,
         handlePageSelect,
         handleBlockSelect,
+        handleBlockDouleClick,
         handleCurrentPageChange,
       } = useHooks(
         {
@@ -91,6 +92,7 @@ export const StoryPanel = memo(
         },
         ref,
       );
+
       return (
         <PanelWrapper bgColor={selectedStory?.bgColor}>
           {!!pageInfo && (
@@ -116,6 +118,7 @@ export const StoryPanel = memo(
             onBlockMove={onBlockMove}
             onBlockDelete={onBlockDelete}
             onBlockSelect={handleBlockSelect}
+            onBlockDoubleClick={handleBlockDouleClick}
             onPropertyUpdate={onPropertyUpdate}
             onPropertyItemAdd={onPropertyItemAdd}
             onPropertyItemMove={onPropertyItemMove}