Merge pull request #1021 from LynchyC/master

Update lodash imports to use individual functions

.changeset/rude-hotels-buy.md

@@ -0,0 +1,10 @@
+---
+'@projectstorm/react-diagrams-gallery': patch
+'@projectstorm/geometry': patch
+'@projectstorm/react-canvas-core': patch
+'@projectstorm/react-diagrams-core': patch
+'@projectstorm/react-diagrams-defaults': patch
+'@projectstorm/react-diagrams-routing': patch
+---
+
+refactor: update lodash imports to use individual functions

diagrams-demo-gallery/demos/demo-cloning/index.tsx

@@ -1,5 +1,5 @@
 import createEngine, { DiagramModel, DefaultNodeModel, LinkModel, NodeModel } from '@projectstorm/react-diagrams';
-import * as _ from 'lodash';
+import _forEach from 'lodash/forEach';
 import * as React from 'react';
 import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
 import { BaseModel, CanvasWidget } from '@projectstorm/react-canvas-core';
@@ -20,7 +20,7 @@ class CloneSelected extends React.Component<any, any> {
 		let model = engine.getModel();
 
 		let itemMap = {};
-		_.forEach(model.getSelectedEntities(), (item: BaseModel<any>) => {
+		_forEach(model.getSelectedEntities(), (item: BaseModel<any>) => {
 			let newItem = item.clone(itemMap);
 
 			// offset the nodes slightly

diagrams-demo-gallery/demos/demo-custom-action/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _forEach from 'lodash/forEach';
 import createEngine, { DiagramModel, DefaultNodeModel, DefaultLinkModel } from '@projectstorm/react-diagrams';
 import { CanvasWidget, Action, ActionEvent, InputType } from '@projectstorm/react-canvas-core';
 import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
@@ -26,7 +26,7 @@ class CustomDeleteItemsAction extends Action {
 						const confirm = window.confirm('Are you sure you want to delete?');
 
 						if (confirm) {
-							_.forEach(selectedEntities, (model) => {
+							_forEach(selectedEntities, (model) => {
 								// only delete items which are not locked
 								if (!model.isLocked()) {
 									model.remove();

diagrams-demo-gallery/demos/demo-drag-and-drop/components/BodyWidget.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as _ from 'lodash';
+import _keys from 'lodash/keys';
 import { TrayWidget } from './TrayWidget';
 import { Application } from '../Application';
 import { TrayItemWidget } from './TrayItemWidget';
@@ -57,7 +57,7 @@ export class BodyWidget extends React.Component<BodyWidgetProps> {
 					<S.Layer
 						onDrop={(event) => {
 							var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
-							var nodesCount = _.keys(this.props.app.getDiagramEngine().getModel().getNodes()).length;
+							var nodesCount = _keys(this.props.app.getDiagramEngine().getModel().getNodes()).length;
 
 							var node: DefaultNodeModel = null;
 							if (data.type === 'in') {

diagrams-demo-gallery/demos/demo-dynamic-ports/index.tsx

@@ -1,13 +1,13 @@
 import createEngine, { DiagramModel, DefaultNodeModel, DiagramEngine } from '@projectstorm/react-diagrams';
-import * as _ from 'lodash';
+import _values from 'lodash/values';
 import * as React from 'react';
 import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
 
 class CloneSelected extends React.Component<{ model: DiagramModel; engine: DiagramEngine }, any> {
 	addPorts = () => {
-		const nodes: DefaultNodeModel[] = _.values(this.props.model.getNodes()) as DefaultNodeModel[];
+		const nodes: DefaultNodeModel[] = _values(this.props.model.getNodes()) as DefaultNodeModel[];
 		for (let node of nodes) {
 			if (node.getOptions().name === 'Node 2') {
 				node.addInPort(`in-${node.getInPorts().length + 1}`, false);

diagrams-demo-gallery/demos/demo-mutate-graph/index.tsx

@@ -1,6 +1,6 @@
 import createEngine, { DiagramModel, DefaultNodeModel, NodeModel } from '@projectstorm/react-diagrams';
 import * as React from 'react';
-import * as _ from 'lodash';
+import _values from 'lodash/values';
 import { DemoButton, DemoWorkspaceWidget } from '../helpers/DemoWorkspaceWidget';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
@@ -30,7 +30,7 @@ class NodeDelayedPosition extends React.Component<any, any> {
 		let str = JSON.stringify(model.serialize());
 		let model2 = new DiagramModel();
 		let obj: ReturnType<DiagramModel['serialize']> = JSON.parse(str);
-		let node: ReturnType<NodeModel['serialize']> = _.values(obj.layers[1].models)[0] as any;
+		let node: ReturnType<NodeModel['serialize']> = _values(obj.layers[1].models)[0] as any;
 		node.x += 30;
 		node.y += 30;
 

diagrams-demo-gallery/package.json

@@ -45,7 +45,7 @@
     "@storybook/react-webpack5": "^7.4.4",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^7.4.4",
-    "@types/lodash": "^4.14.199",
+    "@types/lodash": "^4.14.200",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "storybook": "^7.4.4"

diagrams-demo-gallery/tsconfig.json

@@ -2,6 +2,7 @@
 	"compileOnSave": false,
 	"compilerOptions": {
 		"suppressExcessPropertyErrors": true,
+		"esModuleInterop": true,
 		"declaration": true,
 		"composite": true,
 		"incremental": true,

packages/geometry/package.json

@@ -32,6 +32,6 @@
 		"lodash": "^4.17.21"
 	},
 	"devDependencies": {
-		"@types/lodash": "^4.14.199"
+		"@types/lodash": "^4.14.200"
 	}
 }

packages/geometry/src/Polygon.ts

@@ -1,5 +1,6 @@
 import { Point } from './Point';
-import * as _ from 'lodash';
+import _forEach from 'lodash/forEach';
+import _map from 'lodash/map';
 import { Matrix } from './Matrix';
 import { boundingBoxFromPoints } from './toolkit';
 import { Bounds, BoundsCorner } from './Bounds';
@@ -12,26 +13,26 @@ export class Polygon {
 	}
 
 	serialize() {
-		return _.map(this.points, (point) => {
+		return _map(this.points, (point) => {
 			return [point.x, point.y];
 		});
 	}
 
 	deserialize(data: any) {
-		this.points = _.map(data, (point) => {
+		this.points = _map(data, (point) => {
 			return new Point(point[0], point[1]);
 		});
 	}
 
 	scale(x, y, origin: Point) {
 		let matrix = Matrix.createScaleMatrix(x, y, origin);
-		_.forEach(this.points, (point) => {
+		_forEach(this.points, (point) => {
 			point.transform(matrix);
 		});
 	}
 
 	transform(matrix: Matrix) {
-		_.forEach(this.points, (point) => {
+		_forEach(this.points, (point) => {
 			point.transform(matrix);
 		});
 	}
@@ -49,13 +50,13 @@ export class Polygon {
 	}
 
 	translate(offsetX: number, offsetY: number) {
-		_.forEach(this.points, (point) => {
+		_forEach(this.points, (point) => {
 			point.translate(offsetX, offsetY);
 		});
 	}
 
 	doClone(ob: this) {
-		this.points = _.map(ob.points, (point) => {
+		this.points = _map(ob.points, (point) => {
 			return point.clone();
 		});
 	}

packages/geometry/src/toolkit.ts

@@ -1,5 +1,5 @@
 import { Point } from './Point';
-import * as _ from 'lodash';
+import _flatMap from 'lodash/flatMap';
 import { Polygon } from './Polygon';
 import { Bounds, BoundsCorner, createEmptyBounds } from './Bounds';
 
@@ -38,7 +38,7 @@ export const boundingBoxFromPoints = (points: Point[]): Bounds => {
 
 export const boundingBoxFromPolygons = (polygons: Polygon[]): Bounds => {
 	return boundingBoxFromPoints(
-		_.flatMap(polygons, (polygon) => {
+		_flatMap(polygons, (polygon) => {
 			return polygon.getPoints();
 		})
 	);

packages/geometry/tsconfig.json

@@ -1,13 +1,12 @@
 {
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
 		"outDir": "dist",
 		"rootDir": "src",
 		"sourceMap": true,
 		"declarationDir": "dist/@types",
 		"tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
 	},
-	"include": [
-		"./src"
-	]
+	"include": ["./src"]
 }

packages/react-canvas-core/package.json

@@ -37,6 +37,6 @@
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.22",
-		"@types/lodash": "^4.14.199"
+		"@types/lodash": "^4.14.200"
 	}
 }

packages/react-canvas-core/src/CanvasEngine.ts

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import _debounce from 'lodash/debounce';
 import { CanvasModel } from './entities/canvas/CanvasModel';
 import { FactoryBank } from './core/FactoryBank';
 import { AbstractReactFactory } from './core/AbstractReactFactory';
@@ -148,7 +148,7 @@ export class CanvasEngine<
 		let repaintFn = repaint;
 
 		if (repaintDebounceMs > 0) {
-			repaintFn = debounce(repaint, repaintDebounceMs);
+			repaintFn = _debounce(repaint, repaintDebounceMs);
 		}
 
 		if (promise) {

packages/react-canvas-core/src/actions/DeleteItemsAction.ts

@@ -1,6 +1,7 @@
 import { Action, ActionEvent, InputType } from '../core-actions/Action';
 import { KeyboardEvent } from 'react';
-import * as _ from 'lodash';
+import _forEach from 'lodash/forEach';
+import _isEqual from 'lodash/isEqual';
 
 export interface DeleteItemsActionOptions {
 	keyCodes?: number[];
@@ -31,8 +32,8 @@ export class DeleteItemsAction extends Action {
 			fire: (event: ActionEvent<KeyboardEvent>) => {
 				const { keyCode, ctrlKey, shiftKey, altKey, metaKey } = event.event;
 
-				if (keyCodes.indexOf(keyCode) !== -1 && _.isEqual({ ctrlKey, shiftKey, altKey, metaKey }, modifiers)) {
-					_.forEach(this.engine.getModel().getSelectedEntities(), (model) => {
+				if (keyCodes.indexOf(keyCode) !== -1 && _isEqual({ ctrlKey, shiftKey, altKey, metaKey }, modifiers)) {
+					_forEach(this.engine.getModel().getSelectedEntities(), (model) => {
 						// only delete items which are not locked
 						if (!model.isLocked()) {
 							model.remove();

packages/react-canvas-core/src/core-actions/ActionEventBus.ts

@@ -1,6 +1,7 @@
 import { Action, ActionEvent, InputType } from './Action';
 import { KeyboardEvent, MouseEvent } from 'react';
-import * as _ from 'lodash';
+import _filter from 'lodash/filter';
+import _keys from 'lodash/keys';
 import { CanvasEngine } from '../CanvasEngine';
 import { BaseModel } from '../core-models/BaseModel';
 
@@ -16,7 +17,7 @@ export class ActionEventBus {
 	}
 
 	getKeys(): string[] {
-		return _.keys(this.keys);
+		return _keys(this.keys);
 	}
 
 	registerAction(action: Action): () => void {
@@ -33,7 +34,7 @@ export class ActionEventBus {
 	}
 
 	getActionsForType(type: InputType): Action[] {
-		return _.filter(this.actions, (action) => {
+		return _filter(this.actions, (action) => {
 			return action.options.type === type;
 		});
 	}

packages/react-canvas-core/src/core-models/BaseEntity.ts

@@ -1,5 +1,5 @@
 import { Toolkit } from '../Toolkit';
-import * as _ from 'lodash';
+import _cloneDeep from 'lodash/cloneDeep';
 import { CanvasEngine } from '../CanvasEngine';
 import { BaseEvent, BaseListener, BaseObserver } from '../core/BaseObserver';
 import { BaseModel } from './BaseModel';
@@ -62,7 +62,7 @@ export class BaseEntity<T extends BaseEntityGenerics = BaseEntityGenerics> exten
 		if (lookupTable[this.options.id]) {
 			return lookupTable[this.options.id];
 		}
-		let clone = _.cloneDeep(this);
+		let clone = _cloneDeep(this);
 		clone.options = {
 			...this.options,
 			id: Toolkit.UID()

packages/react-canvas-core/src/core-state/State.ts

@@ -1,7 +1,7 @@
 import { CanvasEngine } from '../CanvasEngine';
 import { Action, ActionEvent, InputType } from '../core-actions/Action';
 import { SyntheticEvent } from 'react';
-import * as _ from 'lodash';
+import _intersection from 'lodash/intersection';
 
 export interface StateOptions {
 	name: string;
@@ -73,7 +73,7 @@ export abstract class State<E extends CanvasEngine = CanvasEngine> {
 	}
 
 	isKeysFullfilled(keys: string[]) {
-		return _.intersection(this.keys, keys).length === this.keys.length;
+		return _intersection(this.keys, keys).length === this.keys.length;
 	}
 
 	activated(previous: State) {

packages/react-canvas-core/src/core-state/StateMachine.ts

@@ -1,5 +1,5 @@
 import { State } from './State';
-import * as _ from 'lodash';
+import _last from 'lodash/last';
 import { CanvasEngine } from '../CanvasEngine';
 import { BaseEvent, BaseListener, BaseObserver } from '../core/BaseObserver';
 
@@ -29,7 +29,7 @@ export class StateMachine extends BaseObserver<StateMachineListener> {
 
 	popState() {
 		this.stateStack.pop();
-		this.setState(_.last(this.stateStack));
+		this.setState(_last(this.stateStack));
 	}
 
 	setState(state: State) {

packages/react-canvas-core/src/core/FactoryBank.ts

@@ -1,6 +1,6 @@
 import { BaseEvent, BaseListener, BaseObserver } from './BaseObserver';
 import { AbstractFactory } from './AbstractFactory';
-import * as _ from 'lodash';
+import _values from 'lodash/values';
 
 export interface FactoryBankListener<F extends AbstractFactory = AbstractFactory> extends BaseListener {
 	/**
@@ -29,7 +29,7 @@ export class FactoryBank<
 	}
 
 	getFactories(): F[] {
-		return _.values(this.factories);
+		return _values(this.factories);
 	}
 
 	clearFactories() {