+ {this.graphics.getDefaultLayerElements(this, "placeholder", (elements) =>
+
+ ;
+ }
+}
+
+export default RotatedTextComponent;
diff --git a/src/Diagrams/Schemas/CalloutAnnotationComponentConfigShape.js b/src/Diagrams/Schemas/CalloutAnnotationComponentConfigShape.js
new file mode 100644
index 00000000..77a16084
--- /dev/null
+++ b/src/Diagrams/Schemas/CalloutAnnotationComponentConfigShape.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { LineType, PlacementType } from 'basicprimitives';
+
+const RectShape = PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+});
+
+const PointShape = PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired
+});
+
+const CalloutAnnotationControlConfigShape = PropTypes.shape({
+ pointerPlacement: PropTypes.oneOf(Object.values(PlacementType)),
+ position: RectShape,
+ snapPoint: PointShape,
+ cornerRadius: PropTypes.oneOfType([
+ PropTypes.string, // e.g. "10%"
+ PropTypes.number // in case pixel radius is supported
+ ]),
+ offset: PropTypes.number,
+ opacity: PropTypes.number,
+ lineWidth: PropTypes.number,
+ lineType: PropTypes.oneOf(Object.values(LineType)),
+ pointerWidth: PropTypes.oneOfType([
+ PropTypes.string, // e.g. "10%"
+ PropTypes.number // e.g. 10
+ ]),
+ borderColor: PropTypes.string,
+ fillColor: PropTypes.string
+});
+
+export default CalloutAnnotationControlConfigShape;
diff --git a/src/Diagrams/Schemas/ConnectorAnnotationComponentConfigShape.js b/src/Diagrams/Schemas/ConnectorAnnotationComponentConfigShape.js
new file mode 100644
index 00000000..dc3bfd4c
--- /dev/null
+++ b/src/Diagrams/Schemas/ConnectorAnnotationComponentConfigShape.js
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import {
+ OrientationType,
+ ConnectorPlacementType,
+ ConnectorShapeType,
+ ConnectorLabelPlacementType,
+ LineType
+} from 'basicprimitives';
+
+const RectShape = PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+});
+
+const ThicknessShape = PropTypes.shape({
+ left: PropTypes.number.isRequired,
+ top: PropTypes.number.isRequired,
+ right: PropTypes.number.isRequired,
+ bottom: PropTypes.number.isRequired
+});
+
+const SizeShape = PropTypes.shape({
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+});
+
+const ConnectorAnnotationControlConfigShape = PropTypes.shape({
+ orientationType: PropTypes.oneOf(Object.values(OrientationType)),
+ connectorPlacementType: PropTypes.oneOf(Object.values(ConnectorPlacementType)),
+ connectorShapeType: PropTypes.oneOf(Object.values(ConnectorShapeType)),
+ fromRectangle: RectShape,
+ toRectangle: RectShape,
+ offset: ThicknessShape,
+ lineWidth: PropTypes.number,
+ color: PropTypes.string,
+ lineType: PropTypes.oneOf(Object.values(LineType)),
+ label:PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object
+ ]),
+ labelSize: SizeShape,
+ labelOffset: PropTypes.number,
+ labelPlacementType: PropTypes.oneOf(Object.values(ConnectorLabelPlacementType))
+});
+
+export default ConnectorAnnotationControlConfigShape;
\ No newline at end of file
diff --git a/src/Diagrams/Schemas/RotatedTextComponentConfigShape.js b/src/Diagrams/Schemas/RotatedTextComponentConfigShape.js
new file mode 100644
index 00000000..a749d517
--- /dev/null
+++ b/src/Diagrams/Schemas/RotatedTextComponentConfigShape.js
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import {
+ VerticalAlignmentType,
+ TextOrientationType,
+ HorizontalAlignmentType
+} from 'basicprimitives'; // Adjust this import path as needed
+
+const RotatedTextControlConfigShape = PropTypes.shape({
+ /**
+ * Label orientation.
+ */
+ orientation: PropTypes.oneOf(Object.values(TextOrientationType)),
+
+ /**
+ * The text content to display.
+ */
+ text: PropTypes.string,
+
+ /**
+ * Label vertical alignment inside bounding rectangle.
+ */
+ verticalAlignment: PropTypes.oneOf(Object.values(VerticalAlignmentType)),
+
+ /**
+ * Label horizontal alignment inside bounding rectangle.
+ */
+ horizontalAlignment: PropTypes.oneOf(Object.values(HorizontalAlignmentType)),
+
+ /**
+ * Font size (e.g., "16px")
+ */
+ fontSize: PropTypes.string,
+
+ /**
+ * Font family (e.g., "Arial")
+ */
+ fontFamily: PropTypes.string,
+
+ /**
+ * Font color (e.g., Colors.Black)
+ */
+ color: PropTypes.string,
+
+ /**
+ * Font weight (e.g., "normal", "bold")
+ */
+ fontWeight: PropTypes.oneOf(['normal', 'bold']),
+
+ /**
+ * Font style (e.g., "normal", "italic")
+ */
+ fontStyle: PropTypes.oneOf(['normal', 'italic'])
+});
+
+export default RotatedTextControlConfigShape;
diff --git a/src/Diagrams/Schemas/ShapeAnnotationComponentConfigShape.js b/src/Diagrams/Schemas/ShapeAnnotationComponentConfigShape.js
new file mode 100644
index 00000000..b495614c
--- /dev/null
+++ b/src/Diagrams/Schemas/ShapeAnnotationComponentConfigShape.js
@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import {
+ OrientationType,
+ LineType,
+ ShapeType,
+ PlacementType
+} from 'basicprimitives'; // Adjust the import path as needed
+
+const ThicknessShape = PropTypes.shape({
+ left: PropTypes.number.isRequired,
+ top: PropTypes.number.isRequired,
+ right: PropTypes.number.isRequired,
+ bottom: PropTypes.number.isRequired
+});
+
+const SizeShape = PropTypes.shape({
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+});
+
+const RectShape = PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired
+});
+
+const ShapeAnnotationControlConfigShape = PropTypes.shape({
+ /**
+ * Diagram orientation.
+ */
+ orientationType: PropTypes.oneOf(Object.values(OrientationType)),
+
+ /**
+ * Shape type.
+ */
+ shapeType: PropTypes.oneOf(Object.values(ShapeType)),
+
+ /**
+ * Bounding rectangle.
+ */
+ position: RectShape,
+
+ /**
+ * Offset of the bounding rectangle.
+ */
+ offset: ThicknessShape,
+
+ /**
+ * Border line width.
+ */
+ lineWidth: PropTypes.number,
+
+ /**
+ * Corner radius in % or px.
+ */
+ cornerRadius: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number
+ ]),
+
+ /**
+ * Background color opacity.
+ */
+ opacity: PropTypes.number,
+
+ /**
+ * Border color.
+ */
+ borderColor: PropTypes.string,
+
+ /**
+ * Fill color.
+ */
+ fillColor: PropTypes.string,
+
+ /**
+ * Border line pattern.
+ */
+ lineType: PropTypes.oneOf(Object.values(LineType)),
+
+ /**
+ * Optional label text.
+ */
+ label: PropTypes.string,
+
+ /**
+ * Label size.
+ */
+ labelSize: SizeShape,
+
+ /**
+ * Label placement.
+ */
+ labelPlacement: PropTypes.oneOf(Object.values(PlacementType)),
+
+ /**
+ * Offset between label and shape.
+ */
+ labelOffset: PropTypes.number
+});
+
+export default ShapeAnnotationControlConfigShape;
diff --git a/src/Diagrams/ShapeAnnotationComponent.jsx b/src/Diagrams/ShapeAnnotationComponent.jsx
new file mode 100644
index 00000000..0cb0cf7c
--- /dev/null
+++ b/src/Diagrams/ShapeAnnotationComponent.jsx
@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Rect, getFixOfPixelAlignment, getInnerSize, ShapeAnnotation, ShapeAnnotationControlConfig } from 'basicprimitives';
+import Graphics from './Graphics';
+
+// The following code is ResizeObserver Polyfill
+// It is added to the rendered page to track size changes of control placeholder
+// npm install resize-observer-polyfill --save-dev
+import 'resize-observer-polyfill/dist/ResizeObserver.global';
+
+import ShapeAnnotationComponentConfigShape from './Schemas/ShapeAnnotationComponentConfigShape';
+import {
+ AnnotationLabelTemplate
+} from './Templates';
+
+class ShapeAnnotationComponent extends Component {
+ static propTypes = {
+ config: ShapeAnnotationComponentConfigShape.isRequired // eslint-disable-line react/no-unused-prop-types
+ };
+
+ static defaultProps = {
+ };
+
+ constructor(props) {
+ super(props);
+
+ const { config, style } = props;
+
+ this.state = {
+ style,
+ config,
+ controlSize: {
+ width: 0,
+ height: 0
+ }
+ };
+
+ const { controlSize } = this.state;
+
+ this.onSizeChanged = this.onSizeChanged.bind(this);
+
+ this.controlPanelRef = React.createRef();
+ this.labelAnnotationTemplate = new AnnotationLabelTemplate();
+ this.graphics = new Graphics(controlSize);
+ this.shapeAnnotation = new ShapeAnnotation(this.graphics);
+ this.defaultOptions = new ShapeAnnotationControlConfig();
+ }
+
+ static getDerivedStateFromProps(nextProps, state) {
+ const { config: nextConfig } = nextProps;
+ const { config } = state;
+ if (config !== nextConfig) {
+ return {
+ config: nextConfig
+ };
+ }
+ return null;
+ }
+
+ componentDidMount() {
+ this.observer = new ResizeObserver(this.onSizeChanged);
+ this.observer.observe(this.controlPanelRef.current);
+
+ this.fixPixelAlignment();
+ }
+
+ componentWillUnmount() {
+ // destroy observer
+ this.observer.disconnect();
+ }
+
+ componentDidUpdate() {
+
+ }
+
+ fixPixelAlignment() {
+ const { current } = this.controlPanelRef;
+ var pixelAlignmentFix = getFixOfPixelAlignment(current);
+ current.style.marginLeft = pixelAlignmentFix.width + "px";
+ current.style.marginTop = pixelAlignmentFix.height + "px";
+ }
+
+ onSizeChanged() {
+ const { width, height } = getInnerSize(this.controlPanelRef.current)
+ this.setState({
+ controlSize: {
+ width,
+ height
+ }
+ });
+ }
+
+ render() {
+ const { config, controlSize, style } = this.state;
+ this.graphics.resize("placeholder", controlSize.width, controlSize.height);
+ this.graphics.reset("placeholder");
+ this.graphics.activate("placeholder");
+ const options = {...this.defaultOptions, ...config};
+
+
+ Object.assign(this.shapeAnnotation, options);
+
+ /* offset position */
+ const position = new Rect(options.position).offset(options.offset);
+ this.shapeAnnotation.draw(options, this.graphics, controlSize, this.labelAnnotationTemplate);
+
+ return <>
+
+ {elements}
+
+ )}
+
+ {this.graphics.getDefaultLayerElements(this, "placeholder", (elements) =>
+
+ ;
+ }
+}
+
+export default ShapeAnnotationComponent;
diff --git a/src/Samples/CalloutAnnotationComponentSample.jsx b/src/Samples/CalloutAnnotationComponentSample.jsx
new file mode 100644
index 00000000..dffba748
--- /dev/null
+++ b/src/Samples/CalloutAnnotationComponentSample.jsx
@@ -0,0 +1,186 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ConnectorShapeType, ConnectorPlacementType } from 'basicprimitives';
+import CalloutAnnotationComponent from "../Diagrams/CalloutAnnotationComponent";
+
+const initialPosition = { x: 100, y: 100, width: 200, height: 100 };
+const initialSnapPoint = { x: 450, y: 170 };
+
+export default function CalloutAnnotationComponentSample() {
+ const [position, setPosition] = useState(initialPosition);
+ const [snapPoint, setSnapPoint] = useState(initialSnapPoint);
+
+ const dragState = useRef({
+ dragging: false,
+ resizing: false,
+ target: null,
+ resizeTarget: null,
+ startX: 0,
+ startY: 0,
+ origX: 0,
+ origY: 0,
+ origWidth: 0,
+ origHeight: 0,
+ });
+
+ function onRectMouseDown(e, target) {
+ e.preventDefault();
+ dragState.current = {
+ dragging: true,
+ resizing: false,
+ target,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: target === "from" ? position.x : snapPoint.x,
+ origY: target === "from" ? position.y : snapPoint.y,
+ origWidth: target === "from" ? position.width : 0,
+ origHeight: target === "from" ? position.height : 0,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onResizerMouseDown(e, target) {
+ e.stopPropagation();
+ e.preventDefault();
+ dragState.current = {
+ dragging: false,
+ resizing: true,
+ resizeTarget: target,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: position.x,
+ origY: position.y,
+ origWidth: position.width,
+ origHeight: position.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onMouseMove(e) {
+ const ds = dragState.current;
+ if (ds.dragging) {
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+ if (ds.target === "from") {
+ setPosition((r) => ({
+ ...r,
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ } else if (ds.target === "to") {
+ setSnapPoint((p) => ({
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ }
+ } else if (ds.resizing) {
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+ if (ds.resizeTarget === "from") {
+ setPosition((r) => ({
+ x: r.x,
+ y: r.y,
+ width: Math.max(20, ds.origWidth + deltaX),
+ height: Math.max(20, ds.origHeight + deltaY),
+ }));
+ }
+ }
+ }
+
+ function onMouseUp(e) {
+ dragState.current.dragging = false;
+ dragState.current.resizing = false;
+ dragState.current.target = null;
+ dragState.current.resizeTarget = null;
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ }
+
+ return (
+
+ {elements}
+
+ )}
+
+ {/* From Rectangle */}
+
onRectMouseDown(e, "from")}
+ style={{
+ position: "absolute",
+ top: position.y,
+ left: position.x,
+ width: position.width,
+ height: position.height,
+ border: "1px dotted black",
+ backgroundColor: "white",
+ cursor: "move",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ fontSize: 14,
+ userSelect: "none",
+ }}
+ >
+ Drag & Resize Rect
+
onResizerMouseDown(e, "from")}
+ style={{
+ position: "absolute",
+ right: 0,
+ bottom: 0,
+ width: 16,
+ height: 8,
+ border: "1px dotted black",
+ cursor: "nwse-resize",
+ backgroundColor: "#eee",
+ }}
+ />
+
+
+ {/* To Point */}
+ onRectMouseDown(e, "to")}
+ style={{
+ position: "absolute",
+ top: snapPoint.y - 4,
+ left: snapPoint.x - 4,
+ width: 8,
+ height: 8,
+ borderRadius: "50%",
+ backgroundColor: "#000",
+ cursor: "move",
+ }}
+ />
+
+ {/* Callout annotation area */}
+
+ );
+}
diff --git a/src/Samples/ConnectorAnnotationComponentSample.jsx b/src/Samples/ConnectorAnnotationComponentSample.jsx
new file mode 100644
index 00000000..17f31de9
--- /dev/null
+++ b/src/Samples/ConnectorAnnotationComponentSample.jsx
@@ -0,0 +1,223 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ConnectorShapeType, ConnectorPlacementType } from 'basicprimitives';
+import ConnectorAnnotationComponent from "../Diagrams/ConnectorAnnotationComponent";
+
+const initialFromRect = { x: 100, y: 100, width: 200, height: 100 };
+const initialToRect = { x: 400, y: 400, width: 200, height: 100 };
+
+export default function ConnectorAnnotationComponentSample() {
+ const [fromRect, setFromRect] = useState(initialFromRect);
+ const [toRect, setToRect] = useState(initialToRect);
+
+ // Drag state refs (to avoid rerenders on every mousemove)
+ const dragState = useRef({
+ dragging: false,
+ resizing: false,
+ target: null, // "from" or "to"
+ resizeTarget: null, // "from" or "to"
+ startX: 0,
+ startY: 0,
+ origX: 0,
+ origY: 0,
+ origWidth: 0,
+ origHeight: 0,
+ });
+
+ // Mouse down on rect to start dragging
+ function onRectMouseDown(e, target) {
+ e.preventDefault();
+ dragState.current = {
+ dragging: true,
+ resizing: false,
+ target,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: target === "from" ? fromRect.x : toRect.x,
+ origY: target === "from" ? fromRect.y : toRect.y,
+ origWidth: target === "from" ? fromRect.width : toRect.width,
+ origHeight: target === "from" ? fromRect.height : toRect.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ // Mouse down on resizer to start resizing
+ function onResizerMouseDown(e, target) {
+ e.stopPropagation();
+ e.preventDefault();
+ dragState.current = {
+ dragging: false,
+ resizing: true,
+ resizeTarget: target,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: target === "from" ? fromRect.x : toRect.x,
+ origY: target === "from" ? fromRect.y : toRect.y,
+ origWidth: target === "from" ? fromRect.width : toRect.width,
+ origHeight: target === "from" ? fromRect.height : toRect.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onMouseMove(e) {
+ const ds = dragState.current;
+ if (ds.dragging) {
+ // Calculate new position
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+ if (ds.target === "from") {
+ setFromRect((r) => ({
+ ...r,
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ } else if (ds.target === "to") {
+ setToRect((r) => ({
+ ...r,
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ }
+ } else if (ds.resizing) {
+ // Calculate new size
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+ if (ds.resizeTarget === "from") {
+ setFromRect((r) => ({
+ x: r.x,
+ y: r.y,
+ width: Math.max(20, ds.origWidth + deltaX),
+ height: Math.max(20, ds.origHeight + deltaY),
+ }));
+ } else if (ds.resizeTarget === "to") {
+ setToRect((r) => ({
+ x: r.x,
+ y: r.y,
+ width: Math.max(20, ds.origWidth + deltaX),
+ height: Math.max(20, ds.origHeight + deltaY),
+ }));
+ }
+ }
+ }
+
+ function onMouseUp(e) {
+ dragState.current.dragging = false;
+ dragState.current.resizing = false;
+ dragState.current.target = null;
+ dragState.current.resizeTarget = null;
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ }
+
+ // Placeholder for your connector annotation control update
+ // You can integrate your primitives.ConnectorAnnotationControl here
+ useEffect(() => {
+ // Simulate connector update on rect changes
+ // For example, console.log or call your connector library update here
+ // console.log("Update connector with:", fromRect, toRect);
+ }, [fromRect, toRect]);
+
+ return (
+
+ {/* From Rectangle */}
+
onRectMouseDown(e, "from")}
+ style={{
+ position: "absolute",
+ top: fromRect.y,
+ left: fromRect.x,
+ width: fromRect.width,
+ height: fromRect.height,
+ border: "1px dotted black",
+ backgroundColor: "white",
+ cursor: "move",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ fontSize: 14,
+ userSelect: "none",
+ }}
+ >
+ Drag & Resize Rect
+
+
+ }
+}
+
+export default Container;
diff --git a/src/Samples/RotatedTextComponentSample.jsx b/src/Samples/RotatedTextComponentSample.jsx
new file mode 100644
index 00000000..9e6b9405
--- /dev/null
+++ b/src/Samples/RotatedTextComponentSample.jsx
@@ -0,0 +1,139 @@
+import React, { useState, useRef, useEffect } from "react";
+import { HorizontalAlignmentType, VerticalAlignmentType, TextOrientationType } from "basicprimitives";
+import RotatedTextComponent from "../Diagrams/RotatedTextComponent";
+
+const initialPosition = { x: 100, y: 100, width: 200, height: 300 };
+
+export default function RotatedTextComponentSample() {
+ const [position, setPosition] = useState(initialPosition);
+
+ const dragState = useRef({
+ dragging: false,
+ resizing: false,
+ startX: 0,
+ startY: 0,
+ origX: 0,
+ origY: 0,
+ origWidth: 0,
+ origHeight: 0,
+ });
+
+ function onRectMouseDown(e) {
+ e.preventDefault();
+ dragState.current = {
+ dragging: true,
+ resizing: false,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: position.x,
+ origY: position.y,
+ origWidth: position.width,
+ origHeight: position.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onResizerMouseDown(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ dragState.current = {
+ dragging: false,
+ resizing: true,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: position.x,
+ origY: position.y,
+ origWidth: position.width,
+ origHeight: position.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onMouseMove(e) {
+ const ds = dragState.current;
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+
+ if (ds.dragging) {
+ setPosition((r) => ({
+ ...r,
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ } else if (ds.resizing) {
+ setPosition((r) => ({
+ x: r.x,
+ y: r.y,
+ width: Math.max(20, ds.origWidth + deltaX),
+ height: Math.max(20, ds.origHeight + deltaY),
+ }));
+ }
+ }
+
+ function onMouseUp() {
+ dragState.current.dragging = false;
+ dragState.current.resizing = false;
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ }
+
+ return (
+
onResizerMouseDown(e, "from")}
+ style={{
+ position: "absolute",
+ right: 0,
+ bottom: 0,
+ width: 16,
+ height: 8,
+ border: "1px dotted black",
+ cursor: "nwse-resize",
+ backgroundColor: "#eee",
+ }}
+ />
+
+
+ {/* To Rectangle */}
+ onRectMouseDown(e, "to")}
+ style={{
+ position: "absolute",
+ top: toRect.y,
+ left: toRect.x,
+ width: toRect.width,
+ height: toRect.height,
+ border: "1px dotted black",
+ backgroundColor: "white",
+ cursor: "move",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ fontSize: 14,
+ userSelect: "none",
+ }}
+ >
+ Drag & Resize Rect
+
+ );
+}
diff --git a/src/Samples/ConnectorAnnotationDragNDropHooks.jsx b/src/Samples/ConnectorAnnotationDragNDropHooks.jsx
new file mode 100644
index 00000000..6f11bb86
--- /dev/null
+++ b/src/Samples/ConnectorAnnotationDragNDropHooks.jsx
@@ -0,0 +1,425 @@
+import React, { Component, useEffect } from 'react';
+import { OrgDiagram } from '../Diagrams';
+import { Point, Size, Rect, Thickness, ConnectorAnnotationControlConfig, Colors, PageFitMode, Enabled, OrientationType, ConnectorAnnotationConfig, ConnectorShapeType, ConnectorPlacementType, LineType } from 'basicprimitives';
+import { DndProvider, useDrag, useDrop, useDragLayer } from 'react-dnd';
+import { HTML5Backend, getEmptyImage } from 'react-dnd-html5-backend';
+import ConnectorAnnotationComponent from '../Diagrams/ConnectorAnnotationComponent';
+
+const ItemType = {
+ Node: 'node',
+ Endpoint: 'endpoint'
+}
+
+function CustomDragLayer({ connectorPlacementType = ConnectorPlacementType.Straight, newAnnotation, getItemPosition, getComponentOffset }) {
+ const {
+ initialClientOffset,
+ currentClientOffset,
+ isDragging,
+ item,
+ itemType
+ } = useDragLayer((monitor) => ({
+ initialClientOffset: monitor.getInitialClientOffset(),
+ currentClientOffset: monitor.getClientOffset(),
+ isDragging: monitor.isDragging(),
+ item: monitor.getItem(),
+ itemType: monitor.getItemType()
+ }));
+
+ if (!isDragging || !initialClientOffset || !currentClientOffset ) {
+ return null;
+ }
+
+ let fromRect;
+ let toRect;
+ let annotation;
+ const parentClientOffset = getComponentOffset();
+ const initialOffset = new Point(initialClientOffset.x - parentClientOffset.left, initialClientOffset.y - parentClientOffset.top);
+ const currentOffset = new Point(currentClientOffset.x - parentClientOffset.left, currentClientOffset.y - parentClientOffset.top);
+ switch(itemType) {
+ case 'endpoint':
+ if (item.isFromEndPoint) {
+ toRect = getItemPosition(item.config.toItem);
+ fromRect= new Rect(currentOffset.x - 4, currentOffset.y - 4, 8, 8);
+ } else {
+ toRect = new Rect(currentOffset.x - 4, currentOffset.y - 4, 8, 8);
+ fromRect = getItemPosition(item.config.fromItem);
+ }
+ annotation = item.config;
+ break;
+ case 'node':
+ fromRect = new Rect(initialOffset.x - 4, initialOffset.y - 4, 8, 8);
+ toRect = new Rect(currentOffset.x - 4, currentOffset.y - 4, 8, 8);
+ annotation = newAnnotation;
+ break;
+ }
+
+ if (fromRect.equalTo(toRect)) {
+ return null;
+ }
+
+ const connectorAnnotationControlConfig = new ConnectorAnnotationControlConfig({
+ ...annotation,
+ offset: new Thickness(0, 0, 0, 0),
+ fromRectangle: fromRect,
+ toRectangle: toRect
+ });
+
+ return (
+ onResizerMouseDown(e, "to")}
+ style={{
+ position: "absolute",
+ right: 0,
+ bottom: 0,
+ width: 16,
+ height: 8,
+ border: "1px dotted black",
+ cursor: "nwse-resize",
+ backgroundColor: "#eee",
+ }}
+ />
+
+
+ {/* Connector annotation area */}
+
+
+ );
+}
+
+function NodeDragDropSource({ itemConfig, onMoveItem, isDragging }) {
+ const [, dragRef, previewRef] = useDrag({
+ type: ItemType.Node,
+ item: () => ({ id: itemConfig.id, config: itemConfig })
+ });
+
+ const [, drop] = useDrop({
+ accept: [ItemType.Node, ItemType.Endpoint],
+ drop(item, monitor) {
+ const itemType = monitor.getItemType();
+ onMoveItem(itemType, itemConfig.id, item.id, item.isFromEndPoint);
+ },
+ canDrop(item) {
+ return true;
+ }
+ });
+
+ useEffect(() => {
+ previewRef(getEmptyImage(), { captureDraggingState: true });
+ }, [previewRef]);
+
+ return (
+
+
+ );
+}
+
+function EndpointDragSource({ annotationConfig }) {
+ const [{ opacity }, dragRef] = useDrag({
+ type: ItemType.Endpoint,
+ item: () => {
+ return ({ id: annotationConfig.context, isFromEndPoint: annotationConfig.isFromEndPoint, config: annotationConfig })
+ },
+ collect: (monitor) => ({
+ opacity: monitor.isDragging() ? 0.5 : 1
+ })
+ })
+ return (
+
+
+
+
+ {itemConfig.title}
+
+ 
+
+ {itemConfig.phone}
+ {itemConfig.email}
+ {itemConfig.description}
+
+
+
+ )
+}
+
+class Sample extends Component {
+ constructor() {
+ super();
+
+ this.orgDiagramRef = React.createRef();
+
+ this.onMoveItem = this.onMoveItem.bind(this);
+
+ this.state = {
+ annotation: new ConnectorAnnotationConfig({
+ context: 3,
+ label: 3
,
+ labelSize: new Size(30, 30),
+ connectorShapeType: ConnectorShapeType.OneWay,
+ color: Colors.Blue,
+ offset: 0,
+ lineWidth: 2,
+ lineType: LineType.Dashed,
+ connectorPlacementType: ConnectorPlacementType.Offbeat,
+ selectItems: false
+ }),
+ connectorPlacementType: ConnectorPlacementType.Offbeat,
+ id: null,
+ isFromEndPoint: null,
+ startPoint: null,
+ fromRect: null,
+ toRect: null,
+ indicator: null, // the dragged object
+ position: { x: 0, y: 0 }, // dragged object position
+
+ items: [
+ { id: 0, parent: null, title: "Henry Johnson", email: "hjohnson@corp.com", phone: "(416) 222-22-21", description: "VP, Global Strategy", image: "./photos/a.png" },
+ { id: 1, parent: 0, title: "Sandra Miller", email: "smiller@corp.com", phone: "(416) 222-22-22", description: "VP, Corporate Affairs", image: "./photos/b.png" },
+ { id: 2, parent: 0, title: "Carlos Ramirez", email: "cramirez@corp.com", phone: "(416) 222-22-23", description: "Director, North America Sales", image: "./photos/c.png" },
+ { id: 3, parent: 0, title: "Olivia Turner", email: "oturner@corp.com", phone: "(416) 222-22-24", description: "President, Global Operations", image: "./photos/d.png" },
+ { id: 5, parent: 2, title: "Victor Chen", email: "vchen@corp.com", phone: "(416) 222-22-25", description: "Regional VP, Asia Pacific Operations", image: "./photos/e.png" },
+ { id: 6, parent: 2, title: "Emily Davis", email: "edavis@corp.com", phone: "(416) 222-22-26", description: "GM, Corporate Development", image: "./photos/f.png" },
+ { id: 10, parent: 6, title: "Peter Long", email: "plong@corp.com", phone: "(416) 222-22-31", description: "VP, Emerging Markets", image: "./photos/g.png" },
+ { id: 11, parent: 10, title: "Isabella Cruz", email: "icruz@corp.com", phone: "(416) 222-22-32", description: "VP, Legal & Compliance", image: "./photos/h.png" },
+ { id: 12, parent: 10, title: "Marcus Lee", email: "mlee@corp.com", phone: "(416) 222-22-33", description: "Director, Client Services", image: "./photos/i.png" },
+ { id: 13, parent: 10, title: "Sophia White", email: "swhite@corp.com", phone: "(416) 222-22-34", description: "President, Product Innovation", image: "./photos/p.png" },
+ { id: 15, parent: 12, title: "Nathan Green", email: "ngreen@corp.com", phone: "(416) 222-22-35", description: "Regional VP, South America", image: "./photos/r.png" },
+ { id: 16, parent: 12, title: "Laura Scott", email: "lscott@corp.com", phone: "(416) 222-22-36", description: "GM, Strategic Partnerships", image: "./photos/s.png" }
+ ],
+ hasSelectorCheckbox: Enabled.False,
+ showEndPoints: Enabled.Auto,
+ annotations: [
+ /* prototype based instantiation */
+ new ConnectorAnnotationConfig({
+ context: 1,
+ fromItem: 0,
+ toItem: 5,
+ label: 1
,
+ labelSize: new Size(80, 30),
+ connectorShapeType: ConnectorShapeType.OneWay,
+ color: Colors.Red,
+ offset: -10,
+ lineWidth: 2,
+ lineType: LineType.Dashed,
+ connectorPlacementType: ConnectorPlacementType.Offbeat,
+ selectItems: false
+ }),
+ /* prototype based instantiation */
+ new ConnectorAnnotationConfig({
+ context: 2,
+ fromItem: 0,
+ toItem: 3,
+ label: 3
,
+ labelSize: new Size(80, 30),
+ connectorShapeType: ConnectorShapeType.OneWay,
+ color: Colors.Blue,
+ offset: -10,
+ lineWidth: 2,
+ lineType: LineType.Dashed,
+ connectorPlacementType: ConnectorPlacementType.Offbeat,
+ selectItems: false
+ })
+ ]
+ }
+ }
+
+ onMoveItem(itemType, toItem, id, isFromEndPoint) {
+ let { annotations, annotation, connectorPlacementType } = this.state;
+ const newId = annotation.context + 1; // Current annotation value + 1
+ const color = [Colors.Blue, Colors.Red][Math.round(Math.random())];
+ if(!Number.isNaN(toItem)) {
+ switch(itemType) {
+ case ItemType.Node:
+ annotation.fromItem = id;
+ annotation.toItem = toItem;
+ this.setState({
+ itemType: null,
+ annotation: new ConnectorAnnotationConfig({
+ context: newId,
+ label: {newId}
,
+ labelSize: new Size(30, 30),
+ connectorShapeType: ConnectorShapeType.OneWay,
+ color,
+ offset: 0,
+ lineWidth: 2,
+ lineType: LineType.Dashed,
+ connectorPlacementType,
+ selectItems: false
+ }),
+ annotations: [
+ ...annotations,
+ {
+ ...annotation,
+ toItem,
+ offset: -10,
+ }
+ ]
+ });
+ break;
+ case ItemType.Endpoint:
+ this.reconnectAnnotation(id, isFromEndPoint, toItem);
+ break;
+ }
+ }
+ }
+
+ reconnectAnnotation(id, isFromEndPoint, toItem) {
+ var { annotations } = this.state;
+ var annotation = annotations.find((annotation) => annotation.context == id);
+ annotations = annotations.filter((annotation) => annotation.context != id)
+ if (isFromEndPoint) {
+ annotation.fromItem = toItem;
+ } else {
+ annotation.toItem = toItem;
+ }
+ annotation.offset = -10;
+ if (annotation.fromItem != annotation.toItem) {
+ annotations = [...annotations, annotation];
+ }
+ this.setState({
+ ...this.state,
+ annotations
+ });
+ }
+
+ onConnectorPlacementTypeChanged(connectorPlacementType) {
+ const { annotation, annotations } = this.state;
+ this.setState({ connectorPlacementType,
+ annotation: {
+ ...annotation,
+ connectorPlacementType
+ },
+ annotations: annotations.map(annotation => {
+ return {
+ ...annotation,
+ connectorPlacementType
+ }
+ })
+ });
+ }
+
+ render() {
+ const { annotation, connectorPlacementType } = this.state;
+ const config = {
+ ...this.state,
+ pageFitMode: PageFitMode.None,
+
+ hasSelectorCheckbox: Enabled.False,
+ orientationType: OrientationType.Top,
+ defaultTemplateName: "contactTemplate",
+ templates: [{
+ name: "contactTemplate",
+ itemSize: { width: 160, height: 100 },
+ minimizedItemSize: { width: 3, height: 3 },
+ highlightPadding: { left: 2, top: 2, right: 2, bottom: 2 },
+ onItemRender: ({ context: itemConfig }) => {
+ return Set connector annotation placement type:
+
+
+
+
+
+ this.orgDiagramRef.current.getItemPosition(itemId)}
+ getComponentOffset = {() => {
+ return this.orgDiagramRef.current.getComponentOffset();
+ }}
+ />
+
+
+
+
+ This sample demonstrates how drag-and-drop can be used to create or modify connector annotations in a diagram.
+
+
+ ;
+ }
+}
+
+class Container extends Component {
+ render() {
+ return -
+
- Drag nodes to create new annotations. +
- Drag annotation endpoints to reconnect them to different nodes. +
- Drag an endpoint onto the same node to delete the annotation. +
+ {/* Shape Rectangle */}
+
+ );
+}
diff --git a/src/Samples/ShapeAnnotationComponentSample.jsx b/src/Samples/ShapeAnnotationComponentSample.jsx
new file mode 100644
index 00000000..520833bb
--- /dev/null
+++ b/src/Samples/ShapeAnnotationComponentSample.jsx
@@ -0,0 +1,159 @@
+import React, { useState, useRef, useEffect } from "react";
+import { ShapeType, Size, OrientationType, Thickness, LineType, PlacementType } from "basicprimitives";
+import ShapeAnnotationComponent from "../Diagrams/ShapeAnnotationComponent";
+
+const initialPosition = { x: 100, y: 100, width: 200, height: 100 };
+
+export default function ShapeAnnotationComponentSample() {
+ const [position, setPosition] = useState(initialPosition);
+
+ const dragState = useRef({
+ dragging: false,
+ resizing: false,
+ startX: 0,
+ startY: 0,
+ origX: 0,
+ origY: 0,
+ origWidth: 0,
+ origHeight: 0,
+ });
+
+ function onRectMouseDown(e) {
+ e.preventDefault();
+ dragState.current = {
+ dragging: true,
+ resizing: false,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: position.x,
+ origY: position.y,
+ origWidth: position.width,
+ origHeight: position.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onResizerMouseDown(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ dragState.current = {
+ dragging: false,
+ resizing: true,
+ startX: e.clientX,
+ startY: e.clientY,
+ origX: position.x,
+ origY: position.y,
+ origWidth: position.width,
+ origHeight: position.height,
+ };
+ window.addEventListener("mousemove", onMouseMove);
+ window.addEventListener("mouseup", onMouseUp);
+ }
+
+ function onMouseMove(e) {
+ const ds = dragState.current;
+ const deltaX = e.clientX - ds.startX;
+ const deltaY = e.clientY - ds.startY;
+
+ if (ds.dragging) {
+ setPosition((r) => ({
+ ...r,
+ x: ds.origX + deltaX,
+ y: ds.origY + deltaY,
+ }));
+ } else if (ds.resizing) {
+ setPosition((r) => ({
+ x: r.x,
+ y: r.y,
+ width: Math.max(20, ds.origWidth + deltaX),
+ height: Math.max(20, ds.origHeight + deltaY),
+ }));
+ }
+ }
+
+ function onMouseUp() {
+ dragState.current.dragging = false;
+ dragState.current.resizing = false;
+ window.removeEventListener("mousemove", onMouseMove);
+ window.removeEventListener("mouseup", onMouseUp);
+ }
+
+ return (
+
+
+
+ {/* Shape Rectangle */}
+
+ );
+}
diff --git a/src/Samples/index.js b/src/Samples/index.js
index 30ca5618..1207f241 100644
--- a/src/Samples/index.js
+++ b/src/Samples/index.js
@@ -52,4 +52,9 @@ export { default as LevelAnnotation} from './LevelAnnotation';
export { default as LevelAnnotationTemplate} from './LevelAnnotationTemplate';
export { default as HighlightPathAnnotation} from './HighlightPathAnnotation';
export { default as PERTChart} from './PERTChart';
-export { default as FamilyHideGrandParentsConnections} from './FamilyHideGrandParentsConnections';
\ No newline at end of file
+export { default as FamilyHideGrandParentsConnections} from './FamilyHideGrandParentsConnections';
+export { default as ConnectorAnnotationComponentSample} from './ConnectorAnnotationComponentSample';
+export { default as CalloutAnnotationComponentSample} from './CalloutAnnotationComponentSample';
+export { default as ShapeAnnotationComponentSample} from './ShapeAnnotationComponentSample';
+export { default as RotatedTextComponentSample} from './RotatedTextComponentSample';
+export { default as ConnectorAnnotationDragNDropHooks} from './ConnectorAnnotationDragNDropHooks';
\ No newline at end of file
diff --git a/src/SamplesList.jsx b/src/SamplesList.jsx
index 6e5d3f45..a4ae19e0 100644
--- a/src/SamplesList.jsx
+++ b/src/SamplesList.jsx
@@ -54,7 +54,12 @@ import {
LevelAnnotationTemplate,
HighlightPathAnnotation,
PERTChart,
- FamilyHideGrandParentsConnections
+ FamilyHideGrandParentsConnections,
+ ConnectorAnnotationComponentSample,
+ CalloutAnnotationComponentSample,
+ ShapeAnnotationComponentSample,
+ RotatedTextComponentSample,
+ ConnectorAnnotationDragNDropHooks
} from './Samples';
const SamplesList = [
@@ -282,6 +287,10 @@ const SamplesList = [
label: "On-screen Connector Annotation",
component:
+ Drag & Resize Rect
+
+
+
+ {/* Shape annotation */}
+