From f49c848efe89bb5e66f0fc40c6f6288344b2c3ed Mon Sep 17 00:00:00 2001 From: aboyko Date: Wed, 1 Mar 2023 17:07:41 -0500 Subject: [PATCH] Bundle with jquery and lodash --- package.json | 4 ++- .../flo/code-editor/code-editor.component.ts | 3 +- projects/flo/directives/resizer.ts | 3 +- .../flo/dsl-editor/dsl-editor.component.ts | 7 ++--- projects/flo/editor/editor.component.ts | 15 +++++----- projects/flo/ng-package.json | 2 ++ projects/flo/package.json | 6 ++-- projects/flo/palette/palette.component.ts | 3 +- .../properties/properties.group.component.ts | 1 - projects/flo/shared/flo-common.ts | 4 +-- projects/flo/shared/shapes.ts | 28 +++++++++---------- tsconfig.json | 1 + 12 files changed, 38 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index 979b1e2..73c05da 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "dependencies": { "codemirror": "5.54.0", "jointjs": "3.4.1", + "jquery": "^3.6.3", + "lodash": "^4.17.21", "ts-disposables": "2.2.3", "@angular-devkit/build-angular": "~15.1.5", @@ -51,7 +53,7 @@ "@types/backbone": "1.3.42", "@types/codemirror": "0.0.64", "@types/jquery": "3.5.4", - "@types/lodash": "4.14.165", + "@types/lodash": "^4.14.191", "scss-bundle": "^3.1.2", "typescript": "~4.8.0", diff --git a/projects/flo/code-editor/code-editor.component.ts b/projects/flo/code-editor/code-editor.component.ts index 61ba2ad..14974ff 100644 --- a/projects/flo/code-editor/code-editor.component.ts +++ b/projects/flo/code-editor/code-editor.component.ts @@ -2,8 +2,7 @@ import { Component, Input, Output, ElementRef, EventEmitter, OnInit, ViewEncapsu import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import * as CodeMirror from 'codemirror'; -import * as _$ from 'jquery'; -const $: any = _$; +import $ from 'jquery'; // CodeMirror extensions import 'codemirror/mode/meta'; diff --git a/projects/flo/directives/resizer.ts b/projects/flo/directives/resizer.ts index fb7c205..724b047 100644 --- a/projects/flo/directives/resizer.ts +++ b/projects/flo/directives/resizer.ts @@ -4,8 +4,7 @@ import { fromEvent } from 'rxjs'; import { sampleTime } from 'rxjs/operators'; import { CompositeDisposable, Disposable } from 'ts-disposables'; -import * as _$ from 'jquery'; -const $: any = _$; +import $ from 'jquery'; @Directive({ selector: '[resizer]', diff --git a/projects/flo/dsl-editor/dsl-editor.component.ts b/projects/flo/dsl-editor/dsl-editor.component.ts index 638ee2b..609fad0 100644 --- a/projects/flo/dsl-editor/dsl-editor.component.ts +++ b/projects/flo/dsl-editor/dsl-editor.component.ts @@ -1,8 +1,7 @@ import { Component, Input, Output, ElementRef, EventEmitter, OnInit, ViewEncapsulation } from '@angular/core'; -import * as _ from 'lodash'; +import debounce from 'lodash/debounce'; import * as CodeMirror from 'codemirror'; -import * as _$ from 'jquery'; -const $: any = _$; +import $ from 'jquery'; import 'codemirror/addon/lint/lint'; import 'codemirror/addon/hint/show-hint'; @@ -124,7 +123,7 @@ export class DslEditorComponent implements OnInit { // Turns out "value" in the option doesn't set it. this.doc.setValue(this._dsl || ''); - this.doc.on('change', this.debounce ? _.debounce(this._dslChangedHandler, this.debounce) : this._dslChangedHandler); + this.doc.on('change', this.debounce ? debounce(this._dslChangedHandler, this.debounce) : this._dslChangedHandler); this.doc.on('focus', () => this.focus.emit()); this.doc.on('blur', () => this.blur.emit()); diff --git a/projects/flo/editor/editor.component.ts b/projects/flo/editor/editor.component.ts index 042417b..896dafb 100644 --- a/projects/flo/editor/editor.component.ts +++ b/projects/flo/editor/editor.component.ts @@ -14,12 +14,13 @@ import { Flo } from '../shared/flo-common'; import { Shapes, Constants } from '../shared/shapes'; import { Utils } from './editor-utils'; import { CompositeDisposable, Disposable } from 'ts-disposables'; -import * as _$ from 'jquery'; -import * as _ from 'lodash'; +import $ from 'jquery'; +import isEqual from 'lodash/isEqual'; +import partial from 'lodash/partial'; + import { Observable, Subject, BehaviorSubject } from 'rxjs'; import { Logger } from '../shared/logger'; const joint: any = Flo.joint; -const $: any = _$; export interface VisibilityState { visibility: string; @@ -559,7 +560,7 @@ export class EditorComponent implements OnInit, OnDestroy { if (this.highlighted === dragDescriptor) { return; } - if (this.highlighted && dragDescriptor && _.isEqual(this.highlighted.sourceComponent, dragDescriptor.sourceComponent)) { + if (this.highlighted && dragDescriptor && isEqual(this.highlighted.sourceComponent, dragDescriptor.sourceComponent)) { if (this.highlighted.source === dragDescriptor.source && this.highlighted.target === dragDescriptor.target) { return; } @@ -673,7 +674,7 @@ export class EditorComponent implements OnInit, OnDestroy { // } let oldVisibility = excludeViews.map(_x => this._hideNode(_x.el)); - let targetElement = document.elementFromPoint(event.clientX, event.clientY); + let targetElement = document.elementFromPoint(event.clientX, event.clientY) as HTMLElement; excludeViews.forEach((excluded, i) => { this._restoreNodeVisibility(excluded.el, oldVisibility[i]); }); @@ -724,7 +725,7 @@ export class EditorComponent implements OnInit, OnDestroy { handleDropFromPalette(event: Flo.DnDEvent) { let cellview = event.view; let evt = event.event; - if (this.paper.el === evt.target || $.contains(this.paper.el, evt.target)) { + if (this.paper.el === evt.target || $.contains(this.paper.el, evt.target as HTMLElement)) { if (this.readOnlyCanvas) { this.setDragDescriptor(undefined); } else { @@ -1173,7 +1174,7 @@ export class EditorComponent implements OnInit, OnDestroy { } }); // adjust vertices when a cell is removed or its source/target was changed - this.graph.on('add remove change:source change:target change:vertices change:position', _.partial(Utils.fanRoute, this.graph)); + this.graph.on('add remove change:source change:target change:vertices change:position', partial(Utils.fanRoute, this.graph)); this.graph.on('startDeletion', (cell: dia.Cell) => { if (this.editor && this.editor.preDelete) { diff --git a/projects/flo/ng-package.json b/projects/flo/ng-package.json index be6e9c3..d6d2f49 100644 --- a/projects/flo/ng-package.json +++ b/projects/flo/ng-package.json @@ -8,6 +8,8 @@ "allowedNonPeerDependencies": [ "codemirror", "jointjs", + "jquery", + "lodash", "ts-disposables" ] } diff --git a/projects/flo/package.json b/projects/flo/package.json index d9375b5..e9cf651 100644 --- a/projects/flo/package.json +++ b/projects/flo/package.json @@ -1,6 +1,6 @@ { "name": "spring-flo", - "version": "0.11.0", + "version": "0.12.0-beta.2", "description": "Library for quickly building text DSL visualization diagram editor", "author": "Andy Clement, Alex Boyko", "license": "Apache-2.0", @@ -11,11 +11,11 @@ "dependencies": { "codemirror": "5.54.0", "jointjs": "3.4.1", + "jquery": "^3.6.3", + "lodash": "^4.17.21", "ts-disposables": "2.2.3" }, "peerDependencies": { - "jquery": ">=3.6.0", - "lodash": ">=4.17.0", "@angular/core": ">=15.0.0 <17.0.0", "@angular/forms": ">=15.0.0 < 17.0.0", "@angular/common": ">=15.0.0 <17.0.0", diff --git a/projects/flo/palette/palette.component.ts b/projects/flo/palette/palette.component.ts index 1d32d87..34b7513 100644 --- a/projects/flo/palette/palette.component.ts +++ b/projects/flo/palette/palette.component.ts @@ -6,10 +6,9 @@ import { Flo } from '../shared/flo-common'; import '../shared/shapes'; import { Shapes, Constants } from '../shared/shapes'; import { DOCUMENT } from '@angular/common' -import * as _$ from 'jquery'; +import $ from 'jquery'; import {Logger} from '../shared/logger'; const joint: any = Flo.joint; -const $: any = _$; const DEBOUNCE_TIME = 300; diff --git a/projects/flo/properties/properties.group.component.ts b/projects/flo/properties/properties.group.component.ts index 9b1f07e..016d10c 100644 --- a/projects/flo/properties/properties.group.component.ts +++ b/projects/flo/properties/properties.group.component.ts @@ -1,7 +1,6 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import { Properties } from '../shared/flo-properties'; -import Property = Properties.Property; import PropertyFilter = Properties.PropertyFilter; @Component({ diff --git a/projects/flo/shared/flo-common.ts b/projects/flo/shared/flo-common.ts index bd3a1d8..431e6f5 100644 --- a/projects/flo/shared/flo-common.ts +++ b/projects/flo/shared/flo-common.ts @@ -1,9 +1,7 @@ import { dia, g } from 'jointjs'; import { Observable } from 'rxjs'; import * as _joint from 'jointjs'; -import * as _$ from 'jquery'; - -const $ = _$; +import $ from 'jquery'; export namespace Flo { diff --git a/projects/flo/shared/shapes.ts b/projects/flo/shared/shapes.ts index b041431..a95b21f 100644 --- a/projects/flo/shared/shapes.ts +++ b/projects/flo/shared/shapes.ts @@ -1,9 +1,9 @@ import { dia } from 'jointjs'; import { Flo } from './flo-common'; -import * as _ from 'lodash'; -import * as _$ from 'jquery'; +import template from 'lodash/template'; +import isFunction from 'lodash/isFunction'; +import $ from 'jquery'; const joint: any = Flo.joint; -const $: any = _$; const isChrome: boolean = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); const isFF: boolean = navigator.userAgent.indexOf('Firefox') > 0; @@ -45,7 +45,7 @@ export function loadShapes() { let amount = Number.isFinite(args.amount) ? args.amount : 1; - return _.template( + return template( '', { a: 1 - 0.96 * amount, @@ -66,7 +66,7 @@ export function loadShapes() { let amount = Number.isFinite(args.amount) ? args.amount : 1; - return _.template( + return template( '', { a: 1.0 + 0.5 * amount, @@ -355,7 +355,7 @@ export function loadShapes() { // } // }, drag: function(evt: MouseEvent, x: number, y: number) { - let interactive = _.isFunction(this.options.interactive) ? this.options.interactive(this, 'pointermove') : + let interactive = isFunction(this.options.interactive) ? this.options.interactive(this, 'pointermove') : this.options.interactive; if (interactive !== false) { this.paper.trigger('dragging-node-over-canvas', {type: Flo.DnDEventType.DRAG, view: this, event: evt}); @@ -646,7 +646,7 @@ export namespace Shapes { position = {x: 0, y: 0}; } - if (renderer && _.isFunction(renderer.createNode)) { + if (renderer && isFunction(renderer.createNode)) { node = renderer.createNode({graph, paper}, metadata, props); } else { node = new joint.shapes.flo.Node(); @@ -665,7 +665,7 @@ export namespace Shapes { if (graph) { graph.addCell(node); } - if (renderer && _.isFunction(renderer.initializeNewNode)) { + if (renderer && isFunction(renderer.initializeNewNode)) { let descriptor: Flo.ViewerDescriptor = { paper: paper, graph: graph @@ -685,7 +685,7 @@ export namespace Shapes { let graph = params.graph || (params.paper ? params.paper.model : undefined); let link: dia.Link; - if (renderer && _.isFunction(renderer.createLink)) { + if (renderer && isFunction(renderer.createLink)) { link = renderer.createLink(source, target, metadata, props); } else { link = new joint.shapes.flo.Link(); @@ -706,7 +706,7 @@ export namespace Shapes { if (graph) { graph.addCell(link); } - if (renderer && _.isFunction(renderer.initializeNewLink)) { + if (renderer && isFunction(renderer.initializeNewLink)) { let descriptor: Flo.ViewerDescriptor = { paper: paper, graph: graph @@ -728,7 +728,7 @@ export namespace Shapes { let graph = params.graph || (params.paper ? params.paper.model : undefined); let decoration: dia.Element; - if (renderer && _.isFunction(renderer.createDecoration)) { + if (renderer && isFunction(renderer.createDecoration)) { decoration = renderer.createDecoration(kind, parent); } if (decoration) { @@ -742,7 +742,7 @@ export namespace Shapes { graph.addCell(decoration); } parent.embed(decoration); - if (renderer && _.isFunction(renderer.initializeNewDecoration)) { + if (renderer && isFunction(renderer.initializeNewDecoration)) { let descriptor: Flo.ViewerDescriptor = { paper: paper, graph: graph @@ -766,7 +766,7 @@ export namespace Shapes { if (!location) { location = {x: 0, y: 0}; } - if (renderer && _.isFunction(renderer.createHandle)) { + if (renderer && isFunction(renderer.createHandle)) { handle = renderer.createHandle(kind, parent); } else { handle = new joint.shapes.flo.ErrorDecoration({ @@ -788,7 +788,7 @@ export namespace Shapes { graph.addCell(handle); } parent.embed(handle); - if (renderer && _.isFunction(renderer.initializeNewHandle)) { + if (renderer && isFunction(renderer.initializeNewHandle)) { let descriptor: Flo.ViewerDescriptor = { paper: paper, graph: graph diff --git a/tsconfig.json b/tsconfig.json index 0ee2ca1..023c086 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "target": "ES2022", "module": "ES2022", "useDefineForClassFields": false, + "allowSyntheticDefaultImports": true, "lib": ["ES2022", "dom"] }, "angularCompilerOptions": {