@byai/topology - npm Package Compare versions

Comparing version 1.3.22 to 1.3.23-beta

dist/lib/components/context.d.ts

@@ -5,1 +5,2 @@ import * as React from 'react';
 export declare const Provider: React.Provider<ITopologyContext>, Consumer: React.Consumer<ITopologyContext>;
+export declare const useContext: () => ITopologyContext;

dist/lib/components/context.js

@@ -16,2 +16,3 @@ import * as React from 'react';
 export var Provider = Context.Provider, Consumer = Context.Consumer;
+export var useContext = function () { return React.useContext(Context); };
 //# sourceMappingURL=context.js.map

dist/lib/components/line/index.d.ts

 import React from 'react';
-import { IPosition, ITopologyContext, ITopologyLine, ITopologyData } from '../../declare';
+import { IPosition, ITopologyContext, ITopologyData, ITopologyLine } from '../../declare';
 import './index.less';
@@ -16,6 +16,9 @@ interface ILineProps {
     highLight?: boolean;
-    onSelect?: (data: ITopologyData) => void;
+    onSelect?: (data: ITopologyData, merge?: boolean) => void;
     scaleNum?: number;
+    selectedLines?: ITopologyLine[];
+    curLinking?: boolean;
+    transition?: string;
 }
-declare const _default: (props: ILineProps) => React.JSX.Element;
-export default _default;
+declare const Line: React.FC<ILineProps>;
+export default Line;

dist/lib/components/line/index.js

@@ -1,16 +0,1 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
@@ -36,72 +21,45 @@ __assign = Object.assign || function(t) {
 };
-/* eslint-disable react/require-default-props */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-undef */
-import React from 'react';
 import _ from 'lodash';
-import { LineEditType, } from '../../declare';
-import { Consumer } from '../context';
+import React, { useState } from 'react';
+import config from '../../config';
+import { LineEditType } from '../../declare';
 import { computeLinePath, computeTrianglePath } from '../../utils';
-import config from '../../config';
 
 var Colors = { ACTIVE: '#1F8CEC', NORMAL: '#AAB7C4' };
-var Line = /** @class */ (function (_super) {
-    __extends(Line, _super);
-    function Line() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { hover: false };
-        _this.handleMouseEnter = function () {
-            _this.setState({ hover: true });
-        };
-        _this.handleMouseLeave = function () {
-            _this.setState({ hover: false });
-        };
-        _this.handleClick = function (e) {
-            var _a = _this.props, selected = _a.selected, context = _a.context, data = _a.data, onSelect = _a.onSelect;
-            var lines = context.selectedData.lines;
-            var multi = e.metaKey || e.ctrlKey;
-            if (!onSelect) {
-                return;
-            }
-            if (!multi) {
-                onSelect({
-                    lines: selected ? [] : [data],
-                    nodes: [],
-                });
-                return;
-            }
-            onSelect(__assign(__assign({}, context.selectedData), { lines: selected
-                    ? lines.filter(function (item) { return !_.isEqual(item, data); })
-                    : __spreadArray(__spreadArray([], lines, true), [data], false) }));
-        };
-        return _this;
-    }
-    Line.prototype.shouldComponentUpdate = function (nextProps) {
-        var currentData = this.props.data;
-        var nextData = nextProps.data, isReduceRender = nextProps.isReduceRender;
-        var dragging = nextProps.context.dragging;
-        if (isReduceRender && nextData === currentData) {
-            if (dragging) {
-                return false;
-            }
+var Line = React.memo(function (props) {
+    var start = props.start, end = props.end, selected = props.selected, highLight = props.highLight, data = props.data, readOnly = props.readOnly, lineOffsetY = props.lineOffsetY, onSelect = props.onSelect, selectedLines = props.selectedLines, curLinking = props.curLinking, transition = props.transition;
+    var _a = useState(false), hover = _a[0], setHover = _a[1];
+    var handleMouseEnter = function () {
+        setHover(true);
+    };
+    var handleMouseLeave = function () {
+        setHover(false);
+    };
+    var handleClick = function (e) {
+        var multi = e.metaKey || e.ctrlKey;
+        if (!onSelect) {
+            return;
         }
-        return true;
+        if (!multi) {
+            onSelect({
+                lines: selected ? [] : [data],
+                nodes: [],
+            });
+            return;
+        }
+        onSelect({
+            lines: selected
+                ? selectedLines.filter(function (item) { return !_.isEqual(item, data); })
+                : __spreadArray(__spreadArray([], selectedLines, true), [data], false),
+        }, true);
     };
-    Line.prototype.render = function () {
-        var _a = this.props, start = _a.start, end = _a.end, selected = _a.selected, highLight = _a.highLight, data = _a.data, readOnly = _a.readOnly, lineOffsetY = _a.lineOffsetY, _b = _a.context, linking = _b.linking, activeLine = _b.activeLine;
-        var hover = this.state.hover;
-        var dataJson = data ? JSON.stringify({ origin: data, po: { start: start, end: end } }) : '';
-        var getTriangleStart = function () { return (__assign(__assign({}, end), { y: end.y - config.line.triangleWidth })); };
-        // 只高亮新增或者编辑的当前线
-        var curLinking = linking && !activeLine.origin && !data;
-        var lColor = highLight || selected || hover || curLinking ? Colors.ACTIVE : ((data && data.color) || Colors.NORMAL);
-        var transition = linking ? 'none' : config.transition;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("path", { onClick: this.handleClick, strokeWidth: config.line.triggerWidth, stroke: "transparent", fill: "none", style: { pointerEvents: 'all', transition: transition }, d: computeLinePath(start, getTriangleStart(), lineOffsetY), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }),
-            React.createElement("path", { onClick: this.handleClick, strokeWidth: highLight || selected || hover ? config.line.strokeLargeWidth : config.line.strokeWidth, stroke: lColor, fill: "none", style: { pointerEvents: 'all', transition: transition }, d: computeLinePath(start, getTriangleStart(), lineOffsetY), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }),
-            React.createElement("path", { className: readOnly ? '' : 'byai-topology-line-end-triangle', fill: lColor, stroke: "none", "data-type": LineEditType.EDIT_END, "data-json": dataJson, style: { pointerEvents: 'all', transition: transition }, d: computeTrianglePath(getTriangleStart(), config.line.triangleWidth), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave })));
-    };
-    return Line;
-}(React.Component));
-export default (function (props) { return (React.createElement(Consumer, null, function (context) { return React.createElement(Line, __assign({}, props, { context: context })); })); });
+    var dataJson = data ? JSON.stringify({ origin: data, po: { start: start, end: end } }) : '';
+    var getTriangleStart = function () { return (__assign(__assign({}, end), { y: end.y - config.line.triangleWidth })); };
+    var lColor = highLight || selected || hover || curLinking ? Colors.ACTIVE : ((data && data.color) || Colors.NORMAL);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("path", { onClick: handleClick, strokeWidth: config.line.triggerWidth, stroke: "transparent", fill: "none", style: { pointerEvents: 'all', transition: transition }, d: computeLinePath(start, getTriangleStart(), lineOffsetY), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
+        React.createElement("path", { onClick: handleClick, strokeWidth: highLight || selected || hover ? config.line.strokeLargeWidth : config.line.strokeWidth, stroke: lColor, fill: "none", style: { pointerEvents: 'all', transition: transition }, d: computeLinePath(start, getTriangleStart(), lineOffsetY), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
+        React.createElement("path", { className: readOnly ? '' : 'byai-topology-line-end-triangle', fill: lColor, stroke: "none", "data-type": LineEditType.EDIT_END, "data-json": dataJson, style: { pointerEvents: 'all', transition: transition }, d: computeTrianglePath(getTriangleStart(), config.line.triangleWidth), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })));
+});
+export default Line;
 //# sourceMappingURL=index.js.map

dist/lib/components/node-wrapper/index.d.ts

 import React from 'react';
 import { DragElementWrapper } from 'react-dnd';
-import { ITopologyContext, ITopologyNode, IWrapperOptions } from '../../declare';
+import { ITopologyContext, ITopologyNode, IWrapperOptions, ITopologyData } from '../../declare';
 import './index.less';
@@ -13,3 +13,3 @@ import { SelectMode } from '../../utils/selectNodes';
     setDraggingId?: (id: string) => void;
-    onSelect: (node: ITopologyNode, mode: SelectMode) => ITopologyNode;
+    onSelect: (node: ITopologyNode, mode: SelectMode) => ITopologyData;
     children: (wrapperOptions: IWrapperOptions) => React.ReactNode;
@@ -21,11 +21,5 @@ onMouseEnter?: (node: ITopologyNode) => void;
     isSelected?: boolean;
-    getBoundary: (elements: Element[]) => {
-        minX: number;
-        minY: number;
-        maxX: number;
-        maxY: number;
-    };
     closeBoxSelection: () => void;
     showBoxSelection?: () => void;
-    selectedNodes?: ITopologyNode[];
+    selectedNodeIdList?: string[];
     combineId?: string;
@@ -32,0 +26,0 @@ prevNodeStyle?: {

dist/lib/components/node-wrapper/index.js

@@ -44,3 +44,3 @@ var __extends = (this && this.__extends) || (function () {
 import { SelectMode } from '../../utils/selectNodes';
-import { getRealNodeDom, isMatchKeyValue } from '../../utils';
+import { getBoundary, getRealNodeDom, isMatchKeyValue } from '../../utils';
 import config from '../../config';
@@ -106,24 +106,2 @@ var NodeWrapper = /** @class */ (function (_super) {
             }
-            // const { data, onSelect, closeBoxSelection } = this.props;
-            // closeBoxSelection();
-            // if (e.button === 2) {
-            //     e.preventDefault();
-            //     onSelect(data, SelectMode.RIGHT_NORMAL);
-            //     return;
-            // }
-            // if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-            //     onSelect(data, SelectMode.MULTI);
-            //     return;
-            // }
-            // if (e.ctrlKey || e.metaKey) {
-            //     onSelect(data, SelectMode.MUL_NORMAL);
-            //     return;
-            // }
-            // if (e.shiftKey && !e.ctrlKey && !e.metaKey) {
-            //     onSelect(data, SelectMode.BOX_SELECTION);
-            //     return;
-            // }
-            // if (!isSelect) {
-            //     onSelect(data, SelectMode.NORMAL);
-            // }
         };
@@ -186,6 +164,5 @@ _this.handleRightClick = function (e) {
         var _this = this;
-        var _a = this.props, connectDragSource = _a.connectDragSource, connectDragPreview = _a.connectDragPreview, children = _a.children, data = _a.data, context = _a.context, id = _a.id, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
-        var selectedData = context.selectedData, activeLine = context.activeLine;
-        var isSelected = selectedData.nodes.find(function (item) { return item.id === data.id; }) !== undefined;
-        return connectDragSource(React.createElement("div", { id: data ? "topology-node-".concat(data.id) : "", "data-combine-id": data === null || data === void 0 ? void 0 : data.combineId, style: this.computeStyle(), className: "byai-topology-node-wrapper", onClick: this.handleClick, onContextMenu: this.handleRightClick, onMouseDown: function (e) {
+        var _a = this.props, connectDragSource = _a.connectDragSource, connectDragPreview = _a.connectDragPreview, children = _a.children, data = _a.data, context = _a.context, isSelected = _a.isSelected, id = _a.id, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+        var activeLine = context.activeLine;
+        return connectDragSource(React.createElement("div", { id: data ? "topology-node-".concat(data.id) : "", key: data.id, "data-combine-id": data === null || data === void 0 ? void 0 : data.combineId, style: this.computeStyle(), className: "byai-topology-node-wrapper", onClick: this.handleClick, onContextMenu: this.handleRightClick, onMouseDown: function (e) {
                 // @ts-ignore
@@ -211,3 +188,3 @@ _this.handleMouseDown(e, isSelected);
         var id = props.data ? props.data.id : null;
-        var _a = props.prevNodeStyle, prevNodeStyle = _a === void 0 ? {} : _a, closeBoxSelection = props.closeBoxSelection;
+        var _a = props.prevNodeStyle, prevNodeStyle = _a === void 0 ? {} : _a, closeBoxSelection = props.closeBoxSelection, _b = props.scaleNum, scaleNum = _b === void 0 ? 1 : _b;
         closeBoxSelection === null || closeBoxSelection === void 0 ? void 0 : closeBoxSelection();
@@ -228,9 +205,9 @@ props.setDraggingId(id);
         }
-        var otherRealNodeDomList = (source ? source.nodes : props.selectedNodes).filter(function (item) { return item.id !== id; }).map(function (item) { return getRealNodeDom(item.id); });
+        var otherRealNodeDomList = (source ? source.nodes.map(function (n) { return n.id; }) : props.selectedNodeIdList).filter(function (currId) { return currId !== id; }).map(function (currId) { return getRealNodeDom(currId); });
         var allRealNodeDomList = __spreadArray(__spreadArray([], otherRealNodeDomList, true), [realNodeDom], false);
-        var width = realNodeDom.offsetWidth;
-        var height = realNodeDom.offsetHeight;
+        var width = realNodeDom.offsetWidth * scaleNum;
+        var height = realNodeDom.offsetHeight * scaleNum;
         if (otherRealNodeDomList.length > 0) {
-            var boxPosition = props.getBoundary(allRealNodeDomList);
-            var _b = realNodeDom.getBoundingClientRect(), x = _b.x, y = _b.y;
+            var boxPosition = getBoundary(allRealNodeDomList);
+            var _c = realNodeDom.getBoundingClientRect(), x = _c.x, y = _c.y;
             distanceX = x - boxPosition.minX;
@@ -247,4 +224,4 @@ distanceY = y - boxPosition.minY;
         draggingPreviewNode.style.setProperty('--height', previewNodeHeight + 'px');
-        draggingPreviewNode.style.setProperty('--transformX', "".concat(-distanceX, "px"));
-        draggingPreviewNode.style.setProperty('--transformY', "".concat(-distanceY, "px"));
+        draggingPreviewNode.style.setProperty('--transformX', "".concat(-distanceX / scaleNum, "px"));
+        draggingPreviewNode.style.setProperty('--transformY', "".concat(-distanceY / scaleNum, "px"));
         // 恢复
@@ -251,0 +228,0 @@ setTimeout(function () {

dist/lib/components/topology/index.d.ts

@@ -98,2 +98,6 @@ import React, { HTMLAttributes } from 'react';
     constructor(props: ITopologyProps);
+    static defaultProps: {
+        snapline: boolean;
+    };
+    get nodeMap(): Map<string, ITopologyNode>;
     componentWillMount(): void;
@@ -149,3 +153,3 @@ componentDidMount(): void;
     selectNodesForSelection: () => void;
-    selectLine: (data: ITopologyData) => void;
+    selectLine: (data: ITopologyData, merge?: boolean) => void;
     dragCanvas: (clientX: number, clientY: number) => void;
@@ -186,3 +190,2 @@ editLine: (clientX: number, clientY: number) => void;
     renderDomMap: (props?: ITopologyProps) => void;
-    renderLines: () => React.JSX.Element;
     findScale: (clonegraph: any) => Promise<number>;
@@ -189,0 +192,0 @@ /**

dist/lib/utils/index.d.ts

@@ -79,2 +79,15 @@ import { IPosition, ITopologyNode } from '../declare';
 export declare const getRealNodeDom: (id: string) => HTMLElement;
+export declare const getBoundary: (elements: Element[]) => {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+export declare const isLineEqual: (sourceLine: {
+    start: string;
+    end: string;
+}, targetLine: {
+    start: string;
+    end: string;
+}) => boolean;
 export {};

dist/lib/utils/index.js

@@ -319,2 +319,24 @@ var __assign = (this && this.__assign) || function () {
 export var getRealNodeDom = function (id) { return document.getElementById("".concat(TOPOLOGY_NODE_PREFIX).concat(id)); };
+export var getBoundary = function (elements) {
+    var minX = Infinity;
+    var minY = Infinity;
+    var maxX = -Infinity;
+    var maxY = -Infinity;
+    elements.forEach(function (e) {
+        var _a = e.getBoundingClientRect(), x = _a.x, y = _a.y, height = _a.height, width = _a.width;
+        minX = Math.min(x, minX);
+        minY = Math.min(y, minY);
+        maxX = Math.max(x + width, maxX);
+        maxY = Math.max(y + height, maxY);
+    });
+    return {
+        minX: minX,
+        minY: minY,
+        maxX: maxX,
+        maxY: maxY
+    };
+};
+export var isLineEqual = function (sourceLine, targetLine) {
+    return sourceLine.start === targetLine.start && sourceLine.end === targetLine.end;
+};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@byai/topology",
-  "version": "1.3.22",
+  "version": "1.3.23-beta",
   "description": "拓扑图组件",
@@ -5,0 +5,0 @@ "bugs": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

91

increased by5.81%

Lines of code

5003

increased by2.37%

Worsened metrics

Total package byte prevSize

386048

decreased by-2.87%

Number of low quality alerts

2

increased by100%

No dependency changes