hungtcs/mxgraph-type-definitions

mxgraph type definitions

mxgraph-type-definitions's Issues

error when registering custom shape

Hi,

Thank you for the work you do in this repo.

I'm trying to implement a custom shape by extending mxActor.

export class MyShape extends mxActor {
  constructor(bounds: mxRectangle, fill: string, stroke: string, strokewidth?: number ) {
    super(bounds, fill, stroke, strokewidth);
  }

  public redrawPath(path, x, y, w, h) {
    const w25: number = w * 0.25;
    const h50: number = h / 2;
    path.moveTo(0, 0);
    path.lineTo(w, 0);
    path.lineTo(w, h);
    path.lineTo(0, h);
    path.lineTo(w25, h50);
    path.lineTo(0, 0);
    path.close();
  }
}

When registering the Shape I get following error: Argument of type 'typeof MyShape' is not assignable to parameter of type 'typeof mxShape'.

mxCellRenderer.registerShape(
    "MyShape",
    MyShape
);

I think a solution could be to change registerShape() in mxCellRenderer.d.ts from static registerShape(key: string, shape: typeof mxShape): void; to static registerShape(key: string, shape: new (...args: any) => mxShape): void;

working on view module

Hi @tbouffard, I am working on view module now.

Add support for more instance variables in mxGraph

Hi,
Thanks for creating the ts entries for mxGraph, Helps a lot with kickstarting an angular based project.

For some of my requirements, I need to customize things like popupMenuHandler etc, which seem to be created inside the createHandlers method which gets called as part of the constructor. So Im not able to use the createPopupMenuHandler or any of the other methods called inside createHandlers as all of them are called at constructor and there is no other way to override it.

If we instead add an instance variable like

    popupMenuHandler: mxPopupMenuHandler;

to mxGraph.d.ts, then we should be able to , say, use the popupHandler using the above variable. Right now, the other methods arent even called as they need to be defined at the time of constructing the mxGraph which doesnt seem possible.

Would you be open to taking patches for this ?

chore: push git tag to track version changes

Currently, it is very hard to know what are the changes between version. New versions are published to npmjs but we cannot track the related commits and change on the git repository.

Here is the list of versions with the commit I detected within the git history comparing the npm package date and commit date

• 1.0.2: a92fd70
• 1.0.1: bbc8718 (commit 2020-03-18T06:09:30Z, npm package 2020-03-18T06:10:43.530Z)
• 1.0.0: ebde1b1 introduce package.json file with version 1.0.0 (commit 2019-12-19T08:41:50Z, npm package 2019-12-19T08:41:58.136Z)

For the future versions, the npm version command could be used to upgrade version bump easily

• npm version ... to update the packag json file and create the git tag
• then run git push && git push --tags

If accepted, this could be at least documented in the README (new release section)

Having git tag will also allow us to add a badge like the following to let user see version history directly on GitHub:

I am working at view/mxGraph.d.ts

just prompt to not conflict, I am working at view/mxGraph.d.ts.

mxGraph.d.ts missing many important attributes currently( #13 )

some helper regexps

Hi @tbouffard !
I modified from the source code, I think you too. Here are some of my regular expressions, it's very helpful.

I am using vscode, I don't known it works for other editors. Please note the spaces

replace from <> to <>

for default value

 Default is (.+)\.
 \n * @default $1`

for class

Class: (.+)
@class $1

for boolean variables

 = (true|false);
 : boolean;

for links, do not replace all, conflict with array

<(\w+(\.|\w+)*)>
{@link $1}

for params

 (\w+) -
 @param $1

replace to blank

\n \* Variable: .+\n \*
\n \* Function: .+\n \*
\n \* Parameters:\n \*
 = function

Add missing layouts

Hi @hungtcs
I am just creating this issue is to let you know that I am currently working on adding missing layouts

Deprecate this package and archive the gihtub repository

@hungtcs hi,
I have seen that you have just cut a new 1.0.5 release which fixes backported from https://github.com/typed-mxgraph/typed-mxgraph, which is nice for users like me we are still using mxgraph-type-definitions.

However, as you mentioned few months ago in typed-mxgraph/typed-mxgraph#1 (comment) that you don't have much time working on mxgraph types (and me neither), I would suggest that we stop updating mxgraph-type-definitions starting from now.

Most contributions are now done in typed-mxgraph which is a sign that the new repository is gaining more popularity. Stopping mxgraph-type-definitions would also redirect more people to typed-mxgraph.
Backporting changes is a painful, time consuming and quite a boring task: this is too much work for a small community like ours.

My suggestions to properly stop mxgraph-type-definitions

[feel free to add/remove any elements here]

The following mxgraph-type-definitions resources may be backported to typed-mxgraph

• documentation
  • README explanations about Progress and links
  • helpers scripts
• tests file:
  • I have added a test.ts file as suggested by DefinitivelyTyped to validate some fixed definitions and demonstrate the type usage: https://github.com/hungtcs/mxgraph-type-definitions/blob/e472e593061294606432071723b43b1adf3d7169/test.ts
  • I am not sure if this brings values or if it is a pain, so if it deserves to be preserved in typed-mxgraph

The actual deperecation

• add a clear statement in the README
• npm package deprecation: https://docs.npmjs.com/deprecating-and-undeprecating-packages-or-package-versions
• optionally pin this issue
• archive the repository

Defects of the current npm package

1. typeRoots only detect subfolders

"typeRoots": [
    "node_modules/@types",
    "node_modules/mxgraph-type-definitions"
]

for instance: mxClient is declared in node_modules/mxgraph-type-definitions/mxClient.d.ts, but typescript can not detect this, packages in @types/* not have this problem.

Possible solution:

1. move all definition files to a subfolder.
2. put mxgraph-type-definitions package under a npm organization.
3. merge this project to DefinitelyTyped.

2. Should we create a factory package to match mxgraph-type-definitions

Simple implementation:

import mxgraph from 'mxgraph';

type mxGraphOptions = {
  mxBasePath?: string,
  mxImageBasePath?: string,
  mxLanguage?: string,
  mxDefaultLanguage?: string,
  mxLoadResources?: boolean,
  mxLoadStylesheets?: boolean,
};

type mxGraphExportObject = {
  mxClient: any,
  mxLog: typeof mxLog,
  mxObjectIdentity: any,
  mxDictionary: typeof mxDictionary,
  mxResources: typeof mxResources,
  mxPoint: typeof mxPoint,
  mxRectangle: typeof mxRectangle,
  mxEffects: any,
  mxUtils: typeof mxUtils,
  mxConstants: typeof mxConstants,
  mxEventObject: typeof mxEventObject,
  mxMouseEvent: typeof mxMouseEvent,
  mxEventSource: typeof mxEventSource,
  mxEvent: typeof mxEvent,
  mxXmlRequest: typeof mxXmlRequest,
  mxClipboard: any,
  mxWindow: any,
  mxForm: any,
  mxImage: typeof mxImage,
  mxDivResizer: any,
  mxDragSource: typeof mxDragSource,
  mxToolbar: any,
  mxUndoableEdit: typeof mxUndoableEdit,
  mxUndoManager: any,
  mxUrlConverter: typeof mxUrlConverter,
  mxPanningManager: typeof mxPanningManager,
  mxPopupMenu: typeof mxPopupMenu,
  mxAutoSaveManager: any,
  mxAnimation: any,
  mxMorphing: typeof mxMorphing,
  mxImageBundle: typeof mxImageBundle,
  mxImageExport: any,
  mxAbstractCanvas2D: typeof mxAbstractCanvas2D,
  mxXmlCanvas2D: typeof mxXmlCanvas2D,
  mxSvgCanvas2D: typeof mxSvgCanvas2D,
  mxVmlCanvas2D: typeof mxVmlCanvas2D,
  mxGuide: typeof mxGuide,
  mxShape: typeof mxShape,
  mxStencil: typeof mxStencil,
  mxStencilRegistry: typeof mxStencilRegistry,
  mxMarker: typeof mxMarker,
  mxActor: typeof mxActor,
  mxCloud: typeof mxCloud,
  mxRectangleShape: typeof mxRectangleShape,
  mxEllipse: typeof mxEllipse,
  mxDoubleEllipse: typeof mxDoubleEllipse,
  mxRhombus: typeof mxRhombus,
  mxPolyline: typeof mxPolyline,
  mxArrow: typeof mxArrow,
  mxArrowConnector: typeof mxArrowConnector,
  mxText: typeof mxText,
  mxTriangle: typeof mxTriangle,
  mxHexagon: typeof mxHexagon,
  mxLine: typeof mxLine,
  mxImageShape: typeof mxImageShape,
  mxLabel: typeof mxLabel,
  mxCylinder: typeof mxCylinder,
  mxConnector: typeof mxConnector,
  mxSwimlane: typeof mxSwimlane,
  mxGraphLayout: typeof mxGraphLayout,
  mxStackLayout: typeof mxStackLayout,
  mxPartitionLayout: any,
  mxCompactTreeLayout: typeof mxCompactTreeLayout,
  mxRadialTreeLayout: typeof mxRadialTreeLayout,
  mxFastOrganicLayout: typeof mxFastOrganicLayout,
  mxCircleLayout: typeof mxCircleLayout,
  mxParallelEdgeLayout: typeof mxParallelEdgeLayout,
  mxCompositeLayout: typeof mxCompositeLayout,
  mxEdgeLabelLayout: typeof mxEdgeLabelLayout,
  mxGraphAbstractHierarchyCell: typeof mxGraphAbstractHierarchyCell,
  mxGraphHierarchyNode: typeof mxGraphHierarchyNode,
  mxGraphHierarchyEdge: typeof mxGraphHierarchyEdge,
  mxGraphHierarchyModel: typeof mxGraphHierarchyModel,
  mxSwimlaneModel: typeof mxSwimlaneModel,
  mxHierarchicalLayoutStage: typeof mxHierarchicalLayoutStage,
  mxMedianHybridCrossingReduction: typeof mxMedianHybridCrossingReduction,
  mxMinimumCycleRemover: typeof mxMinimumCycleRemover,
  mxCoordinateAssignment: typeof mxCoordinateAssignment,
  mxSwimlaneOrdering: typeof mxSwimlaneOrdering,
  mxHierarchicalLayout: typeof mxHierarchicalLayout,
  mxSwimlaneLayout: typeof mxSwimlaneLayout,
  mxGraphModel: typeof mxGraphModel,
  mxCell: typeof mxCell,
  mxGeometry: typeof mxGeometry,
  mxCellPath: typeof mxCellPath,
  mxPerimeter: typeof mxPerimeter,
  mxPrintPreview: typeof mxPrintPreview,
  mxStylesheet: typeof mxStylesheet,
  mxCellState: typeof mxCellState,
  mxGraphSelectionModel: typeof mxGraphSelectionModel,
  mxCellEditor: typeof mxCellEditor,
  mxCellRenderer: typeof mxCellRenderer,
  mxEdgeStyle: typeof mxEdgeStyle,
  mxStyleRegistry: typeof mxStyleRegistry,
  mxGraphView: typeof mxGraphView,
  mxGraph: typeof mxGraph,
  mxCellOverlay: typeof mxCellOverlay,
  mxOutline: typeof mxOutline,
  mxMultiplicity: typeof mxMultiplicity,
  mxLayoutManager: typeof mxLayoutManager,
  mxSwimlaneManager: typeof mxSwimlaneManager,
  mxTemporaryCellStates: typeof mxTemporaryCellStates,
  mxCellStatePreview: any,
  mxConnectionConstraint: typeof mxConnectionConstraint,
  mxGraphHandler: typeof mxGraphHandler,
  mxPanningHandler: typeof mxPanningHandler,
  mxPopupMenuHandler: typeof mxPopupMenuHandler,
  mxCellMarker: typeof mxCellMarker,
  mxSelectionCellsHandler: typeof mxSelectionCellsHandler,
  mxConnectionHandler: typeof mxConnectionHandler,
  mxConstraintHandler: typeof mxConstraintHandler,
  mxRubberband: typeof mxRubberband,
  mxHandle: any,
  mxVertexHandler: typeof mxVertexHandler,
  mxEdgeHandler: typeof mxEdgeHandler,
  mxElbowEdgeHandler: typeof mxElbowEdgeHandler,
  mxEdgeSegmentHandler: typeof mxEdgeSegmentHandler,
  mxKeyHandler: typeof mxKeyHandler,
  mxTooltipHandler: typeof mxTooltipHandler,
  mxCellTracker: typeof mxCellTracker,
  mxCellHighlight: typeof mxCellHighlight,
  mxDefaultKeyHandler: any,
  mxDefaultPopupMenu: any,
  mxDefaultToolbar: any,
  mxEditor: any,
  mxCodecRegistry: typeof mxCodecRegistry,
  mxCodec: typeof mxCodec,
  mxObjectCodec: typeof mxObjectCodec,
  mxCellCodec: any,
  mxModelCodec: any,
  mxRootChangeCodec: any,
  mxChildChangeCodec: any,
  mxTerminalChangeCodec: any,
  mxGenericChangeCodec: any,
  mxGraphCodec: any,
  mxGraphViewCodec: any,
  mxStylesheetCodec: any,
  mxDefaultKeyHandlerCodec: any,
  mxDefaultToolbarCodec: any,
  mxDefaultPopupMenuCodec: any,
  mxEditorCodec: any,
};

export default function (options: mxGraphOptions) {
  Object.entries(options).forEach(([key, value]) => {
    window[key] = value;
  });
  const mx = mxgraph(options);
  return mx as mxGraphExportObject;
}

Not Working when Doing a ng build --prod

Hi
Thanks for create these types for mxgraph, much appreciated. You have done a good job..

It works perfectly in ng serve in dev, but when we deploy the buuild that was generated by ng build --prod, it does not work, it says mxGraphModel does not exist

any help would be appreciated..

Thank You

Contact: let's share efforts to implement 'mxgraph-type-definitions'

Hi,
I am contacting you to propose my help (and probably additional help from some of my colleagues) to work with you on this project. My goal is to have a mxgraph types definition directly available in DefinitelyTyped, see DefinitelyTyped/DefinitelyTyped#5317

Currently, there are a lot of repositories that try to develop an attempt for such types but none reach completeness and the efforts are spread all around instead of mutualizing everyone energy on a single solution.

I have recently found your repository: it looks like very promising and you are currently actively working on it.
I especially like the fact that, unlike other repositories, you define a definition file per mxgraph class. IMHO, this is a huge benefits in the maintainability field: it will be easier to know where to look/go when a new function is added to mxgraph and must be reflect to the types definition. This will avoid having a very large definition file as mxgraph defines a lot of types, so this will also easier to navigate and have a look at the code.

Here is a list of repositories I know that try to achieve types definition for mxgraph (they all miss a lot of functions and it is unclear which mxgraph they target)

• https://github.com/lgleim/mxgraph-typings and more 25 forks (most don’t provide any new stuffs)
• https://github.com/rabpeter/ts-mxgraph-typings (a copy of lgleim with some additions, probably the most up to date)

Currently, these repositories have an advantage on yours: they added documentation to class/function which helps when using an IDE. However, this documentation is directly copied from the mxgraph source code, so it is not fully JSDoc compliant.
I think this in an area on which your current implementation may be improved and I could help on this (among other thing)

I hope to hear from you soon
Thomas

Add missing elements in util/mxXYZCanvas2D

I have detected this while trying to integrate mxgraph-type-defintiions in process-analytics/bpmn-visualization-js#301

• missing methods in mxAbstractCanvas2D: because of abstractness is missing in mxGraph JavaScript code (ES5), some methods like fill or stroke are missing (the mxGraph JS API states to have a look at mxXmlCanvas2D to know the public API of it 😞 )
• missing mxXmlCanvas2D type
• review needed on types used by mxSvgCanvas2D and mxVmlCanvas2D

add more detailed setup information

Hi, I'm developing a react app with typescript and want to use mxgraph. I'm not super proficient in typescript but so far I had no trouble setting up libraries. With mxgraph-type-definitions however it seems this is targeted to advanced typescript programmers who exactly know where to make some adjustments.

I followed the instructions for the usage (using npm) and in my Intellij IDEA, the type definitions appear and in the code it is parsed. However, when running the app the objects are undefined. For example, mxClient.isBrowserSupported() is parsed by the IDE and I can click on the function to go to the definition (which is the mxgraph-type-definitions module). However, on runtime I get the error "Cannot read property 'isBrowserSupported' of undefined". I'm importing the mxgraph elements like so: import { mxClient } from 'mxgraph'

Please advice on how to setup the project so that the definitions are compiled.

Ensure definitions respect 'noImplicitAny'

Some elements defined in the lib version 1.0.2 currently do not respect that
When use in a project with tsconfig noImplicitAny set to true, this generates some TypeScript errors like

• node_modules/mxgraph-type-definitions/handler/mxKeyHandler.d.ts(14,31): error TS7006: Parameter 'target' implicitly has an 'any' type
• node_modules/mxgraph-type-definitions/shape/mxStencil.d.ts(140,3): error TS7010: 'drawChildren', which lacks return-type annotation, implicitly has an 'any' return type.

Workaround: set skipLibCheck to true