ishaanshettigar / idg10-gui-hackathon Goto Github PK
View Code? Open in Web Editor NEWBuilding an interactive GUI to help design subsea field layouts using JointJS with plain HTML,CSS and JS
Building an interactive GUI to help design subsea field layouts using JointJS with plain HTML,CSS and JS
look at the advanced Multiple Papers tutorial in the joint js documentation, to learn how to use this functionality to create diagram minimaps and previews.
The pan and zoom feature is only available in the infinite_paper.html and infinite_paper.js files.
When we try to zoom in, it works perfectly fine, but the background grid does not change. We need to change the grid size and re-render the paper's background on zoom.
This can quickly be done once you figure out how to re-render the grid in joint js.
Then in the place where we create a svgPanZoom object we just add the following parameters and the corresponding functions to it like so:
paperPanAndZoom = svgPanZoom("#paper-div svg", {
fit: false,
center: false,
zoomScaleSensitivity: 0.03,
panEnabled: false,
controlIconsEnabled: true,
onZoom: ()=>{
/*Insert function to re-render here*/
}
})
you could also try to use the beforeZoom: callback_function parameter
Using #49, make sure to dynamically assign the necessary parameters every time the application is loaded up.
When refreshing the page or saving and loading a diagram, the link color disappears. This is cause something weird happens when it saves it, I do not know what. Look at localstorage under the links attrs. Something weird is happeniing
When a user tries to upload an old .idg file, the diagram loads fine however the element and link tools are not loaded.
If we try adding new elements and links, tools are displayed on them but not on the previously loaded data.
Not sure yet, how to implement this but off the top of my head we could create a function to change the cursor and put that function in the onPan section as seen below. This should change the cursor while you are panning.
paperPanAndZoom = svgPanZoom("#paper-div svg", {
fit: false,
center: false,
zoomScaleSensitivity: 0.03,
panEnabled: false,
controlIconsEnabled: true
onPan: (oldPan, newPan) => { /* This is the function */}
})
Use a stack
Make a settings page where you can change the settings of each of the elements and connectors in the diagram.
Assignees: @abhay-ramesh, @IshaanShettigar
Labels: Feature
Milestone:
Right now elements on the toolbar appear on the mainGraph
when the user double-clicks on a specific element. This functionality is accomplished by having the elements appear at a fixed position on the graph, which could lead to poor user experience.
Ideally, we would like the user to be able to drag and drop the element to a specified position on the mainGraph
.
Helpful link: https://observablehq.com/@quantellia/jointjs-drag-and-drop-ideation
This feature is needed to navigate complex diagrams.
Other than the 18 parameters per link there should also be options to change the settings of the link. These settings will be the same as those provided by the JointJs framework.
Link Router - normal/manhattan/metro/right-angle/orthogonal
The default router is 'normal'; this can be changed with the defaultRouter paper option. Example:
paper.options.defaultRouter = {
name: 'orthogonal',
args: {
padding: 10
}
});
The 'manhattan' and 'metro' routers are our smart routers; they automatically avoid obstacles (elements) in their way.
The 'orthogonal', 'manhattan' and 'rightAngle' routers generate routes consisting exclusively of vertical and horizontal segments. The 'metro' router generates routes consisting of orthogonal and diagonal segments.
JointJS also contains mechanisms to define one's own custom routers.
Connector - normal/rounded/smooth/curve/straight/jumpover
The default connector is 'normal'; this can be changed with the defaultConnector paper option. Example:
paper.options.defaultConnector = {
name: 'straight',
args: {
cornerType: 'line',
cornerRadius: 20
}
}
SnapLinks: (true/false)
SourceArrowHead: (provide 2 or 3 ready-to-use connectors)
TargetArrowHead: (provide 2 or 3 ready-to-use connectors) (Describe in the documentation how one can specify their own custom arrowheads)
Boundary: display the boundary of the link on hover or whenever you show the link tools
Create one js file for all element tools
Create one js file for all link tools
Create a js file for all custom elements
When user drags and drops connector anywhere in space not just on port, make sure to let that happen and somehow the user should be able to connect other connectors to each other and join them together.
Takes an input the graph. Renders all parameters on a pdf
This is a required feature as the user should not have the inconvenience of redrawing the diagrams if they accidentally close the tab.
Possible ways to save the diagram:
graph.on("change", function)
eventWe will be utilizing browser local storage
This prompt should be fired whether the user tries to delete an element whether they click on the x icon or they highlight the element by clicking on it and then press the delete key.
We can react to the graph.remove
event listener to ask the user if they really want to remove the object (Are you sure?)
Commit to the phase3.1 branch
The hover modal is wildly out of position due to the fact that we are defining the distance of the modal from the hovered coordinates in terms of the elements height (in case of out of bounds on the Y axis) and width (in case of out of bounds on the X axis). This is an error simply due to the fact that these elements PLET and UTH have a much larger size. Not visually tho, the elements bounding box is itself larger than the others.
Possible solutions:
Diagram settings include paper background colour, paper grid type (mesh.. etc) and paper grid scale (optional, we might not include this).
Everything was fine until I added the addLinkToolsNew
function and call it during the graph.on('add', ....)
event.
Maybe if we hide the tools while the link is pressed (pointerdown), then this bug will not happen.
For some reason it seems to want to connect to itself despite the fact that the validateConnection
option while defining mainPaper
prevents that from happening.
When dealing with the new parameters it is really important to generate the excel file. An engineer will design the pipeline using this software but some high level exec will play around with the values in the excel file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.