drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-05-24 18:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: highlight using selectedElement

Browse Source
This commit is contained in:
Huy Bui 2024-07-29 20:26:23 +07:00
parent b8cb079ca5
commit 2490cb8c01
3 changed files with 6 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/EditorCanvas/Relationship.jsx
View File

@ -1,6 +1,5 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { Cardinality, ObjectType, Tab } from "../../data/constants"; import { Cardinality, ObjectType, Tab } from "../../data/constants";
import { RELATIONSHIP_EDITING } from "../../data/customEvents";
import { calcPath } from "../../utils/calcPath"; import { calcPath } from "../../utils/calcPath";
import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks"; import { useDiagram, useSettings, useLayout, useSelect } from "../../hooks";
import { cn } from "../../utils/cn"; import { cn } from "../../utils/cn";
@ -14,28 +13,8 @@ export default function Relationship({ data }) {
const pathRef = useRef(); const pathRef = useRef();
useEffect(() => { useEffect(() => {
const handleEditing = (event) => { setEditing(data.id === selectedElement.id);
setEditing(event.detail.id === data.id); }, [data.id, selectedElement.id]);
};
document.addEventListener(RELATIONSHIP_EDITING, handleEditing);
return () => {
document.removeEventListener(RELATIONSHIP_EDITING, handleEditing);
};
}, [data.id]);
useEffect(() => {
const handleClickAway = (event) => {
if (pathRef.current && !pathRef.current.contains(event.target)) {
setEditing(false);
}
};
document.addEventListener("mousedown", handleClickAway);
return () => {
document.removeEventListener("mousedown", handleClickAway);
};
}, [pathRef]);
let cardinalityStart = "1"; let cardinalityStart = "1";
let cardinalityEnd = "1"; let cardinalityEnd = "1";

15
src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
View File

@ -4,7 +4,6 @@ import Empty from "../Empty";
import SearchBar from "./SearchBar"; import SearchBar from "./SearchBar";
import RelationshipInfo from "./RelationshipInfo"; import RelationshipInfo from "./RelationshipInfo";
import { ObjectType } from "../../../data/constants"; import { ObjectType } from "../../../data/constants";
import { RELATIONSHIP_EDITING } from "../../../data/customEvents";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
export default function RelationshipsTab() { export default function RelationshipsTab() {
@ -24,20 +23,14 @@ export default function RelationshipsTab() {
} }
keepDOM keepDOM
lazyRender lazyRender
onChange={(k) => { onChange={(k) =>
const newId = parseInt(k);
const event = new CustomEvent(RELATIONSHIP_EDITING, {
detail: { id: newId },
});
document.dispatchEvent(event);
setSelectedElement((prev) => ({ setSelectedElement((prev) => ({
...prev, ...prev,
open: true, open: true,
id: newId, id: parseInt(k),
element: ObjectType.RELATIONSHIP, element: ObjectType.RELATIONSHIP,
})); }))
}} }
accordion accordion
> >
{relationships.length <= 0 ? ( {relationships.length <= 0 ? (

1
src/data/customEvents.js
View File

@ -1 +0,0 @@
export const RELATIONSHIP_EDITING = "relationship-editing";