orcasvn-react-diagrams 0.1.20 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +150 -2
- package/dist/cjs/types/components/paper.d.ts +1 -1
- package/dist/cjs/types/models/IEditorContext.d.ts +10 -11
- package/dist/cjs/types/models/implementations/EditorContext.d.ts +12 -11
- package/dist/esm/index.js +150 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/paper.d.ts +1 -1
- package/dist/esm/types/models/IEditorContext.d.ts +10 -11
- package/dist/esm/types/models/implementations/EditorContext.d.ts +12 -11
- package/dist/index.d.ts +22 -22
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -749,11 +749,21 @@ var Text$2 = /** @class */ (function () {
|
|
|
749
749
|
return Text;
|
|
750
750
|
}());
|
|
751
751
|
|
|
752
|
+
var EVENT_PAPER_CLICKED = 'paperClicked';
|
|
753
|
+
var EVENT_PORT_MOVED = 'portMoved';
|
|
754
|
+
var EVENT_PORT_SELECTED = 'portSelected';
|
|
755
|
+
var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
|
|
756
|
+
var EVENT_ELEMENT_MOVED = 'elementMoved';
|
|
757
|
+
var EVENT_ELEMENT_RESIZED = 'elementResized';
|
|
758
|
+
var EVENT_ELEMENT_SELECTED = 'elementSelected';
|
|
759
|
+
var EVENT_LINK_SELECTED = 'linkSelected';
|
|
760
|
+
var EVENT_TEXT_SELECTED = 'textSelected';
|
|
752
761
|
var EditorContext = /** @class */ (function () {
|
|
753
762
|
function EditorContext(elements, links, texts) {
|
|
754
763
|
this._elements = elements;
|
|
755
764
|
this._links = links;
|
|
756
765
|
this._texts = texts;
|
|
766
|
+
this._eventEmitter = new EventEmitter();
|
|
757
767
|
}
|
|
758
768
|
Object.defineProperty(EditorContext.prototype, "elements", {
|
|
759
769
|
get: function () {
|
|
@@ -803,6 +813,114 @@ var EditorContext = /** @class */ (function () {
|
|
|
803
813
|
EditorContext.prototype.removeText = function (textId) {
|
|
804
814
|
this._texts = this._texts.filter(function (t) { return t.id !== textId; });
|
|
805
815
|
};
|
|
816
|
+
EditorContext.prototype.onPaperClicked = function (callback) {
|
|
817
|
+
var _this = this;
|
|
818
|
+
this._eventEmitter.on(EVENT_PAPER_CLICKED, callback);
|
|
819
|
+
var off = function () {
|
|
820
|
+
_this._eventEmitter.off(EVENT_PAPER_CLICKED, callback);
|
|
821
|
+
};
|
|
822
|
+
return off;
|
|
823
|
+
};
|
|
824
|
+
/** @internal */
|
|
825
|
+
EditorContext.prototype.onPaperClickedHandler = function (position) {
|
|
826
|
+
this._eventEmitter.emit(EVENT_PAPER_CLICKED, position);
|
|
827
|
+
};
|
|
828
|
+
EditorContext.prototype.onPortMoved = function (callback) {
|
|
829
|
+
var _this = this;
|
|
830
|
+
this._eventEmitter.on(EVENT_PORT_MOVED, callback);
|
|
831
|
+
var off = function () {
|
|
832
|
+
_this._eventEmitter.off(EVENT_PORT_MOVED, callback);
|
|
833
|
+
};
|
|
834
|
+
return off;
|
|
835
|
+
};
|
|
836
|
+
/** @internal */
|
|
837
|
+
EditorContext.prototype.onPortMovedHandler = function (position, port, element) {
|
|
838
|
+
this._eventEmitter.emit(EVENT_PORT_MOVED, position, port, element);
|
|
839
|
+
};
|
|
840
|
+
EditorContext.prototype.onPortSelected = function (callback) {
|
|
841
|
+
var _this = this;
|
|
842
|
+
this._eventEmitter.on(EVENT_PORT_SELECTED, callback);
|
|
843
|
+
var off = function () {
|
|
844
|
+
_this._eventEmitter.off(EVENT_PORT_SELECTED, callback);
|
|
845
|
+
};
|
|
846
|
+
return off;
|
|
847
|
+
};
|
|
848
|
+
/** @internal */
|
|
849
|
+
EditorContext.prototype.onPortSelectedHandler = function (port, element) {
|
|
850
|
+
this._eventEmitter.emit(EVENT_PORT_SELECTED, port, element);
|
|
851
|
+
};
|
|
852
|
+
EditorContext.prototype.onElementContextMenu = function (callback) {
|
|
853
|
+
var _this = this;
|
|
854
|
+
this._eventEmitter.on(EVENT_ELEMENT_CONTEXT_MENU, callback);
|
|
855
|
+
var off = function () {
|
|
856
|
+
_this._eventEmitter.off(EVENT_ELEMENT_CONTEXT_MENU, callback);
|
|
857
|
+
};
|
|
858
|
+
return off;
|
|
859
|
+
};
|
|
860
|
+
/** @internal */
|
|
861
|
+
EditorContext.prototype.onElementContextMenuHandler = function (element, mouseEvent) {
|
|
862
|
+
this._eventEmitter.emit(EVENT_ELEMENT_CONTEXT_MENU, element, mouseEvent);
|
|
863
|
+
};
|
|
864
|
+
EditorContext.prototype.onElementMoved = function (callback) {
|
|
865
|
+
var _this = this;
|
|
866
|
+
this._eventEmitter.on(EVENT_ELEMENT_MOVED, callback);
|
|
867
|
+
var off = function () {
|
|
868
|
+
_this._eventEmitter.off(EVENT_ELEMENT_MOVED, callback);
|
|
869
|
+
};
|
|
870
|
+
return off;
|
|
871
|
+
};
|
|
872
|
+
/** @internal */
|
|
873
|
+
EditorContext.prototype.onElementMovedHandler = function (position, element) {
|
|
874
|
+
this._eventEmitter.emit(EVENT_ELEMENT_MOVED, position, element);
|
|
875
|
+
};
|
|
876
|
+
EditorContext.prototype.onElementResized = function (callback) {
|
|
877
|
+
var _this = this;
|
|
878
|
+
this._eventEmitter.on(EVENT_ELEMENT_RESIZED, callback);
|
|
879
|
+
var off = function () {
|
|
880
|
+
_this._eventEmitter.off(EVENT_ELEMENT_RESIZED, callback);
|
|
881
|
+
};
|
|
882
|
+
return off;
|
|
883
|
+
};
|
|
884
|
+
/** @internal */
|
|
885
|
+
EditorContext.prototype.onElementResizedHandler = function (size, element) {
|
|
886
|
+
this._eventEmitter.emit(EVENT_ELEMENT_RESIZED, size, element);
|
|
887
|
+
};
|
|
888
|
+
EditorContext.prototype.onElementSelected = function (callback) {
|
|
889
|
+
var _this = this;
|
|
890
|
+
this._eventEmitter.on(EVENT_ELEMENT_SELECTED, callback);
|
|
891
|
+
var off = function () {
|
|
892
|
+
_this._eventEmitter.off(EVENT_ELEMENT_SELECTED, callback);
|
|
893
|
+
};
|
|
894
|
+
return off;
|
|
895
|
+
};
|
|
896
|
+
/** @internal */
|
|
897
|
+
EditorContext.prototype.onElementSelectedHandler = function (element) {
|
|
898
|
+
this._eventEmitter.emit(EVENT_ELEMENT_SELECTED, element);
|
|
899
|
+
};
|
|
900
|
+
EditorContext.prototype.onLinkSelected = function (callback) {
|
|
901
|
+
var _this = this;
|
|
902
|
+
this._eventEmitter.on(EVENT_LINK_SELECTED, callback);
|
|
903
|
+
var off = function () {
|
|
904
|
+
_this._eventEmitter.off(EVENT_LINK_SELECTED, callback);
|
|
905
|
+
};
|
|
906
|
+
return off;
|
|
907
|
+
};
|
|
908
|
+
/** @internal */
|
|
909
|
+
EditorContext.prototype.onLinkSelectedHandler = function (link) {
|
|
910
|
+
this._eventEmitter.emit(EVENT_LINK_SELECTED, link);
|
|
911
|
+
};
|
|
912
|
+
EditorContext.prototype.onTextSelected = function (callback) {
|
|
913
|
+
var _this = this;
|
|
914
|
+
this._eventEmitter.on(EVENT_TEXT_SELECTED, callback);
|
|
915
|
+
var off = function () {
|
|
916
|
+
_this._eventEmitter.off(EVENT_TEXT_SELECTED, callback);
|
|
917
|
+
};
|
|
918
|
+
return off;
|
|
919
|
+
};
|
|
920
|
+
/** @internal */
|
|
921
|
+
EditorContext.prototype.onTextSelectedHandler = function (text) {
|
|
922
|
+
this._eventEmitter.emit(EVENT_TEXT_SELECTED, text);
|
|
923
|
+
};
|
|
806
924
|
EditorContext.prototype.triggerRenderElement = function (elementId) {
|
|
807
925
|
//TODO: to be implemented
|
|
808
926
|
};
|
|
@@ -9839,7 +9957,10 @@ var Paper = function (props) {
|
|
|
9839
9957
|
var handleMouseDownOnPaper = function (ev) {
|
|
9840
9958
|
var _a;
|
|
9841
9959
|
setMouseDownedOnPaper(true);
|
|
9842
|
-
(_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props
|
|
9960
|
+
(_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
|
|
9961
|
+
x: ev.clientX,
|
|
9962
|
+
y: ev.clientY
|
|
9963
|
+
});
|
|
9843
9964
|
paperEventEmitter.emitPaperClicked(ev);
|
|
9844
9965
|
};
|
|
9845
9966
|
var handleMouseUpOnPaper = function (ev) {
|
|
@@ -10228,8 +10349,35 @@ var Paper = function (props) {
|
|
|
10228
10349
|
|
|
10229
10350
|
function Editor(_a) {
|
|
10230
10351
|
var editorContext = _a.editorContext;
|
|
10352
|
+
var handlePaperClicked = React$1.useCallback(function (position) {
|
|
10353
|
+
editorContext.onPaperClickedHandler(position);
|
|
10354
|
+
}, [editorContext]);
|
|
10355
|
+
var handlePortMoved = React$1.useCallback(function (position, port, element) {
|
|
10356
|
+
editorContext.onPortMovedHandler(position, port, element);
|
|
10357
|
+
}, [editorContext]);
|
|
10358
|
+
var handlePortSelected = React$1.useCallback(function (port, element) {
|
|
10359
|
+
editorContext.onPortSelectedHandler(port, element);
|
|
10360
|
+
}, [editorContext]);
|
|
10361
|
+
var handleElementContextMenu = React$1.useCallback(function (element, event) {
|
|
10362
|
+
editorContext.onElementContextMenuHandler(element, event);
|
|
10363
|
+
}, [editorContext]);
|
|
10364
|
+
var handleElementMoved = React$1.useCallback(function (position, element) {
|
|
10365
|
+
editorContext.onElementMovedHandler(position, element);
|
|
10366
|
+
}, [editorContext]);
|
|
10367
|
+
var handleElementResized = React$1.useCallback(function (size, element) {
|
|
10368
|
+
editorContext.onElementResizedHandler(size, element);
|
|
10369
|
+
}, [editorContext]);
|
|
10370
|
+
var handleElementSelected = React$1.useCallback(function (element) {
|
|
10371
|
+
editorContext.onElementSelectedHandler(element);
|
|
10372
|
+
}, [editorContext]);
|
|
10373
|
+
var handleLinkSelected = React$1.useCallback(function (link) {
|
|
10374
|
+
editorContext.onLinkSelectedHandler(link);
|
|
10375
|
+
}, [editorContext]);
|
|
10376
|
+
var handleTextSelected = React$1.useCallback(function (text) {
|
|
10377
|
+
editorContext.onTextSelectedHandler(text);
|
|
10378
|
+
}, [editorContext]);
|
|
10231
10379
|
return (React$1.createElement(React$1.Fragment, null,
|
|
10232
|
-
React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked:
|
|
10380
|
+
React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: editorContext.onCreatingLinkHandler, onCreatingPortByLinking: editorContext.onCreatingPortByLinkingHandler, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected })));
|
|
10233
10381
|
}
|
|
10234
10382
|
|
|
10235
10383
|
exports.CircleRC = Circle;
|
|
@@ -13,7 +13,7 @@ interface PaperProps {
|
|
|
13
13
|
elements: IElement[];
|
|
14
14
|
links?: IElementLink[];
|
|
15
15
|
texts: IPaperText[];
|
|
16
|
-
onPaperClicked?: () => void;
|
|
16
|
+
onPaperClicked?: (position: IPosition) => void;
|
|
17
17
|
onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
|
|
18
18
|
onPortSelected?: (port: IPort, element: IElement) => void;
|
|
19
19
|
onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
|
|
@@ -9,17 +9,16 @@ export default interface IEditorContext {
|
|
|
9
9
|
elements: IElement[];
|
|
10
10
|
links: IElementLink[];
|
|
11
11
|
texts: IPaperText[];
|
|
12
|
-
onPaperClicked?: () => void;
|
|
13
|
-
onPortMoved?: (position: IPosition, port: IPort, element: IElement) => void;
|
|
14
|
-
onPortSelected?: (port: IPort, element: IElement) => void;
|
|
15
|
-
onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
|
|
16
|
-
onElementMoved?: (position: IPosition, element: IElement
|
|
17
|
-
onElementResized?: (size: ISize, element: IElement
|
|
18
|
-
onElementSelected?: (element: IElement) => void;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
onTextSelected?: (text: IText) => void;
|
|
12
|
+
onPaperClicked?: (callback: (position: IPosition) => void) => (() => void);
|
|
13
|
+
onPortMoved?: (callback: (position: IPosition, port: IPort, element: IElement) => void) => (() => void);
|
|
14
|
+
onPortSelected?: (callback: (port: IPort, element: IElement) => void) => (() => void);
|
|
15
|
+
onElementContextMenu?: (callback: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void) => (() => void);
|
|
16
|
+
onElementMoved?: (callback: (position: IPosition, element: IElement) => void) => (() => void);
|
|
17
|
+
onElementResized?: (callback: (size: ISize, element: IElement) => void) => (() => void);
|
|
18
|
+
onElementSelected?: (callback: (element: IElement) => void) => (() => void);
|
|
19
|
+
onCreatingPortByLinkingHandler?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
|
|
20
|
+
onLinkSelected?: (callback: (link: IElementLink) => void) => (() => void);
|
|
21
|
+
onTextSelected?: (callback: (text: IText) => void) => (() => void);
|
|
23
22
|
getElement(elementId: string): IElement | undefined;
|
|
24
23
|
addElement(element: IElement): void;
|
|
25
24
|
removeElement(elementId: string): void;
|
|
@@ -10,17 +10,9 @@ export declare class EditorContext implements IEditorContext {
|
|
|
10
10
|
private _elements;
|
|
11
11
|
private _links;
|
|
12
12
|
private _texts;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
onElementContextMenu?: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void;
|
|
17
|
-
onElementMoved?: (position: IPosition, element: IElement, index: number) => void;
|
|
18
|
-
onElementResized?: (size: ISize, element: IElement, index: number) => void;
|
|
19
|
-
onElementSelected?: (element: IElement) => void;
|
|
20
|
-
onCreatingPortByLinking?: (sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null;
|
|
21
|
-
onCreatingLink?: (sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null;
|
|
22
|
-
onLinkSelected?: (link: IElementLink) => void;
|
|
23
|
-
onTextSelected?: (text: IText) => void;
|
|
13
|
+
private _eventEmitter;
|
|
14
|
+
onCreatingPortByLinkingHandler?: ((sourceElement: IElement, sourcePort: IPort, targetElement: IElement, position: IPosition) => IPort | null) | undefined;
|
|
15
|
+
onCreatingLinkHandler?: ((sourcePort: IPort, sourceElement: IElement, targetPort: IPort, targetElement: IElement) => IElementLink | null) | undefined;
|
|
24
16
|
constructor(elements: IElement[], links: IElementLink[], texts: IPaperText[]);
|
|
25
17
|
get elements(): IElement[];
|
|
26
18
|
get links(): IElementLink[];
|
|
@@ -34,6 +26,15 @@ export declare class EditorContext implements IEditorContext {
|
|
|
34
26
|
getText(textId: string): IPaperText | undefined;
|
|
35
27
|
addText(text: IPaperText): void;
|
|
36
28
|
removeText(textId: string): void;
|
|
29
|
+
onPaperClicked(callback: (position: IPosition) => void): () => void;
|
|
30
|
+
onPortMoved(callback: (position: IPosition, port: IPort, element: IElement) => void): () => void;
|
|
31
|
+
onPortSelected(callback: (port: IPort, element: IElement) => void): () => void;
|
|
32
|
+
onElementContextMenu(callback: (element: IElement, mouseEvent: React.MouseEvent<SVGElement>) => void): () => void;
|
|
33
|
+
onElementMoved(callback: (position: IPosition, element: IElement) => void): () => void;
|
|
34
|
+
onElementResized(callback: (size: ISize, element: IElement) => void): () => void;
|
|
35
|
+
onElementSelected(callback: (element: IElement) => void): () => void;
|
|
36
|
+
onLinkSelected(callback: (link: IElementLink) => void): () => void;
|
|
37
|
+
onTextSelected(callback: (text: IText) => void): () => void;
|
|
37
38
|
triggerRenderElement(elementId: string): void;
|
|
38
39
|
triggerRenderPort(portId: string, elementId: string): void;
|
|
39
40
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -745,11 +745,21 @@ var Text$2 = /** @class */ (function () {
|
|
|
745
745
|
return Text;
|
|
746
746
|
}());
|
|
747
747
|
|
|
748
|
+
var EVENT_PAPER_CLICKED = 'paperClicked';
|
|
749
|
+
var EVENT_PORT_MOVED = 'portMoved';
|
|
750
|
+
var EVENT_PORT_SELECTED = 'portSelected';
|
|
751
|
+
var EVENT_ELEMENT_CONTEXT_MENU = 'elementContextMenu';
|
|
752
|
+
var EVENT_ELEMENT_MOVED = 'elementMoved';
|
|
753
|
+
var EVENT_ELEMENT_RESIZED = 'elementResized';
|
|
754
|
+
var EVENT_ELEMENT_SELECTED = 'elementSelected';
|
|
755
|
+
var EVENT_LINK_SELECTED = 'linkSelected';
|
|
756
|
+
var EVENT_TEXT_SELECTED = 'textSelected';
|
|
748
757
|
var EditorContext = /** @class */ (function () {
|
|
749
758
|
function EditorContext(elements, links, texts) {
|
|
750
759
|
this._elements = elements;
|
|
751
760
|
this._links = links;
|
|
752
761
|
this._texts = texts;
|
|
762
|
+
this._eventEmitter = new EventEmitter();
|
|
753
763
|
}
|
|
754
764
|
Object.defineProperty(EditorContext.prototype, "elements", {
|
|
755
765
|
get: function () {
|
|
@@ -799,6 +809,114 @@ var EditorContext = /** @class */ (function () {
|
|
|
799
809
|
EditorContext.prototype.removeText = function (textId) {
|
|
800
810
|
this._texts = this._texts.filter(function (t) { return t.id !== textId; });
|
|
801
811
|
};
|
|
812
|
+
EditorContext.prototype.onPaperClicked = function (callback) {
|
|
813
|
+
var _this = this;
|
|
814
|
+
this._eventEmitter.on(EVENT_PAPER_CLICKED, callback);
|
|
815
|
+
var off = function () {
|
|
816
|
+
_this._eventEmitter.off(EVENT_PAPER_CLICKED, callback);
|
|
817
|
+
};
|
|
818
|
+
return off;
|
|
819
|
+
};
|
|
820
|
+
/** @internal */
|
|
821
|
+
EditorContext.prototype.onPaperClickedHandler = function (position) {
|
|
822
|
+
this._eventEmitter.emit(EVENT_PAPER_CLICKED, position);
|
|
823
|
+
};
|
|
824
|
+
EditorContext.prototype.onPortMoved = function (callback) {
|
|
825
|
+
var _this = this;
|
|
826
|
+
this._eventEmitter.on(EVENT_PORT_MOVED, callback);
|
|
827
|
+
var off = function () {
|
|
828
|
+
_this._eventEmitter.off(EVENT_PORT_MOVED, callback);
|
|
829
|
+
};
|
|
830
|
+
return off;
|
|
831
|
+
};
|
|
832
|
+
/** @internal */
|
|
833
|
+
EditorContext.prototype.onPortMovedHandler = function (position, port, element) {
|
|
834
|
+
this._eventEmitter.emit(EVENT_PORT_MOVED, position, port, element);
|
|
835
|
+
};
|
|
836
|
+
EditorContext.prototype.onPortSelected = function (callback) {
|
|
837
|
+
var _this = this;
|
|
838
|
+
this._eventEmitter.on(EVENT_PORT_SELECTED, callback);
|
|
839
|
+
var off = function () {
|
|
840
|
+
_this._eventEmitter.off(EVENT_PORT_SELECTED, callback);
|
|
841
|
+
};
|
|
842
|
+
return off;
|
|
843
|
+
};
|
|
844
|
+
/** @internal */
|
|
845
|
+
EditorContext.prototype.onPortSelectedHandler = function (port, element) {
|
|
846
|
+
this._eventEmitter.emit(EVENT_PORT_SELECTED, port, element);
|
|
847
|
+
};
|
|
848
|
+
EditorContext.prototype.onElementContextMenu = function (callback) {
|
|
849
|
+
var _this = this;
|
|
850
|
+
this._eventEmitter.on(EVENT_ELEMENT_CONTEXT_MENU, callback);
|
|
851
|
+
var off = function () {
|
|
852
|
+
_this._eventEmitter.off(EVENT_ELEMENT_CONTEXT_MENU, callback);
|
|
853
|
+
};
|
|
854
|
+
return off;
|
|
855
|
+
};
|
|
856
|
+
/** @internal */
|
|
857
|
+
EditorContext.prototype.onElementContextMenuHandler = function (element, mouseEvent) {
|
|
858
|
+
this._eventEmitter.emit(EVENT_ELEMENT_CONTEXT_MENU, element, mouseEvent);
|
|
859
|
+
};
|
|
860
|
+
EditorContext.prototype.onElementMoved = function (callback) {
|
|
861
|
+
var _this = this;
|
|
862
|
+
this._eventEmitter.on(EVENT_ELEMENT_MOVED, callback);
|
|
863
|
+
var off = function () {
|
|
864
|
+
_this._eventEmitter.off(EVENT_ELEMENT_MOVED, callback);
|
|
865
|
+
};
|
|
866
|
+
return off;
|
|
867
|
+
};
|
|
868
|
+
/** @internal */
|
|
869
|
+
EditorContext.prototype.onElementMovedHandler = function (position, element) {
|
|
870
|
+
this._eventEmitter.emit(EVENT_ELEMENT_MOVED, position, element);
|
|
871
|
+
};
|
|
872
|
+
EditorContext.prototype.onElementResized = function (callback) {
|
|
873
|
+
var _this = this;
|
|
874
|
+
this._eventEmitter.on(EVENT_ELEMENT_RESIZED, callback);
|
|
875
|
+
var off = function () {
|
|
876
|
+
_this._eventEmitter.off(EVENT_ELEMENT_RESIZED, callback);
|
|
877
|
+
};
|
|
878
|
+
return off;
|
|
879
|
+
};
|
|
880
|
+
/** @internal */
|
|
881
|
+
EditorContext.prototype.onElementResizedHandler = function (size, element) {
|
|
882
|
+
this._eventEmitter.emit(EVENT_ELEMENT_RESIZED, size, element);
|
|
883
|
+
};
|
|
884
|
+
EditorContext.prototype.onElementSelected = function (callback) {
|
|
885
|
+
var _this = this;
|
|
886
|
+
this._eventEmitter.on(EVENT_ELEMENT_SELECTED, callback);
|
|
887
|
+
var off = function () {
|
|
888
|
+
_this._eventEmitter.off(EVENT_ELEMENT_SELECTED, callback);
|
|
889
|
+
};
|
|
890
|
+
return off;
|
|
891
|
+
};
|
|
892
|
+
/** @internal */
|
|
893
|
+
EditorContext.prototype.onElementSelectedHandler = function (element) {
|
|
894
|
+
this._eventEmitter.emit(EVENT_ELEMENT_SELECTED, element);
|
|
895
|
+
};
|
|
896
|
+
EditorContext.prototype.onLinkSelected = function (callback) {
|
|
897
|
+
var _this = this;
|
|
898
|
+
this._eventEmitter.on(EVENT_LINK_SELECTED, callback);
|
|
899
|
+
var off = function () {
|
|
900
|
+
_this._eventEmitter.off(EVENT_LINK_SELECTED, callback);
|
|
901
|
+
};
|
|
902
|
+
return off;
|
|
903
|
+
};
|
|
904
|
+
/** @internal */
|
|
905
|
+
EditorContext.prototype.onLinkSelectedHandler = function (link) {
|
|
906
|
+
this._eventEmitter.emit(EVENT_LINK_SELECTED, link);
|
|
907
|
+
};
|
|
908
|
+
EditorContext.prototype.onTextSelected = function (callback) {
|
|
909
|
+
var _this = this;
|
|
910
|
+
this._eventEmitter.on(EVENT_TEXT_SELECTED, callback);
|
|
911
|
+
var off = function () {
|
|
912
|
+
_this._eventEmitter.off(EVENT_TEXT_SELECTED, callback);
|
|
913
|
+
};
|
|
914
|
+
return off;
|
|
915
|
+
};
|
|
916
|
+
/** @internal */
|
|
917
|
+
EditorContext.prototype.onTextSelectedHandler = function (text) {
|
|
918
|
+
this._eventEmitter.emit(EVENT_TEXT_SELECTED, text);
|
|
919
|
+
};
|
|
802
920
|
EditorContext.prototype.triggerRenderElement = function (elementId) {
|
|
803
921
|
//TODO: to be implemented
|
|
804
922
|
};
|
|
@@ -9835,7 +9953,10 @@ var Paper = function (props) {
|
|
|
9835
9953
|
var handleMouseDownOnPaper = function (ev) {
|
|
9836
9954
|
var _a;
|
|
9837
9955
|
setMouseDownedOnPaper(true);
|
|
9838
|
-
(_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props
|
|
9956
|
+
(_a = props.onPaperClicked) === null || _a === void 0 ? void 0 : _a.call(props, {
|
|
9957
|
+
x: ev.clientX,
|
|
9958
|
+
y: ev.clientY
|
|
9959
|
+
});
|
|
9839
9960
|
paperEventEmitter.emitPaperClicked(ev);
|
|
9840
9961
|
};
|
|
9841
9962
|
var handleMouseUpOnPaper = function (ev) {
|
|
@@ -10224,8 +10345,35 @@ var Paper = function (props) {
|
|
|
10224
10345
|
|
|
10225
10346
|
function Editor(_a) {
|
|
10226
10347
|
var editorContext = _a.editorContext;
|
|
10348
|
+
var handlePaperClicked = useCallback(function (position) {
|
|
10349
|
+
editorContext.onPaperClickedHandler(position);
|
|
10350
|
+
}, [editorContext]);
|
|
10351
|
+
var handlePortMoved = useCallback(function (position, port, element) {
|
|
10352
|
+
editorContext.onPortMovedHandler(position, port, element);
|
|
10353
|
+
}, [editorContext]);
|
|
10354
|
+
var handlePortSelected = useCallback(function (port, element) {
|
|
10355
|
+
editorContext.onPortSelectedHandler(port, element);
|
|
10356
|
+
}, [editorContext]);
|
|
10357
|
+
var handleElementContextMenu = useCallback(function (element, event) {
|
|
10358
|
+
editorContext.onElementContextMenuHandler(element, event);
|
|
10359
|
+
}, [editorContext]);
|
|
10360
|
+
var handleElementMoved = useCallback(function (position, element) {
|
|
10361
|
+
editorContext.onElementMovedHandler(position, element);
|
|
10362
|
+
}, [editorContext]);
|
|
10363
|
+
var handleElementResized = useCallback(function (size, element) {
|
|
10364
|
+
editorContext.onElementResizedHandler(size, element);
|
|
10365
|
+
}, [editorContext]);
|
|
10366
|
+
var handleElementSelected = useCallback(function (element) {
|
|
10367
|
+
editorContext.onElementSelectedHandler(element);
|
|
10368
|
+
}, [editorContext]);
|
|
10369
|
+
var handleLinkSelected = React$1.useCallback(function (link) {
|
|
10370
|
+
editorContext.onLinkSelectedHandler(link);
|
|
10371
|
+
}, [editorContext]);
|
|
10372
|
+
var handleTextSelected = React$1.useCallback(function (text) {
|
|
10373
|
+
editorContext.onTextSelectedHandler(text);
|
|
10374
|
+
}, [editorContext]);
|
|
10227
10375
|
return (React$1.createElement(React$1.Fragment, null,
|
|
10228
|
-
React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked:
|
|
10376
|
+
React$1.createElement(Paper, { size: { width: 3000, height: 3000 }, elements: editorContext.elements, links: editorContext.links, texts: editorContext.texts, onPaperClicked: handlePaperClicked, onPortMoved: handlePortMoved, onPortSelected: handlePortSelected, onElementContextMenu: handleElementContextMenu, onElementMoved: handleElementMoved, onElementResized: handleElementResized, onElementSelected: handleElementSelected, onCreatingLink: editorContext.onCreatingLinkHandler, onCreatingPortByLinking: editorContext.onCreatingPortByLinkingHandler, onLinkSelected: handleLinkSelected, onTextSelected: handleTextSelected })));
|
|
10229
10377
|
}
|
|
10230
10378
|
|
|
10231
10379
|
export { Circle as CircleRC, Crescent as CrescentRC, CustomShape as CustomShapeRC, EditorContext, Element$1 as Element, ElementLink$1 as ElementLink, ElementLink as ElementLinkRC, Port$1 as Port, Port as PortRC, PositioningAnchor, Rectangle as RectangleRC, RectangularFrame as RectangularFrameRC, ResizingDirection, ShapeWrapper as ShapeWrapperRC, SubObjectDirection, Text$2 as Text, TextAlign, Text$1 as TextRC, Editor as default };
|