@byai/topology - npm Package Compare versions

Comparing version 1.3.23-beta-3 to 1.3.23-beta-4

dist/lib/components/context.d.ts

@@ -5,2 +5,1 @@ 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,3 +16,2 @@ 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, ITopologyData, ITopologyLine } from '../../declare';
+import { IPosition, ITopologyContext, ITopologyLine, ITopologyData } from '../../declare';
 import './index.less';
 interface ILineProps {
     isReduceRender?: boolean;
-    startX?: number;
-    startY?: number;
-    endX?: number;
-    endY?: number;
-    start?: IPosition;
-    end?: IPosition;
+    start: IPosition;
+    end: IPosition;
     color?: string;
@@ -20,9 +16,6 @@ lineOffsetY?: number;
     highLight?: boolean;
-    onSelect?: (data: ITopologyData, merge?: boolean) => void;
+    onSelect?: (data: ITopologyData) => void;
     scaleNum?: number;
-    selectedLines?: ITopologyLine[];
-    curLinking?: boolean;
-    transition?: string;
 }
-declare const Line: React.FC<ILineProps>;
-export default Line;
+declare const _default: (props: ILineProps) => React.JSX.Element;
+export default _default;

dist/lib/components/line/index.js

@@ -0,1 +1,16 @@
+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 () {
@@ -21,54 +36,91 @@ __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 React, { useState } from 'react';
+import { LineEditType, } from '../../declare';
+import { Consumer } from '../context';
+import { computeLinePath, computeTrianglePath } from '../../utils';
 import config from '../../config';
-import { LineEditType } from '../../declare';
-import { computeLinePath, computeTrianglePath } from '../../utils';
 
 var Colors = { ACTIVE: '#1F8CEC', NORMAL: '#AAB7C4' };
-var Line = React.memo(function (props) {
-    var _a, _b;
-    var startX = props.startX, startY = props.startY, endX = props.endX, endY = props.endY, propsStart = props.start, propsEnd = 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 start = (_a = propsStart !== null && propsStart !== void 0 ? propsStart : {
-        x: startX,
-        y: startY,
-    }) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
-    var end = (_b = propsEnd !== null && propsEnd !== void 0 ? propsEnd : {
-        x: endX,
-        y: endY,
-    }) !== null && _b !== void 0 ? _b : { x: 0, y: 0 };
-    var _c = useState(false), hover = _c[0], setHover = _c[1];
-    var handleMouseEnter = function () {
-        setHover(true);
-    };
-    var handleMouseLeave = function () {
-        setHover(false);
-    };
-    var handleClick = function (e) {
-        var multi = e.metaKey || e.ctrlKey;
-        if (!onSelect) {
-            return;
+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 _a = this.props, currentData = _a.data, currentHighLight = _a.highLight;
+        var nextData = nextProps.data, isReduceRender = nextProps.isReduceRender, nextHighLight = nextProps.highLight;
+        var currentLinkiing = this.props.context.linking;
+        var _b = nextProps.context, dragging = _b.dragging, activeLine = _b.activeLine, nextLinking = _b.linking;
+        // const curLinking = nextLinking && !activeLine.origin && !currentData;
+        if (isReduceRender && nextData === currentData && dragging) {
+            return false;
         }
-        if (!multi) {
-            onSelect({
-                lines: selected ? [] : [data],
-                nodes: [],
-            });
-            return;
+        // console.log('老 link => 新 link', currentLinkiing, nextLinking, currentLinkiing === nextLinking);
+        // console.log('老 highLight => 新 highLight', currentHighLight, nextHighLight, currentHighLight === nextHighLight);
+        // 连线中
+        // if (isReduceRender && nextData === currentData && currentLinkiing === nextLinking) {
+        //     console.log('阻止连线中');
+        //     return false;
+        // }
+        // nextHighLight
+        // if (isReduceRender && nextData === currentData && Boolean(currentHighLight) === Boolean(nextHighLight)) {
+        //     console.log('阻止 nextHighLight');
+        //     return false;
+        // }
+        if (isReduceRender && nextData === currentData
+            && (Boolean(currentHighLight) === Boolean(nextHighLight) || Boolean(currentHighLight) === Boolean(nextHighLight))) {
+            // console.log('阻止');
+            return false;
         }
-        onSelect({
-            lines: selected
-                ? selectedLines.filter(function (item) { return !_.isEqual(item, data); })
-                : __spreadArray(__spreadArray([], selectedLines, true), [data], false),
-        }, true);
+        // console.log('阻止逻辑', currentLinkiing === nextLinking, Boolean(currentHighLight) === Boolean(nextHighLight));
+        return true;
     };
-    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;
+    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;
+        // console.log('---line render---');
+        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 })); })); });
 //# 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, ITopologyData } from '../../declare';
+import { ITopologyContext, ITopologyNode, IWrapperOptions } from '../../declare';
 import './index.less';
@@ -13,3 +13,3 @@ import { SelectMode } from '../../utils/selectNodes';
     setDraggingId?: (id: string) => void;
-    onSelect: (node: ITopologyNode, mode: SelectMode) => ITopologyData;
+    onSelect: (node: ITopologyNode, mode: SelectMode) => ITopologyNode;
     children: (wrapperOptions: IWrapperOptions) => React.ReactNode;
@@ -21,5 +21,11 @@ onMouseEnter?: (node: ITopologyNode) => void;
     isSelected?: boolean;
+    getBoundary: (elements: Element[]) => {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
     closeBoxSelection: () => void;
     showBoxSelection?: () => void;
-    selectedNodeIdList?: string[];
+    selectedNodes?: ITopologyNode[];
     combineId?: string;
@@ -26,0 +32,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 { getBoundary, getRealNodeDom, isMatchKeyValue } from '../../utils';
+import { getRealNodeDom, isMatchKeyValue } from '../../utils';
 import config from '../../config';
@@ -106,2 +106,24 @@ 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);
+            // }
         };
@@ -164,5 +186,7 @@ _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, 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) {
+        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;
+        // console.log('---node render---');
+        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) {
                 // @ts-ignore
@@ -188,3 +212,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, _b = props.scaleNum, scaleNum = _b === void 0 ? 1 : _b;
+        var _a = props.prevNodeStyle, prevNodeStyle = _a === void 0 ? {} : _a, closeBoxSelection = props.closeBoxSelection;
         closeBoxSelection === null || closeBoxSelection === void 0 ? void 0 : closeBoxSelection();
@@ -205,9 +229,9 @@ props.setDraggingId(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 otherRealNodeDomList = (source ? source.nodes : props.selectedNodes).filter(function (item) { return item.id !== id; }).map(function (item) { return getRealNodeDom(item.id); });
         var allRealNodeDomList = __spreadArray(__spreadArray([], otherRealNodeDomList, true), [realNodeDom], false);
-        var width = realNodeDom.offsetWidth * scaleNum;
-        var height = realNodeDom.offsetHeight * scaleNum;
+        var width = realNodeDom.offsetWidth;
+        var height = realNodeDom.offsetHeight;
         if (otherRealNodeDomList.length > 0) {
-            var boxPosition = getBoundary(allRealNodeDomList);
-            var _c = realNodeDom.getBoundingClientRect(), x = _c.x, y = _c.y;
+            var boxPosition = props.getBoundary(allRealNodeDomList);
+            var _b = realNodeDom.getBoundingClientRect(), x = _b.x, y = _b.y;
             distanceX = x - boxPosition.minX;
@@ -224,4 +248,4 @@ distanceY = y - boxPosition.minY;
         draggingPreviewNode.style.setProperty('--height', previewNodeHeight + 'px');
-        draggingPreviewNode.style.setProperty('--transformX', "".concat(-distanceX / scaleNum, "px"));
-        draggingPreviewNode.style.setProperty('--transformY', "".concat(-distanceY / scaleNum, "px"));
+        draggingPreviewNode.style.setProperty('--transformX', "".concat(-distanceX, "px"));
+        draggingPreviewNode.style.setProperty('--transformY', "".concat(-distanceY, "px"));
         // 恢复
@@ -228,0 +252,0 @@ setTimeout(function () {

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

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

dist/lib/utils/index.d.ts

@@ -16,3 +16,3 @@ import { IPosition, ITopologyNode } from '../declare';
 export declare const computeTrianglePath: (start: IPosition, width: number) => string;
-export declare const getNodeSize: (dom: string | HTMLElement) => ClientRect;
+export declare const getNodeSize: (dom: string | HTMLElement) => DOMRect;
 export declare const impactCheck: (point: IPosition, size: {
@@ -80,15 +80,2 @@ width: number;
 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

@@ -20,7 +20,7 @@ var __assign = (this && this.__assign) || function () {
     // 当窗口有滚动时，需加上窗口的滚动
-    var rect = getNodeSize($wrapper);
+    var rect = $wrapper.getBoundingClientRect();
     // 缩放的容器
     var canvas = document.querySelector('.topology-canvas');
     // 可以获取到 svg 的宽高
-    var _a = getNodeSize(canvas), width = _a.width, height = _a.height;
+    var _a = canvas.getBoundingClientRect(), width = _a.width, height = _a.height;
     // eslint-disable-next-line radix
@@ -50,4 +50,4 @@ var zoom = parseInt(document.querySelector('.topology-tools-percent').innerHTML) / 100;
     var po = {
-        x: centerX + ((position === null || position === void 0 ? void 0 : position.x) - centerX) / zoom + (scrollLeft + window.pageXOffset - rect.left) / zoom,
-        y: centerY + ((position === null || position === void 0 ? void 0 : position.y) - centerY) / zoom + (scrollTop + window.pageYOffset - rect.top) / zoom,
+        x: centerX + (position.x - centerX) / zoom + (scrollLeft + window.pageXOffset - rect.left) / zoom,
+        y: centerY + (position.y - centerY) / zoom + (scrollTop + window.pageYOffset - rect.top) / zoom,
     };
@@ -135,26 +135,2 @@ return po;
 };
-// export const getNodeSize = ((refresh?: boolean) => {
-//     const cache = new WeakMap<HTMLElement, DOMRect>();
-//     return (dom: string | HTMLElement) => {
-//         if (['string', 'number'].indexOf(typeof dom) > -1) {
-//             // eslint-disable-next-line no-param-reassign
-//             dom = document.getElementById(`dom-map-${dom}`) as HTMLElement;
-//         }
-//         const rect = cache.get(dom as HTMLElement);
-//         if (rect && !refresh) {
-//             return rect;
-//         }
-//         if (!dom) {
-//             return {
-//                 width: 0,
-//                 height: 0,
-//                 left: 0,
-//                 top: 0,
-//             } as ClientRect;
-//         }
-//         const newRect = (dom as HTMLElement).getBoundingClientRect();
-//         cache.set(dom as HTMLElement, newRect);
-//         return newRect;
-//     };
-// })();
 export var impactCheck = function (point, size, position) {
@@ -346,24 +322,2 @@ var withinX = point.x >= position.x && point.x <= position.x + size.width;
 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.23-beta-3",
+  "version": "1.3.23-beta-4",
   "description": "拓扑图组件",
@@ -5,0 +5,0 @@ "bugs": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

399630

increased by1.89%

Worsened metrics

Number of package files

86

decreased by-5.49%

Lines of code

4907

decreased by-2.93%

No dependency changes