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 2 years ago.
Improve this question
Tl;dr: To (continuously) update the location of a component from another component, is it performance-wise better to use the Vuex store or an Event-bus?
The application
I'm creating an application in which the user can create Directed Acyclic Graphs. Simply said, there is a canvas, with different panels on it. Each panel has multiple inputs and multiple outputs. The user can connect an output the the input of another panel with a connector. The panels are draggable over the canvas, and the panels eventually will be generated dynamically, with different inputs and outputs.
____________ ____________
| PANEL | | PANEL |
| | | |
|.input1 | |.input3 |
|.input2 | ,---- |.input4 |
| | / | |
| output1.| ---' | output5.|
| output2.| | output6.|
|__________| |__________|
(The actual application isn't ascii art, btw)
All objects in the application are in the Vuex Store, the application renders things based on the store:
store:{
panels: { ...paneldetails..., id}[],
inputs: { ...inputdetails..., id}[],
outputs: { ...outputdetails..., id}[],
connections: { ...inputId, outputId..., id}[],
}
The user can drag the panels around on the canvas, which means that the connectors are also dragged around on one end at a time. And that is where my question lies: How should I update the connector's location, when a panel is moved around?
I thought of two approaches:
A ) I track the location of each input and output in the store: I just store the x and y along with the ID as soon as they move. I bind one end of each connection to that item in the store, and that's that. That would mean dozens and dozens of store-updates when someone drags a panel around on the screen.
B ) I send the location of each input and output over an event-bus when it moves, with their ID as key. The connector listens to the ID of the input and output they know, and update when they 'hear' something.
I'm not really sure what the best approach is performance wise, the store might not be suited for continuous updates.
Related
I have been trying to create the following Snackbar for a very long time and havent been able to. I have tried a few third parties components and other suggestions online but can not get it to work. Can anyone guide on how to create this such that it can be easily exported on various screen size and resolutions.
Note: Image#1 is a 2x2 image and Button2 is also a 2x2 component.
https://callstack.github.io/react-native-paper/snackbar.html
|Col 1|Col 2|Col 3|Col 4|Col 5|Col 6|Col 7|Col 8
|------------------------------------------------
Row 1| |Button1
|------------------------------------------------
Row 2| Image#1 | One Big |Button2
| Image#1 | Text |Button2
Row 3| Image#1 | Box |Button2
-------------------------------------------------
I have tried using react-native-super-grid and writing my own css style (I prefer to use existing components).
I am relatively new to React Native and styling with flex and have been looking for a way to break a long word at a specific point. I only want an optional break in case the word gets too long.
In case 1 (see example) I don't want to break the word, since the component is big enough.
In case 2 the component is too small so the word breaks. I would like to be able to control the breaking position to get something as in case 3.
I am looking for something similar to this solution for HTML, but I cannot use <wbr> or and could not find an equivalent for React Native, if something like that exists.
I have tried using \u00AD as suggested here, but it doesn't seem to insert a break.
Example:
// case1
––––––––––––––––––––––––––––––––––––––––––––––
|ReallyLongWordThatBreaksSomewhere |
| |
––––––––––––––––––––––––––––––––––––––––––––––
// case2
–––––––––––––––––––––––
|ReallyLongWordThatBre|
|aksSomewhere |
| |
–––––––––––––––––––––––
// case3
–––––––––––––––––––––––
|ReallyLongWord |
|ThatBreaks |
|Somewhere |
–––––––––––––––––––––––
Just curious, for a route like /chart/:charttype
I want to load different type of chart components into that chart area, how to plan this in VueRouter(currently I only put /chart/:charttype there) and component( currently I put a container component there, inside which, there is a long list of v-if different type of chart components )? Any best practice?
/*
Say I have a long list of diff type of charts,
when charttype matches, it will load that component,
otherwise load 404 component there.
*/
_______________________
| _____________ |
| | | |
| | chart | |
| |___________| |
|_____________________|
I believe current long list of v-if way will be very hard for maintenance, also, in the future, that chart area will be a a group of charts which build a combo chart component(such as 4 charts as a combo chart component), so I guess there has to be a configurable way to do this.
Thanks,
You can check Dynamic Components in the docs
<component :is="componentName"></component>
Hi This is my first question to stackoverflow. In my project we have requirement to generate the PDF based on DOM. There were multiple requirement and we used Kendo for this. PDF was generated from Bootstrap pages and many UI issue was there as bootsrap3 is not officially support the print version. There were overlapping and table width issue, content was going off the screen due to Boostrap offset classes all of them are sorted now. One more task client ask that can we apply scroll to pdf were we have grid and lots of column. On browser everyone know we can manage it by applying horizontal scroll and user can see the rest of the data by scrolling it.
As per my experience I don't see this kind of example but still asking is there any possibility to implement the scroll for generated PDF where we have grid with lots of column?
PDF content layout is static and there are no scrollbars for items, such as tables within. So, no possibility.
When a grid is too wide you have to decide how to split up the layout of the grid for 'printout' pages. For example, suppose your grid needs six pages to fit in a pdf
The pages in the pdf could be from this row-wise layout
A wide grid
+---+---+---+
| 1 | 2 | 3 |
+---+---+---+
| 4 | 5 | 6 |
+---+---+---+
or this column-wise layout
A wide grid
+---+---+---+
| 1 | 3 | 5 |
+---+---+---+
| 2 | 4 | 6 |
+---+---+---+
Which ever you choose, the content in a pdf reader will look like
A wide grid (direction-wise)
+---+
| 1 |
+---+
... pages 2 to 5 ...
+---+
| 6 |
+---+
If the content is widely variant it might be easier to sell the client on receiving Excel content instead of PDF, versus trying to code your own grid to pdf layout engine.
If the web page is only the grid, you could also consider using the spreadsheet component, which has a pdf download feature which renders column-wise.
I have dijit/layout/ContentPane. And I want to place a Table in it. To be exact, I need a table-aligned content with borders.
The table looks like this:
-------------------------------
Header 1 | Value 1 | CheckBox 1
Header 2 | Value 2 | CheckBox 2
Header 3 | Value 3 | CheckBox 3
-------------------------------
Is it possible to create it declaratively (I think, I've checked all possible containers for that) or I should take a Grid and make a storage etc. etc.?
Important point: I need not a data-table. I need a layout container, that will act like regular HTML table and I'll be able to put it inside dojo ContentPane and apply styles.
Try to use dgrid.
You may follow this link http://dgrid.io/
I have been using it until now. It is quite simple to use, and also, it allows you to easily set the scroll-bar, add events on dgrid-select, and many more. Have you learned about dojo store? Please follow this if you haven't: http://dgrid.io/js/dgrid/demos/laboratory/ (you may ignore it if you already have learned about dojo store)...