No working correctly

[Amelus]

Hello everyone,

I am trying to make the mind map work in my angular 8 project and used everything exactly like in the example project 1:1 but the map does not get rendered correctly, the lines are there but not interactive, nodes do not appear at all Is there something that needs to be done to make it work for angular 8 ?

Image how it looks like for me: image

[lumucheng]

Hi, any luck in getting it to work in angular 8? I tried angular 6 too, same issue as what you posted.

[Amelus]

Hi, any luck in getting it to work in angular 8? I tried angular 6 too, same issue as what you posted.

Unfortunately not, I used a horizontal tree instead: https://primefaces.org/primeng/showcase/#/tree

[lumucheng]

Hi, any luck in getting it to work in angular 8? I tried angular 6 too, same issue as what you posted.

Unfortunately not, I used a horizontal tree instead: https://primefaces.org/primeng/showcase/#/tree

thanks for replying! will take a look at primeng

[moruoshuang]

That's because there is no CSS style

Try to refer to the CSS of jsMind

[4lador]

As @moruoshuang said, I managed to make it work by importing the css content of this file from jsmap.

And then I had to set jmnodes node to top: 0

[wfsovereign]

Maybe you can view angular 10 example

[zzj0402]

<div id="jsmind_container"></div>

import { Component, OnInit } from '@angular/core';
import { customizeUtil, MindMapMain } from 'mind-map'

const HIERARCHY_RULES = {
  ROOT: {
    name: 'XX汽车有限公司',
    backgroundColor: '#7EC6E1',
    getChildren: () => [
      HIERARCHY_RULES.SALES_MANAGER,
      HIERARCHY_RULES.SHOW_ROOM,
      HIERARCHY_RULES.SALES_TEAM
    ]
  },
  SALES_MANAGER: {
    name: '销售经理',
    color: '#fff',
    backgroundColor: '#616161',
    getChildren: () => [
      HIERARCHY_RULES.SHOW_ROOM,
      HIERARCHY_RULES.SALES_TEAM
    ]
  },
  SHOW_ROOM: {
    name: '展厅',
    color: '#fff',
    backgroundColor: '#989898',
    getChildren: () => [
      HIERARCHY_RULES.SALES_TEAM
    ]
  },
  SALES_TEAM: {
    name: '销售小组',
    color: '#fff',
    backgroundColor: '#C6C6C6',
    getChildren: () => []
  }
};

const option = {
  container: 'jsmind_container',
  theme: 'normal',
  editable: true,
  depth: 9,
  hierarchyRule: HIERARCHY_RULES
};

const mind = {
  "format": "nodeTree",
  "data": {
    "id": 43,
    "topic": "xx车行",
    "selectedType": false,
    "backgroundColor": "#7EC6E1",
    "children": [
      {
        "id": 80,
        "color": "#fff",
        "topic": "show room",
        "direction": "right",
        "selectedType": "销售经理",
        "backgroundColor": "#616161",
        "children": []
      },
      {
        "id": 44,
        "color": "#fff",
        "topic": "销售经理",
        "direction": "right",
        "selectedType": "销售经理",
        "backgroundColor": "#616161",
        "children": [
          {
            "id": 46,
            "color": "#fff",
            "topic": "展厅经理",
            "direction": "right",
            "selectedType": "展厅",
            "backgroundColor": "#989898",
            "children": [
              {
                "id": 49,
                "color": "#fff",
                "topic": "销售小组C",
                "direction": "right",
                "selectedType": "销售小组",
                "backgroundColor": "#C6C6C6",
                "children": []
              },
              {
                "id": 51,
                "color": "#fff",
                "topic": "AMG销售",
                "direction": "right",
                "selectedType": "销售小组",
                "backgroundColor": "#C6C6C6",
                "children": []
              },
              {
                "id": 47,
                "color": "#fff",
                "topic": "销售小组A",
                "direction": "right",
                "selectedType": "销售小组",
                "backgroundColor": "#C6C6C6",
                "children": []
              },
              {
                "id": 48,
                "color": "#fff",
                "topic": "销售小组B",
                "direction": "right",
                "selectedType": "销售小组",
                "backgroundColor": "#C6C6C6",
                "children": []
              },
              {
                "id": 50,
                "color": "#fff",
                "topic": "销售小组D",
                "direction": "right",
                "selectedType": "销售小组",
                "backgroundColor": "#C6C6C6",
                "children": []
              }
            ]
          }
        ]
      },
      {
        "id": 45,
        "color": "#fff",
        "topic": "Smart经理",
        "direction": "right",
        "selectedType": "销售经理",
        "backgroundColor": "#616161",
        "children": []
      }
    ]
  }
};

@Component({
  selector: 'app-draft',
  templateUrl: './draft.component.html',
  styleUrls: ['./draft.component.css']
})
export class DraftComponent implements OnInit {

  constructor() { }

  mindMap;

  ngOnInit() {
    this.mindMap = MindMapMain.show(option, mind);
  }

  removeNode() {
    const selectedNode = this.mindMap.getSelectedNode();
    const selectedId = selectedNode && selectedNode.id;

    if (!selectedId) {
      return;
    }
    this.mindMap.removeNode(selectedId);
  }

  addNode() {
    const selectedNode = this.mindMap.getSelectedNode();
    if (!selectedNode) {
      return;
    }

    const nodeId = customizeUtil.uuid.newid();
    this.mindMap.addNode(selectedNode, nodeId);
  }

  getMindMapData() {
    const data = this.mindMap.getData().data;
    console.log('data: ', data);
  }
}

[lingho98]

Still Cant get it to work properly. The styling is all messed up on my project even though I imported the css.

[wfsovereign]

Still Cant get it to work properly. The styling is all messed up on my project even though I imported the css.

Sorry，can you run the sample code successfully? you can run the following code

git clone https://github.com/wfsovereign/mind-map.git && cd mind-map yarn yarn start

and open http://localhost:4200/ in browser, will view the result .