Giter Club home page Giter Club logo

Comments (4)

ondras avatar ondras commented on May 13, 2024

Hi @ClemDelp,

first of all, let me acknowledge that a real-time synchronization is indeed a very cool feature and I am planning on adding some kind of firebase-based sync myself, sooner or later.

Second, I am not sure whether broadcasting individual actions and re-playing them on all connected clients is the right way to go. When using firebase to maintain sync, I would try to persist the mind map state to the firebase, merging the incoming data with current design any time a subtree changes.

Finally, I am not sure I completely understand your question. Are you looking for a way to listen for MM.Actions performed (in order to broadcast them), or do you seek help with re-playing them once the server notifies you? If the latter is the case, please see https://github.com/ondras/my-mind/blob/master/src/action.js for individual MM.Action.* constructor signatures. The main problem with Actions is that they always select/focus the item being manipulated, so they are not very good at re-playing history.

from my-mind.

ClemDelp avatar ClemDelp commented on May 13, 2024

Hi Ondras,

Thank you for your fast answer,

Yes it's the second case, i'm using Backbone and i have a collection of nodes. All the collection's models have an id-father attributes used to re-build the tree under my-mind format.

Actually when a user manipulates the tree all actions are broadcasted to other users then the tree are completely reset and re-build with update data. Of course this solution is really bad for user experience.

That i would like it's something like:
collection:create -> trigger MM.action.InsertNewItem
collection:remove -> trigger MM.action.RemoveItem
collection:update-text -> trigger MM.action.SetText
collection:update-position -> trigger MM.action.MoveItem
collection:update-color -> trigger ...
...

For example for a new node:
1- The server passes me the updated model,
2- i get its id_father attributes,
3- i need to get the item corresponding to the id_father
4- and then apply MM.action.InsertNewItem with the model to id_father parent node.

And i would like apply this methode to all other actions but i can find actually a function to select an item by its id. I don't know excatly where is the collection of nodes? In the localstorage?

from my-mind.

ondras avatar ondras commented on May 13, 2024

The map itself (instanceof MM.Map) is available as MM.App.map. You can navigate its nodes using getRoot() and getChildren() calls.

The catch is that individual items do not expose their IDs; to find an item by ID, you will have to call its .toJSON() method and look at the id field in the resulting object.

Adding a MM.Map.prototype.getItemById might be a good idea, what do you think?

from my-mind.

ClemDelp avatar ClemDelp commented on May 13, 2024

Thank you, with this three functions i can now get the item by it ID :

MM.Map.prototype.getItemById = function(id){
var nodes = MM.getItemsCollection();
return nodes[id];
}

MM.getItemsCollection = function(){
var json_map = MM.App.map.getRoot();
var nodes = {};
var nodes = MM.getNodesRecursive(nodes,json_map);
return nodes;
}

MM.getNodesRecursive = function(nodes,json){
nodes[json._id] = json;
if(json.getChildren()){
json.getChildren().forEach(function(child){
MM.getNodesRecursive(nodes,child);
});
}
return nodes;
}

I will try now to connect my Backbone events to my_mind MM.action

from my-mind.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.