feat(joint-react): add new set hooks and better ts support

packages/joint-react/.storybook/decorators/with-simple-data.tsx

@@ -19,15 +19,15 @@ const initialElements = createElements([
     data: { label: 'Node 1', color: PRIMARY },
     x: 100,
     y: 20,
-    width: 100,
+    width: 150,
     height: 50,
   },
   {
     id: '2',
     data: { label: 'Node 2', color: PRIMARY },
     x: 200,
     y: 250,
-    width: 100,
+    width: 150,
     height: 50,
   },
 ]);
@@ -46,7 +46,7 @@ const defaultLinks = createLinks([
   },
 ]);
 
-function SimpleGraphProviderDecorator({ children }: Readonly<PropsWithChildren>) {
+export function SimpleGraphProviderDecorator({ children }: Readonly<PropsWithChildren>) {
   return (
     <GraphProvider defaultElements={initialElements} defaultLinks={defaultLinks}>
       {children}
@@ -68,14 +68,13 @@ export function RenderItemDecorator(
   }>
 ) {
   return (
-    <div style={{ width: '100%', height: 350 }}>
+    <div style={{ width: '100%', height: 450 }}>
       <SimpleGraphProviderDecorator>
         <Paper
           width={'100%'}
-          height={350}
+          height={450}
           renderElement={properties.renderElement}
           linkPinning={false}
-          // snapLinks={{ radius: 20 }}
         />
       </SimpleGraphProviderDecorator>
     </div>

packages/joint-react/docs/README.md

@@ -14,9 +14,12 @@
 
 ## Hooks
 
+- [useAddElement](functions/useAddElement.md)
+- [useAddLink](functions/useAddLink.md)
 - [useElements](functions/useElements.md)
 - [useGraph](functions/useGraph.md)
 - [useLinks](functions/useLinks.md)
+- [useRemoveCell](functions/useRemoveCell.md)
 - [useSetElement](functions/useSetElement.md)
 
 ## Models
@@ -75,6 +78,7 @@ const paper = usePaper();
 - [PaperProps](interfaces/PaperProps.md)
 - [PortGroupProps](interfaces/PortGroupProps.md)
 - [PortProps](interfaces/PortProps.md)
+- [ReactElementAttributes](interfaces/ReactElementAttributes.md)
 - [StrokeHighlighterProps](interfaces/StrokeHighlighterProps.md)
 - [TextNodeProps](interfaces/TextNodeProps.md)
 

packages/joint-react/docs/functions/createElements.md

@@ -6,9 +6,9 @@
 
 # Function: createElements()
 
-> **createElements**\<`Data`, `Type`, `Element`\>(`data`): `Element` & `object`[]
+> **createElements**\<`Data`, `Type`, `Element`\>(`data`): `Element` & `RequiredElementProps`[]
 
-Defined in: [joint-react/src/utils/create.ts:30](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/utils/create.ts#L30)
+Defined in: [joint-react/src/utils/create.ts:36](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/utils/create.ts#L36)
 
 Create elements helper function.
 
@@ -20,7 +20,7 @@ Create elements helper function.
 
 ### Type
 
-`Type` *extends* `string` = `string`
+`Type` *extends* `string` = `"react"`
 
 ### Element
 
@@ -36,7 +36,7 @@ Array of elements to create.
 
 ## Returns
 
-`Element` & `object`[]
+`Element` & `RequiredElementProps`[]
 
 Array of elements. (Nodes)
 

packages/joint-react/docs/functions/createLinks.md

@@ -8,7 +8,7 @@
 
 > **createLinks**\<`Link`, `Type`\>(`data`): `Link` & [`GraphLink`](../interfaces/GraphLink.md)[]
 
-Defined in: [joint-react/src/utils/create.ts:70](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/utils/create.ts#L70)
+Defined in: [joint-react/src/utils/create.ts:74](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/utils/create.ts#L74)
 
 Create links helper function.
 
@@ -20,7 +20,7 @@ Create links helper function.
 
 ### Type
 
-`Type` *extends* `string` = `string`
+`Type` *extends* `string` = `"standard.Link"`
 
 ## Parameters
 

packages/joint-react/docs/functions/useAddElement.md

@@ -0,0 +1,42 @@
+[**@joint/react**](../README.md)
+
+***
+
+[@joint/react](../README.md) / useAddElement
+
+# Function: useAddElement()
+
+> **useAddElement**\<`T`\>(): (`element`) => `void`
+
+Defined in: [joint-react/src/hooks/use-add-element.ts:22](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/hooks/use-add-element.ts#L22)
+
+A custom hook that adds an element to the graph.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Element`\<`Attributes`, `ModelSetOptions`\> \| [`GraphElementBase`](../interfaces/GraphElementBase.md)\<`string`\>
+
+## Returns
+
+`Function`
+
+A function that adds the element to the graph.
+
+### Parameters
+
+#### element
+
+`SetElement`\<`T`\>
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const addElement = useAddElement();
+addElement({ id: '1', data: { label: 'Node 1' } });
+```

packages/joint-react/docs/functions/useAddLink.md

@@ -0,0 +1,42 @@
+[**@joint/react**](../README.md)
+
+***
+
+[@joint/react](../README.md) / useAddLink
+
+# Function: useAddLink()
+
+> **useAddLink**\<`T`\>(): (`link`) => `void`
+
+Defined in: [joint-react/src/hooks/use-add-link.ts:17](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/hooks/use-add-link.ts#L17)
+
+A custom hook that adds a link to the graph.
+
+## Type Parameters
+
+### T
+
+`T` *extends* `Link`\<`Attributes`, `ModelSetOptions`\> \| [`GraphLinkBase`](../interfaces/GraphLinkBase.md)\<`string`\>
+
+## Returns
+
+`Function`
+
+A function that adds the link to the graph.
+
+### Parameters
+
+#### link
+
+`T`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const addLink = useAddLink();
+addLink({ id: '1', source: { id: '2' }, target: { id: '3' } });
+```

packages/joint-react/docs/functions/useElement.md

@@ -30,7 +30,7 @@ How it works:
 
 ### Element
 
-`Element` = [`GraphElement`](../interfaces/GraphElement.md)\<`unknown`, `string`\>
+`Element` = [`GraphElement`](../interfaces/GraphElement.md)\<`unknown`, `"react"`\>
 
 ### ReturnedElements
 

packages/joint-react/docs/functions/useElements.md

@@ -28,7 +28,7 @@ checks if the selected value really changed.
 
 ### Elements
 
-`Elements` *extends* [`GraphElementBase`](../interfaces/GraphElementBase.md)\<`string`\> = [`GraphElement`](../interfaces/GraphElement.md)\<`unknown`, `string`\>
+`Elements` *extends* [`GraphElementBase`](../interfaces/GraphElementBase.md)\<`string`\> = [`GraphElement`](../interfaces/GraphElement.md)\<`unknown`, `"react"`\>
 
 ### SelectorReturnType
 

packages/joint-react/docs/functions/useRemoveCell.md

@@ -0,0 +1,36 @@
+[**@joint/react**](../README.md)
+
+***
+
+[@joint/react](../README.md) / useRemoveCell
+
+# Function: useRemoveCell()
+
+> **useRemoveCell**(): (`id`) => `void`
+
+Defined in: [joint-react/src/hooks/use-remove-cell.ts:15](https://github.com/samuelgja/joint/blob/main/packages/joint-react/src/hooks/use-remove-cell.ts#L15)
+
+A custom hook that removes an node or link from the graph by its ID.
+
+## Returns
+
+`Function`
+
+A function that removes the element from the graph.
+
+### Parameters
+
+#### id
+
+`ID`
+
+### Returns
+
+`void`
+
+## Example
+
+```ts
+const removeCell = useRemoveCell();
+removeCell('1');
+```

packages/joint-react/docs/functions/useSetElement.md

@@ -14,7 +14,7 @@ Defined in: [joint-react/src/hooks/use-set-element.ts:81](https://github.com/sam
 
 **`Experimental`**
 
-Use this hook to set element attributes.
+Set the element attribute in the graph.
 It returns a function to set the element attribute.
 
 It must be used inside the GraphProvider.
@@ -89,7 +89,7 @@ Defined in: [joint-react/src/hooks/use-set-element.ts:89](https://github.com/sam
 
 **`Experimental`**
 
-Use this hook to set element attributes.
+Set the element attribute in the graph.
 It returns a function to set the element attribute.
 
 It must be used inside the GraphProvider.
@@ -164,7 +164,7 @@ Defined in: [joint-react/src/hooks/use-set-element.ts:93](https://github.com/sam
 
 **`Experimental`**
 
-Use this hook to set element attributes.
+Set the element attribute in the graph.
 It returns a function to set the element attribute.
 
 It must be used inside the GraphProvider.