interested in getting this running

[Analect]

@itechdom I happened upon your repo while searching github for implementations of 'mindmup-mapjs'. I was interested to find if anyone was using this package to render mindmaps ... since I'm a big believer in them too! However, I'm having a bit of difficulty getting your repo up and running in order for me to take a look ... and was just wondering if you might be able to point me in the right direction ...

I ran npm install ... and then npm start, but it seems there are various errors when running gulp. I'm running node 6.2.1 ... so maybe I need to go back to an earlier version? As per this gist, here is what is failing: https://gist.github.com/Analect/225e587e145867285e59774e3c4edd8d

Have you any suggestions? Ahead of me getting this running, do you mind me asking how you are leveraging mindmup-mapjs in the context of your repo?

Thanks, Colum

[itechdom]

Hi Colum,

First of all, I apologize for not responding till now, I was out of town and I didn't enable email notifications to my github account.

The issue you are mentioning should be fixed now, It was a weird bug with Pixi.js and Webpack.

I am using the data that mindmup spits out (it's in json). I am building my own mindmapping system as a side project. I also use this repo as a storage for all the languages/frameworks that I am interested in (look under app/ to see the various languages and frameworks). Eventually the mindmap system will be broken out into its own project.

The mindmup json files are in content/ folder in case you want to access them.

Let me know if you have more questions or want to discuss how I am leveraging mindmup-mapjs more.

Thanks, Sam

[Analect]

Sam, Thanks for the response. I pulled the latest version and re-ran npm install ... running up 'gulp', it initially complained about not having the 'three' module, which I installed manually. Running up the app .. with gulp, from the root folder, should I be seeing a mindmap render ... or am I misunderstanding what was been implemented ... I tried navigating to localhost:3000/content and /app endpoints too... to no avail. All I see in the developer tools console is:

dist.js:28850 Object {REVISION: "79", MOUSE: Object, CullFaceNone: 0, CullFaceBack: 1, CullFaceFront: 2…}AddEquation: 100AddOperation: 2AdditiveBlending: 2AlphaFormat: 1019AlwaysDepth: 1AmbientLight: ( color, intensity )AnimationAction: ()AnimationClip: ( name, duration, tracks )AnimationMixer: ( root )AnimationObjectGroup: ( var_args )AnimationUtils: ObjectArcCurve: ( aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise )ArrowHelper: ArrowHelper( dir, origin, length, color, headLength, headWidth )Audio: ( listener )AudioAnalyser: ( audio, fftSize )AudioContext: (...)get AudioContext: get()AudioListener: ()AudioLoader: ( manager )AxisHelper: ( size )BackSide: 1BasicDepthPacking: 3200BasicShadowMap: 0BinaryTextureLoader: ( manager )Bone: ( skin )BooleanKeyframeTrack: ( name, times, values )BoundingBoxHelper: ( object, hex )Box2: ( min, max )Box3: ( min, max )BoxBufferGeometry: ( width, height, depth, widthSegments, heightSegments, depthSegments )BoxGeometry: ( width, height, depth, widthSegments, heightSegments, depthSegments )BoxHelper: ( object, color )BufferAttribute: ( array, itemSize, normalized )BufferGeometry: ()BufferGeometryLoader: ( manager )ByteType: 1010Cache: ObjectCamera: ()CameraHelper: ( camera )CanvasRenderer: ()CanvasTexture: ( canvas, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )CatmullRomCurve3: ( p /* array of Vector3 */ )CineonToneMapping: 4CircleBufferGeometry: ( radius, segments, thetaStart, thetaLength )CircleGeometry: ( radius, segments, thetaStart, thetaLength )ClampToEdgeWrapping: 1001Clock: ( autoStart )ClosedSplineCurve3: ( points )Color: ( r, g, b )ColorKeyframeTrack: ( name, times, values, interpolation )ColorKeywords: ObjectCompressedTexture: ( mipmaps, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding )CompressedTextureLoader: ( manager )ConeBufferGeometry: (      radius, height,         radialSegments, heightSegments,         openEnded, thetaStart, thetaLength )ConeGeometry: (         radius, height,         radialSegments, heightSegments,         openEnded, thetaStart, thetaLength )CubeCamera: ( near, far, cubeResolution )CubeGeometry: ( width, height, depth, widthSegments, heightSegments, depthSegments )CubeReflectionMapping: 301CubeRefractionMapping: 302CubeTexture: ( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )CubeTextureLoader: ( manager )CubeUVReflectionMapping: 306CubeUVRefractionMapping: 307CubicBezierCurve: ( v0, v1, v2, v3 )CubicBezierCurve3: ( v0, v1, v2, v3 )CubicInterpolant: (             parameterPositions, sampleValues, sampleSize, resultBuffer )CullFaceBack: 1CullFaceFront: 2CullFaceFrontBack: 3CullFaceNone: 0Curve: ()CurvePath: ()CurveUtils: ObjectCustomBlending: 5CylinderBufferGeometry: ( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength )CylinderGeometry: ( radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength )DataTexture: ( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding )DataTextureLoader: ( manager )DefaultLoadingManager: THREE.LoadingManagerDepthFormat: 1026DepthTexture: ( width, height, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy )DirectGeometry: ()DirectionalLight: ( color, intensity )DirectionalLightHelper: ( light, size )DirectionalLightShadow: ( light )DiscreteInterpolant: (          parameterPositions, sampleValues, sampleSize, resultBuffer )DodecahedronGeometry: ( radius, detail )DoubleSide: 2DstAlphaFactor: 206DstColorFactor: 208DynamicBufferAttribute: ( array, itemSize )EdgesGeometry: ( geometry, thresholdAngle )EdgesHelper: ( object, hex, thresholdAngle )EllipseCurve: ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation )EqualDepth: 4EquirectangularReflectionMapping: 303EquirectangularRefractionMapping: 304Euler: ( x, y, z, order )EventDispatcher: ()ExtrudeGeometry: ( shapes, options )Face3: ( a, b, c, normal, color, materialIndex )Face4: ( a, b, c, d, normal, color, materialIndex )FaceColors: 1FaceNormalsHelper: ( object, size, hex, linewidth )FlatShading: 1Float32Attribute: ( array, itemSize )Float64Attribute: ( array, itemSize )FloatType: 1015Fog: ( color, near, far )FogExp2: ( color, density )Font: ( data )FontLoader: ( manager )FrontFaceDirectionCCW: 1FrontFaceDirectionCW: 0FrontSide: 0Frustum: ( p0, p1, p2, p3, p4, p5 )GammaEncoding: 3007Geometry: ()GeometryIdCount: 2GeometryUtils: ObjectGreaterDepth: 6GreaterEqualDepth: 5GridHelper: ( size, divisions, color1, color2 )Group: ()HalfFloatType: 1025HemisphereLight: ( skyColor, groundColor, intensity )HemisphereLightHelper: ( light, sphereSize )IcosahedronGeometry: ( radius, detail )ImageLoader: ( manager )ImageUtils: ObjectImmediateRenderObject: ( material )InstancedBufferAttribute: ( array, itemSize, meshPerAttribute )InstancedBufferGeometry: ()InstancedInterleavedBuffer: ( array, stride, meshPerAttribute )Int8Attribute: ( array, itemSize )Int16Attribute: ( array, itemSize )Int32Attribute: ( array, itemSize )IntType: 1013InterleavedBuffer: ( array, stride )InterleavedBufferAttribute: ( interleavedBuffer, itemSize, offset, normalized )Interpolant: (          parameterPositions, sampleValues, sampleSize, resultBuffer )InterpolateDiscrete: 2300InterpolateLinear: 2301InterpolateSmooth: 2302JSONLoader: ( manager )KeyframeTrack: ( name, times, values, interpolation )LOD: ()LatheBufferGeometry: ( points, segments, phiStart, phiLength )LatheGeometry: ( points, segments, phiStart, phiLength )Layers: ()LensFlare: ( texture, size, distance, blending, color )LensFlarePlugin: ( renderer, flares )LessDepth: 2LessEqualDepth: 3Light: ( color, intensity )LightShadow: ( camera )Line: ( geometry, material, mode )Line3: ( start, end )LineBasicMaterial: ( parameters )LineCurve: ( v1, v2 )LineCurve3: ( v1, v2 )LineDashedMaterial: ( parameters )LinePieces: 1LineSegments: ( geometry, material )LineStrip: 0LinearEncoding: 3000LinearFilter: 1006LinearInterpolant: (           parameterPositions, sampleValues, sampleSize, resultBuffer )LinearMipMapLinearFilter: 1008LinearMipMapNearestFilter: 1007LinearToneMapping: 1Loader: ()LoadingManager: ( onLoad, onProgress, onError )LogLuvEncoding: 3003LoopOnce: 2200LoopPingPong: 2202LoopRepeat: 2201LuminanceAlphaFormat: 1023LuminanceFormat: 1022MOUSE: ObjectMaterial: ()MaterialIdCount: 0MaterialLoader: ( manager )Math: ObjectMatrix3: ()Matrix4: ()MaxEquation: 104Mesh: ( geometry, material )MeshBasicMaterial: ( parameters )MeshDepthMaterial: ( parameters )MeshFaceMaterial: ( materials )MeshLambertMaterial: ( parameters )MeshNormalMaterial: ( parameters )MeshPhongMaterial: ( parameters )MeshPhysicalMaterial: ( parameters )MeshStandardMaterial: ( parameters )MinEquation: 103MirroredRepeatWrapping: 1002MixOperation: 1MorphBlendMesh: ( geometry, material )MultiMaterial: ( materials )MultiplyBlending: 4MultiplyOperation: 0NearestFilter: 1003NearestMipMapLinearFilter: 1005NearestMipMapNearestFilter: 1004NeverDepth: 0NoBlending: 0NoColors: 0NoToneMapping: 0NormalBlending: 1NotEqualDepth: 7NumberKeyframeTrack: ( name, times, values, interpolation )Object3D: ()Object3DIdCount: 1ObjectLoader: ( manager )OctahedronGeometry: ( radius, detail )OneFactor: 201OneMinusDstAlphaFactor: 207OneMinusDstColorFactor: 209OneMinusSrcAlphaFactor: 205OneMinusSrcColorFactor: 203OrthographicCamera: ( left, right, top, bottom, near, far )PCFShadowMap: 1PCFSoftShadowMap: 2ParametricGeometry: ( func, slices, stacks )Particle: ( material )ParticleBasicMaterial: ( parameters )ParticleSystem: ( geometry, material )ParticleSystemMaterial: ( parameters )Path: ( points )PerspectiveCamera: ( fov, aspect, near, far )Plane: ( normal, constant )PlaneBufferGeometry: ( width, height, widthSegments, heightSegments )PlaneGeometry: ( width, height, widthSegments, heightSegments )PointCloud: ( geometry, material )PointCloudMaterial: ( parameters )PointLight: ( color, intensity, distance, decay )PointLightHelper: ( light, sphereSize )Points: ( geometry, material )PointsMaterial: ( parameters )PolyhedronGeometry: ( vertices, indices, radius, detail )PositionalAudio: ( listener )Projector: ()PropertyBinding: ( rootNode, path, parsedPath )PropertyMixer: ( binding, typeName, valueSize )QuadraticBezierCurve: ( v0, v1, v2 )QuadraticBezierCurve3: ( v0, v1, v2 )Quaternion: ( x, y, z, w )QuaternionKeyframeTrack: ( name, times, values, interpolation )QuaternionLinearInterpolant: (             parameterPositions, sampleValues, sampleSize, resultBuffer )REVISION: "79"RGBADepthPacking: 3201RGBAFormat: 1021RGBA_PVRTC_2BPPV1_Format: 2103RGBA_PVRTC_4BPPV1_Format: 2102RGBA_S3TC_DXT1_Format: 2002RGBA_S3TC_DXT3_Format: 2003RGBA_S3TC_DXT5_Format: 2004RGBDEncoding: 3006RGBEEncoding: 3002RGBEFormat: undefinedRGBFormat: 1020RGBM7Encoding: 3004RGBM16Encoding: 3005RGB_ETC1_Format: 2151RGB_PVRTC_2BPPV1_Format: 2101RGB_PVRTC_4BPPV1_Format: 2100RGB_S3TC_DXT1_Format: 2001RawShaderMaterial: ( parameters )Ray: ( origin, direction )Raycaster: ( origin, direction, near, far )ReinhardToneMapping: 2RepeatWrapping: 1000ReverseSubtractEquation: 102RingBufferGeometry: ( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength )RingGeometry: ( innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength )Scene: ()SceneUtils: ObjectShaderChunk: ObjectShaderLib: ObjectShaderMaterial: ( parameters )ShadowMaterial: ()Shape: ()ShapeGeometry: ( shapes, options )ShapePath: ()ShapeUtils: ObjectShortType: 1011Skeleton: ( bones, boneInverses, useVertexTexture )SkeletonHelper: ( object )SkinnedMesh: ( geometry, material, useVertexTexture )SmoothShading: 2Sphere: ( center, radius )SphereBufferGeometry: ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )SphereGeometry: ( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )Spherical: ( radius, phi, theta )SphericalReflectionMapping: 305Spline: ( points )SplineCurve: ( points /* array of Vector2 */ )SplineCurve3: ( points /* array of Vector3 */ )SpotLight: ( color, intensity, distance, angle, penumbra, decay )SpotLightHelper: ( light )SpotLightShadow: ()Sprite: ( material )SpriteMaterial: ( parameters )SpritePlugin: ( renderer, sprites )SrcAlphaFactor: 204SrcAlphaSaturateFactor: 210SrcColorFactor: 202StereoCamera: ()StringKeyframeTrack: ( name, times, values, interpolation )SubtractEquation: 101SubtractiveBlending: 3TetrahedronGeometry: ( radius, detail )TextGeometry: ( text, parameters )Texture: ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )TextureIdCount: 2TextureLoader: ( manager )TorusBufferGeometry: ( radius, tube, radialSegments, tubularSegments, arc )TorusGeometry: ( radius, tube, radialSegments, tubularSegments, arc )TorusKnotBufferGeometry: ( radius, tube, tubularSegments, radialSegments, p, q )TorusKnotGeometry: ( radius, tube, tubularSegments, radialSegments, p, q, heightScale )Triangle: ( a, b, c )TriangleFanDrawMode: 2TriangleStripDrawMode: 1TrianglesDrawMode: 0TubeGeometry: ( path, segments, radius, radialSegments, closed, taper )UVMapping: 300Uint8Attribute: ( array, itemSize )Uint8ClampedAttribute: ( array, itemSize )Uint16Attribute: ( array, itemSize )Uint32Attribute: ( array, itemSize )Uncharted2ToneMapping: 3Uniform: ( value )UniformsLib: ObjectUniformsUtils: ObjectUnsignedByteType: 1009UnsignedIntType: 1014UnsignedShort565Type: 1018UnsignedShort4444Type: 1016UnsignedShort5551Type: 1017UnsignedShortType: 1012Vector2: ( x, y )Vector3: ( x, y, z )Vector4: ( x, y, z, w )VectorKeyframeTrack: ( name, times, values, interpolation )Vertex: ( x, y, z )VertexColors: 2VertexNormalsHelper: ( object, size, hex, linewidth )VideoTexture: ( video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )WebGLBufferRenderer: ( _gl, extensions, _infoRender )WebGLCapabilities: ( gl, extensions, parameters )WebGLClipping: ()WebGLColorBuffer: ( gl, state )WebGLDepthBuffer: ( gl, state )WebGLExtensions: ( gl )WebGLGeometries: ( gl, properties, info )WebGLIndexedBufferRenderer: ( _gl, extensions, _infoRender )WebGLLights: ()WebGLObjects: ( gl, properties, info )WebGLProgram: WebGLProgram( renderer, code, material, parameters )WebGLPrograms: ( renderer, capabilities )WebGLProperties: ()WebGLRenderTarget: ( width, height, options )WebGLRenderTargetCube: ( width, height, options )WebGLRenderer: ( parameters )WebGLShader: WebGLShader( gl, type, string )WebGLShadowMap: ( _renderer, _lights, _objects, capabilities )WebGLState: ( gl, extensions, paramThreeToGL )WebGLStencilBuffer: ( gl, state )WebGLTextures: ( _gl, extensions, state, properties, capabilities, paramThreeToGL, info )WebGLUniforms: WebGLUniforms( gl, program, renderer )WireframeGeometry: ( geometry )WireframeHelper: ( object, hex )WrapAroundEnding: 2402XHRLoader: ( manager )ZeroCurvatureEnding: 2400ZeroFactor: 200ZeroSlopeEnding: 2401sRGBEncoding: 3001__proto__: Object
(index):12 GET http://localhost:3000/browser-sync/browser-sync-client.2.13.0.js 

... and 1 error complaining about an anonymous function

Should I be seeing a rendered mindmap? Thanks.

[itechdom]

It should work now. I just fixed the issues. Navigate to localhost:3000/#/mindmap when you run gulp. You will see the simple mindmap that I created. It's still under development.

[Analect]

@itechdom Sam, Sorry for late response in getting back to you on this. Given your changes on the repo ... I reinstalled various node_modules ... but now hitting an issue with the pixi.js module ... any suggestions what I might be doing wrong here ... Thanks.

Colums-MacBook-Pro:itechdom-blog me$ gulp
[14:31:12] Using gulpfile ~/Development/Tools/misc/itechdom-blog/Gulpfile.js
[14:31:12] Starting 'default'...
[14:31:12] Starting 'webpack:build-dev'...
[14:31:14] [webpack:build-dev] Hash: 599cc08aa4e9cedb0c52
Version: webpack 1.13.1
Time: 1994ms
     Asset     Size  Chunks             Chunk Names
   dist.js   926 kB       0  [emitted]  dist
    1.1.js  85.7 kB       1  [emitted]
example.js   456 kB       2  [emitted]  example
chunk    {0} dist.js (dist) 897 kB [rendered]
    [0] ./app/client/main.js 577 bytes {0} [built]
    [1] ./app/client/components/mindmap/mindmap.actions.js 519 bytes {0} [built]
    [2] ./~/rx/dist/rx.all.js 438 kB {0} {2} [built]
    [3] (webpack)/buildin/module.js 251 bytes {0} {2} [built]
    [4] ./~/node-libs-browser/~/process/browser.js 4.51 kB {0} {2} [built]
    [5] ./app/client/components/client/client.actions.js 692 bytes {0} [built]
    [6] ./~/jquery/dist/jquery.js 264 kB {0} [built]
    [7] ./~/events/events.js 8.33 kB {0} [built]
    [8] ./~/promise-loader?bluebird!./app/client/components/mindmap/mindmap.js 551 bytes {0} [built]
    [9] ./~/bluebird/js/browser/bluebird.js 173 kB {0} [built]
   [10] ./~/timers-browserify/main.js 2.1 kB {0} [built]
   [11] ./~/timers-browserify/~/process/browser.js 4.51 kB {0} [built]
chunk    {1} 1.1.js 84.4 kB {0} [rendered]
   [12] ./~/eslint-loader!./~/babel-loader!./~/babel-loader!./app/client/components/mindmap/mindmap.js 490 bytes {1} [built]
   [13] ./app/client/components/mindmap/mindmapView/canvas/mindmap.canvas.js 7.8 kB {1} [built] [1 error]
   [15] ./app/client/components/mindmap/mindmapView/dom/mindmap.dom.js 422 bytes {1} [built]
   [16] ./app/client/components/mindmap/mindmapView/dom/mindmap.dom.html 51 bytes {1} [built]
   [17] ./app/client/components/mindmap/example.js 75.7 kB {1} [built]
chunk    {2} example.js (example) 443 kB [rendered]
    [0] ./app/example.js 99 bytes {2} [built]
    [2] ./~/rx/dist/rx.all.js 438 kB {0} {2} [built]
    [3] (webpack)/buildin/module.js 251 bytes {0} {2} [built]
    [4] ./~/node-libs-browser/~/process/browser.js 4.51 kB {0} {2} [built]

ERROR in ./~/pixi.js/src/index.js
Module build failed: Error: Cannot resolve module 'brfs' in /Users/me/Development/Tools/misc/itechdom-blog/node_modules/pixi.js/src
    at innerCallback (/Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/Resolver.js:91:16)
    at loggingCallbackWrapper (/Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/tapable/lib/Tapable.js:134:6
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:54:23
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/Resolver.js:191:15
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:45:26
    at loggingCallbackWrapper (/Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/tapable/lib/Tapable.js:134:6
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/Resolver.js:122:33
    at /Users/me/Development/Tools/misc/itechdom-blog/node_modules/enhanced-resolve/lib/Resolver.js:191:15
 @ ./app/client/components/mindmap/mindmapView/canvas/mindmap.canvas.js 4:11-29
[14:31:14] Finished 'webpack:build-dev' after 2 s
[14:31:14] Starting 'serve:client'...
[14:31:14] Finished 'serve:client' after 18 ms
[14:31:14] Starting 'watch'...
[14:31:21] Finished 'watch' after 6.82 s
[14:31:21] Finished 'default' after 8.85 s
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.192.48:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.192.48:3001
 ---------------------------------------
[BS] Serving files from: ./

[itechdom]

No problem at all! Sorry about that issue. I upgraded to Pixi.js v4.0 and it didn't like my webpack configuration, so I reverted back to v3.0.11

It should work now. Let me know if you run into anything else.