Detect and apply restriction to objects/ paths using Intersection library - javascript

All,
Further to my post here,
#Phrogz suggested we look into Kevin Lindsey's library for our needs of identifying the borders and applying restrictions. Has anyone got any experience of using this library?
THE PROBLEM:
In our web application we have an object made of SVG paths. We are trying to implement the functionality of drag and drop of other objects inside this object, with restrictions needing to be in place that the objects cannot be dropped outside the this SVG object.
Upon Phrogz recommendation, we looked into this but are struggling to make sense of how to pass the object. Do we pass the objects as path string or as SVG object.
ERROR:
At this moment, we are not getting any output, not even sure if its accepting the objects we pass through.
This is quite an open question and Im particularly keen on hearing from individuals who might know a thing or two about Kevin's library/ how it works/ functionality.
Cheers

I'm not sure how performant this will be for you. I wrote this library more as a proof-of-concept and to educate myself on intersections for higher order curves. That being said, I assume you are trying to instantiate instances of Path from the library? If so, have a look at loadShapes from the the following utility:
https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
That gets called on start when processing, say, this file:
https://github.com/thelonious/js-intersections/blob/master/samples/intersect_bezier3_rect.svg
Note that I'm tagging items to be process with a custom gui:edit attribute. That's neat and all, but I wrote this many many years ago (8+) and I'm sure the state of the art has better techniques, but I digress. The main thing is that you need to instantiate each shape type using the class for its node type. Each time you want to check for an intersection, you'll need to call Intersection.intersectShapes(node1, node2). That will return an object with a status attribute which will let you know if there was an intersection or note. I'm sure all of this can be improved. The code is up on github for those who wish to fork, fix, and improve :)
https://github.com/thelonious/js-intersections
https://github.com/thelonious/svg-2d
HTH,
Kevin

Related

Architecture pattern is an extreme violation of the open/closed principle [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am working on a web app that will automatically generate Bootstrap sites given a bounded set of parameters. I need help with regards to architectural decisions, as over time, I have made very naive design decisions and I don't want to repeat this mistake with this project. For my PoC, I have taken an MVC approach to design, with the top-level architecture (see above) containing the following:
CanvasComponent - this is the entry point for the application, a UI element in which the user can generate their website and be given to download it;
CanvasService - this service orchestrates the creation of the website, and has dependencies on a set of services (NavbarService, HeroService, FooterService);
DomService - this service is in charge of the creation of the DOM element at a high level sans styles;
ComponentService - these group of services (NavbarService, HeroService, FooterService) are in charge of the creation of the DOM element at a lower level;
FontService - this service is a Google font repository.
The above is something I put together fairly quickly, so I understand that it isn't perfect. I also have a few questions with regards to the direction of the project with regards to the scalability of it as I move towards productionalising it. These are my problems:
I showed it to someone and they said they can't make sense of it... as it sounds like my CanvasService, DomService and component services create raw HTML, all of which are models that describe DOM elements. It seems very overly mis-engineered. the way we are developing our services isn't scaleable or manageable. If nothing else, it is an extreme violation of the open/closed principle. They will ultimately be huge "factories" that don't fully cover all the functionality of DOM elements. This is my main concern. How do I resolve this from an architectural perspective?
Given the nature of the project, I am dealing quite extensively with raw html. I use a mixture of approaches to dynamically generate the required HTML. I wanted to ask if the above is advisable. What would be the cleanest approach architecturally to creating and managing blocks of HTML? Should I use raw string or create something more bespoke?
What would be the best approach to storing an assortment of styles per component (navbar, hero, footer) and then applying them randomly? From what I understand a style can be separated into two categories - a template and a theme. A template can have many themes, and a single theme can be associated with multiple themes. A good example is "light/dark" colour mode on a website. At the moment in NavbarService, I store a range of possible widths and heights in an array.
Are there any issues that my current architectural approach will present down the road besides the violation of the open closed principle (unknown unknowns)? In the past, whenever I have started projects like this, they have quickly become unsustainable. I lose interest, because I am wrestling with the code-base at that point. I want the process to continue to be enjoyable, and keep my code clean and manageable over the course of the project, as well as apply the best principles.
A sample demo is available here: https://stackblitz.com/edit/angular-ivy-2pga8q (each time you reload the page, a new navbar appears).
This is an interesting problem. I also didn't quite understand the diagram but your description makes more sense.
Let's assume for a minute your generated HTML/CSS/JS components are sensibly written and generate reasonably formatted and sensible output. At this point you don't really 'need' to store meta-data about it as anything will be un-required bloat. What you will need is the ability to construct small, modular blocks of code that can be recompiled again after editing or additional input parameters.
To support this I strongly suggest separating the output of the code (HTML) as a version-stamped solution library - and the code that generated that should be a collection of marked-up data from user or data inputs.
To create a simple analogy imagine the formula (8+1+1=10).
In this example the output (10) is the only thing you need to publish/present/store. However you need to keep the starting data (8+1+1) independent - primarily because if one of those values changes (say it's now 8+2+1) you can now re-generate a second version of the output with a new version and get a new answer (11).
As such I'd focus a LOT more on storing the the building blocks/wysiwyg/mark up components than worrying about the string/text format of the output elements. From an architecture perspective if you have any ongoing need to interact/modify this code you need to focus on ease of use and re-usability.
Remember also unless you're creating skynet you're not writing 'code that writes code'. You're writing code that assists humans in writing code. Always assume there will be need for intervention and modification from an outside source - focus on getting the modular form of (algorithm + input = output) and store the process and the inputs. If you get that right you can re-generate the outputs at any time for any reason.

Destroying Polymer-element and re-create new one with other attributes...or?

I'm wondering what's the best approach to do the following: I have a Polymer-element (PubNub (which handled Realtime Messaging)) which is "instantiated" with a some attribute values (the elements properties (more precisely, which channel to listen to/join)). And since the user should be able to switch chat rooms (/channels), I'm not sure if it's such a great idea to "instantiate" 5 PubNub-elements and in turn have 5 active chats going on in the background (receiving messages), if nothing else it would drain more battery power(?).
So, should I instantiate one PubNub-element and then remove and replace it when a user swaps channel? And how is this done best in Polymer?
Or is there some other approach one should take when dealing with this kind of problem?
You are right, the current pubnub-element is very basic and lacks many functionalities, as you have already noticed.
As Craig said, I don't generally recommend to create a bunch of instances either, however, the polymer element lacks the way you can modify all properties on the fly- you may be able to change the channel name as publishing, but it doesn't work the way for subscribing...
Instead of making some workaround using Polymer elements, I suggest to just use our vanilla JavaScript APIs. It maybe so much easier for your scenario.
And please do not hesitate to send us a pull requests or two :-)

Web workers with OO Javascript, ThreeJS and ScrollMagic

I'm developing a personal website to combine Three.js and ScrollMagic with OO Javascript. As the user scrolls the 3d Objects transform. This all works well but there is a slight performance issue. To improve this I want to move some loop/for functions that calculate positions to a web worker (whenever I call a loop function the scrolling lags).
The problem is I'm trying to pass an array (512) of class instances (THREE.PointCloud) to the web worker. I can't seem to get any meaning full properties from these instances in the web worker.
Firstly, I just tried to pass the array to the worker and got this error 'Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.'
Then I realised I couldn't do this so then I used JSON.stringify() and JSON.Parse(). I could get the length of the array. However, I couldn't get the properties for each instance.
I think I need to use an ArrayBuffer? But I have no idea how to convert my array of instances to an ArrayBuffer. Anyone? or is there an easier way to improve the performance?
Help would be really appreciated.
Thanks.
I think you are probably right that you needs an ArrayBuffer (or similar).
Using the postMessage() won't really get you what you want I think. Because the json (de)serialisation process is a fairly time consuming one in some cases.
But what you are probably looking for is "transferable objects". Instead of cloning the object(s) it changes the owner so there is no copying required.
There are quite a few places that talk about transfer objects online so google will be your friend here. But here is one https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage
Hope that helps.

How or what approach should I take in converting a large JavaScript based app? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
My situation is this, I've been tasked with fixing little issues and debugging issues in an app that relies heavily on JavaScript. One of the other tasks will be to make the app easier to understand and more scalable. As new functions and features get added, the current app is more and more difficult to modify and update. Making changes in one function can really change things in another function.
My initial thoughts are to make the JavaScript object oriented, as it stands its just a bunch of functions, if / thens, switches, etc...
If my thoughts are correct and taking it in that direction is the way to go, can anyone suggest a model or format I can use for better breaking down the app. Like what should I turn into an object, what should I turn into methods or properties, etc... I just need some sort of guide.
If my thoughts are not correct and taking it in that direction is not the way to go, can anyone give me some ideas as to another method.
Thanks,
I would consider introducing the jQuery library into the picture.
Convert a few areas to see how much code shrinkage you can expect.
I don't really know what you're code looks like, so I can't really give you anything better than some general advice:
Use a JavaScript library, like jQuery, MooTools, or Prototype. I would recommend jQuery, but I can't say that I've really used the others very much. The point here is that they all are libraries that make common tasks that are rather tiresome to do by yourself much easier.
If you see lines of code that are the same, or even similar, refactor those lines into a new function.
Avoid magic numbers. They makes the code less scalable as well as less readable. For example, if you are referencing a desired length that happens to be 100, assign 100 to a variable and reference the variable instead. You can occasionally scan your code and look for numbers. Other than variable declarations, you shouldn't see very many numbers other than an occasional 1, 0, -1, or 2. The same goes for magic strings.
Keep all this configuration data code in one place so things can easily be changed. You might even have an entirely separate file that just has all the data inside of it.
Put related variables in an object. For example, instead of having xCoords, yCoords, and zCoords, have a coords object with x, y, and z as its properties. You really shouldn't have very many standalone global variables.
Try to have a consistent code style and try to give things sensible names. This alone can make your code much more readable.
For a quick real-life example, look through this small code project and see what sort of things were improved in its reviews. You can hone your code improvement skills by being active on the Code Review site.
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by
providing models with key-value binding and custom events, collections
with a rich API of enumerable functions, views with declarative event
handling, and connects it all to your existing application over a
RESTful JSON interface.
Backbone might be a great solution for you. It's not too invasive. If nothing else the bindings, models, and custom events could really help you get that code in order.

Find and list all functions/methods in a set of JavaScript files

Is there a way to read a set of JavaScript files, and output a description of where every function/method is defined?
I realize that this is likely impossible in full generality, due to the extreme dynamic nature of the language. What I'm imagining is something which gets the (relatively) straightforward cases. Ideally, I'd want it figure out where, e.g. some method got attached to string or hash or some other fundamental class (and also just let you find all the classes/functions that get defined once in one place).
Does such a tool exist?
Give Eclipse (with JSDT) or Aptana a try.
The Outline view of a JavaScript file gives great view of functions and object hierarchies.
Granted this will only work for a single js file, and it sounds like your looking for more of a report, so I guess I need to ask what your ultimate goal is.
I'm not sure if it will output anything without documentation comments, but you could give YUI Doc a try.

Categories

Resources