conversions to typescript and type fixes

development
mcyph 2021-06-27 23:01:35 +10:00
parent 288ba10cf0
commit 0c6b765cac
10 changed files with 140 additions and 163 deletions

View File

@ -54,8 +54,7 @@ class CellAttributeChange implements UndoableChange {
* Changes the attribute of the cell's user object by
* using <mxCell.setAttribute>.
*/
// execute(): void;
execute() {
execute(): void {
const tmp = this.cell.getAttribute(this.attribute);
if (isNullish(this.previous)) {

View File

@ -305,7 +305,8 @@ class CellMarker extends EventSource {
*
* Marks the given cell using the given color, or <validColor> if no color is specified.
*/
markCell(cell: Cell, color: ColorValue) {
markCell(cell: Cell,
color: ColorValue) {
const state = this.graph.getView().getState(cell);
if (state) {
@ -352,7 +353,9 @@ class CellMarker extends EventSource {
* Returns the valid- or invalidColor depending on the value of isValid.
* The given <mxCellState> is ignored by this implementation.
*/
getMarkerColor(evt: Event, state: CellState, isValid: boolean): string {
getMarkerColor(evt: Event,
state: CellState,
isValid: boolean): string {
return isValid ? this.validColor : this.invalidColor;
}
@ -362,7 +365,7 @@ class CellMarker extends EventSource {
* Uses <getCell>, <getStateToMark> and <intersects> to return the
* <mxCellState> for the given <mxMouseEvent>.
*/
getState(me: InternalMouseEvent): CellState {
getState(me: InternalMouseEvent): CellState | null {
const view = this.graph.getView();
const cell = this.getCell(me);
const state = this.getStateToMark(view.getState(cell));

View File

@ -44,18 +44,18 @@ class GraphEditing {
startEditingAtCell(cell: Cell | null = null, evt: MouseEvent): void {
if (evt == null || !isMultiTouchEvent(evt)) {
if (cell == null) {
cell = this.getSelectionCell();
cell = this.graph.selection.getSelectionCell();
if (cell != null && !this.isCellEditable(cell)) {
cell = null;
}
}
if (cell != null) {
this.fireEvent(
this.graph.event.fireEvent(
new EventObject(InternalEvent.START_EDITING, 'cell', cell, 'event', evt)
);
(<CellEditor>this.cellEditor).startEditing(cell, evt);
this.fireEvent(
(<CellEditor>this.graph.editing.cellEditor).startEditing(cell, evt);
this.graph.event.fireEvent(
new EventObject(InternalEvent.EDITING_STARTED, 'cell', cell, 'event', evt)
);
}
@ -85,8 +85,8 @@ class GraphEditing {
* should be stored.
*/
stopEditing(cancel: boolean = false): void {
(<CellEditor>this.cellEditor).stopEditing(cancel);
this.fireEvent(
(<CellEditor>this.graph.editing.cellEditor).stopEditing(cancel);
this.graph.event.fireEvent(
new EventObject(InternalEvent.EDITING_STOPPED, 'cancel', cancel)
);
}
@ -106,26 +106,19 @@ class GraphEditing {
value: any,
evt: InternalMouseEvent | EventObject
): Cell {
this.getModel().beginUpdate();
try {
this.graph.batchUpdate(() => {
const old = cell.value;
this.cellLabelChanged(cell, value, this.isAutoSizeCell(cell));
this.fireEvent(
new EventObject(
InternalEvent.LABEL_CHANGED,
'cell',
cell,
'value',
value,
'old',
old,
'event',
evt
)
);
} finally {
this.getModel().endUpdate();
}
this.cellLabelChanged(cell, value, this.graph.cell.isAutoSizeCell(cell));
this.graph.event.fireEvent(new EventObject(
InternalEvent.LABEL_CHANGED,
{
cell: cell,
value: value,
old: old,
event: evt,
}
));
});
return cell;
}
@ -156,9 +149,12 @@ class GraphEditing {
* @param value New label to be assigned.
* @param autoSize Boolean that specifies if {@link cellSizeUpdated} should be called.
*/
cellLabelChanged(cell: Cell, value: any, autoSize: boolean = false): void {
this.batchUpdate(() => {
this.getModel().setValue(cell, value);
cellLabelChanged(cell: Cell,
value: any,
autoSize: boolean = false): void {
this.graph.batchUpdate(() => {
this.graph.model.setValue(cell, value);
if (autoSize) {
this.cellSizeUpdated(cell, false);
}
@ -184,34 +180,6 @@ class GraphEditing {
return false;
}
/**
* Returns {@link invokesStopCellEditing}.
*/
isInvokesStopCellEditing(): boolean {
return this.invokesStopCellEditing;
}
/**
* Sets {@link invokesStopCellEditing}.
*/
setInvokesStopCellEditing(value: boolean): void {
this.invokesStopCellEditing = value;
}
/**
* Returns {@link enterStopsCellEditing}.
*/
isEnterStopsCellEditing(): boolean {
return this.enterStopsCellEditing;
}
/**
* Sets {@link enterStopsCellEditing}.
*/
setEnterStopsCellEditing(value: boolean): void {
this.enterStopsCellEditing = value;
}
/**
* Returns true if the given cell is editable. This returns {@link cellsEditable} for
* all given cells if {@link isCellLocked} does not return true for the given cell
@ -220,11 +188,11 @@ class GraphEditing {
* @param cell {@link mxCell} whose editable state should be returned.
*/
isCellEditable(cell: Cell): boolean {
const style = this.getCurrentCellStyle(cell);
const style = this.graph.cell.getCurrentCellStyle(cell);
return (
this.isCellsEditable() &&
!this.isCellLocked(cell) &&
!this.graph.cell.isCellLocked(cell) &&
style.editable != 0
);
}

View File

@ -30,7 +30,7 @@ import EventObject from './EventObject';
* Constructs a new event source.
*/
class EventSource {
constructor(eventSource: EventSource) {
constructor(eventSource: EventSource | null=null) {
this.eventSource = eventSource;
}
@ -55,7 +55,7 @@ class EventSource {
*
* Optional source for events. Default is null.
*/
eventSource: EventSource;
eventSource: EventSource | null;
/**
* Function: isEventsEnabled
@ -80,7 +80,7 @@ class EventSource {
*
* Returns <eventSource>.
*/
getEventSource(): EventSource {
getEventSource(): EventSource | null {
return this.eventSource;
}

View File

@ -221,14 +221,14 @@ class GraphEvents {
if (this.isTransparentClickEvent(evt)) {
let active = false;
const tmp = this.getCellAt(
const tmp = this.graph.cell.getCellAt(
me.graphX,
me.graphY,
null,
false,
false,
(state: CellState): boolean => {
const selected = this.isCellSelected(<Cell>state.cell);
const selected = this.graph.cell.isCellSelected(<Cell>state.cell);
active = active || selected;
return (
@ -244,8 +244,8 @@ class GraphEvents {
cell = tmp;
}
}
} else if (this.isSwimlaneSelectionEnabled()) {
cell = this.getSwimlaneAt(me.getGraphX(), me.getGraphY());
} else if (this.graph.swimlane.isSwimlaneSelectionEnabled()) {
cell = this.graph.swimlane.getSwimlaneAt(me.getGraphX(), me.getGraphY());
if (cell != null && (!this.isToggleEvent(evt) || !isAltDown(evt))) {
let temp = cell;
@ -255,7 +255,7 @@ class GraphEvents {
temp = temp.getParent();
const state = this.graph.view.getState(temp);
if (this.isSwimlane(temp) && state != null) {
if (this.graph.swimlane.isSwimlane(temp) && state != null) {
swimlanes.push(temp);
}
}
@ -267,7 +267,7 @@ class GraphEvents {
swimlanes.push(cell);
for (let i = 0; i < swimlanes.length - 1; i += 1) {
if (this.isCellSelected(swimlanes[i])) {
if (this.graph.cell.isCellSelected(swimlanes[i])) {
cell = swimlanes[this.isToggleEvent(evt) ? i : i + 1];
}
}
@ -278,7 +278,7 @@ class GraphEvents {
if (cell != null) {
this.selectCellForEvent(cell, evt);
} else if (!this.isToggleEvent(evt)) {
this.clearSelection();
this.graph.selection.clearSelection();
}
}
return false;
@ -320,26 +320,21 @@ class GraphEvents {
* @param evt Mouseevent that represents the doubleclick.
* @param cell Optional {@link Cell} under the mousepointer.
*/
dblClick(evt: MouseEvent, cell?: Cell): void {
const mxe = new EventObject(
InternalEvent.DOUBLE_CLICK,
'event',
evt,
'cell',
cell
);
dblClick(evt: MouseEvent,
cell?: Cell): void {
const mxe = new EventObject(InternalEvent.DOUBLE_CLICK, {event: evt, cell: cell});
this.graph.fireEvent(mxe);
// Handles the event if it has not been consumed
if (
this.isEnabled() &&
this.graph.isEnabled() &&
!isConsumed(evt) &&
!mxe.isConsumed() &&
cell != null &&
this.isCellEditable(cell) &&
!this.isEditing(cell)
this.graph.cell.isCellEditable(cell) &&
!this.graph.editing.isEditing(cell)
) {
this.startEditingAtCell(cell, evt);
this.graph.editing.startEditingAtCell(cell, evt);
InternalEvent.consume(evt);
}
}
@ -359,8 +354,8 @@ class GraphEvents {
'cell',
me.getCell()
);
const panningHandler = <PanningHandler>this.panningHandler;
const connectionHandler = <ConnectionHandler>this.connectionHandler;
const panningHandler = <PanningHandler>this.graph.panning.panningHandler;
const connectionHandler = <ConnectionHandler>this.graph.connectionHandler;
// LATER: Check if event should be consumed if me is consumed
this.graph.fireEvent(mxe);
@ -440,13 +435,14 @@ class GraphEvents {
* @param me {@link mxMouseEvent} to be updated.
* @param evtName Name of the mouse event.
*/
// updateMouseEvent(me: mxMouseEvent, evtName: string): mxMouseEvent;
updateMouseEvent(me: InternalMouseEvent, evtName: string) {
if (me.graphX == null || me.graphY == null) {
const pt = convertPoint(this.container, me.getX(), me.getY());
updateMouseEvent(me: InternalMouseEvent,
evtName: string): InternalMouseEvent {
me.graphX = pt.x - this.panDx;
me.graphY = pt.y - this.panDy;
if (me.graphX == null || me.graphY == null) {
const pt = convertPoint(this.graph.container, me.getX(), me.getY());
me.graphX = pt.x - this.graph.panning.panDx;
me.graphY = pt.y - this.graph.panning.panDy;
// Searches for rectangles using method if native hit detection is disabled on shape
if (
@ -480,9 +476,9 @@ class GraphEvents {
// Dispatches the drop event to the graph which
// consumes and executes the source function
const pt = convertPoint(this.container, x, y);
const pt = convertPoint(this.graph.container, x, y);
return this.graph.view.getState(this.getCellAt(pt.x, pt.y));
return this.graph.view.getState(this.graph.cell.getCellAt(pt.x, pt.y));
}
/**
@ -897,8 +893,9 @@ class GraphEvents {
/**
* Consumes the given {@link InternalMouseEvent} if it's a touchStart event.
*/
// consumeMouseEvent(evtName: string, me: mxMouseEvent, sender: mxEventSource): void;
consumeMouseEvent(evtName: string, me: InternalMouseEvent, sender: any = this) {
consumeMouseEvent(evtName: string,
me: InternalMouseEvent,
sender: any = this): void {
// Workaround for duplicate click in Windows 8 with Chrome/FF/Opera with touch
if (evtName === InternalEvent.MOUSE_DOWN && isTouchEvent(me.getEvent())) {
me.consume(false);
@ -936,8 +933,8 @@ class GraphEvents {
* @param evt Gestureend event that represents the gesture.
* @param cell Optional {@link Cell} associated with the gesture.
*/
// fireGestureEvent(evt: any, cell?: mxCell): void;
fireGestureEvent(evt: MouseEvent, cell: Cell | null = null): void {
fireGestureEvent(evt: MouseEvent,
cell: Cell | null = null): void {
// Resets double tap event handling when gestures take place
this.lastTouchTime = 0;
this.graph.fireEvent(
@ -951,7 +948,7 @@ class GraphEvents {
* SVG-bases browsers.
*/
sizeDidChange(): void {
const bounds = this.getGraphBounds();
const bounds = this.graph.getGraphBounds();
if (this.graph.container != null) {
const border = this.graph.getBorder();
@ -1005,7 +1002,7 @@ class GraphEvents {
root.style.height = '100%';
}
this.graph.updatePageBreaks(this.graph.pageBreaksVisible, width, height);
this.graph.pageBreaks.updatePageBreaks(this.graph.pageBreaksVisible, width, height);
}
this.graph.fireEvent(new EventObject(InternalEvent.SIZE, 'bounds', bounds));
}
@ -1018,8 +1015,7 @@ class GraphEvents {
* Returns true if the given event is a clone event. This implementation
* returns true if control is pressed.
*/
// isCloneEvent(evt: MouseEvent): boolean;
isCloneEvent(evt: EventObject | InternalMouseEvent): boolean {
isCloneEvent(evt: MouseEvent): boolean {
return isControlDown(evt);
}
@ -1028,8 +1024,7 @@ class GraphEvents {
* returns true the cell behind the selected cell will be selected. This
* implementation returns false;
*/
// isTransparentClickEvent(evt: MouseEvent): boolean;
isTransparentClickEvent(evt: EventObject | InternalMouseEvent): boolean {
isTransparentClickEvent(evt: MouseEvent): boolean {
return false;
}
@ -1038,24 +1033,21 @@ class GraphEvents {
* returns true if the meta key (Cmd) is pressed on Macs or if control is
* pressed on any other platform.
*/
// isToggleEvent(evt: MouseEvent): boolean;
isToggleEvent(evt: EventObject | InternalMouseEvent): boolean {
isToggleEvent(evt: MouseEvent): boolean {
return mxClient.IS_MAC ? isMetaDown(evt) : isControlDown(evt);
}
/**
* Returns true if the given mouse event should be aligned to the grid.
*/
// isGridEnabledEvent(evt: MouseEvent): boolean;
isGridEnabledEvent(evt: EventObject | InternalMouseEvent): boolean {
isGridEnabledEvent(evt: MouseEvent): boolean {
return evt != null && !isAltDown(evt);
}
/**
* Returns true if the given mouse event should be aligned to the grid.
*/
// isConstrainedEvent(evt: MouseEvent): boolean;
isConstrainedEvent(evt: EventObject | InternalMouseEvent): boolean {
isConstrainedEvent(evt: MouseEvent): boolean {
return isShiftDown(evt);
}
@ -1063,16 +1055,10 @@ class GraphEvents {
* Returns true if the given mouse event should not allow any connections to be
* made. This implementation returns false.
*/
// isIgnoreTerminalEvent(evt: MouseEvent): boolean;
isIgnoreTerminalEvent(evt: EventObject | InternalMouseEvent): boolean {
isIgnoreTerminalEvent(evt: MouseEvent): boolean {
return false;
}
/**
* Returns an {@link Point} representing the given event in the unscaled,
* non-translated coordinate space of {@link container} and applies the grid.
@ -1082,13 +1068,13 @@ class GraphEvents {
* offset by half of the {@link gridSize}. Default is `true`.
*/
getPointForEvent(evt: InternalMouseEvent, addOffset: boolean = true): Point {
const p = convertPoint(this.container, getClientX(evt), getClientY(evt));
const p = convertPoint(this.graph.container, getClientX(evt), getClientY(evt));
const s = this.graph.view.scale;
const tr = this.graph.view.translate;
const off = addOffset ? this.gridSize / 2 : 0;
const off = addOffset ? this.graph.snap.gridSize / 2 : 0;
p.x = this.snap(p.x / s - tr.x - off);
p.y = this.snap(p.y / s - tr.y - off);
p.x = this.graph.snap.snap(p.x / s - tr.x - off);
p.y = this.graph.snap.snap(p.y / s - tr.y - off);
return p;
}
@ -1112,6 +1098,34 @@ class GraphEvents {
this.escapeEnabled = value;
}
/**
* Returns {@link invokesStopCellEditing}.
*/
isInvokesStopCellEditing(): boolean {
return this.invokesStopCellEditing;
}
/**
* Sets {@link invokesStopCellEditing}.
*/
setInvokesStopCellEditing(value: boolean): void {
this.invokesStopCellEditing = value;
}
/**
* Returns {@link enterStopsCellEditing}.
*/
isEnterStopsCellEditing(): boolean {
return this.enterStopsCellEditing;
}
/**
* Sets {@link enterStopsCellEditing}.
*/
setEnterStopsCellEditing(value: boolean): void {
this.enterStopsCellEditing = value;
}
/*****************************************************************************
* Group: Graph appearance
*****************************************************************************/
@ -1123,7 +1137,7 @@ class GraphEvents {
* @param me {@link mxMouseEvent} whose cursor should be returned.
*/
getCursorForMouseEvent(me: InternalMouseEvent): string | null {
return this.getCursorForCell(me.getCell());
return this.graph.cell.getCursorForCell(me.getCell());
}
}

View File

@ -139,9 +139,9 @@ class InternalEvent {
*/
static addGestureListeners(
node: Listenable,
startListener: EventListener | null,
moveListener: EventListener | null,
endListener: EventListener | null
startListener: EventListener | null = null,
moveListener: EventListener | null = null,
endListener: EventListener | null = null
) {
if (startListener) {
InternalEvent.addListener(

View File

@ -7,7 +7,7 @@
import EventSource from '../event/EventSource';
import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import utils, { convertPoint, sortCells } from '../../util/Utils';
import RootChange from '../model/RootChange';
import ChildChange from '../model/ChildChange';
import TerminalChange from '../cell/edge/TerminalChange';
@ -101,17 +101,17 @@ class LayoutManager extends EventSource {
/**
* Holds the function that handles the endUpdate event.
*/
undoHandler: Function;
undoHandler: (...args: any[]) => any;
/**
* Holds the function that handles the move event.
*/
moveHandler: Function;
moveHandler: (...args: any[]) => any;
/**
* Holds the function that handles the resize event.
*/
resizeHandler: Function;
resizeHandler: (...args: any[]) => any;
/**
* Returns true if events are handled. This implementation
@ -219,12 +219,11 @@ class LayoutManager extends EventSource {
* @param cell Array of {@link Cell} that have been moved.
* @param evt Mouse event that represents the mousedown.
*/
// cellsMoved(cells: Array<mxCell>, evt: MouseEvent): void;
cellsMoved(cells: CellArray,
evt: InternalMouseEvent): void {
if (cells != null && evt != null) {
const point = utils.convertPoint(
const point = convertPoint(
(<graph>this.getGraph()).container,
getClientX(evt),
getClientY(evt)
@ -250,7 +249,6 @@ class LayoutManager extends EventSource {
* @param cell Array of {@link Cell} that have been resized.
* @param bounds {@link mxRectangle} taht represents the new bounds.
*/
// cellsResized(cells: Array<mxCell>, bounds: Array<mxRectangle>, prev: Array<any>): void;
cellsResized(
cells: CellArray | null = null,
bounds: Rectangle[] | null = null,
@ -366,7 +364,7 @@ class LayoutManager extends EventSource {
* Executes the given layout on the given parent.
*/
executeLayoutForCells(cells: CellArray): void {
const sorted = utils.sortCells(cells, false);
const sorted = sortCells(cells, false);
this.layoutCells(sorted, true);
this.layoutCells(sorted.reverse(), false);
}

View File

@ -8,6 +8,9 @@ import mxPopupMenu from '../../util/gui/mxPopupMenu';
import InternalEvent from '../event/InternalEvent';
import utils from '../../util/Utils';
import { getMainEvent, isMultiTouchEvent } from '../../util/EventUtils';
import Graph from '../Graph';
import InternalMouseEvent from '../event/InternalMouseEvent';
import Cell from '../cell/datatypes/Cell';
/**
* Class: mxPopupMenuHandler
@ -19,7 +22,7 @@ import { getMainEvent, isMultiTouchEvent } from '../../util/EventUtils';
* Constructs an event handler that creates a <mxPopupMenu>.
*/
class PopupMenuHandler extends mxPopupMenu {
constructor(graph, factoryMethod) {
constructor(graph: Graph, factoryMethod: any) {
super();
if (graph != null) {
@ -43,8 +46,8 @@ class PopupMenuHandler extends mxPopupMenu {
*
* Reference to the enclosing <mxGraph>.
*/
// graph: mxGraph;
graph = null;
// @ts-ignore
graph: Graph;
/**
* Variable: selectOnPopup
@ -52,8 +55,7 @@ class PopupMenuHandler extends mxPopupMenu {
* Specifies if cells should be selected if a popupmenu is displayed for
* them. Default is true.
*/
// selectOnPopup: boolean;
selectOnPopup = true;
selectOnPopup: boolean = true;
/**
* Variable: clearSelectionOnBackground
@ -61,48 +63,42 @@ class PopupMenuHandler extends mxPopupMenu {
* Specifies if cells should be deselected if a popupmenu is displayed for
* the diagram background. Default is true.
*/
// clearSelectionOnBackground: boolean;
clearSelectionOnBackground = true;
clearSelectionOnBackground: boolean = true;
/**
* Variable: triggerX
*
* X-coordinate of the mouse down event.
*/
// triggerX: number;
triggerX = null;
triggerX: number | null = null;
/**
* Variable: triggerY
*
* Y-coordinate of the mouse down event.
*/
// triggerY: number;
triggerY = null;
triggerY: number | null = null;
/**
* Variable: screenX
*
* Screen X-coordinate of the mouse down event.
*/
// screenX: number;
screenX = null;
screenX: number | null = null;
/**
* Variable: screenY
*
* Screen Y-coordinate of the mouse down event.
*/
// screenY: number;
screenY = null;
screenY: number | null = null;
/**
* Function: init
*
* Initializes the shapes required for this vertex handler.
*/
// init(): void;
init() {
init(): void {
// Supercall
super.init();
@ -122,8 +118,7 @@ class PopupMenuHandler extends mxPopupMenu {
* Hook for returning if a cell should be selected for a given <mxMouseEvent>.
* This implementation returns <selectOnPopup>.
*/
// isSelectOnPopup(me: mxMouseEvent): boolean;
isSelectOnPopup(me) {
isSelectOnPopup(me: InternalMouseEvent): boolean {
return this.selectOnPopup;
}
@ -133,8 +128,9 @@ class PopupMenuHandler extends mxPopupMenu {
* Handles the event by initiating the panning. By consuming the event all
* subsequent events of the gesture are redirected to this handler.
*/
// mouseDown(sender: any, me: mxMouseEvent): void;
mouseDown(sender, me) {
mouseDown(sender: any,
me: InternalMouseEvent): void {
if (this.isEnabled() && !isMultiTouchEvent(me.getEvent())) {
// Hides the popupmenu if is is being displayed
this.hideMenu();
@ -152,8 +148,9 @@ class PopupMenuHandler extends mxPopupMenu {
*
* Handles the event by updating the panning on the graph.
*/
// mouseMove(sender: any, me: mxMouseEvent): void;
mouseMove(sender, me) {
mouseMove(sender: any,
me: InternalMouseEvent): void {
// Popup trigger may change on mouseUp so ignore it
if (this.inTolerance && this.screenX != null && this.screenY != null) {
if (
@ -173,8 +170,8 @@ class PopupMenuHandler extends mxPopupMenu {
* Handles the event by setting the translation on the view or showing the
* popupmenu.
*/
// mouseUp(sender: any, me: mxMouseEvent): void;
mouseUp(sender, me) {
mouseUp(sender: any,
me: InternalMouseEvent): void {
if (
this.popupTrigger &&
this.inTolerance &&
@ -219,8 +216,7 @@ class PopupMenuHandler extends mxPopupMenu {
*
* Hook to return the cell for the mouse up popup trigger handling.
*/
// getCellForPopupEvent(me: mxMouseEvent): mxCell;
getCellForPopupEvent(me) {
getCellForPopupEvent(me: InternalMouseEvent): Cell {
return me.getCell();
}
@ -229,8 +225,7 @@ class PopupMenuHandler extends mxPopupMenu {
*
* Destroys the handler and all its resources and DOM nodes.
*/
// destroy(): void;
destroy() {
destroy(): void {
this.graph.removeMouseListener(this);
this.graph.removeListener(this.gestureHandler);