A simple IFML Web Editor
To install all dependencies (and regenerate static assets)
npm install
To just regenerate static assets
npm run-script build
To start server
npm start
To stop server
npm stop
Home Page: http://ifmledit.org
License: MIT License
Add the ability to undo an action and redo it.
Features:
ctrl+z
and ctrl+y
supportIt would be useful to have a "back" event on a ViewContainer. The event should be mapped to the back button. When the back button is pressed the "back" event should be triggered. It could be platform depended (what about iOS?).
When you drag and drop a new element from the sidebar towards the board, if you click and release the element without any movement outside the sidebar and then you re-click the same element and execute the drag and drop outside the sidebar, the element does not follow the mouse pointer, but is "hanging" in an apparently non-deterministic position of the board.
N.B.: the zip file in attachment contains a video demo to help in understing the problem. I hope you find it useful.
bug.zip
When you generate a model, if you delete the id of a component and close the panel, and then you move to another component, then the component whose id is deleted is no longer clickable or editable. If afterwards you delete the id of another component, the second time the framework regenerates a correct id and manages the cancellation of the ID (the component is still clickable and modifiable).
At the moment the mock database in the generated/emulated code is not persisted.
After each run of the code generator it is restored to the default value.
It could be interesting to store the latest version of the database and preserve it after a model change.
Open questions:
As reported in the title it is impossible to generate the PCN of the preloaded Example 12.
The error in the console is an object with the following message property: "fields with a merge policy with specials should always be objects"
After starting the Mobile or Web Client demos in Firefox Quantum the following error show up.
Error: cannot enable cancellation after promises are in use
@B3rn475 I've been studying the structure and behavior of ifmlEdit, in order to understand the entire flow of its operation, and despite the project being well organized and with very lean functions, it is so well structured that the abstraction of certain functionalities is not so easy. I have a hunch which files are responsible for the ifml transformation rules for the views code, but I would like to be more sure. If possible, could you explain to me or provide me with some kind of existing documentation related to this functionality. As I mentioned, I intend to add rules for generating interface test scripts for Cypress, but I need to understand as much as possible how the interfaces themselves are built based on a IFML model.
We need to investigate if the IFML2CODE transformations may generate collisions of ids
'js' errored after 2.43 s
[21:52:11] Error: Parse Error: <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=""#landmark-menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="landmark-menu" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
</ul>
</div>
</nav>
<div class="container">
<span data-bind="if: active() === 'mails'">
<c-mails params="context: context" class="container"></c-mails>
</span>
</div>
(while stringify was processing /home/alexandro/Downloads/clientexample/src/js/controls/main-application/index.html) while parsing file: /home/alexandro/Downloads/clientexample/src/js/controls/main-application/index.html
at new HTMLParser (/home/alexandro/Downloads/clientexample/node_modules/html-minifier/src/htmlparser.js:235:13)
at minify (/home/alexandro/Downloads/clientexample/node_modules/html-minifier/src/htmlminifier.js:946:3)
at exports.minify (/home/alexandro/Downloads/clientexample/node_modules/html-minifier/src/htmlminifier.js:1299:10)
at minify (/home/alexandro/Downloads/clientexample/node_modules/stringify/src/stringify.js:147:27)
at Stream.transformFn (/home/alexandro/Downloads/clientexample/node_modules/stringify/src/stringify.js:209:24)
at Stream.end (/home/alexandro/Downloads/clientexample/node_modules/browserify-transform-tools/lib/transformTools.js:108:30)
at _end (/home/alexandro/Downloads/clientexample/node_modules/through/index.js:65:9)
at stream.end (/home/alexandro/Downloads/clientexample/node_modules/through/index.js:74:5)
at DestroyableTransform.onend (/home/alexandro/Downloads/clientexample/node_modules/readable-stream/lib/_stream_readable.js:577:10)
at Object.onceWrapper (node:events:627:28)
[21:52:11] 'build' errored after 2.45 s
[21:52:11] 'default' errored after 2.62 s
Consider the following modeling context: you have an event attached to a form ViewComponent with a navigation flow pointing towards a list ViewComponent.
If you establish a binding between a form parameter and a filter parameter of the list and then you delete the filter parameter of the list, the binding continue to be present even if the parameter does not exist anymore.
In attachment, a video demo of the possible unexpected behavior.
When a new View container pass over a navigation flow, the latter results in foreground, despite it should result under the new view container
Adding a DataFlow targeting a Form breaks the generated code
crash-on-web-server.zip
When you execute an undo operation on elements that involve ViewContainer with XOR, the undo operation remove the XOR (and consequently, all the others ViewContainer inside the XOR ViewContainer, lose their Default/Landmark properties).
Allow the user to disable active selection by clicking on background
It would be useful to have a "changed" event on each form that captures changes in the value of the fields.
Model 2 Graphical Representation
https://github.com/B3rn475/IFMLEdit.org/blob/master/client/js/ifml/fromjson.js#L186
Graphical Representation 2 Model
https://github.com/B3rn475/IFMLEdit.org/blob/master/client/js/ifml/tojson.js#L175
When a user refreshes the page or closes it the model, and any change done to it is lost.
We should inform the users that they are going to loose them in this cases.
In an attempt to drag a navigation flow, detaching it from an event and leaving it "dangling", the behavior is not possible (correct).
But if you execute ctrl + z twice (or cmd + z for mac) you get that the navigation-flow remains "dangling" (unforeseen behavior).
The javascript console report:
Uncaught TypeError: a.position is not a function
at i. (almost-joint.min.js:formatted:167)
at v (backbone.min.js:1)
at p (backbone.min.js:1)
at c (backbone.min.js:1)
at i.o.trigger (backbone.min.js:1)
at i.notify (joint.min.js:1)
at i.pointerup (joint.min.js:1)
at i.pointerup (joint.min.js:1)
at i.dragMagnetEnd (joint.min.js:1)
at i.pointerup (joint.min.js:1)
It seems to be a problem with almost-joint
To the author,
IFML is already OMG standard modeling language, so to exchange data to another tools, the model should be able to saved into XMI file format. I hope that in the future this feature will be able to be implemented
The IFML standard doesn't allow chains of Actions.
The code generator doesn't support them either.
The editor should not allow them too.
When I click try in browser , on the "web server" tab, no screen equivalent to the model is generated, while on the "web client" and "mobile" tabs this works normally.
It would be awesome to have more examples to show the the users.
I tried to run the application for a research project that aims to generate automatic test scripts using the cypress tool, and when running the command "npm install" the dependencies are installed but gulp fails to compile the application. I'm using ubuntu linux 22.10 and I tried to run using the current LTS nodejs (18.x.x), I tried to update the dependencies to newer versions and even tried to install the 2020 LTS nodejs and still the failures persist. If possible @B3rn475 , could you try to update the project's dependencies to help me with this problem, thanks in advance.
In a big nested model it is possible to zoom to a particular area and not be able to pan the model, trying to do so will move the nested ViewContainers and change the model itself.
It should be able to pan a model from within ViewContainers.
Using pinch-to-zoom
the page scrolls, but at the same time it zooms, it should be disabled.
Should the fix be done in IFMLEdit.org or in ALMoST-Joint?
Id generation in IFML2PCN transformations can produce colliding ids.
Simple example the id application
is already used.
A complex example is using two actions called action
and actionname-running-p
, this will collide the main Place Chart of the second action with an inner Place of the first action.
It should not be able to draw a DataFlow from a ViewComponent to an Action.
The only valid configuration are ViewComponent to ViewComponent.
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.