Делаем «mindmap» на Javascript с локальным хранением в базе данных браузера

[vadim_ig]

«Карта ума» — как-то жестковато, встречал перевод «диаграмма связей»

[TIEugene]

Устоявшийся перевод для «mind map» — «карта памяти».

[ahmpro]

А «карта мыслей»?

[Flammar]

Калька с польского? по длине термина предпочтительнее, чем «ментальная карта».

[INCWADRA]

Карта разума?
Диагра́мма свя́зей, известная также как интелле́кт-ка́рта, ка́рта мыслей (англ. Mind map) или ассоциати́вная ка́рта,

[MaksimMukharev]

Есть еще «ментальная карта». Этот вариант мне больше других нравится.

[Flammar]

Длинновато… хотя и калька с испанского и португальского.

[atygaev]

Скажите, пожалуйста, а почему Вы пишите

$("#mindmap").on(...);

...

$("#mindmap").on(...);

вместо того, чтобы один раз «запомнить» и использовать:

var $mindmap = $("#mindmap");

$mindmap.on(...);

...

$mindmap.on(...);

?

[imater]

Вы правы.
Я так делаю только для того, чтобы новичкам было понятно и не путать их сложным кодом. А так да, чем меньше обращений к DOM, тем быстрее приложение и меньше тратится ресурсов. Спасибо за замечание. Кэширование вообще ускоряет работу во всех областях программирования.

[atygaev]

Ясно. Спасибо за Ваш труд.

[asavin]

Мне кажется, новичкам лучше не показывать плохой код. Вообще никому лучше не показывать плохой код.
Лучше закешировать в переменную, как указали выше, а для новичков оставить внятный комментарий, что это и зачем.

[DrZugrik]

Спасибо, очень интересно! как раз делаю нечто подобное.

[Borz]

вот бы ещё она умела в формат .mm понимать, чтобы с FreeMind «интеграция» была…

[antaries]

и xmind

[zag2art]

И чтоб не больше 520 строк и код, понятный для новичков… :)

[naum]

Сделайте, кто мешает. Этот топик — потрясающий тутор, написанный грамотным языком, просто, понятно и с крутыми примерами / практиками. остальное — ваших рук дело.

[Borz]

Пгостите, но в каком слове моего комментария ви увидели критику к автору?

[asavin]

Простите, что вмешиваюсь.
Мне кажется, комментарии вроде «вот бы еще эта штука умела делать то или это» неадекватны формату топика. Этот топик — попытка научить что-то делать, а не предоставить продукт.

То есть этот топик так позиционируется. А на самом деле это реклама 4tree. Ну и да, согласиться, что это «потрясающий тутор, написанный грамотным языком, просто, понятно и с крутыми примерами / практиками» я не могу, конечно.

[naum]

Когда говорил «потрясающий» имел в виду контекст, найдите на Хабре хотя бы 3 подобных топика по js и с хорошей практикой :)

[blackraven]

Пара комментариев по собственно проекту на гитхабе:
1. А почему вы не думаете о людях из других стран, которые тоже возможно будут заинтересованы? Я только что хотел показать это коллеге — но он ничего не понял, потому что все по-русски! Интернационализация — великая вещь…
2. БЫло бы неплохо указать лицензию на проекте в гитхабе. Я бы например склонил бы, да только нельзя — по умолчанию, лицензия — копирайт.

[spmbt]

Теперь заголовок «Делаем «карту памяти» на Javascript...» создаёт впечатление, что мы делаем флешку на JS. И сходу непонятно, зачем там 3-4 посторонних плагина для рисования графов. Вообще, это стало ясно из комментариев и обнаружения слов «mind map». Наверное, лучше использовать устоявшийся английский термин: «Делаем «mind map» на Javascript...»

[Glebcha]

К сожалению в Safari 6.1 не работает.

скриншот с ошибкой

[copist]

Про git прокрутил.

На jsPlumb завис на 20 минут. Клёвая библиотека!

[macik_spb]

Спасибо за пример. Нашел для себя новое.

А какие ограничения по браузерам?

[nini]

Интересно, меня друг попросил помочь с похожим мини-проектом. Идея — создавать рабочий стол, основанный на canvas куда можно перетягивать детали из списка. Почти все те же плагины (jquery, grag&drop, context menu, raphaeljs). Так вот, у него похожий код, один главный API-«класс», который может и делает все. Разросся он правда уже на 3500 строк — за счет более сложной математики и логики (пересечение объектов, snapping, умный расклад элементов etc...). Я даже не знаю с какой стороны к нему подойти. Думаю попробовать отделить логику/математику расклада в отдельную библиотеку/класс.

А у кого какие будут предложения по рефакторингу примера из статьи?

[bob_lyashenko]

1. ctrl+A
2. ctrl+del
3. И писать заново…

  (function() {
      var application = {
	   config: {
		
	   },
		
	   init: function() {
			
	   },
	   ...
      };

      application.init();
  })();

[copist]

2. del без сtrl

[bob_lyashenko]

может быть)

[bob_lyashenko]

Такс… давно не писал комменты на хабре. Но тут просто не удержался. Я конечно все понимаю, но как так можно… это просто нельзя так оставлять. Уверен, вы писали это с чистыми намерениями, но тут есть список, почему вышло не совсем гуд:

• Это худшая реализация синглтона, что я видел. Даже в той ссылке на вику, что вы там поставили есть пример на js, который уже хоть куда не шел. Синглтон пишется через статическое свойство класса, всего то.
• «arguments.callee.» — «ES5 Замечание: В strict-режиме любое использование arguments.callee вызовет TypeError, поскольку свойство принято устаревшим.» — пруф с jsGarden.
• «var this_api = this; //кэшируем самого себя, чтобы использовать внутри функций» — сохраняем контекст, ибо зависит от объекта, который вызывает функцию. О this в js можно много говорить
• «my_all_data_template, jsSaveAllToDB» определитесь, или камелКейс или андер_скор. Для js де-факто камелКейс.
• Все эти больше данные с стрингами нужно выносить подальше от логики..
• Есть такое свойство prototype в функции, говорят помогает при создании методов класса… Нельзя копировать каждому объекту класса свой метод.
• Блок переменных находится вверху функции, а не сл. слово var по всему телу.
• Создавайте приложение, а не кучу глобальных функций, что засоряют глобальный объект. Или хотябы уже заверните все это в (function(){})(),
  Вывод: Архитектуры никакой..
• Загрузку скриптов надо оптимизировать, грузить параллельно, или в одном файле, но не 7-ю запросами. Не говоря уже о том, что файл, который является точкой входа явно не может грузится в центре, он самый последний, ибо юзает все другие подключаемые либы. И раз уже так то и скрипты должны подключатся не в хеде, а в конце бади, ибо блочат загрузку страницы.
• <body onload="jsDoFirst();" onresize="onResize()"> - в 18-ый век вернулись что ли?.. Ненавязчивый js — «Не, не слышал».

Лан… пусть будет 10. Думаю сообщество хабра ща сольет мне карму, и больше никого не смогу исправить, и все будут спокойно реагировать на г*нокод.
PS: ничего личного, замечания полезны, никогда не поздно научится.

[nini]

Все замечания 100% верны, но хочется как-раз про архитектуру услышать.

[bob_lyashenko]

Есть иерархия, есть много данных, есть по сути несколько вьюшек, возможна даже одна — как минимум MVC уже напрашивается. Бекбон по-моем идеально ложится, стандартная тудушка (http://backbonejs.ru/#examples-todos) явно покрывает все это, не так сложно к этому применить. Не нравится бекбон — addyosmani.github.io/todomvc/ выбирайте что вам по душе.

Не хотите MVC, вынесите хотя бы работу с данными отдельно, напишите класс «Приложение» которое работает с объектами класса «Узел карты» и все будет красиво и просто.

Все эти 100500 плагинов нафиг не надо. Там максимум если драген_дроп лень самому писать, уже можно заюзать.

[Kasheftin]

Мда, код еще тот. Вдогонку:

Определитесь с тем, насколько универсальным ваш код должен быть. Синглтон по надобности — одна из последних вещей. Если предполагается встраивание вашего кода в какой-то внешний неизвестный код, то первое, что надо — оборачивание всего этого добра в локальный контекст. Смотрите require.js. Второе — destroy-метод. Наподключали обработчиков, а убирать за собой кто будет?

Половина кода — jquery-навешивание обработчиков на глобальный dom. Если код претендует на универсальность, это нужно убрать.

Бэкбон здесь на мой взгляд излишен — это одностраничное приложение без роутинга и особого контроллера. Берите knockout.js.

Для удаленного редактирования файлов посмотрите в сторону sshfs.

[mikolalex]

Объясните пожалуйста эти строчки:

if(records.length && false) {

И еще
$.each(records, function(i, el){
my_all_data["n"+el.id] = {};
my_all_data["n"+el.id] = el;

[imater]

Прошу прощения и посыпаю голову пеплом.
Осталось от отладки.

[vgrinin]

Индусы довольно потирают руки.

[Yanovsky]

Видно, что писать код вы можете.
Рекомендую прочитать книгу Стояна Стефанова — JavaScript. Шаблоны — 2011.

В книге рассказывается не только про часто используемые шаблоны, но и про работу самого интерпретатора.
После прочтения становиться понятно почему имеет хороший тон объявлять все переменные в одном месте (Шаблон
единственной инструкции var), хорошо объясняется объектная модель языка, как работает наследование через prototype, да и вообще ещё много чего интересного.

Читал книгу переведенную на русский язык (А.Кисилев) от издательства Символ. Перевод очень понравился.

[imater]

Спасибо. Буду выгонять из себя «Индуса».

[bob_lyashenko]

До этого я только код смотрел, решил вот даже статью почитать…

• «Начнём с основ. Я люблю оборачивать всё множество функций в „синглтон“… Преимущество такого подхода в возможности сохранять большие массивы данных внутри такого «синглтона» и не бояться, что пользователь или какой либо плагин изменит данные.»
  — Аааа… что? Причем здесь синглтон?..
  
  
  
• «облегчать себе асинхронное программирование при помощи jQuery»…
  — как?.. JQuery — это набор функций для работы с DOM, AJAX… А плагин к jQ — $.Deferred() там уже что то делает
  
  
• Для рисования линий между разными элементами html страницы можно было бы использовать Canvas, но он имеет множество недостатков. Вам пришлось бы создать Canvas значительного размера, например 4000 x 4000 px, что привело бы к нестабильной работе браузера. Линии были бы растровыми и на современных экранах Retina, смотрелись бы хуже, чем векторные. А самое страшное, что все эти 16 миллионов пикселей, требовали бы перерисовки при каждом вводе буквы в карту памяти…
  — ну… ну зачем?.. Какие 4000? Какая перерисовка на ввод букв? Откуда вы это взяли? Канвас, если уже так говорить, немного, но быстрее свг. Конечно каждый из них более уместен для разных задач. Но, не надо говорить неправду о канвасе
  
  

[firestarter]

Уточню: Deferred object — это часть jQuery API, а не плагин. api.jquery.com/category/deferred-object/.
Для данной задачи все же лучше похдодит SVG.

[Flammar]

Статью ещё не всю прочитал, но сразу благодарю — давно что-то такое хотел сам написать…

[Flammar]

Возможны ли какие-нибудь связи между элементами, кроме «вертикальных» как в иерархическом списке?

[alimbekovR]

Такую бы шутку для создания бизнес процессов, цены бы не было

[bob_lyashenko]

как говорил один бизнесмен: «Для описания бизнес процессов нужна одна программа — excel». а если вы этого не умеете делать, то никакой «мего софт» за вас это не сделает.

[VSOP_juDGe]

А Gliffy чем не устраивает?

[ssh0]

Писал нечто подобное для себя, тоже использовал jsPlumb (trees000.herokuapp.com (связи создаются перетягиванием с меню)), думаю в будущем переписать но используя d3.js