mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-09-19 15:31:04 +02:00
remove refactored popups
This commit is contained in:
Ryan Di
@@ -1,122 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { CLASSES, capitalizeString } from "@excalidraw/common";
|
||||
import { trackEvent } from "../analytics";
|
||||
import { t } from "../i18n";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
import { ArrowIcon, LineIcon } from "./icons";
|
||||
|
||||
import type { AppClassProperties } from "../types";
|
||||
|
||||
import "./ConvertElementTypePopup.scss";
|
||||
|
||||
const LINEAR_ELEMENT_TYPES = [
|
||||
{ type: "arrow", icon: ArrowIcon },
|
||||
{ type: "line", icon: LineIcon },
|
||||
] as const;
|
||||
|
||||
type LinearElementType = "arrow" | "line";
|
||||
|
||||
type LinearElementTypePopupProps = {
|
||||
app: AppClassProperties;
|
||||
triggerElement: HTMLElement | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
currentType: LinearElementType;
|
||||
onChange?: (type: LinearElementType) => void;
|
||||
};
|
||||
|
||||
export const LinearElementTypePopup = ({
|
||||
app,
|
||||
triggerElement,
|
||||
isOpen,
|
||||
onClose,
|
||||
onChange,
|
||||
currentType,
|
||||
}: LinearElementTypePopupProps) => {
|
||||
const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !triggerElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePosition = () => {
|
||||
const triggerRect = triggerElement.getBoundingClientRect();
|
||||
const panelRect = panelRef.current?.getBoundingClientRect();
|
||||
const panelWidth = panelRect?.width ?? 0;
|
||||
const panelHeight = panelRect?.height ?? 0;
|
||||
setPanelPosition({
|
||||
x: triggerRect.x + triggerRect.width / 2 - panelWidth / 2,
|
||||
y: triggerRect.top - panelHeight - 16,
|
||||
});
|
||||
};
|
||||
|
||||
updatePosition();
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
const target = event.target as Node | null;
|
||||
const panelEl = panelRef.current;
|
||||
const triggerEl = triggerElement;
|
||||
if (!target) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
const clickedInsidePanel = !!panelEl && panelEl.contains(target);
|
||||
const clickedTrigger = !!triggerEl && triggerEl.contains(target);
|
||||
if (!clickedInsidePanel && !clickedTrigger) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
// use capture to ensure we run before potential re-renders hide elements
|
||||
document.addEventListener("pointerdown", handleClick, true);
|
||||
document.addEventListener("pointerup", handleClick, true);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handleClick, true);
|
||||
document.removeEventListener("pointerup", handleClick, true);
|
||||
};
|
||||
}, [isOpen, triggerElement, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={panelRef}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: `${panelPosition.y}px`,
|
||||
left: `${panelPosition.x}px`,
|
||||
zIndex: 2,
|
||||
}}
|
||||
className={CLASSES.CONVERT_ELEMENT_TYPE_POPUP}
|
||||
>
|
||||
{LINEAR_ELEMENT_TYPES.map(({ type, icon }) => (
|
||||
<ToolButton
|
||||
className="LinearElement"
|
||||
key={type}
|
||||
type="radio"
|
||||
icon={icon}
|
||||
checked={currentType === type}
|
||||
name="linearElementType-option"
|
||||
title={capitalizeString(t(`toolBar.${type}`))}
|
||||
keyBindingLabel=""
|
||||
aria-label={capitalizeString(t(`toolBar.${type}`))}
|
||||
data-testid={`toolbar-${type}`}
|
||||
onChange={() => {
|
||||
if (app.state.activeTool.type !== type) {
|
||||
trackEvent("toolbar", type, "ui");
|
||||
}
|
||||
app.setActiveTool({ type: type as any });
|
||||
onChange?.(type);
|
||||
// Intentionally NOT calling onClose here; popup should stay open
|
||||
// until user clicks outside trigger or popup per requirements.
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,122 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { CLASSES, capitalizeString } from "@excalidraw/common";
|
||||
import { trackEvent } from "../analytics";
|
||||
import { t } from "../i18n";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
import { SelectionIcon, LassoIcon } from "./icons";
|
||||
|
||||
import type { AppClassProperties } from "../types";
|
||||
|
||||
import "./ConvertElementTypePopup.scss";
|
||||
|
||||
const SELECTION_TYPES = [
|
||||
{ type: "selection", icon: SelectionIcon },
|
||||
{ type: "lasso", icon: LassoIcon },
|
||||
] as const;
|
||||
|
||||
type SelectionType = "selection" | "lasso";
|
||||
|
||||
type SelectionTypePopupProps = {
|
||||
app: AppClassProperties;
|
||||
triggerElement: HTMLElement | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
currentType: SelectionType;
|
||||
onChange?: (type: SelectionType) => void;
|
||||
};
|
||||
|
||||
export const SelectionTypePopup = ({
|
||||
app,
|
||||
triggerElement,
|
||||
isOpen,
|
||||
onClose,
|
||||
onChange,
|
||||
currentType,
|
||||
}: SelectionTypePopupProps) => {
|
||||
const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !triggerElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePosition = () => {
|
||||
const triggerRect = triggerElement.getBoundingClientRect();
|
||||
const panelRect = panelRef.current?.getBoundingClientRect();
|
||||
const panelWidth = panelRect?.width ?? 0;
|
||||
const panelHeight = panelRect?.height ?? 0;
|
||||
setPanelPosition({
|
||||
x: triggerRect.x + triggerRect.width / 2 - panelWidth / 2,
|
||||
y: triggerRect.top - panelHeight - 16,
|
||||
});
|
||||
};
|
||||
|
||||
updatePosition();
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
const target = event.target as Node | null;
|
||||
const panelEl = panelRef.current;
|
||||
const triggerEl = triggerElement;
|
||||
if (!target) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
const clickedInsidePanel = !!panelEl && panelEl.contains(target);
|
||||
const clickedTrigger = !!triggerEl && triggerEl.contains(target);
|
||||
if (!clickedInsidePanel && !clickedTrigger) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
// use capture to ensure we run before potential re-renders hide elements
|
||||
document.addEventListener("pointerdown", handleClick, true);
|
||||
document.addEventListener("pointerup", handleClick, true);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handleClick, true);
|
||||
document.removeEventListener("pointerup", handleClick, true);
|
||||
};
|
||||
}, [isOpen, triggerElement, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={panelRef}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: `${panelPosition.y}px`,
|
||||
left: `${panelPosition.x}px`,
|
||||
zIndex: 2,
|
||||
}}
|
||||
className={CLASSES.CONVERT_ELEMENT_TYPE_POPUP}
|
||||
>
|
||||
{SELECTION_TYPES.map(({ type, icon }) => (
|
||||
<ToolButton
|
||||
className="Selection"
|
||||
key={type}
|
||||
type="radio"
|
||||
icon={icon}
|
||||
checked={currentType === type}
|
||||
name="selectionType-option"
|
||||
title={capitalizeString(t(`toolBar.${type}`))}
|
||||
keyBindingLabel=""
|
||||
aria-label={capitalizeString(t(`toolBar.${type}`))}
|
||||
data-testid={`toolbar-${type}`}
|
||||
onChange={() => {
|
||||
if (app.state.activeTool.type !== type) {
|
||||
trackEvent("toolbar", type, "ui");
|
||||
}
|
||||
app.setActiveTool({ type: type as any });
|
||||
onChange?.(type);
|
||||
// Intentionally NOT calling onClose here; popup should stay open
|
||||
// until user clicks outside trigger or popup per requirements.
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,123 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { CLASSES, capitalizeString } from "@excalidraw/common";
|
||||
import { trackEvent } from "../analytics";
|
||||
import { t } from "../i18n";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
import { DiamondIcon, EllipseIcon, RectangleIcon } from "./icons";
|
||||
|
||||
import type { AppClassProperties } from "../types";
|
||||
|
||||
import "./ConvertElementTypePopup.scss";
|
||||
|
||||
const GAP_HORIZONTAL = 44;
|
||||
const GAP_VERTICAL = -94;
|
||||
|
||||
const GENERIC_SHAPES = [
|
||||
{ type: "rectangle", icon: RectangleIcon },
|
||||
{ type: "diamond", icon: DiamondIcon },
|
||||
{ type: "ellipse", icon: EllipseIcon },
|
||||
] as const;
|
||||
|
||||
type ShapeTypePopupProps = {
|
||||
app: AppClassProperties;
|
||||
triggerElement: HTMLElement | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
currentType: string;
|
||||
onChange?: (type: "rectangle" | "diamond" | "ellipse") => void;
|
||||
};
|
||||
|
||||
export const ShapeTypePopup = ({
|
||||
app,
|
||||
triggerElement,
|
||||
isOpen,
|
||||
onClose,
|
||||
onChange,
|
||||
currentType,
|
||||
}: ShapeTypePopupProps) => {
|
||||
const [panelPosition, setPanelPosition] = useState({ x: 0, y: 0 });
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !triggerElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatePosition = () => {
|
||||
const triggerRect = triggerElement.getBoundingClientRect();
|
||||
const panelRect = panelRef.current?.getBoundingClientRect();
|
||||
const panelWidth = panelRect?.width ?? 0;
|
||||
const panelHeight = panelRect?.height ?? 0;
|
||||
setPanelPosition({
|
||||
x: triggerRect.x + triggerRect.width / 2 - panelWidth / 2,
|
||||
y: triggerRect.top - panelHeight - 16,
|
||||
});
|
||||
};
|
||||
|
||||
updatePosition();
|
||||
|
||||
// Outside click handling (capture pointer events for reliability on mobile)
|
||||
const handlePointer = (event: PointerEvent) => {
|
||||
const target = event.target as Node | null;
|
||||
const panelEl = panelRef.current;
|
||||
const triggerEl = triggerElement;
|
||||
if (!target) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
const insidePanel = !!panelEl && panelEl.contains(target);
|
||||
const onTrigger = !!triggerEl && triggerEl.contains(target);
|
||||
if (!insidePanel && !onTrigger) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
document.addEventListener("pointerdown", handlePointer, true);
|
||||
document.addEventListener("pointerup", handlePointer, true);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", handlePointer, true);
|
||||
document.removeEventListener("pointerup", handlePointer, true);
|
||||
};
|
||||
}, [isOpen, triggerElement, onClose]);
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={panelRef}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: `${panelPosition.y}px`,
|
||||
left: `${panelPosition.x}px`,
|
||||
zIndex: 2,
|
||||
}}
|
||||
className={CLASSES.CONVERT_ELEMENT_TYPE_POPUP}
|
||||
>
|
||||
{GENERIC_SHAPES.map(({ type, icon }) => (
|
||||
<ToolButton
|
||||
className="Shape"
|
||||
key={type}
|
||||
type="radio"
|
||||
icon={icon}
|
||||
checked={currentType === type}
|
||||
name="shapeType-option"
|
||||
title={capitalizeString(t(`toolBar.${type}`))}
|
||||
keyBindingLabel=""
|
||||
aria-label={capitalizeString(t(`toolBar.${type}`))}
|
||||
data-testid={`toolbar-${type}`}
|
||||
onChange={() => {
|
||||
if (app.state.activeTool.type !== type) {
|
||||
trackEvent("toolbar", type, "ui");
|
||||
}
|
||||
app.setActiveTool({ type: type as any });
|
||||
onChange?.(type);
|
||||
// Do NOT close here; keep popup open until user clicks outside (parity with SelectionTypePopup)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user