ssshooter / Mind Elixir Core
Licence: mit
Mind-elixir is a framework agnostic mind map core
Stars: ✭ 798
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Mind Elixir Core
Rick Morty Vanilla
Web App using the rick and morty API in Vanilla.js
Stars: ✭ 359 (-55.01%)
Mutual labels: vanilla-javascript
Mindr
an R package which converts markdown files (.md, .Rmd) into mindmaps (brainstorms)
Stars: ✭ 513 (-35.71%)
Mutual labels: mindmap
Sticky Js
Library for sticky elements written in vanilla javascript
Stars: ✭ 618 (-22.56%)
Mutual labels: vanilla-javascript
Heimer
Heimer is a simple cross-platform mind map, diagram, and note-taking tool written in Qt.
Stars: ✭ 380 (-52.38%)
Mutual labels: mindmap
Vue Mindmap
VueMindmap is a vue component for mindnode maps
Stars: ✭ 457 (-42.73%)
Mutual labels: mindmap
Machine Learning Mindmap
A mindmap summarising Machine Learning concepts, from Data Analysis to Deep Learning.
Stars: ✭ 5,339 (+569.05%)
Mutual labels: mindmap
Blink Mind Desktop
Cross-platform full-featured mind mapping and outline app based on electron.
Stars: ✭ 352 (-55.89%)
Mutual labels: mindmap
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+726.57%)
Mutual labels: vanilla-javascript
Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (-40.73%)
Mutual labels: vanilla-javascript
Assessment Mindset
Security Mindmap that could be useful for the infosec community when doing pentest, bug bounty or red-team assessments.
Stars: ✭ 608 (-23.81%)
Mutual labels: mindmap
Mark Mind
MarkMind — a mind map and outliner editor for Windows, Mac, Linux, andriod and ios ,it support markdown in node.
Stars: ✭ 385 (-51.75%)
Mutual labels: mindmap
Liandi
📕 一款桌面端的 Markdown 块级引用和双向链接笔记应用,支持 Windows、Mac 和 Linux。A desktop Markdown Block-Reference and Bidirectional-Link note-taking application, supports Windows, Mac and Linux.
Stars: ✭ 354 (-55.64%)
Mutual labels: mindmap
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (-1.5%)
Mutual labels: vanilla-javascript
Emoji Button
Vanilla JavaScript emoji picker component
Stars: ✭ 646 (-19.05%)
Mutual labels: vanilla-javascript
Helpjs Ravi
Exercícios/Tutorial/Desafios para Iniciantes em JavaScript
Stars: ✭ 579 (-27.44%)
Mutual labels: vanilla-javascript
Mind elixir is a free open source mind map core.
Use now
Playground
https://codepen.io/ssshooter/pen/GVQRYK
with React https://codesandbox.io/s/mind-elixir-react-9sisb
with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl
Use in your project
Install
NPM
npm i mind-elixir -S
import MindElixir, { E } from 'mind-elixir'
Script tag
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
HTML structure
<div id="map"></div>
<style>
#map {
height: 500px;
width: 100%;
}
</style>
Init
let options = {
el: '#map',
direction: MindElixir.LEFT,
// create new map data
data: MindElixir.new('new topic'),
// the data return from `.getAllData()`
data: {...},
draggable: true, // default true
contextMenu: true, // default true
toolBar: true, // default true
nodeMenu: true, // default true
keypress: true, // default true
locale: 'en', // [zh_CN,zh_TW,en,ja] waiting for PRs
overflowHidden: false, // default false
primaryLinkStyle: 2, // [1,2] default 1
primaryNodeVerticalGap: 15, // default 25
primaryNodeHorizontalGap: 15, // default 65
contextMenuOption: {
focus: true,
link: true,
extend: [
{
name: 'Node edit',
onclick: () => {
alert('extend menu')
},
},
],
},
allowUndo: false,
before: {
insertSibling(el, obj) {
return true
},
async addChild(el, obj) {
await sleep()
return true
},
},
}
let mind = new MindElixir(options)
mind.init()
// get a node
E('node-id')
Data Structure
// whole node data structure up to now
{
topic: 'node topic',
id: 'bd1c24420cd2c2f5',
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
parent: null,
tags: ['Tag'],
icons: ['😀'],
}
Event Handling
mind.bus.addListener('operation', operation => {
console.log(operation)
// return {
// name: action name,
// obj: target object
// }
// name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
// obj: target
// name: moveNode
// obj: {from:target1,to:target2}
})
mind.bus.addListener('selectNode', node => {
console.log(node)
})
Data Export
mind.getAllData() // javascript object, see src/example.js
mind.getAllDataString() // stringify object
mind.getAllDataMd() // markdown
Export as image
import painter from 'mind-elixir/dist/painter'
painter.exportSvg()
painter.exportPng()
Operation Guards
let mind = new MindElixir({
...
before: {
insertSibling(el, obj) {
console.log(el, obj)
if (this.currentNode.nodeObj.parent.root) {
return false
}
return true
},
async addChild(el, obj) {
await sleep()
if (this.currentNode.nodeObj.parent.root) {
return false
}
return true
},
},
})
Doc
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].