problem using Line_style: curved/straight

[MShahzadulHassan]

Hi

I am facing issue while using "line_style:curved". By default, it is making curved. But when i changed it to straight it is not making line as straight. So please if you this issue how to use in correct way then please tell me.
Thank you

here is the code that i am using
const options = {
container: 'jsmind_container',
editable: true,
theme: result.theme,
mode : result.mode,
support_html : true,
view:
{
engine: '',
hmargin:100,
vmargin:50,
line_color: '#333',
line_style: 'straight',
draggable: true,
hide_scrollbars_when_draggable: false,
node_overflow: 'wrap'
},

  };

[hizzgdev]

var options = {
  // ...
  view:{
      line_style:'straight'
  }
}

It works on my laptop. Could you please check if you are using the latest version of jsMind?

[hizzgdev]

view: {
  engine: '',
  hmargin:100,
  vmargin:50,
  line_color: '#333',
  line_style: 'straight',
  draggable: true,
  hide_scrollbars_when_draggable: false,
  node_overflow: 'wrap'
},

it works too

[hizzgdev]

but never mind, since you use jsmind from node_modules, would you please share your package.json, and how did you used(referennce/link) jsMInd on your project? there is also a simple you can check https://github.com/hizzgdev/jsmind-samples/tree/main/jsmind-vue

[MShahzadulHassan]

{
"name": "mindmap-jsmind",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular-material-components/color-picker": "^16.0.1",
"@angular/animations": "16.1.0",
"@angular/cdk": "16.1.0",
"@angular/common": "16.1.0",
"@angular/compiler": "16.1.0",
"@angular/core": "16.1.0",
"@angular/forms": "16.1.0",
"@angular/material": "16.1.0",
"@angular/platform-browser": "16.1.0",
"@angular/platform-browser-dynamic": "16.1.0",
"@angular/router": "16.1.0",
"@fortawesome/angular-fontawesome": "^0.13.0",
"@fortawesome/fontawesome-free": "^6.4.2",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@types/file-saver": "^2.0.5",
"express": "^4.18.2",
"html2canvas": "^1.4.1",
"jquery": "^3.7.0",
"jsmind": "^0.7.1",
"ngx-color-picker": "^14.0.0",
"rxjs": "7.8.0",
"tslib": "2.3.0",
"zone.js": "0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "16.1.0",
"@angular/cli": "16.1.0",
"@angular/compiler-cli": "16.1.0",
"@types/jasmine": "4.3.0",
"@types/jquery": "^3.5.16",
"jasmine-core": "4.5.0",
"karma": "6.4.0",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.2.0",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.0.0",
"typescript": "4.9.4"
}
}
this is package.json

[MShahzadulHassan]

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"mindmap-jsmind": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/mindmap-jsmind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
"node_modules/jsmind/es6/jsmind.js",
"node_modules/jsmind/es6/jsmind.draggable-node.js",
"node_modules/jsmind/es6/jsmind.screenshot.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "mindmap-jsmind:build",
"proxyConfig": "src/proxy.conf.json",
"publicHost": "localhost"
},
"configurations": {
"production": {
"browserTarget": "mindmap-jsmind:build:production"
},
"development": {
"browserTarget": "mindmap-jsmind:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "mindmap-jsmind:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"cli": {
"analytics": false
}
}

this is angular.json where i link with jsmind

[hizzgdev]

and the page or component?

[MShahzadulHassan]

import { Component } from '@angular/core';
declare var jsMind: any

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

title = 'jsmind-project';
jm: any;
ngOnInit() {

const mind = {
"meta": {
"name": "example",
"author": "[email protected]",
"version": "0.2"
},
"format": "freemind",
"data": "<map version="1.0.1"> <node ID="root" TEXT="jsMind" > <node ID="easy" POSITION="left" TEXT="Easy" > <node ID="easy1" TEXT="Easy to show" /> <node ID="easy2" TEXT="Easy to edit" /> <node ID="easy3" TEXT="Easy to store" /> <node ID="easy4" TEXT="Easy to embed" /> <node ID="open" POSITION="right" TEXT="Open Source" > <node ID="open1" TEXT="on GitHub" /> <node ID="open2" TEXT="BSD License" /> <node ID="powerful" POSITION="right" TEXT="Powerful" > <node ID="powerful1" TEXT="Base on Javascript" /> <node ID="powerful2" TEXT="Base on HTML5" /> <node ID="powerful3" TEXT="Depends on you" /> <node ID="other" POSITION="left" TEXT="test node" > <node ID="other1" TEXT="I'm from local variable" /> <node ID="other2" TEXT="I can do everything" /> "
};
const options = {
container: 'jsmind_container',
editable: true,
theme: 'primary',
view: {
engine: '',
hmargin:100,
vmargin:50,
line_color: '#333',
line_style: 'straight',
draggable: true,
hide_scrollbars_when_draggable: false,
node_overflow: 'wrap'
}
};

this.jm = new jsMind(options);
this.jm.show(mind);

}
removeNode() {
const selectedNode = this.jm.get_selected_node();
const selectedId = selectedNode && selectedNode.id;

if (!selectedId) {
  return;
}
this.jm.remove_node(selectedId);

}
addNode() {
const selectedNode = this.jm.get_selected_node();
if (!selectedNode) {
return;
}

const nodeId = jsMind.util.uuid.newid();
this.jm.add_node(selectedNode, nodeId, 'New Node');

}
}

this app.component.ts

[MShahzadulHassan]

Hi it is working now. I just uninstalled jsmind and reinstalled now its working

[MShahzadulHassan]

Thanks for your quick response