Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-04-11 19:36:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

remove contextmenu component for now

Browse Source
This commit is contained in:
Red Adaya 2024-10-16 09:33:13 +08:00
parent 5ed57ef1e5
commit 7db6d19c56
3 changed files with 0 additions and 731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/app/element/contextmenu.less
View File

@ -1,55 +0,0 @@
.context-menu {
position: absolute;
z-index: 1000; // TODO: put this in theme.less
display: flex;
width: 125px; /* Ensure the menu has a fixed width */
padding: 2px;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: 1px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: #212121;
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.3);
.context-menu-item {
padding: 4px 6px;
cursor: pointer;
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.12px;
width: 100%;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: space-between;
/* Make sure the label and the icon don't overlap */
.label {
flex: 1; /* Allow the label to take up available space */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 8px; /* Add some space between label and icon */
}
i {
color: var(--main-text-color);
flex-shrink: 0; /* Prevent icon from shrinking */
}
&:hover,
&.active {
background-color: var(--accent-color);
color: var(--button-text-color);
i {
color: var(--button-text-color);
}
}
}
}

233
frontend/app/element/contextmenu.stories.tsx
View File

@ -1,233 +0,0 @@
// Copyright 2023, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { useEffect, useRef, useState } from "react";
import { ContextMenu } from "./contextmenu";
const items = [
{ label: "Fruit", onClick: (e) => console.log("Clicked Option 1") },
{
label: "Vegetables",
subItems: [
{ label: "Carrot", onClick: (e) => console.log("Clicked Option 2 -> 1") },
{ label: "Potato", onClick: (e) => console.log("Clicked Option 2 -> 2") },
],
},
{
label: "Beverages",
subItems: [
{ label: "Juice", onClick: (e) => console.log("Clicked Option 3 -> 1") },
{ label: "Tea", onClick: (e) => console.log("Clicked Option 3 -> 2") },
{
label: "Coffee",
subItems: [
{ label: "Espresso", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 1") },
{ label: "Latte", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 2") },
{ label: "Cappuccino", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 3") },
{
label: "Mocha",
subItems: [
{ label: "Dark Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 1") },
{
label: "White Chocolate",
onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 2"),
},
{ label: "Milk Chocolate", onClick: (e) => console.log("Clicked Option 3 -> 3 -> 4 -> 3") },
],
},
],
},
],
},
{
label: "Desserts",
subItems: [
{ label: "Cake", onClick: (e) => console.log("Clicked Option 4 -> 1") },
{ label: "Ice Cream", onClick: (e) => console.log("Clicked Option 4 -> 2") },
{ label: "Cookies", onClick: (e) => console.log("Clicked Option 4 -> 3") },
{ label: "Brownies", onClick: (e) => console.log("Clicked Option 4 -> 4") },
{ label: "Cupcakes", onClick: (e) => console.log("Clicked Option 4 -> 5") },
{ label: "Donuts", onClick: (e) => console.log("Clicked Option 4 -> 6") },
{ label: "Pie", onClick: (e) => console.log("Clicked Option 4 -> 7") },
],
},
];
const meta = {
title: "Elements/ContextMenu",
component: ContextMenu,
args: {
items: [],
anchorRef: undefined,
scopeRef: undefined,
initialPosition: undefined,
className: "",
setVisibility: fn(),
},
argTypes: {
items: {
description: "Items of menu",
},
anchorRef: {
description: "Element to attach the menu",
},
initialPosition: {
description: "Initial position of the menu",
},
setVisibility: {
description: "Visibility event handler",
},
scopeRef: {
description: "Component that defines the boundaries of the menu",
},
className: {
description: "Custom className",
},
},
} satisfies Meta<typeof ContextMenu>;
export default meta;
type Story = StoryObj<typeof meta>;
export const RightClickMenu: Story = {
render: (args) => {
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const handleBlockRightClick = (e: MouseEvent) => {
e.preventDefault(); // Prevent the default context menu
setMenuPosition({ top: e.clientY, left: e.clientX });
setIsMenuVisible(true);
};
useEffect(() => {
const blockElement = scopeRef.current;
if (blockElement) {
blockElement.addEventListener("contextmenu", handleBlockRightClick);
}
return () => {
if (blockElement) {
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
}
};
}, []);
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
setIsMenuVisible(false);
}
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
{isMenuVisible && (
<ContextMenu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
initialPosition={menuPosition}
scopeRef={scopeRef}
/>
)}
</div>
);
},
args: {
items: items,
},
};
export const RightMenuWidthCustomRenderer: Story = {
render: (args) => {
const scopeRef = useRef<HTMLDivElement>(null);
const [isMenuVisible, setIsMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const handleBlockRightClick = (e: MouseEvent) => {
e.preventDefault(); // Prevent the default context menu
setMenuPosition({ top: e.clientY, left: e.clientX });
setIsMenuVisible(true);
};
useEffect(() => {
const blockElement = scopeRef.current;
if (blockElement) {
blockElement.addEventListener("contextmenu", handleBlockRightClick);
}
return () => {
if (blockElement) {
blockElement.removeEventListener("contextmenu", handleBlockRightClick);
}
};
}, []);
const mapItemsWithClick = (items: any[]) => {
return items.map((item) => ({
...item,
onClick: () => {
if (item.onClick) {
item.onClick();
}
setIsMenuVisible(false);
},
subItems: item.subItems ? mapItemsWithClick(item.subItems) : undefined,
}));
};
const renderMenuItem = (item: any, props: any) => (
<div {...props}>
<strong>{item.label}</strong>
{item.subItems && <span style={{ marginLeft: "10px", color: "#888" }}>▶</span>}
</div>
);
const renderMenu = (subMenu: JSX.Element) => <div>{subMenu}</div>;
const modifiedArgs = {
...args,
items: mapItemsWithClick(args.items),
};
return (
<div
ref={scopeRef}
className="boundary"
style={{ padding: "20px", height: "300px", border: "2px solid black" }}
>
{isMenuVisible && (
<ContextMenu
{...modifiedArgs}
setVisibility={(visible) => setIsMenuVisible(visible)}
initialPosition={menuPosition}
scopeRef={scopeRef}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
)}
</div>
);
},
args: {
items: items,
},
};

443
frontend/app/element/contextmenu.tsx
View File

@ -1,443 +0,0 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import clsx from "clsx";
import React, { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import { throttle } from "throttle-debounce";
import { useDimensionsWithExistingRef } from "@/app/hook/useDimensions";
import "./contextmenu.less";
export type MenuItem = {
label: string;
subItems?: MenuItem[];
onClick?: (e) => void;
};
const SubContextMenu = memo(
({
subItems,
parentKey,
subContextMenuPosition,
visibleSubMenus,
hoveredItems,
subMenuRefs,
handleMouseEnterItem,
handleOnClick,
renderMenu,
renderMenuItem,
}: {
subItems: MenuItem[];
parentKey: string;
subContextMenuPosition: {
[key: string]: { top: number; left: number; label: string };
};
visibleSubMenus: { [key: string]: any };
hoveredItems: string[];
subMenuRefs: React.MutableRefObject<{ [key: string]: React.RefObject<HTMLDivElement> }>;
handleMouseEnterItem: (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
parentKey: string | null,
index: number,
item: MenuItem
) => void;
handleOnClick: (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => void;
renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
}) => {
subItems.forEach((_, idx) => {
const newKey = `${parentKey}-${idx}`;
if (!subMenuRefs.current[newKey]) {
subMenuRefs.current[newKey] = React.createRef<HTMLDivElement>();
}
});
const position = subContextMenuPosition[parentKey];
const isPositioned = position && position.top !== undefined && position.left !== undefined;
const subMenu = (
<div
className="context-menu context-sub-menu"
ref={subMenuRefs.current[parentKey]}
style={{
top: position?.top || 0,
left: position?.left || 0,
position: "absolute",
zIndex: 1000,
visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden",
}}
>
{subItems.map((item, idx) => {
const newKey = `${parentKey}-${idx}`;
const isActive = hoveredItems.includes(newKey);
const menuItemProps = {
className: clsx("context-menu-item", { active: isActive }),
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
handleMouseEnterItem(event, parentKey, idx, item),
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
};
const renderedItem = renderMenuItem ? (
renderMenuItem(item, menuItemProps)
) : (
<div key={newKey} {...menuItemProps}>
<span className="label">{item.label}</span>
{item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
</div>
);
return (
<React.Fragment key={newKey}>
{renderedItem}
{visibleSubMenus[newKey]?.visible && item.subItems && (
<SubContextMenu
subItems={item.subItems}
parentKey={newKey}
subContextMenuPosition={subContextMenuPosition}
visibleSubMenus={visibleSubMenus}
hoveredItems={hoveredItems}
handleMouseEnterItem={handleMouseEnterItem}
handleOnClick={handleOnClick}
subMenuRefs={subMenuRefs}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
)}
</React.Fragment>
);
})}
</div>
);
return ReactDOM.createPortal(renderMenu ? renderMenu(subMenu, { parentKey }) : subMenu, document.body);
}
);
const ContextMenu = memo(
({
items,
anchorRef,
scopeRef,
initialPosition,
className,
setVisibility,
renderMenu,
renderMenuItem,
}: {
items: MenuItem[];
anchorRef: React.RefObject<any>;
scopeRef?: React.RefObject<HTMLElement>;
initialPosition?: { top: number; left: number };
className?: string;
setVisibility: (_: boolean) => void;
renderMenu?: (subMenu: JSX.Element, props: any) => JSX.Element;
renderMenuItem?: (item: MenuItem, props: any) => JSX.Element;
}) => {
const [visibleSubMenus, setVisibleSubMenus] = useState<{ [key: string]: any }>({});
const [hoveredItems, setHoveredItems] = useState<string[]>([]);
const [subMenuPosition, setSubMenuPosition] = useState<{
[key: string]: { top: number; left: number; label: string };
}>({});
const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
const contextMenuRef = useRef<HTMLDivElement>(null);
const subContextMenuRefs = useRef<{ [key: string]: React.RefObject<HTMLDivElement> }>({});
const domRect = useDimensionsWithExistingRef(scopeRef);
const width = domRect?.width ?? 0;
const height = domRect?.height ?? 0;
items.forEach((_, idx) => {
const key = `${idx}`;
if (!subContextMenuRefs.current[key]) {
subContextMenuRefs.current[key] = React.createRef<HTMLDivElement>();
}
});
useLayoutEffect(() => {
const shadowOffset = 10; // Adjust for box shadow space
if (initialPosition) {
// Adjust position if initialPosition is provided
let { top, left } = initialPosition;
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
const menuWidth = contextMenuRef.current?.offsetWidth || 0;
const menuHeight = contextMenuRef.current?.offsetHeight || 0;
const boundaryTop = 0;
const boundaryLeft = 0;
const boundaryRight = window.innerWidth + scrollLeft;
const boundaryBottom = window.innerHeight + scrollTop;
// Adjust if the menu overflows the right boundary
if (left + menuWidth > boundaryRight) {
left = boundaryRight - menuWidth - shadowOffset; // Shift left more for shadow
}
// Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the initial position
if (top + menuHeight > boundaryBottom) {
top = initialPosition.top - menuHeight - shadowOffset; // Shift up for shadow
}
// Adjust if the menu overflows the left boundary
if (left < boundaryLeft) {
left = boundaryLeft + shadowOffset; // Add shadow offset from the left edge
}
// Adjust if the menu overflows the top boundary
if (top < boundaryTop) {
top = boundaryTop + shadowOffset; // Add shadow offset from the top edge
}
setPosition({ top, left });
} else if (anchorRef.current && contextMenuRef.current) {
// Calculate position based on anchorRef if it exists
const anchorRect = anchorRef.current.getBoundingClientRect();
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
let top = anchorRect.bottom + scrollTop;
let left = anchorRect.left + scrollLeft;
const menuWidth = contextMenuRef.current.offsetWidth;
const menuHeight = contextMenuRef.current.offsetHeight;
const boundaryTop = 0;
const boundaryLeft = 0;
const boundaryRight = window.innerWidth + scrollLeft;
const boundaryBottom = window.innerHeight + scrollTop;
// Adjust if the menu overflows the right boundary
if (left + menuWidth > boundaryRight) {
left = boundaryRight - menuWidth;
}
// Adjust if the menu overflows the bottom boundary: move the menu upwards so its bottom edge aligns with the anchor top
if (top + menuHeight > boundaryBottom) {
top = anchorRect.top + scrollTop - menuHeight;
}
// Adjust if the menu overflows the left boundary
if (left < boundaryLeft) {
left = boundaryLeft;
}
// Adjust if the menu overflows the top boundary
if (top < boundaryTop) {
top = boundaryTop;
}
setPosition({ top, left });
} else {
console.warn("Neither initialPosition nor anchorRef provided. Defaulting to { top: 0, left: 0 }.");
}
}, [width, height, initialPosition]);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const isClickInsideDropdown =
contextMenuRef.current && contextMenuRef.current.contains(event.target as Node);
const isClickInsideAnchor = anchorRef?.current
? anchorRef.current.contains(event.target as Node)
: false;
const isClickInsideSubMenus = Object.keys(subContextMenuRefs.current).some(
(key) =>
subContextMenuRefs.current[key]?.current &&
subContextMenuRefs.current[key]?.current.contains(event.target as Node)
);
if (!isClickInsideDropdown && !isClickInsideAnchor && !isClickInsideSubMenus) {
setVisibility(false);
}
};
scopeRef?.current?.addEventListener("mousedown", handleClickOutside);
return () => {
scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
};
}, []);
// Position submenus based on available space and scroll position
const handleSubContextMenuPosition = (
key: string,
itemRect: DOMRect,
parentRef: React.RefObject<HTMLDivElement>,
label: string
) => {
throttle(0, () => {
const subContextMenuRef = subContextMenuRefs.current[key]?.current;
if (!subContextMenuRef) return;
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
const submenuWidth = subContextMenuRef.offsetWidth;
const submenuHeight = subContextMenuRef.offsetHeight;
let left = itemRect.right + scrollLeft - 2; // Adjust for horizontal scroll
let top = itemRect.top - 2 + scrollTop; // Adjust for vertical scroll
// Adjust to the left if overflowing the right boundary
if (left + submenuWidth > window.innerWidth + scrollLeft) {
left = itemRect.left + scrollLeft - submenuWidth;
}
// Adjust if the submenu overflows the bottom boundary
if (top + submenuHeight > window.innerHeight + scrollTop) {
top = window.innerHeight + scrollTop - submenuHeight - 10;
}
setSubMenuPosition((prev) => ({
...prev,
[key]: { top, left, label },
}));
})();
};
const handleMouseEnterItem = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
parentKey: string | null,
index: number,
item: MenuItem
) => {
event.stopPropagation();
const key = parentKey ? `${parentKey}-${index}` : `${index}`;
setVisibleSubMenus((prev) => {
const updatedState = { ...prev };
updatedState[key] = { visible: true, label: item.label };
const ancestors = key.split("-").reduce((acc, part, idx) => {
if (idx === 0) return [part];
return [...acc, `${acc[idx - 1]}-${part}`];
}, [] as string[]);
ancestors.forEach((ancestorKey) => {
if (updatedState[ancestorKey]) {
updatedState[ancestorKey].visible = true;
}
});
for (const pkey in updatedState) {
if (!ancestors.includes(pkey) && pkey !== key) {
updatedState[pkey].visible = false;
}
}
return updatedState;
});
const newHoveredItems = key.split("-").reduce((acc, part, idx) => {
if (idx === 0) return [part];
return [...acc, `${acc[idx - 1]}-${part}`];
}, [] as string[]);
setHoveredItems(newHoveredItems);
const itemRect = event.currentTarget.getBoundingClientRect();
handleSubContextMenuPosition(key, itemRect, contextMenuRef, item.label);
};
const handleOnClick = (e: React.MouseEvent<HTMLDivElement>, item: MenuItem) => {
e.stopPropagation();
item.onClick && item.onClick(e);
};
// const handleKeyDown = useCallback(
// (waveEvent: WaveKeyboardEvent): boolean => {
// if (keyutil.checkKeyPressed(waveEvent, "ArrowDown")) {
// setFocusedIndex((prev) => (prev + 1) % items.length); // Move down
// return true;
// }
// if (keyutil.checkKeyPressed(waveEvent, "ArrowUp")) {
// setFocusedIndex((prev) => (prev - 1 + items.length) % items.length); // Move up
// return true;
// }
// if (keyutil.checkKeyPressed(waveEvent, "ArrowRight")) {
// if (items[focusedIndex].subItems) {
// setSubmenuOpen(focusedIndex); // Open the submenu
// }
// return true;
// }
// if (keyutil.checkKeyPressed(waveEvent, "ArrowLeft")) {
// if (submenuOpen !== null) {
// setSubmenuOpen(null); // Close the submenu
// }
// return true;
// }
// if (keyutil.checkKeyPressed(waveEvent, "Enter") || keyutil.checkKeyPressed(waveEvent, " ")) {
// if (items[focusedIndex].onClick) {
// items[focusedIndex].onClick(); // Trigger click
// }
// return true;
// }
// if (keyutil.checkKeyPressed(waveEvent, "Escape")) {
// setVisibility(false); // Close the menu
// return true;
// }
// return false;
// },
// [focusedIndex, submenuOpen, items, setVisibility]
// );
const menuMenu = (
<div
className={clsx("context-menu", className)}
ref={contextMenuRef}
style={{ top: position.top, left: position.left }}
>
{items.map((item, index) => {
const key = `${index}`;
const isActive = hoveredItems.includes(key);
const menuItemProps = {
className: clsx("context-menu-item", { active: isActive }),
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
handleMouseEnterItem(event, null, index, item),
onClick: (e: React.MouseEvent<HTMLDivElement>) => handleOnClick(e, item),
};
const renderedItem = renderMenuItem ? (
renderMenuItem(item, menuItemProps)
) : (
<div key={key} {...menuItemProps}>
<span className="label">{item.label}</span>
{item.subItems && <i className="fa-sharp fa-solid fa-chevron-right"></i>}
</div>
);
return (
<React.Fragment key={key}>
{renderedItem}
{visibleSubMenus[key]?.visible && item.subItems && (
<SubContextMenu
subItems={item.subItems}
parentKey={key}
subContextMenuPosition={subMenuPosition}
visibleSubMenus={visibleSubMenus}
hoveredItems={hoveredItems}
handleMouseEnterItem={handleMouseEnterItem}
handleOnClick={handleOnClick}
subMenuRefs={subContextMenuRefs}
renderMenu={renderMenu}
renderMenuItem={renderMenuItem}
/>
)}
</React.Fragment>
);
})}
</div>
);
return ReactDOM.createPortal(renderMenu ? renderMenu(menuMenu, { parentKey: null }) : menuMenu, document.body);
}
);
export { ContextMenu };