Add custom shape object properties based on svg in react-three-fiber - reactjs

I'm trying to render a map of a small room based on the svg image I have, just as shown in here. I can see every shape being listed and rendered properly, but since I want those objects to be interactive, I need to somehow relate them to the ids I have in the db. I'm aware that svgs can contain data-* properties, but is it possible to make them included in the objects listed? For example my custom data-id?

Related

Add empty overlay to leaflet map?

Looking for a way to add an empty overlay to a Leaflet map. I have multiple Leaflet overlays that load in their data from a realtime server. Because I am using a custom UI control and not the default Leaflet one, I have a listener that every time new markers are created, checks to see whether their associated layer is active, and if it is, adds the markers to that layer.
$rootScope.on('newMarkers',markers)->
type = *fn to find type*
if mapFactory.currentLayers[type]?.active
mapFactory.addLayer(markers, type)
)
I don't think building in logic to see whether it's the first time a marker is being added to that layer makes sense, and would rather create an empty layer and add data to it after. I know you can do this with the L.geoJson type, but this layer is made entirely of plain markers. Any suggestions
You could use L.LayerGroupfor this:
Used to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well. Implements ILayer interface.
Reference: http://leafletjs.com/reference.html#layergroup
Or L.FeatureGroup:
Extended layerGroup that also has mouse events (propagated from members of the group) and a shared bindPopup method. Implements ILayer interface.
Reference: http://leafletjs.com/reference.html#featuregroup

MVVM - dynamically create multiple instances of view/viewmodel

I have a requirement to display a number of graph/chart "thumbnails". Clicking one will show an "expanded view" (in a separate panel) that displays a larger version of the chart, plus controls to view and manipulate the chart.
There will be a number of different charts, each plotting my data in different ways. Also, a given chart type may appear several times, each plotting a different subset of the data. The controls in the "expanded" view will also differ from one chart type to the next, so there is little commonality here.
I'm struggling to get my head around how to model all this in MVVM, especially given the need to dynamically create an unknown number of thumbnails (and in some cases multiple instances of the same type).
Thinking aloud, I guess I need a view/viewmodel that represents a single thumbnail (the view contains the chart component and the VM exposes the data to plot). I guess I also need a V/VM for the "thumbnail list" UI, responsible for creating the thumbnails and exposing them via a collection for binding to the list. But how does it instantiate these? A VM gets injected into its view, suggesting the "thumbnail list" VM would have to dynamically instantiate the thumbnail views - but a VM shouldn't have knowledge of views should it?!
Lastly, when I display the "expanded" view, it would make sense to (somehow) pass it the charting component/view that was used in the thumbnail, to avoid having to render the chart again, but how?
If it's relevant/helps, I'm using Castle Windsor for dependency injection, and the navigation features of Prism.
This is indeed a complex topic,...
I would suggest a VM for the list of icons not necessarily for the icon itself. this can be bound to properities of the IconListViewModels. Then you should think about a ChartViewModelFactory. Which works in conjunction with your DIC.
An important discussion is the VM-V marriage. View first or View Model first... one way could also be ViewResolver if which returns the matching view based on your view model... this can rely on some sort of conventions. So the final steps could be ask the factory for a view model find the matching view glue them together and bind them to a content presenter...
I hope this helps to get you started...

How do I change the layout of an Appixia BasicItemListActivity module?

When using the simple item list module BasicItemListActivity you don't have the ability to customize the layout of the item list, you can only change the colors. What should I do when I want a customization like having a list with several images per item or several text fields / prices?
The BasicItemListActivity is a bit too simple for these requirements. What you're looking for is actually one of the powerful views like ItemGridView (for tables or grids) or ItemCarouselView (for carousels).
Each of these views actually displays another custom view for each of the items you have. A good view to choose for this purpose is BasicItemCellView - which offers a lot of customization on how each item in the list is presented. Don't forget to connect the BasicItemCellView to the container view using the CellModule property.

How to reuse array of items collection in Ext Js widgets?

I'm using Ext Js 4.1.1.
In many of the Ext JS widgets I am using, I am required to reuse data. For example, the items collection for buttongroup in top toolbar may be repeated in menu bar on the left side. For manageability, I should be able to have the array for items collection defined in a separate file (which could potentially follow the class naming convention for auto loading).
The approach I tried is that I am creating a class that has statics. Each static function returns an array that can be assigned to items collection of the widget. This works but I believe that using a class is an overkill if I can just use an array. Any suggestions?
Not sure if it will be useful to create separate objects for storing configuration for toolbars, buttons groups and etc. In the context of the extjs in almost all cases you need not only manage configuration but also behavior of a component.
The best way for me here - creation of generic/basic predefined classes, where you can state not only configuration but work around the behavior, add you'r custom events and process any unexpected results. After it you can easily reuse and extend it easily.
For instance you have a menu or a toolbar with 3 items A, B, C. For sure you need to know wherever you use it what was clicked (for instance) A, B or C. Creating a class and manages required events you can fire you own events which will tell you what was clicked and it is much easier to use in any context where this component will be used. Add post and pre processing, template methods and etc...
Creating a big file just with configuration is not readable and not extendable, will be a case whre you will need to add functionality and behavior to all such generic components and it will be not easier to do with just arrays or simple configs. Separating even just simple general components having just simple configuration (in the beginning) will bring more expressive in the code structure and readability and in the later time gives you the power to manage it.
Pure configurations can just keep the code accurateness and re-usability but what about behavior for in almost cases you need to control..
The design, maintainability and extensibility are very important points in every big web-applications and in context of extjs 4.

Drupal 7 Theming individual pages

I'm starting a Drupal 7 site and have noticed that almost every page will require a separate layout.
in order to style an individual node do i just name a template mode-NID-page.tpl.php or is there more to it?
I think i will also need to add gallery widgets, etc.. but i think that's a separate matter. But would this involve displaying fields in the above template?
First off: I don't think it's a good idea to theme pages based on their NID.
That aside, here are two possibilities how you can achieve something like this:
Theme the normal node template, but include some logic there. You could for example include specific template files based on the NID. Not a clean separation of course, as such code should not go into templates. For a cleaner separation you could attach a custom field to the pages that holds the template file used for themeing.
As you want to create individual styles for different NIDs I assume that the number of those is not exorbitantly large. In that case, you could create separate content types. Each of the NIDs should then be converted into a node of that content type and of course each content type can have its own theme template then.
Downside of the second approach is that there might be some work involved if you have a lot of settings that would need to be transferred to the content types (e.g., permissions). But then again, the new pages will be nodes too, so most things should just work out of the box as they did before.

Resources