Serialization and observing changes in meteor collection? - javascript

I have an application(ill make it short :p) - on the client side there is a list of objects, each of these objects has a property like "drawable" which is an fabricjs object instance to canvas. Point is, that I want to make it fully reactive and synchronized - each time someone moves an element on canvas or deletes an item from the list it has to be updated on every other client.
And here is the question - how to make and optimal data structure for such task, currently I am using something like this:
ListObject {
name: 'name',
otherAttributes: 'blahblah',
drawable: 'fabricjsObjectInstance'
}
I dont want to make it serialize/deserialize way.
Some more examples of what I mean:
when object on canvas is moved only its left and top attributes are changed - so I don't want to send and get whole canvas serialization
it is possible to somehow bind an array object in code with minimongo collection?
can I get rid of all 'Models' in js code and use only Meteor Collection with some behavior methods?
I am more than sure that I am doing it wrong or that I don't get meteor reactivnes. My point is not to get answer to every question, because it might be impossible, but to get some ideas or suggestions how to sort this mess out.

Related

What are the various parameters i can pass to <animated> from react-spring

I have just started working on react-spring. From the very beginning, I have seen the usage of '''<animated>''' tag. As, I explored more and complexity increases, I find more and more details of the code which I do not fully understand.
For example, Just have a look at this sandbox-
https://codesandbox.io/s/stupefied-noether-8i6o0
I am still not clear how the key variable passed to animated tag is working under the hood. Moreover, is there is an exhaustive list on which parameters can I pass to animated tag?
Also, is there any good tutorials/resources to understand react-spring in detail? The official document though is quite helpful, doesn't provide enough resolution on micro details of each aspect of it's function.
The key prop is not directly related to react-spring, in your example you can see that string which is an array uses the map() function to map and render animated divs.
key is used by React in order to be able to track those elements between changes and be able to determine whether the virtual DOM needs to generate those elements again as a whole or only the new ones that are added. More about keys and lists can be found here.
For more info about react-spring you might find some more information here, if you have something specific you would like to achieve feel free to make a question about it, playing with the library and experiencing it yourself will probably be the best way to learn about it.

How can I set a a state variable from two UI elements?

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

three.js and depthFunc

From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.

Javascript: how can I use link to image in my object, created by toDataURL, instead of placing data to every screen element

Before creating tree I use canvas to draw some icons (plus, minus, node. etc.). Then I put images to object and stop using canvas. Like this:
var imgFromCnvs = NewElem.toDataURL("image/png");
var ElemIdName = 'treeVLineLast';
treeEl.imgs[ElemIdName]=imgFromCnvs
Then I use them in background images on the tree:
NewElem.style.backgroundImage = 'url("'+treeEl.imgs.treeVLineLast+'")';
So, as I understand, it extremely enlarges data amount on page, because I place data from object strictly to every element instead of using link to it. Since there can be hundreds or even thousands tree elements in a tree, it will cause some memory issues, I think.
I guess, it could be the best way to use link to data in the object somehow, but I do not know how. May be, create some new element?
Is there any way to solve this problem?
P.S.: I'm learning JavaScript and need to understand the basics without using any libraries.

css framework for draggable page elements and callback for server side position save

Are there any lightweight frameworks out there for this task. I have a collection of divs, that I want to be able to save positions when dragged/resized/pushed etc.
I was going to build one, to my spec, but if there is a lightweight one out there that might save me a lot of time. I've seen some jQuery plugins that push divs around a page fluidly.
I want to be able to save positions, but also snap divs to each other and save all news positions for divs moved or re-sized. I've looked briefly at shindig, but seems a bit heavy... at least I wanted to see if there are any lightweight front end alternatives.
I will be using php for my backend.
Consider midorijs (www.midorijs.com). It is lightweight and contains a simple drag and drop interface complete with a default drop callback function. You can also define your own. You mentioned you wanted a callback for position save, Midori's callback function does pass the x,y coordinates of the object.
Chceck out more drag and drop callback details at the bottom of this page: http://www.midorijs.com/midoriDragDrop.html
Another benefit since you mentioned you are using php is Midori's convertToFields function which converts javascript object to php.
Good luck!
Why not using jQuery ui? You can customize a bundle to fit your needs + when delivering from googlecode you can get sure that a huge amount of users already have that in their cache. And you can easily get the positionings and push them to your server.
http://jqueryui.com/download

Categories