Merge pull request jgraph#63 from brendonboshell/npmpackage

Create npm package

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+javascript/dist
+.jshintrc
+javascript/examples/**/dist

Gruntfile.js

@@ -0,0 +1,101 @@
+var path = require("path"),
+    fs = require("fs"),
+    parentFolderName = path.basename(path.resolve('..')),
+    mxClientContent,
+    deps;
+
+// To get the dependencies for the project, read the filenames by matching
+// mxClient.include([...]) in mxClient.js. This is not perfect, but the list is
+// required in mxClient.js for compatibility.
+mxClientContent = fs.readFileSync(
+  path.join(__dirname, "./javascript/src/js/mxClient.js"),
+  "utf8"
+);
+deps = mxClientContent.match(/mxClient\.include\([^"']+["'](.*?)["']/gi).map(function (str) {
+  return "." + str.match(/mxClient\.include\([^"']+["'](.*?)["']/)[1];
+});
+deps = ["./js/mxClient.js"].concat(deps.slice(0));
+
+module.exports = function (grunt) {
+  grunt.initConfig({
+    copy: {
+      main: {
+        files: [{
+          expand: true,
+          cwd: "./javascript/src",
+          src: deps,
+          dest: "./javascript/dist"
+        }],
+        options: {
+          // After each module, add the object to the '__mxOutput' namespace
+          // E.g. __mxOutput.mxLog, etc.
+          process: function (content, srcpath) {
+            var afterContent = "",
+                moduleName = path.basename(srcpath, ".js");
+
+            afterContent += "\n__mxOutput." + path.basename(srcpath, ".js") +
+              " = typeof " + moduleName + " !== 'undefined' ? " + moduleName + " : undefined;\n";
+
+            return content + afterContent;
+          }
+        }
+      }
+    },
+    concat: {
+      dist: {
+        src: deps.map(function (dep) {
+          return path.join("./javascript/dist", dep);
+        }),
+        dest: './javascript/dist/build.js'
+      },
+      options: {
+        banner: "(function (root, factory) {\n" +
+          "if (typeof define === 'function' && define.amd) {\n" +
+          "define([], factory);\n" +
+          "} else if (typeof module === 'object' && module.exports) {\n" +
+          "module.exports = factory();\n" +
+          "} else {\n" +
+          "root.mxgraph = factory();\n" +
+          "}\n" +
+          "}(this, function () {\n" +
+          "return function (opts) {\n" +
+          // Opts will be passed into this function, expand them out as if
+          // they were globals so they can get picked up by the logic in
+          // mxClient.js.
+          "for (var name in opts) { this[name] = opts[name]; }\n" +
+          "var __mxOutput = {};\n",
+        footer: "return __mxOutput;\n" +
+          "};\n" +
+          "}));"
+      }
+    },
+    webpack: {
+      examples: {
+        entry: "./javascript/examples/webpack/src/anchors.js",
+        output: {
+          path: "javascript/examples/webpack/dist",
+          filename: "anchors.js"
+        }
+      }
+    },
+    watch: {
+      javascripts: {
+        files: "javascript/src/**/*.js",
+        tasks: ["umdify"],
+        options: {
+          interrupt: true
+        }
+      }
+    },
+  });
+
+  require(parentFolderName === "node_modules" ? "load-grunt-parent-tasks" : "load-grunt-tasks")(grunt);
+  grunt.registerTask("default", [
+    "copy",
+    "concat",
+    "webpack"
+  ]);
+  grunt.registerTask("build", [
+    "default"
+  ]);
+};

docs/manual.html

@@ -384,6 +384,30 @@ <h3><a name="project_structure"></a>Project structure and build
 <p><em>Table: Project Directory Structure</em></p>
 <br/>
 
+<h3><a name="npm"></a>npm</h3>
+
+<p>mxGraph is also available via the npm package manager. To use mxGraph as
+	a depedency, use <code>npm install</code>:</p>
+
+<pre>npm install mxgraph --save</pre>
+
+<p>The module can be loaded using <code>require()</code>. This returns a
+	factory function that accepts an object of options. Options such as
+	<code>mxBasePath</code> must be provided to the factory function, rather
+	than specified as global variables.</p>
+
+<pre>var mxgraph = require("mxgraph")({
+  mxImageBasePath: "./src/images",
+  mxBasePath: "./src"
+})</pre>
+
+<p>The factory function returns a 'namespace object' that provides access to
+	all objects of the mxGraph package. For example, the <code>mxEvent</code>
+	object is available at <code>mxgraph.mxEvent</code>.</p>
+
+<pre>var mxEvent = mxgraph.mxEvent;
+mxEvent.disableContextMenu(container);</pre>
+
 <h2><a name="web_applications"></a>JavaScript and Web Applications</h2>
 
 <p>Web applications, specifically the use of JavaScript to attempt
@@ -1652,4 +1676,4 @@ <h4><a name="layer_filter"></a>Layering and Filtering</h4>
 <hr size="1">
 &copy; 2006-2016 by JGraph Ltd.
 </body>
-</html>
+</html>

javascript/examples/webpack/anchors.html

@@ -0,0 +1,22 @@
+<!--
+  Copyright (c) 2006-2013, JGraph Ltd
+
+  Anchors example for mxGraph. This example demonstrates defining
+  fixed connection points for all shapes.
+-->
+<html>
+<head>
+	<title>Anchors example for mxGraph</title>
+	<!-- Loads and initializes the library -->
+	<script type="text/javascript" src="dist/anchors.js"></script>
+</head>
+
+<!-- Page passes the container for the graph to the program -->
+<body>
+
+	<!-- Creates a container for the graph with a grid wallpaper -->
+	<div id="graphContainer"
+		style="position:relative;overflow:hidden;width:321px;height:241px;background:url('../editors/images/grid.gif');cursor:default;">
+	</div>
+</body>
+</html>

javascript/examples/webpack/src/anchors.js

@@ -0,0 +1,99 @@
+var mxgraph = require("../../../dist/build")({
+      mxImageBasePath: "../../src/images",
+      mxBasePath: "../../src"
+    }),
+    mxGraph = mxgraph.mxGraph,
+    mxShape = mxgraph.mxShape,
+    mxConnectionConstraint = mxgraph.mxConnectionConstraint,
+    mxPoint = mxgraph.mxPoint,
+    mxPolyline = mxgraph.mxPolyline,
+    mxEvent = mxgraph.mxEvent,
+    mxRubberband = mxgraph.mxRubberband,
+    mxCellState = mxgraph.mxCellState;
+
+window.onload = function () {
+  // Overridden to define per-shape connection points
+  mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
+  {
+    if (terminal != null && terminal.shape != null)
+    {
+      if (terminal.shape.stencil != null)
+      {
+        if (terminal.shape.stencil != null)
+        {
+          return terminal.shape.stencil.constraints;
+        }
+      }
+      else if (terminal.shape.constraints != null)
+      {
+        return terminal.shape.constraints;
+      }
+    }
+
+    return null;
+  };
+
+  // Defines the default constraints for all shapes
+  mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
+                   new mxConnectionConstraint(new mxPoint(0.5, 0), true),
+                   new mxConnectionConstraint(new mxPoint(0.75, 0), true),
+                               new mxConnectionConstraint(new mxPoint(0, 0.25), true),
+                               new mxConnectionConstraint(new mxPoint(0, 0.5), true),
+                               new mxConnectionConstraint(new mxPoint(0, 0.75), true),
+                             new mxConnectionConstraint(new mxPoint(1, 0.25), true),
+                             new mxConnectionConstraint(new mxPoint(1, 0.5), true),
+                             new mxConnectionConstraint(new mxPoint(1, 0.75), true),
+                             new mxConnectionConstraint(new mxPoint(0.25, 1), true),
+                             new mxConnectionConstraint(new mxPoint(0.5, 1), true),
+                             new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
+
+  // Edges have no connection points
+  mxPolyline.prototype.constraints = null;
+
+  // Program starts here. Creates a sample graph in the
+  // DOM node with the specified ID. This function is invoked
+  // from the onLoad event handler of the document (see below).
+  function main(container)
+  {
+    // Disables the built-in context menu
+    mxEvent.disableContextMenu(container);
+
+    // Creates the graph inside the given container
+    var graph = new mxGraph(container);
+    graph.setConnectable(true);
+
+    // Enables connect preview for the default edge style
+    graph.connectionHandler.createEdgeState = function(me)
+    {
+      var edge = graph.createEdge(null, null, null, null, null);
+
+      return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
+    };
+
+    // Specifies the default edge style
+    graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
+
+    // Enables rubberband selection
+    new mxRubberband(graph);
+
+    // Gets the default parent for inserting new cells. This
+    // is normally the first child of the root (ie. layer 0).
+    var parent = graph.getDefaultParent();
+
+    // Adds cells to the model in a single step
+    graph.getModel().beginUpdate();
+    try
+    {
+      var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
+      var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
+      var e1 = graph.insertEdge(parent, null, '', v1, v2);
+    }
+    finally
+    {
+      // Updates the display
+      graph.getModel().endUpdate();
+    }
+  };
+
+  main(document.getElementById('graphContainer'));
+};