Commit 8127666c authored by Jérome Perrin's avatar Jérome Perrin

Update Graph Editor

* Fixes https://erp5js.nexedi.net/#/bug_module/20160609-11B02E6 and https://erp5js.nexedi.net/#/bug_module/20210517-F12266
* Support ERP5JS
* Improve test coverage
* Small CSS changes
* Fix bug editing business process when erp5_graph_editor was installed 

See merge request !1461
parents f359f267 3272990a
...@@ -75,26 +75,20 @@ ...@@ -75,26 +75,20 @@
<key> <string>bottom</string> </key> <key> <string>bottom</string> </key>
<value> <value>
<list> <list>
<string>listbox</string> <string>my_jsplumb_graph</string>
</list> </list>
</value> </value>
</item> </item>
<item> <item>
<key> <string>center</string> </key> <key> <string>center</string> </key>
<value> <value>
<list> <list/>
<string>my_jsplumb_graph</string>
</list>
</value> </value>
</item> </item>
<item> <item>
<key> <string>hidden</string> </key> <key> <string>hidden</string> </key>
<value> <value>
<list> <list/>
<string>listbox_int_index</string>
<string>listbox_order_builder_title_list</string>
<string>listbox_delivery_builder_title_list</string>
</list>
</value> </value>
</item> </item>
<item> <item>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ProxyField" module="Products.ERP5Form.ProxyField"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>delegated_list</string> </key>
<value>
<list>
<string>columns</string>
<string>editable_columns</string>
<string>enabled</string>
<string>portal_types</string>
<string>sort</string>
<string>title</string>
</list>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>listbox</string> </value>
</item>
<item>
<key> <string>message_values</string> </key>
<value>
<dictionary>
<item>
<key> <string>external_validator_failed</string> </key>
<value> <string>The input failed the external validator.</string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>overrides</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>tales</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>values</string> </key>
<value>
<dictionary>
<item>
<key> <string>columns</string> </key>
<value>
<list>
<tuple>
<string>int_index</string>
<string>Index</string>
</tuple>
<tuple>
<string>title</string>
<string>Title</string>
</tuple>
<tuple>
<string>predecessor_title</string>
<string>Predecessor</string>
</tuple>
<tuple>
<string>successor_title</string>
<string>Successor</string>
</tuple>
<tuple>
<string>order_builder_title_list</string>
<string>Order Builders</string>
</tuple>
<tuple>
<string>delivery_builder_title_list</string>
<string>Delivery Builders</string>
</tuple>
<tuple>
<string>trade_phase_title</string>
<string>Trade Phase</string>
</tuple>
</list>
</value>
</item>
<item>
<key> <string>editable_columns</string> </key>
<value>
<list>
<tuple>
<string>int_index</string>
<string>int_index</string>
</tuple>
</list>
</value>
</item>
<item>
<key> <string>enabled</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>field_id</string> </key>
<value> <string>my_view_mode_listbox</string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string>Base_viewTradeFieldLibrary</string> </value>
</item>
<item>
<key> <string>portal_types</string> </key>
<value>
<list>
<tuple>
<string>Business Link</string>
<string>Business Link</string>
</tuple>
</list>
</value>
</item>
<item>
<key> <string>sort</string> </key>
<value>
<list>
<tuple>
<string>int_index</string>
<string>ascending</string>
</tuple>
</list>
</value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string>Click to edit the target</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string>Business Links</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ProxyField" module="Products.ERP5Form.ProxyField"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>delegated_list</string> </key>
<value>
<list/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>listbox_delivery_builder_title_list</string> </value>
</item>
<item>
<key> <string>message_values</string> </key>
<value>
<dictionary>
<item>
<key> <string>external_validator_failed</string> </key>
<value> <string>The input failed the external validator.</string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>overrides</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>tales</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>values</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string>my_view_mode_listbox_delivery_builder_title_list</string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string>Base_viewTradeFieldLibrary</string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string>Click to edit the target</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ProxyField" module="Products.ERP5Form.ProxyField"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>delegated_list</string> </key>
<value>
<list/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>listbox_int_index</string> </value>
</item>
<item>
<key> <string>message_values</string> </key>
<value>
<dictionary>
<item>
<key> <string>external_validator_failed</string> </key>
<value> <string>The input failed the external validator.</string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>overrides</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>tales</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>values</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string>my_view_mode_listbox_int_index</string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string>Base_viewTradeFieldLibrary</string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string>Click to edit the target</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ProxyField" module="Products.ERP5Form.ProxyField"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>delegated_list</string> </key>
<value>
<list/>
</value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>listbox_order_builder_title_list</string> </value>
</item>
<item>
<key> <string>message_values</string> </key>
<value>
<dictionary>
<item>
<key> <string>external_validator_failed</string> </key>
<value> <string>The input failed the external validator.</string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>overrides</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>tales</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</value>
</item>
<item>
<key> <string>values</string> </key>
<value>
<dictionary>
<item>
<key> <string>field_id</string> </key>
<value> <string>my_view_mode_listbox_order_builder_title_list</string> </value>
</item>
<item>
<key> <string>form_id</string> </key>
<value> <string>Base_viewTradeFieldLibrary</string> </value>
</item>
<item>
<key> <string>target</string> </key>
<value> <string>Click to edit the target</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
</item> </item>
<item> <item>
<key> <string>gadget_url</string> </key> <key> <string>gadget_url</string> </key>
<value> <string>dream_graph_editor/jsplumb/index.html</string> </value> <value> <string>gadget_graph_editor.html</string> </value>
</item> </item>
<item> <item>
<key> <string>hidden</string> </key> <key> <string>hidden</string> </key>
...@@ -235,7 +235,7 @@ ...@@ -235,7 +235,7 @@
</item> </item>
<item> <item>
<key> <string>js_sandbox</string> </key> <key> <string>js_sandbox</string> </key>
<value> <string></string> </value> <value> <string>iframe</string> </value>
</item> </item>
<item> <item>
<key> <string>renderjs_extra</string> </key> <key> <string>renderjs_extra</string> </key>
...@@ -253,11 +253,11 @@ ...@@ -253,11 +253,11 @@
</item> </item>
<item> <item>
<key> <string>validator_field_id</string> </key> <key> <string>validator_field_id</string> </key>
<value> <string></string> </value> <value> <string>my_core_mode_text_content_validator</string> </value>
</item> </item>
<item> <item>
<key> <string>validator_form_id</string> </key> <key> <string>validator_form_id</string> </key>
<value> <string></string> </value> <value> <string>Base_viewFieldLibrary</string> </value>
</item> </item>
</dictionary> </dictionary>
</value> </value>
......
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
<item> <item>
<key> <string>delegated_list</string> </key> <key> <string>delegated_list</string> </key>
<value> <value>
<list/> <list>
<string>editable</string>
</list>
</value> </value>
</item> </item>
<item> <item>
...@@ -69,6 +71,10 @@ ...@@ -69,6 +71,10 @@
<key> <string>values</string> </key> <key> <string>values</string> </key>
<value> <value>
<dictionary> <dictionary>
<item>
<key> <string>editable</string> </key>
<value> <int>0</int> </value>
</item>
<item> <item>
<key> <string>field_id</string> </key> <key> <string>field_id</string> </key>
<value> <string>my_view_mode_reference</string> </value> <value> <string>my_view_mode_reference</string> </value>
......
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
<item> <item>
<key> <string>delegated_list</string> </key> <key> <string>delegated_list</string> </key>
<value> <value>
<list/> <list>
<string>editable</string>
</list>
</value> </value>
</item> </item>
<item> <item>
...@@ -69,6 +71,10 @@ ...@@ -69,6 +71,10 @@
<key> <string>values</string> </key> <key> <string>values</string> </key>
<value> <value>
<dictionary> <dictionary>
<item>
<key> <string>editable</string> </key>
<value> <int>0</int> </value>
</item>
<item> <item>
<key> <string>field_id</string> </key> <key> <string>field_id</string> </key>
<value> <string>my_view_mode_title</string> </value> <value> <string>my_view_mode_title</string> </value>
......
...@@ -3,7 +3,6 @@ from Products.Formulator.Errors import FormValidationError ...@@ -3,7 +3,6 @@ from Products.Formulator.Errors import FormValidationError
request = container.REQUEST request = container.REQUEST
form = getattr(context, form_id) form = getattr(context, form_id)
edit_order = form.edit_order
try: try:
# Validate # Validate
form.validate_all_to_request(request, key_prefix='my_') form.validate_all_to_request(request, key_prefix='my_')
...@@ -16,7 +15,7 @@ except FormValidationError, validation_errors: ...@@ -16,7 +15,7 @@ except FormValidationError, validation_errors:
result['field_errors'][key] = value.error_text result['field_errors'][key] = value.error_text
return form() return form()
(kw, encapsulated_editor_list), action = context.Base_edit(form_id, silent_mode=1) (kw, encapsulated_editor_list), _ = context.Base_edit(form_id, silent_mode=1)
assert not encapsulated_editor_list assert not encapsulated_editor_list
context.setProperties( context.setProperties(
......
from Products.ERP5Type.Message import translateString
import json import json
portal = context.getPortalObject()
# if a graph has been saved, we use this info for node coordinates. # if a graph has been saved, we use this info for node coordinates.
position_graph = context.getProperty('jsplumb_graph') position_graph = context.getProperty('jsplumb_graph')
......
from Products.ERP5Type.Message import translateString
import json import json
portal = context.getPortalObject()
# if a graph has been saved, we use this info for node coordinates. # if a graph has been saved, we use this info for node coordinates.
position_graph = context.getProperty('jsplumb_graph') position_graph = context.getProperty('jsplumb_graph')
...@@ -37,11 +35,8 @@ def getWorkflowGraph(workflow): ...@@ -37,11 +35,8 @@ def getWorkflowGraph(workflow):
'transition_id': transition.getId(), # used for edition. 'transition_id': transition.getId(), # used for edition.
'path': transition.getPath() 'path': transition.getPath()
}) })
else:
# user action
transition_list.append(transition)
if transition_list != []: if transition_list:
graph['edge']['transition_to_%s' % (state.getId())] = { graph['edge']['transition_to_%s' % (state.getId())] = {
'_class':'workflow.transition', '_class':'workflow.transition',
'source':state.getId(), 'source':state.getId(),
......
...@@ -4,53 +4,25 @@ ...@@ -4,53 +4,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../lib/jquery-ui.css"> <link rel="stylesheet" href="../lib/jquery-ui.css">
<link rel="stylesheet" href="jsplumb.css"> <link rel="stylesheet" href="jsplumb.css">
<title>JSPlumb gadget</title> <title>JSPlumb public gadget (for qunit tests)</title>
<!-- <!--
FIXME: renderjs fails if we include renderjs.js twice (this one has a different URL from ERP5's one) The gadget for test is used with "public" sandbox, so we should not include javascripts again.
The following scripts must have been included by the parent page:
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
-->
<!--
FIXME: Including jQuery twice cause the jsplumb to be loaded twice.
For now we assume that it has already been loaded at this point.
<script src="../lib/jquery.js" type="text/javascript"></script> <script src="../lib/jquery.js" type="text/javascript"></script>
--> -->
<script src="../lib/jquery-ui.js" type="text/javascript"></script> <script src="../lib/jquery-ui.js" type="text/javascript"></script>
<script src="../lib/jquery.jsplumb.js" type="text/javascript"></script> <script src="../lib/jquery.jsplumb.js" type="text/javascript"></script>
<script src="../lib/handlebars.min.js" type="text/javascript"></script> <script src="../lib/handlebars.min.js" type="text/javascript"></script>
<script src="seedrandom.js" type="text/javascript"></script>
<script src="../lib/springy.js" type="text/javascript"></script> <script src="../lib/springy.js" type="text/javascript"></script>
<script src="../dream/mixin_promise.js" type="text/javascript"></script> <script src="../dream/mixin_promise.js" type="text/javascript"></script>
<script src="jsplumb.js" type="text/javascript"></script> <script src="jsplumb.js" type="text/javascript"></script>
<script id="node-template" type="text/x-handlebars-template">
<div class="window {{class}}"
id="{{element_id}}"
title="{{title}}">
<a href="{{name_href}}">{{name}}</a>
<div class="ep"></div>
</div>
</script>
<script id="popup-edit-template" type="text/x-handlebars-template">
<div id="edit-popup" data-position-to="origin">
<div data-role="header" data-theme="a">
<h1 class="node_class">Edit properties</h1>
<!-- XXX add this for jquery mobile version.
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
-->
</div>
<br/>
<form class="ui-content">
<fieldset></fieldset>
<input type="button" value="Delete" class="graph_editor_delete_button">
<input type="submit" value="Validate" class="graph_editor_validate_button">
</form>
</div>
</script>
</head> </head>
<body> <body>
<div class="graph_container"></div> <div class="graph_container"></div>
<div class="dummy_window"></div> <div class="dummy_window"></div>
</body> </body>
</html> </html>
\ No newline at end of file
body {
margin: 0px;
}
.graph_container { .graph_container {
position: relative; position: relative;
font-size: 80%; font-size: 0.8em;
border: 1px solid #999; width: 100vw;
height: 100vh;
min-width: 400px;
min-height: 1200px;
overflow: hidden; overflow: hidden;
background-color: #eaedef; background-color: #eaedef;
text-align: center; text-align: center;
} font-family: helvetica;
.selected {
color: #bd0b0b!important
} }
.window, .window,
...@@ -26,6 +25,7 @@ ...@@ -26,6 +25,7 @@
-webkit-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa -moz-box-shadow: 2px 2px 19px #aaa
} }
path, path,
._jsPlumb_endpoint { ._jsPlumb_endpoint {
cursor: pointer cursor: pointer
...@@ -46,6 +46,11 @@ path, ...@@ -46,6 +46,11 @@ path,
._jsPlumb_overlay { ._jsPlumb_overlay {
z-index: 23 z-index: 23
} }
._jsPlumb_overlay._jsPlumb_hover {
z-index: 25!important;
font-size: 1.2em;
font-weight: bold;
}
._jsPlumb_connector._jsPlumb_hover { ._jsPlumb_connector._jsPlumb_hover {
z-index: 21!important z-index: 21!important
} }
...@@ -58,8 +63,7 @@ path, ...@@ -58,8 +63,7 @@ path,
filter: alpha(opacity=80); filter: alpha(opacity=80);
background-color: #fff; background-color: #fff;
color: #000; color: #000;
font-family: helvetica; padding: .5em;
padding: .5em
} }
.window, .window,
.dummy_window { .dummy_window {
...@@ -69,12 +73,9 @@ path, ...@@ -69,12 +73,9 @@ path,
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
color: #000; color: #000;
font-family: serif;
font-style: italic;
padding-top: .9em; padding-top: .9em;
font-size: .9em; font-size: .9em;
cursor: move; cursor: move;
font-size: 11px;
-webkit-transition: background-color .1s ease-in; -webkit-transition: background-color .1s ease-in;
-moz-transition: background-color .1s ease-in; -moz-transition: background-color .1s ease-in;
transition: background-color .1s ease-in; transition: background-color .1s ease-in;
...@@ -83,13 +84,15 @@ path, ...@@ -83,13 +84,15 @@ path,
.window:hover { .window:hover {
background-color: #5c96bc; background-color: #5c96bc;
background-image: none; background-image: none;
color: #fff color: #fff;
font-weight: bold;
} }
.dummy_window { .dummy_window {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
visibility: hidden visibility: hidden;
z-index: -1;
} }
.ep { .ep {
position: absolute; position: absolute;
...@@ -109,8 +112,10 @@ path, ...@@ -109,8 +112,10 @@ path,
.dragHover { .dragHover {
background-color: #1e8151; background-color: #1e8151;
background-image: none; background-image: none;
color: #fff color: #fff;
font-weight: bold;
} }
path { path {
cursor: pointer cursor: pointer
} }
\ No newline at end of file
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
(function (RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser, Springy) { (function (RSVP, rJS, $, jsPlumb, Handlebars, loopEventListener, promiseEventListener, DOMParser, Springy) {
"use strict"; "use strict";
/* TODO: /* TODO:
* less dependancies ( promise event listener ? ) * less dependencies ( promise event listener ? )
* no more handlebars * no more handlebars
* id should not always be modifiable * id should not always be modifiable
* drop zoom level * drop zoom level
...@@ -31,9 +31,30 @@ ...@@ -31,9 +31,30 @@
*/ */
var gadget_klass = rJS(window); var gadget_klass = rJS(window);
var domParser = new DOMParser(); var domParser = new DOMParser();
var node_template_source = gadget_klass.__template_element.getElementById("node-template").innerHTML; var node_template = Handlebars.compile(
var node_template = Handlebars.compile(node_template_source); ' <div class="window {{class}}"'
var popup_edit_template = gadget_klass.__template_element.getElementById("popup-edit-template").innerHTML; + ' id="{{element_id}}"'
+ ' title="{{title}}">'
+ ' {{name}}'
+ ' <div class="ep"></div>'
+ '</div>'
);
var popup_edit_template = (
' <div id="edit-popup" data-position-to="origin">'
+ ' <div data-role="header" data-theme="a">'
+ ' <h1 class="node_class">Edit properties</h1>'
+ ' <!-- XXX add this for jquery mobile version.'
+ ' <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>'
+ ' -->'
+ ' </div>'
+ ' <br/>'
+ ' <form class="ui-content">'
+ ' <fieldset></fieldset>'
+ ' <input type="button" value="Delete" class="graph_editor_delete_button">'
+ ' <input type="submit" value="Validate" class="graph_editor_validate_button">'
+ ' </form>'
+ '</div>'
);
function layoutGraph(graph_data) { function layoutGraph(graph_data) {
// Promise returning the graph once springy calculated the layout. // Promise returning the graph once springy calculated the layout.
...@@ -204,8 +225,8 @@ ...@@ -204,8 +225,8 @@
function updateConnectionData(gadget, connection, remove) { function updateConnectionData(gadget, connection, remove) {
if (connection.ignoreEvent) { if (connection.ignoreEvent) {
// this hack is for edge edition. Maybe there I missed one thing and // this hack is for edge edition and when the graph is re-rendered.
// there is a better way. // Maybe there I missed one thing and there is a better way.
return; return;
} }
if (remove) { if (remove) {
...@@ -353,25 +374,11 @@ ...@@ -353,25 +374,11 @@
function addEdge(gadget, edge_id, edge_data) { function addEdge(gadget, edge_id, edge_data) {
var overlays = []; var overlays = [];
var connection; var connection;
var label = '';
if (edge_data.name) { if (edge_data.name) {
label = edge_data.name;
if (edge_data.path) {
label = label.link(edge_data.path);
}
}
if (edge_data.name_path_dict) {
var linked_name_list = [];
for (var name in edge_data.name_path_dict) {
linked_name_list.push(name.link(edge_data.name_path_dict[name]));
}
label = linked_name_list.join(', ');
}
if (label) {
overlays = [ overlays = [
["Label", { ["Label", {
cssClass: "l1 component label", cssClass: "l1 component label",
label: label label: edge_data.name
}] }]
]; ];
} }
...@@ -491,6 +498,82 @@ ...@@ -491,6 +498,82 @@
return clone(expanded_class_definition); return clone(expanded_class_definition);
} }
function openEdgeEditionDialog(gadget, connection) {
var edge_id = connection.id;
var edge_data = gadget.props.data.graph.edge[edge_id];
var edit_popup = $(gadget.props.element).find("#popup-edit-template");
var schema;
var fieldset_element;
var delete_promise;
var class_definition = gadget.props.data.class_definition[edge_data._class];
if (class_definition === undefined) {
return;
}
schema = expandSchema(class_definition, gadget.props.data);
// We do not edit source & destination on edge this way.
delete schema.properties.source;
delete schema.properties.destination;
gadget.props.element.insertAdjacentHTML("beforeend", popup_edit_template);
edit_popup = $(gadget.props.element).find("#edit-popup");
edit_popup.find(".node_class").text(connection.name || connection._class);
fieldset_element = edit_popup.find("fieldset")[0];
edit_popup.dialog();
edit_popup.show();
function save_promise(fieldset_gadget) {
return new RSVP.Queue().push(function () {
return promiseEventListener(edit_popup.find(".graph_editor_validate_button")[0], "click", false);
}).push(function (evt) {
var data = {
id: $(evt.target[1]).val(),
data: {}
};
return fieldset_gadget.getContent().then(function (r) {
$.extend(data.data, gadget.props.data.graph.edge[connection.id]);
$.extend(data.data, r);
// to redraw, we remove the edge and add again.
// but we want to disable events on connection, since event
// handling promise are executed asynchronously in undefined order,
// we cannot just remove and /then/ add, because the new edge is
// added before the old is removed.
connection.ignoreEvent = true;
gadget.props.jsplumb_instance.detach(connection);
addEdge(gadget, r.id, data.data);
});
});
}
delete_promise = new RSVP.Queue().push(function () {
return promiseEventListener(edit_popup.find(".graph_editor_delete_button")[0], "click", false);
}).push(function () {
// connectionDetached event will remove the edge from data
gadget.props.jsplumb_instance.detach(connection);
});
return gadget.declareGadget("dream_graph_editor/fieldset/index.html", {
element: fieldset_element,
scope: "fieldset"
}).push(function (fieldset_gadget) {
return RSVP.all([fieldset_gadget, fieldset_gadget.render({
value: edge_data,
property_definition: schema
}, edge_id)]);
}).push(function (fieldset_gadget) {
edit_popup.dialog("open");
return fieldset_gadget[0];
}).push(function (fieldset_gadget) {
fieldset_gadget.startService(); // XXX
return fieldset_gadget;
}).push(function (fieldset_gadget) {
// Expose the dialog handling promise so that we can wait for it in
// test.
gadget.props.dialog_promise = RSVP.any([save_promise(fieldset_gadget, edge_id), delete_promise]);
return gadget.props.dialog_promise;
}).push(function () {
edit_popup.dialog("close");
edit_popup.remove();
delete gadget.props.dialog_promise;
});
}
function openNodeEditionDialog(gadget, element) { function openNodeEditionDialog(gadget, element) {
var node_id = getNodeId(gadget, element.id); var node_id = getNodeId(gadget, element.id);
var node_data = gadget.props.data.graph.node[node_id]; var node_data = gadget.props.data.graph.node[node_id];
...@@ -544,7 +627,7 @@ ...@@ -544,7 +627,7 @@
}).push(function () { }).push(function () {
return removeElement(gadget, node_id); return removeElement(gadget, node_id);
}); });
return gadget.declareGadget("../fieldset/index.html", { return gadget.declareGadget("dream_graph_editor/fieldset/index.html", {
element: fieldset_element, element: fieldset_element,
scope: "fieldset" scope: "fieldset"
}).push(function (fieldset_gadget) { }).push(function (fieldset_gadget) {
...@@ -588,6 +671,12 @@ ...@@ -588,6 +671,12 @@
}); });
} }
function waitForConnectionClick(gadget) {
return loopJsplumbBind(gadget, "click", function (connection) {
return openEdgeEditionDialog(gadget, connection);
});
}
function addNode(gadget, node_id, node_data) { function addNode(gadget, node_id, node_data) {
var render_element = $(gadget.props.main); var render_element = $(gadget.props.main);
var class_definition = gadget.props.data.class_definition[node_data._class]; var class_definition = gadget.props.data.class_definition[node_data._class];
...@@ -612,8 +701,7 @@ ...@@ -612,8 +701,7 @@
"class": node_data._class.replace(".", "-"), "class": node_data._class.replace(".", "-"),
element_id: dom_element_id, element_id: dom_element_id,
title: node_data.name || node_data.id, title: node_data.name || node_data.id,
name: node_data.name || node_data.id, name: node_data.name || node_data.id
name_href: node_data.path
}), "text/html").querySelector(".window"); }), "text/html").querySelector(".window");
render_element.append(domElement); render_element.append(domElement);
box = $(gadget.props.element).find("#" + dom_element_id); box = $(gadget.props.element).find("#" + dom_element_id);
...@@ -623,10 +711,6 @@ ...@@ -623,10 +711,6 @@
} }
box.css("top", absolute_position[1]); box.css("top", absolute_position[1]);
box.css("left", absolute_position[0]); box.css("left", absolute_position[0]);
if (node_data.is_initial_state) {
box.css("border", "double #000000");
box.css("font-weight", "bold");
}
updateNodeStyle(gadget, dom_element_id); updateNodeStyle(gadget, dom_element_id);
draggable(gadget); draggable(gadget);
// XXX make only this element draggable. // XXX make only this element draggable.
...@@ -731,6 +815,20 @@ ...@@ -731,6 +815,20 @@
} }
}); });
*/ */
// reset previous graph, if any.
if ($(".window", this.props.element).length) {
$.each(
// disable the "delete" event, otherwise after render load the
// graph, loopJsplumbBind events will process the connection deleted
// events
this.props.jsplumb_instance.getAllConnections(),
function (i, connection) {
connection.ignoreEvent = true;
});
this.props.jsplumb_instance.reset();
$(".window", this.props.element).remove();
}
if (data) { if (data) {
this.props.data = JSON.parse(data); this.props.data = JSON.parse(data);
...@@ -803,7 +901,8 @@ ...@@ -803,7 +901,8 @@
return RSVP.all([ return RSVP.all([
waitForDrop(gadget), waitForDrop(gadget),
waitForConnection(gadget), waitForConnection(gadget),
waitForConnectionDetached(gadget) waitForConnectionDetached(gadget),
waitForConnectionClick(gadget)
]); ]);
}); });
......
/**
seedrandom.js
=============
Seeded random number generator for Javascript.
version 2.3.10
Author: David Bau
Date: 2014 Sep 20
Can be used as a plain script, a node.js module or an AMD module.
Script tag usage
----------------
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js">
</script>
// Sets Math.random to a PRNG initialized using the given explicit seed.
Math.seedrandom('hello.');
console.log(Math.random()); // Always 0.9282578795792454
console.log(Math.random()); // Always 0.3752569768646784
// Sets Math.random to an ARC4-based PRNG that is autoseeded using the
// current time, dom state, and other accumulated local entropy.
// The generated seed string is returned.
Math.seedrandom();
console.log(Math.random()); // Reasonably unpredictable.
// Seeds using the given explicit seed mixed with accumulated entropy.
Math.seedrandom('added entropy.', { entropy: true });
console.log(Math.random()); // As unpredictable as added entropy.
// Use "new" to create a local prng without altering Math.random.
var myrng = new Math.seedrandom('hello.');
console.log(myrng()); // Always 0.9282578795792454
Node.js usage
-------------
npm install seedrandom
// Local PRNG: does not affect Math.random.
var seedrandom = require('seedrandom');
var rng = seedrandom('hello.');
console.log(rng()); // Always 0.9282578795792454
// Autoseeded ARC4-based PRNG.
rng = seedrandom();
console.log(rng()); // Reasonably unpredictable.
// Global PRNG: set Math.random.
seedrandom('hello.', { global: true });
console.log(Math.random()); // Always 0.9282578795792454
// Mixing accumulated entropy.
rng = seedrandom('added entropy.', { entropy: true });
console.log(rng()); // As unpredictable as added entropy.
Require.js usage
----------------
Similar to node.js usage:
bower install seedrandom
require(['seedrandom'], function(seedrandom) {
var rng = seedrandom('hello.');
console.log(rng()); // Always 0.9282578795792454
});
Network seeding
---------------
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js">
</script>
<!-- Seeds using urandom bits from a server. -->
<script src="//jsonlib.appspot.com/urandom?callback=Math.seedrandom">
</script>
<!-- Seeds mixing in random.org bits -->
<script>
(function(x, u, s){
try {
// Make a synchronous request to random.org.
x.open('GET', u, false);
x.send();
s = unescape(x.response.trim().replace(/^|\s/g, '%'));
} finally {
// Seed with the response, or autoseed on failure.
Math.seedrandom(s, !!s);
}
})(new XMLHttpRequest, 'https://www.random.org/integers/' +
'?num=256&min=0&max=255&col=1&base=16&format=plain&rnd=new');
</script>
Reseeding using user input
--------------------------
var seed = Math.seedrandom(); // Use prng with an automatic seed.
document.write(Math.random()); // Pretty much unpredictable x.
var rng = new Math.seedrandom(seed); // A new prng with the same seed.
document.write(rng()); // Repeat the 'unpredictable' x.
function reseed(event, count) { // Define a custom entropy collector.
var t = [];
function w(e) {
t.push([e.pageX, e.pageY, +new Date]);
if (t.length &lt; count) { return; }
document.removeEventListener(event, w);
Math.seedrandom(t, { entropy: true });
}
document.addEventListener(event, w);
}
reseed('mousemove', 100); // Reseed after 100 mouse moves.
The "pass" option can be used to get both the prng and the seed.
The following returns both an autoseeded prng and the seed as an object,
without mutating Math.random:
var obj = Math.seedrandom(null, { pass: function(prng, seed) {
return { random: prng, seed: seed };
}});
Version notes
-------------
The random number sequence is the same as version 1.0 for string seeds.
* Version 2.0 changed the sequence for non-string seeds.
* Version 2.1 speeds seeding and uses window.crypto to autoseed if present.
* Version 2.2 alters non-crypto autoseeding to sweep up entropy from plugins.
* Version 2.3 adds support for "new", module loading, and a null seed arg.
* Version 2.3.1 adds a build environment, module packaging, and tests.
* Version 2.3.4 fixes bugs on IE8, and switches to MIT license.
* Version 2.3.6 adds a readable options object argument.
* Version 2.3.10 adds support for node.js crypto (contributed by ctd1500).
The standard ARC4 key scheduler cycles short keys, which means that
seedrandom('ab') is equivalent to seedrandom('abab') and 'ababab'.
Therefore it is a good idea to add a terminator to avoid trivial
equivalences on short string seeds, e.g., Math.seedrandom(str + '\0').
Starting with version 2.0, a terminator is added automatically for
non-string seeds, so seeding with the number 111 is the same as seeding
with '111\0'.
When seedrandom() is called with zero args or a null seed, it uses a
seed drawn from the browser crypto object if present. If there is no
crypto support, seedrandom() uses the current time, the native rng,
and a walk of several DOM objects to collect a few bits of entropy.
Each time the one- or two-argument forms of seedrandom are called,
entropy from the passed seed is accumulated in a pool to help generate
future seeds for the zero- and two-argument forms of seedrandom.
On speed - This javascript implementation of Math.random() is several
times slower than the built-in Math.random() because it is not native
code, but that is typically fast enough. Some details (timings on
Chrome 25 on a 2010 vintage macbook):
* seeded Math.random() - avg less than 0.0002 milliseconds per call
* seedrandom('explicit.') - avg less than 0.2 milliseconds per call
* seedrandom('explicit.', true) - avg less than 0.2 milliseconds per call
* seedrandom() with crypto - avg less than 0.2 milliseconds per call
Autoseeding without crypto is somewhat slower, about 20-30 milliseconds on
a 2012 windows 7 1.5ghz i5 laptop, as seen on Firefox 19, IE 10, and Opera.
Seeded rng calls themselves are fast across these browsers, with slowest
numbers on Opera at about 0.0005 ms per seeded Math.random().
LICENSE (MIT)
-------------
Copyright 2014 David Bau.
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/**
* All code is in an anonymous closure to keep the global namespace clean.
*/
(function (
global, pool, math, width, chunks, digits, module, define, rngname) {
//
// The following constants are related to IEEE 754 limits.
//
var startdenom = math.pow(width, chunks),
significance = math.pow(2, digits),
overflow = significance * 2,
mask = width - 1,
nodecrypto;
//
// seedrandom()
// This is the seedrandom function described above.
//
var impl = math['seed' + rngname] = function(seed, options, callback) {
var key = [];
options = (options == true) ? { entropy: true } : (options || {});
// Flatten the seed string or build one from local entropy if needed.
var shortseed = mixkey(flatten(
options.entropy ? [seed, tostring(pool)] :
(seed == null) ? autoseed() : seed, 3), key);
// Use the seed to initialize an ARC4 generator.
var arc4 = new ARC4(key);
// Mix the randomness into accumulated entropy.
mixkey(tostring(arc4.S), pool);
// Calling convention: what to return as a function of prng, seed, is_math.
return (options.pass || callback ||
// If called as a method of Math (Math.seedrandom()), mutate Math.random
// because that is how seedrandom.js has worked since v1.0. Otherwise,
// it is a newer calling convention, so return the prng directly.
function(prng, seed, is_math_call) {
if (is_math_call) { math[rngname] = prng; return seed; }
else return prng;
})(
// This function returns a random double in [0, 1) that contains
// randomness in every bit of the mantissa of the IEEE 754 value.
function() {
var n = arc4.g(chunks), // Start with a numerator n < 2 ^ 48
d = startdenom, // and denominator d = 2 ^ 48.
x = 0; // and no 'extra last byte'.
while (n < significance) { // Fill up all significant digits by
n = (n + x) * width; // shifting numerator and
d *= width; // denominator and generating a
x = arc4.g(1); // new least-significant-byte.
}
while (n >= overflow) { // To avoid rounding up, before adding
n /= 2; // last byte, shift everything
d /= 2; // right using integer math until
x >>>= 1; // we have exactly the desired bits.
}
return (n + x) / d; // Form the number within [0, 1).
}, shortseed, 'global' in options ? options.global : (this == math));
};
//
// ARC4
//
// An ARC4 implementation. The constructor takes a key in the form of
// an array of at most (width) integers that should be 0 <= x < (width).
//
// The g(count) method returns a pseudorandom integer that concatenates
// the next (count) outputs from ARC4. Its return value is a number x
// that is in the range 0 <= x < (width ^ count).
//
/** @constructor */
function ARC4(key) {
var t, keylen = key.length,
me = this, i = 0, j = me.i = me.j = 0, s = me.S = [];
// The empty key [] is treated as [0].
if (!keylen) { key = [keylen++]; }
// Set up S using the standard key scheduling algorithm.
while (i < width) {
s[i] = i++;
}
for (i = 0; i < width; i++) {
s[i] = s[j = mask & (j + key[i % keylen] + (t = s[i]))];
s[j] = t;
}
// The "g" method returns the next (count) outputs as one number.
(me.g = function(count) {
// Using instance members instead of closure state nearly doubles speed.
var t, r = 0,
i = me.i, j = me.j, s = me.S;
while (count--) {
t = s[i = mask & (i + 1)];
r = r * width + s[mask & ((s[i] = s[j = mask & (j + t)]) + (s[j] = t))];
}
me.i = i; me.j = j;
return r;
// For robust unpredictability, the function call below automatically
// discards an initial batch of values. This is called RC4-drop[256].
// See http://google.com/search?q=rsa+fluhrer+response&btnI
})(width);
}
//
// flatten()
// Converts an object tree to nested arrays of strings.
//
function flatten(obj, depth) {
var result = [], typ = (typeof obj), prop;
if (depth && typ == 'object') {
for (prop in obj) {
try { result.push(flatten(obj[prop], depth - 1)); } catch (e) {}
}
}
return (result.length ? result : typ == 'string' ? obj : obj + '\0');
}
//
// mixkey()
// Mixes a string seed into a key that is an array of integers, and
// returns a shortened string seed that is equivalent to the result key.
//
function mixkey(seed, key) {
var stringseed = seed + '', smear, j = 0;
while (j < stringseed.length) {
key[mask & j] =
mask & ((smear ^= key[mask & j] * 19) + stringseed.charCodeAt(j++));
}
return tostring(key);
}
//
// autoseed()
// Returns an object for autoseeding, using window.crypto if available.
//
/** @param {Uint8Array|Navigator=} seed */
function autoseed(seed) {
try {
if (nodecrypto) return tostring(nodecrypto.randomBytes(width));
global.crypto.getRandomValues(seed = new Uint8Array(width));
return tostring(seed);
} catch (e) {
return [+new Date, global, (seed = global.navigator) && seed.plugins,
global.screen, tostring(pool)];
}
}
//
// tostring()
// Converts an array of charcodes to a string
//
function tostring(a) {
return String.fromCharCode.apply(0, a);
}
//
// When seedrandom.js is loaded, we immediately mix a few bits
// from the built-in RNG into the entropy pool. Because we do
// not want to interfere with deterministic PRNG state later,
// seedrandom will not call math.random on its own again after
// initialization.
//
mixkey(math[rngname](), pool);
//
// Nodejs and AMD support: export the implementation as a module using
// either convention.
//
if (module && module.exports) {
module.exports = impl;
try {
// When in node.js, try using crypto package for autoseeding.
nodecrypto = require('crypto');
} catch (ex) {}
} else if (define && define.amd) {
define(function() { return impl; });
}
//
// Node.js native crypto support.
//
// End anonymous scope, and pass initial values.
})(
this, // global window object
[], // pool: entropy pool starts empty
Math, // math: package containing random, pow, and seedrandom
256, // width: each RC4 output is 0 <= x < 256
6, // chunks: at least six RC4 outputs for each double
52, // digits: there are 52 significant digits in a double
(typeof module) == 'object' && module, // present in node.js
(typeof define) == 'function' && define, // present with an AMD loader
'random'// rngname: name for Math.random and Math.seedrandom
);
\ No newline at end of file
...@@ -296,7 +296,7 @@ ...@@ -296,7 +296,7 @@
jsplumb_gadget.render(sample_data_graph); jsplumb_gadget.render(sample_data_graph);
}).then(runTest).fail(error_handler).always(start); }).then(runTest).fail(error_handler).always(start);
}); });
test("Node can be connected", function () { test("Nodes can be connected", function () {
var jsplumb_gadget; var jsplumb_gadget;
stop(); stop();
function runTest() { function runTest() {
...@@ -308,6 +308,9 @@ ...@@ -308,6 +308,9 @@
source: node1.id, source: node1.id,
target: node2.id target: node2.id
}); });
// .connect insternal API is asynchronous, but there's no way to wait for the event to be processed.
// for now we just wait for a short delay
return RSVP.delay(1e3);
}).then(function () { }).then(function () {
return jsplumb_gadget.getContent(); return jsplumb_gadget.getContent();
}).then(function (content) { }).then(function (content) {
...@@ -588,5 +591,24 @@ ...@@ -588,5 +591,24 @@
}); });
}).fail(error_handler).always(start); }).fail(error_handler).always(start);
}); });
test("Gadget can be rendered multiple times", function () {
var jsplumb_gadget;
stop();
g.declareGadget("./index.html", {
element: document.querySelector("#test-element")
}).then(function (new_gadget) {
jsplumb_gadget = new_gadget;
return jsplumb_gadget.render(sample_data_graph);
}).then(function () {
return jsplumb_gadget.getContent();
}).then(function () {
return jsplumb_gadget.render(sample_data_graph);
}).then(function () {
return jsplumb_gadget.getContent();
}).then(function (content) {
equal(sample_data_graph, content);
equal($(".window", document.querySelector("#test-element")).length, 2, "Graph is rendered only once");
}).fail(error_handler).always(start);
});
}); });
}(rJS, JSON, QUnit, RSVP, jQuery)); }(rJS, JSON, QUnit, RSVP, jQuery));
\ No newline at end of file
...@@ -24,13 +24,6 @@ ...@@ -24,13 +24,6 @@
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE. * OTHER DEALINGS IN THE SOFTWARE.
*/ */
// Nexedi patch: use seedrandom instead of Math.random to always get the same
// graph representation this will in order to be able to use seed and thus
// get the same set of random number, used to set the place of the graph nodes
var seeded_random = new Math.seedrandom('Using seedrandom for getting same set'
+ 'of pseudorandom numbers.');
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module. // AMD. Register as an anonymous module.
...@@ -584,7 +577,7 @@ var seeded_random = new Math.seedrandom('Using seedrandom for getting same set' ...@@ -584,7 +577,7 @@ var seeded_random = new Math.seedrandom('Using seedrandom for getting same set'
}; };
Vector.random = function() { Vector.random = function() {
return new Vector(10.0 * (seeded_random() - 0.5), 10.0 * (seeded_random() - 0.5)); return new Vector(10.0 * (Math.random() - 0.5), 10.0 * (Math.random() - 0.5));
}; };
Vector.prototype.add = function(v2) { Vector.prototype.add = function(v2) {
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="dream_graph_editor/lib/jquery-ui.css">
<link rel="stylesheet" href="dream_graph_editor/jsplumb/jsplumb.css">
<title>Graph Editor</title>
<script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery-ui.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/jquery.jsplumb.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/handlebars.min.js" type="text/javascript"></script>
<script src="dream_graph_editor/lib/springy.js" type="text/javascript"></script>
<script src="dream_graph_editor/dream/mixin_promise.js" type="text/javascript"></script>
<script src="dream_graph_editor/jsplumb/jsplumb.js" type="text/javascript"></script>
<body>
<div class="graph_container"></div>
<div class="dummy_window"></div>
</body>
</html>
...@@ -6,17 +6,13 @@ ...@@ -6,17 +6,13 @@
</pickle> </pickle>
<pickle> <pickle>
<dictionary> <dictionary>
<item>
<key> <string>_Cacheable__manager_id</string> </key>
<value> <string>http_cache</string> </value>
</item>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>seedrandom.js</string> </value> <value> <string>gadget_graph_editor.html</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
<value> <string>application/javascript</string> </value> <value> <string>text/html</string> </value>
</item> </item>
<item> <item>
<key> <string>precondition</string> </key> <key> <string>precondition</string> </key>
......
...@@ -2,8 +2,6 @@ import json ...@@ -2,8 +2,6 @@ import json
business_process = sci['object'] business_process = sci['object']
graph = business_process.getProperty('jsplumb_graph') graph = business_process.getProperty('jsplumb_graph')
assert graph
if graph: if graph:
portal = business_process.getPortalObject() portal = business_process.getPortalObject()
trade_state_dict = dict(start=None, end=None) trade_state_dict = dict(start=None, end=None)
......
...@@ -13,7 +13,11 @@ Run existing qunit test in zelenium framework, to easily integrate it in current ...@@ -13,7 +13,11 @@ Run existing qunit test in zelenium framework, to easily integrate it in current
<td tal:content="string:${context/portal_url}/dream_graph_editor/jsplumb/test.html"></td> <td tal:content="string:${context/portal_url}/dream_graph_editor/jsplumb/test.html"></td>
<td></td> <td></td>
</tr> </tr>
<tr>
<td>waitForTextPresent</td>
<td>Running</td>
<td></td>
</tr>
<tr> <tr>
<td>waitForTextPresent</td> <td>waitForTextPresent</td>
<td>Tests completed in </td> <td>Tests completed in </td>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="Image" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>testWorkflowGraph-reference-snapshot-1.png</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>image/png</string> </value>
</item>
<item>
<key> <string>height</string> </key>
<value> <int>284</int> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>width</string> </key>
<value> <int>1127</int> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testWorkflowGraph</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode>Workflow Graph</unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html>
<head><title tal:content="template/title"></title></head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="4" tal:content="template/title">
</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td tal:content="string:${context/portal_url}/portal_workflow/validation_workflow/Workflow_viewGraph"></td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "workflow-state")][4]</td>
<td></td>
</tr>
<tr>
<td>pause</td>
<td>1000</td>
<td></td>
</tr>
<tr><td colspan="3"><b>Verify the rendering of the graph matches our reference snapshot</b></td></tr>
<tr>
<td>verifyImageMatchSnapshot</td>
<td>//body</td>
<td>1</td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>Base_edit:method</td>
<td></td>
</tr>
<tr>
<td>assertPortalStatusMessage</td>
<td>Data updated.</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
\ No newline at end of file
...@@ -233,7 +233,7 @@ ...@@ -233,7 +233,7 @@
</item> </item>
<item> <item>
<key> <string>gadget_url</string> </key> <key> <string>gadget_url</string> </key>
<value> <string>dream_graph_editor/jsplumb/index.html</string> </value> <value> <string>gadget_graph_editor.html</string> </value>
</item> </item>
<item> <item>
<key> <string>hidden</string> </key> <key> <string>hidden</string> </key>
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
</item> </item>
<item> <item>
<key> <string>js_sandbox</string> </key> <key> <string>js_sandbox</string> </key>
<value> <string></string> </value> <value> <string>iframe</string> </value>
</item> </item>
<item> <item>
<key> <string>renderjs_extra</string> </key> <key> <string>renderjs_extra</string> </key>
......
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</item> </item>
<item> <item>
<key> <string>title</string> </key> <key> <string>title</string> </key>
<value> <unicode></unicode> </value> <value> <unicode>Test Item View Tracking List</unicode> </value>
</item> </item>
</dictionary> </dictionary>
</pickle> </pickle>
......
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
xmlns:metal="http://xml.zope.org/namespaces/metal"> xmlns:metal="http://xml.zope.org/namespaces/metal">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Item View Tracking List</title> <title tal:content="template/title"></title>
</head> </head>
<body> <body>
<table cellpadding="1" cellspacing="1" border="1"> <table cellpadding="1" cellspacing="1" border="1">
<thead> <thead>
<tr><td rowspan="1" colspan="3">TTest Item View Tracking List/td></tr> <tr><td rowspan="1" colspan="3" tal:content="template/title"></td></tr>
</thead><tbody> </thead><tbody>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForItemRenderjsUi/macros/init" /> <tal:block metal:use-macro="here/Zuite_viewCommonTemplateForItemRenderjsUi/macros/init" />
<tal:block metal:use-macro="here/Zuite_CommonTemplateForItemRenderjsUi/macros/prepare_data" /> <tal:block metal:use-macro="here/Zuite_viewCommonTemplateForItemRenderjsUi/macros/prepare_data" />
<tal:block metal:use-macro="here/Zuite_CommonTemplateForItemRenderjsUi/macros/view_item_tracking_list" /> <tal:block metal:use-macro="here/Zuite_viewCommonTemplateForItemRenderjsUi/macros/view_item_tracking_list" />
</tbody></table> </tbody></table>
</body> </body>
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="PythonScript" module="Products.PythonScripts.PythonScript"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>Script_magic</string> </key>
<value> <int>3</int> </value>
</item>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_container</string> </key>
<value> <string>container</string> </value>
</item>
<item>
<key> <string>name_context</string> </key>
<value> <string>context</string> </value>
</item>
<item>
<key> <string>name_m_self</string> </key>
<value> <string>script</string> </value>
</item>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>_params</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>ERP5Site_createItemRJSZuiteItemAndPackingList</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
<value> <string>ItemRJSZuite_deleteData</string> </value> <value> <string>ERP5Site_deleteItemRJSZuiteData</string> </value>
</item> </item>
</dictionary> </dictionary>
</pickle> </pickle>
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
<value> <string>Zuite_CommonTemplateForItemRenderjsUi</string> </value> <value> <string>Zuite_viewCommonTemplateForItemRenderjsUi</string> </value>
</item> </item>
<item> <item>
<key> <string>output_encoding</string> </key> <key> <string>output_encoding</string> </key>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</tr> </tr>
<tr> <tr>
<td>open</td> <td>open</td>
<td>${base_url}/ItemRJSZuite_deleteData</td> <td>${base_url}/ERP5Site_deleteItemRJSZuiteData</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
...@@ -35,13 +35,13 @@ ...@@ -35,13 +35,13 @@
</tal:block> </tal:block>
<tal:block metal:define-macro="prepare_data"> <tal:block metal:define-macro="prepare_data">
<tal:block metal:use-macro="here/Zuite_CommonTemplateForItemRenderjsUi/macros/delete_data" /> <tal:block metal:use-macro="here/Zuite_viewCommonTemplateForItemRenderjsUi/macros/delete_data" />
<tr> <tr>
<td colspan="3"><b>Create Item Test Data</b></td> <td colspan="3"><b>Create Item Test Data</b></td>
</tr> </tr>
<tr> <tr>
<td>open</td> <td>open</td>
<td>${base_url}/ItemRJSZuite_createItemAndPackingList</td> <td>${base_url}/ERP5Site_createItemRJSZuiteItemAndPackingList</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
...@@ -86,6 +86,29 @@ ...@@ -86,6 +86,29 @@
<td>Purchase Packing List Line</td> <td>Purchase Packing List Line</td>
<td></td> <td></td>
</tr> </tr>
<!-- Graph editor to visualize tracking -->
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "node")][2]</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
<tal:block tal:define="click_configuration python: {'text': 'Sale Packing List Line'}"> <tal:block tal:define="click_configuration python: {'text': 'Sale Packing List Line'}">
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_page_link" /> <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_page_link" />
</tal:block> </tal:block>
......
erp5_item erp5_item
erp5_web_renderjs_ui_test erp5_web_renderjs_ui_test
\ No newline at end of file erp5_graph_editor
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testBusinessProcess</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode>Test Business Process</unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html>
<head><title tal:content="template/title"></title></head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="4" tal:content="template/title"></td></tr>
</thead>
<tbody tal:define="init_method string:Zuite_createBusinessProcessForTradeZuite;">
<tal:block metal:use-macro="here/Zuite_CommonTemplateForTradeZuite/macros/init" />
<tr>
<td>open</td>
<td>${base_url}/web_site_module/renderjs_runner/#/business_process_module/test_trade_ui_test_business_process?editable=true</td>
<td></td>
</tr>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
</tbody></table>
</body>
</html>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testBusinessProcessGraph</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode>Test Business Process Graph</unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html>
<head><title tal:content="template/title"></title></head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="4" tal:content="template/title"></td></tr>
</thead>
<tbody tal:define="init_method string:Zuite_createBusinessProcessForTradeZuite;">
<!-- Setup {{{ -->
<tal:block metal:use-macro="here/Zuite_CommonTemplateForTradeZuite/macros/init" />
<tr>
<td>open</td>
<td>${base_url}/web_site_module/renderjs_runner/#/business_process_module/test_trade_ui_test_business_process?editable=true</td>
<td></td>
</tr>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
<!-- }}} -->
<tal:block tal:define="click_configuration python: {'text': 'Views'}">
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_header_link" />
</tal:block>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
<tal:block tal:define="click_configuration python: {'text': 'Graph Editor'}">
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/click_on_page_link" />
</tal:block>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "erp5-business_process")][5]</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/save" />
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-scope="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "erp5-business_process")][5]</td>
<td></td>
</tr>
<tr>
<td>assertElementNotPresent</td>
<td>//div[contains(@class, "erp5-business_process")][6]</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testBusinessProcess</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode>Test Business Process</unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html>
<head><title tal:content="template/title"></title></head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="4" tal:content="template/title"></td></tr>
</thead>
<tbody tal:define="init_method string:Zuite_createBusinessProcessForTradeZuite;">
<!-- Setup {{{ -->
<tal:block metal:use-macro="here/Zuite_CommonTemplateForTradeZuite/macros/init" />
<!-- }}} -->
<tr>
<td>open</td>
<td>${base_url}/business_process_module/test_trade_ui_test_business_process/</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>Base_edit:method</td>
<td></td>
</tr>
<tr>
<td>assertPortalStatusMessage</td>
<td>Data updated.</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testBusinessProcessGraph</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode>Test Business Process Graph</unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html>
<head><title tal:content="template/title"></title></head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="4" tal:content="template/title"></td></tr>
</thead>
<tbody tal:define="init_method string:Zuite_createBusinessProcessForTradeZuite;">
<!-- Setup {{{ -->
<tal:block metal:use-macro="here/Zuite_CommonTemplateForTradeZuite/macros/init" />
<!-- }}} -->
<tr>
<td>open</td>
<td>${base_url}/business_process_module/test_trade_ui_test_business_process/BusinessProcess_viewGraphEditor</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "erp5-business_process")][5]</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
<tr>
<td>clickAndWait</td>
<td>Base_edit:method</td>
<td></td>
</tr>
<tr>
<td>assertPortalStatusMessage</td>
<td>Data updated.</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>//div[@data-gadget-editable="field_my_jsplumb_graph"]//iframe</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[contains(@class, "erp5-business_process")][5]</td>
<td></td>
</tr>
<tr>
<td>selectFrame</td>
<td>relative=top</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
\ No newline at end of file
portal = context.getPortalObject()
# Create trade states
if getattr(portal.portal_categories.trade_state, 'erp5_trade_ui_test_ts', None) is None:
portal.portal_categories.trade_state.newContent(
id='erp5_trade_ui_test_ts'
)
portal.portal_categories.trade_state.erp5_trade_ui_test_ts.newContent(
id='delivered',
title='Delivered'
)
portal.portal_categories.trade_state.erp5_trade_ui_test_ts.newContent(
id='invoiced',
title='Invoiced'
)
# Create trade phases
if getattr(portal.portal_categories.trade_phase, 'erp5_trade_ui_test_tp', None) is None:
portal.portal_categories.trade_phase.newContent(
id='erp5_trade_ui_test_tp'
)
portal.portal_categories.trade_phase.erp5_trade_ui_test_tp.newContent(
id='delivery',
title='Delivery'
)
portal.portal_categories.trade_phase.erp5_trade_ui_test_tp.newContent(
id='invoicing',
title='Invoicing'
)
# Create business process
test_trade_ui_test_client = portal.business_process_module.newContent(
id='test_trade_ui_test_business_process')
test_trade_ui_test_client.newContent(
portal_type='Business Link',
completed_state_list=('delivered', 'stopped'),
frozen_state_list=('delivered', 'stopped'),
predecessor_value=None,
successor_value=portal.portal_categories.trade_state.erp5_trade_ui_test_ts.delivered,
trade_phase_value=portal.portal_categories.trade_phase.erp5_trade_ui_test_tp.delivery,
title='Deliver'
)
test_trade_ui_test_client.newContent(
portal_type='Business Link',
completed_state_list=('delivered', 'stopped'),
frozen_state_list=('delivered', 'stopped'),
predecessor_value=portal.portal_categories.trade_state.erp5_trade_ui_test_ts.delivered,
successor_value=portal.portal_categories.trade_state.erp5_trade_ui_test_ts.invoiced,
trade_phase_value=portal.portal_categories.trade_phase.erp5_trade_ui_test_tp.invoicing,
title='Invoice'
)
# XXX not sure we need such links
test_trade_ui_test_client.newContent(
portal_type='Business Link',
completed_state_list=('delivered', 'stopped'),
frozen_state_list=('delivered', 'stopped'),
predecessor_value=portal.portal_categories.trade_state.erp5_trade_ui_test_ts.invoiced,
successor_value=None,
trade_phase_value=portal.portal_categories.trade_phase.erp5_trade_ui_test_tp.invoicing,
title='Finish'
)
return "Data Created."
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</item> </item>
<item> <item>
<key> <string>id</string> </key> <key> <string>id</string> </key>
<value> <string>ItemRJSZuite_createItemAndPackingList</string> </value> <value> <string>Zuite_createBusinessProcessForTradeZuite</string> </value>
</item> </item>
</dictionary> </dictionary>
</pickle> </pickle>
......
...@@ -8,6 +8,7 @@ object_value_list = [ ...@@ -8,6 +8,7 @@ object_value_list = [
getattr(portal.organisation_module, 'test_trade_ui_test_client', None), getattr(portal.organisation_module, 'test_trade_ui_test_client', None),
getattr(portal.person_module, 'test_trade_ui_test_supplier', None), getattr(portal.person_module, 'test_trade_ui_test_supplier', None),
getattr(portal.person_module, 'test_trade_ui_test_client', None), getattr(portal.person_module, 'test_trade_ui_test_client', None),
getattr(portal.business_process_module, 'test_trade_ui_test_business_process', None),
] + [ ] + [
getattr(portal.getDefaultModule(portal_type), "erp5_trade_ui_test_trade_condition" + suffix, None) getattr(portal.getDefaultModule(portal_type), "erp5_trade_ui_test_trade_condition" + suffix, None)
for portal_type in ("Internal Trade Condition", "Purchase Trade Condition", "Sale Trade Condition") for portal_type in ("Internal Trade Condition", "Purchase Trade Condition", "Sale Trade Condition")
......
erp5_pdm_ui_test erp5_pdm_ui_test
erp5_graph_editor
erp5_trade erp5_trade
erp5_ui_test erp5_ui_test
\ No newline at end of file
...@@ -72,7 +72,9 @@ ...@@ -72,7 +72,9 @@
<item> <item>
<key> <string>center</string> </key> <key> <string>center</string> </key>
<value> <value>
<list/> <list>
<string>my_title</string>
</list>
</value> </value>
</item> </item>
<item> <item>
...@@ -84,9 +86,7 @@ ...@@ -84,9 +86,7 @@
<item> <item>
<key> <string>left</string> </key> <key> <string>left</string> </key>
<value> <value>
<list> <list/>
<string>my_title</string>
</list>
</value> </value>
</item> </item>
<item> <item>
......
...@@ -144,9 +144,7 @@ ...@@ -144,9 +144,7 @@
</item> </item>
<item> <item>
<key> <string>gadget_url</string> </key> <key> <string>gadget_url</string> </key>
<value> <value> <string></string> </value>
<persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
</value>
</item> </item>
<item> <item>
<key> <string>hidden</string> </key> <key> <string>hidden</string> </key>
...@@ -160,6 +158,10 @@ ...@@ -160,6 +158,10 @@
<key> <string>js_sandbox</string> </key> <key> <string>js_sandbox</string> </key>
<value> <string></string> </value> <value> <string></string> </value>
</item> </item>
<item>
<key> <string>renderjs_extra</string> </key>
<value> <string></string> </value>
</item>
<item> <item>
<key> <string>required</string> </key> <key> <string>required</string> </key>
<value> <string></string> </value> <value> <string></string> </value>
...@@ -168,6 +170,14 @@ ...@@ -168,6 +170,14 @@
<key> <string>title</string> </key> <key> <string>title</string> </key>
<value> <string></string> </value> <value> <string></string> </value>
</item> </item>
<item>
<key> <string>validator_field_id</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>validator_form_id</string> </key>
<value> <string></string> </value>
</item>
</dictionary> </dictionary>
</value> </value>
</item> </item>
...@@ -221,7 +231,7 @@ ...@@ -221,7 +231,7 @@
</item> </item>
<item> <item>
<key> <string>gadget_url</string> </key> <key> <string>gadget_url</string> </key>
<value> <string></string> </value> <value> <string>gadget_graph_editor.html</string> </value>
</item> </item>
<item> <item>
<key> <string>hidden</string> </key> <key> <string>hidden</string> </key>
...@@ -233,7 +243,13 @@ ...@@ -233,7 +243,13 @@
</item> </item>
<item> <item>
<key> <string>js_sandbox</string> </key> <key> <string>js_sandbox</string> </key>
<value> <string></string> </value> <value> <string>iframe</string> </value>
</item>
<item>
<key> <string>renderjs_extra</string> </key>
<value>
<list/>
</value>
</item> </item>
<item> <item>
<key> <string>required</string> </key> <key> <string>required</string> </key>
...@@ -243,6 +259,14 @@ ...@@ -243,6 +259,14 @@
<key> <string>title</string> </key> <key> <string>title</string> </key>
<value> <string>Graph</string> </value> <value> <string>Graph</string> </value>
</item> </item>
<item>
<key> <string>validator_field_id</string> </key>
<value> <string>my_core_mode_text_content_validator</string> </value>
</item>
<item>
<key> <string>validator_form_id</string> </key>
<value> <string>erp5_core/Base_viewFieldLibrary</string> </value>
</item>
</dictionary> </dictionary>
</value> </value>
</item> </item>
...@@ -262,17 +286,4 @@ ...@@ -262,17 +286,4 @@
</dictionary> </dictionary>
</pickle> </pickle>
</record> </record>
<record id="3" aka="AAAAAAAAAAM=">
<pickle>
<global name="TALESMethod" module="Products.Formulator.TALESField"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_text</string> </key>
<value> <string>python: context.getPortalObject().restrictedTraverse(\'dream_graph_editor/jsplumb/index.html\').absolute_url()</string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData> </ZopeData>
...@@ -12,6 +12,23 @@ ...@@ -12,6 +12,23 @@
<persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent> <persistent> <string encoding="base64">AAAAAAAAAAI=</string> </persistent>
</value> </value>
</item> </item>
<item>
<key> <string>_local_properties</string> </key>
<value>
<tuple>
<dictionary>
<item>
<key> <string>id</string> </key>
<value> <string>jsplumb_graph</string> </value>
</item>
<item>
<key> <string>type</string> </key>
<value> <string>string</string> </value>
</item>
</dictionary>
</tuple>
</value>
</item>
<item> <item>
<key> <string>_mt_index</string> </key> <key> <string>_mt_index</string> </key>
<value> <value>
...@@ -44,6 +61,10 @@ ...@@ -44,6 +61,10 @@
<key> <string>id</string> </key> <key> <string>id</string> </key>
<value> <string>validation_workflow</string> </value> <value> <string>validation_workflow</string> </value>
</item> </item>
<item>
<key> <string>jsplumb_graph</string> </key>
<value> <string>{"class_definition":{},"graph":{"node":{"state_deleted":{"coordinate":{"top":0.949081048508587,"left":0.9496606334841629},"path":"/erp5/portal_workflow/validation_workflow/state_deleted","_class":"workflow.state","name":"Deleted","is_initial_state":false},"state_invalidated":{"coordinate":{"top":0.949081048508587,"left":0.5264423076923077},"path":"/erp5/portal_workflow/validation_workflow/state_invalidated","_class":"workflow.state","name":"Invalidated","is_initial_state":false},"state_validated":{"coordinate":{"top":0.1385959626393492,"left":0.3545673076923077},"path":"/erp5/portal_workflow/validation_workflow/state_validated","_class":"workflow.state","name":"Validated","is_initial_state":false},"state_draft":{"coordinate":{"top":0.41578788791804766,"left":0.025240384615384616},"path":"/erp5/portal_workflow/validation_workflow/state_draft","_class":"workflow.state","name":"Draft","is_initial_state":true}},"edge":{"transition_to_state_invalidated":{"source":"state_invalidated","destination":"state_invalidated","_class":"workflow.transition","name_path_dict":{"Delete Action":"/erp5/portal_workflow/validation_workflow/transition_delete_action","Validate Action":"/erp5/portal_workflow/validation_workflow/transition_validate_action"}},"state_draft_transition_validate":{"name":"Validate","description":"Validates a document in ERP5","destination":"state_validated","source":"state_draft","path":"/erp5/portal_workflow/validation_workflow/transition_validate","_class":"workflow.transition","transition_id":"transition_validate","actbox_url":null},"state_draft_transition_invalidate":{"name":"Invalidate","description":"This action invalidates a document in ERP5","destination":"state_invalidated","source":"state_draft","path":"/erp5/portal_workflow/validation_workflow/transition_invalidate","_class":"workflow.transition","transition_id":"transition_invalidate","actbox_url":null},"state_validated_transition_invalidate":{"name":"Invalidate","description":"This action invalidates a document in ERP5","destination":"state_invalidated","source":"state_validated","path":"/erp5/portal_workflow/validation_workflow/transition_invalidate","_class":"workflow.transition","transition_id":"transition_invalidate","actbox_url":null},"state_invalidated_transition_delete":{"name":"Delete","description":"Delete a document in ERP5","destination":"state_deleted","source":"state_invalidated","path":"/erp5/portal_workflow/validation_workflow/transition_delete","_class":"workflow.transition","transition_id":"transition_delete","actbox_url":null},"state_invalidated_transition_validate":{"name":"Validate","description":"Validates a document in ERP5","destination":"state_validated","source":"state_invalidated","path":"/erp5/portal_workflow/validation_workflow/transition_validate","_class":"workflow.transition","transition_id":"transition_validate","actbox_url":null},"transition_to_state_validated":{"source":"state_validated","destination":"state_validated","_class":"workflow.transition","name_path_dict":{"Invalidate Action":"/erp5/portal_workflow/validation_workflow/transition_invalidate_action"}},"state_draft_transition_delete":{"name":"Delete","description":"Delete a document in ERP5","destination":"state_deleted","source":"state_draft","path":"/erp5/portal_workflow/validation_workflow/transition_delete","_class":"workflow.transition","transition_id":"transition_delete","actbox_url":null},"transition_to_state_draft":{"source":"state_draft","destination":"state_draft","_class":"workflow.transition","name_path_dict":{"Invalidate Action":"/erp5/portal_workflow/validation_workflow/transition_invalidate_action","Delete Action":"/erp5/portal_workflow/validation_workflow/transition_delete_action","Validate Action":"/erp5/portal_workflow/validation_workflow/transition_validate_action"}}}}}</string> </value>
</item>
<item> <item>
<key> <string>manager_bypass</string> </key> <key> <string>manager_bypass</string> </key>
<value> <int>0</int> </value> <value> <int>0</int> </value>
......
/*! /*!
* html2canvas 1.0.0-rc.5 <https://html2canvas.hertzen.com> * html2canvas 1.0.0 <https://html2canvas.hertzen.com>
* Copyright (c) 2020 Niklas von Hertzen <https://hertzen.com> * Copyright (c) 2021 Niklas von Hertzen <https://hertzen.com>
* Released under MIT License * Released under MIT License
*/ */
(function (global, factory) { (function (global, factory) {
...@@ -3010,6 +3010,9 @@ ...@@ -3010,6 +3010,9 @@
(function (BORDER_STYLE) { (function (BORDER_STYLE) {
BORDER_STYLE[BORDER_STYLE["NONE"] = 0] = "NONE"; BORDER_STYLE[BORDER_STYLE["NONE"] = 0] = "NONE";
BORDER_STYLE[BORDER_STYLE["SOLID"] = 1] = "SOLID"; BORDER_STYLE[BORDER_STYLE["SOLID"] = 1] = "SOLID";
BORDER_STYLE[BORDER_STYLE["DASHED"] = 2] = "DASHED";
BORDER_STYLE[BORDER_STYLE["DOTTED"] = 3] = "DOTTED";
BORDER_STYLE[BORDER_STYLE["DOUBLE"] = 4] = "DOUBLE";
})(BORDER_STYLE || (BORDER_STYLE = {})); })(BORDER_STYLE || (BORDER_STYLE = {}));
var borderStyleForSide = function (side) { return ({ var borderStyleForSide = function (side) { return ({
name: "border-" + side + "-style", name: "border-" + side + "-style",
...@@ -3020,6 +3023,12 @@ ...@@ -3020,6 +3023,12 @@
switch (style) { switch (style) {
case 'none': case 'none':
return BORDER_STYLE.NONE; return BORDER_STYLE.NONE;
case 'dashed':
return BORDER_STYLE.DASHED;
case 'dotted':
return BORDER_STYLE.DOTTED;
case 'double':
return BORDER_STYLE.DOUBLE;
} }
return BORDER_STYLE.SOLID; return BORDER_STYLE.SOLID;
} }
...@@ -3068,6 +3077,7 @@ ...@@ -3068,6 +3077,7 @@
var parseDisplayValue = function (display) { var parseDisplayValue = function (display) {
switch (display) { switch (display) {
case 'block': case 'block':
case '-webkit-box':
return 2 /* BLOCK */; return 2 /* BLOCK */;
case 'inline': case 'inline':
return 4 /* INLINE */; return 4 /* INLINE */;
...@@ -3790,12 +3800,29 @@ ...@@ -3790,12 +3800,29 @@
prefix: false, prefix: false,
type: PropertyDescriptorParsingType.LIST, type: PropertyDescriptorParsingType.LIST,
parse: function (tokens) { parse: function (tokens) {
return tokens.filter(isStringToken$1).map(function (token) { return token.value; }); var accumulator = [];
var results = [];
tokens.forEach(function (token) {
switch (token.type) {
case TokenType.IDENT_TOKEN:
case TokenType.STRING_TOKEN:
accumulator.push(token.value);
break;
case TokenType.NUMBER_TOKEN:
accumulator.push(token.number.toString());
break;
case TokenType.COMMA_TOKEN:
results.push(accumulator.join(' '));
accumulator.length = 0;
break;
}
});
if (accumulator.length) {
results.push(accumulator.join(' '));
}
return results.map(function (result) { return (result.indexOf(' ') === -1 ? result : "'" + result + "'"); });
} }
}; };
var isStringToken$1 = function (token) {
return token.type === TokenType.STRING_TOKEN || token.type === TokenType.IDENT_TOKEN;
};
var fontSize = { var fontSize = {
name: "font-size", name: "font-size",
...@@ -4524,7 +4551,7 @@ ...@@ -4524,7 +4551,7 @@
var isTextNode = function (node) { return node.nodeType === Node.TEXT_NODE; }; var isTextNode = function (node) { return node.nodeType === Node.TEXT_NODE; };
var isElementNode = function (node) { return node.nodeType === Node.ELEMENT_NODE; }; var isElementNode = function (node) { return node.nodeType === Node.ELEMENT_NODE; };
var isHTMLElementNode = function (node) { var isHTMLElementNode = function (node) {
return typeof node.style !== 'undefined'; return isElementNode(node) && typeof node.style !== 'undefined' && !isSVGElementNode(node);
}; };
var isSVGElementNode = function (element) { var isSVGElementNode = function (element) {
return typeof element.className === 'object'; return typeof element.className === 'object';
...@@ -5091,7 +5118,13 @@ ...@@ -5091,7 +5118,13 @@
if (isStyleElement(node)) { if (isStyleElement(node)) {
return this.createStyleClone(node); return this.createStyleClone(node);
} }
return node.cloneNode(false); var clone = node.cloneNode(false);
// @ts-ignore
if (isImageElement(clone) && clone.loading === 'lazy') {
// @ts-ignore
clone.loading = 'eager';
}
return clone;
}; };
DocumentCloner.prototype.createStyleClone = function (node) { DocumentCloner.prototype.createStyleClone = function (node) {
try { try {
...@@ -5216,12 +5249,12 @@ ...@@ -5216,12 +5249,12 @@
return node.cloneNode(false); return node.cloneNode(false);
} }
var window = node.ownerDocument.defaultView; var window = node.ownerDocument.defaultView;
if (isHTMLElementNode(node) && window) { if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) {
var clone = this.createElementClone(node); var clone = this.createElementClone(node);
var style = window.getComputedStyle(node); var style = window.getComputedStyle(node);
var styleBefore = window.getComputedStyle(node, ':before'); var styleBefore = window.getComputedStyle(node, ':before');
var styleAfter = window.getComputedStyle(node, ':after'); var styleAfter = window.getComputedStyle(node, ':after');
if (this.referenceElement === node) { if (this.referenceElement === node && isHTMLElementNode(clone)) {
this.clonedReferenceElement = clone; this.clonedReferenceElement = clone;
} }
if (isBodyElement(clone)) { if (isBodyElement(clone)) {
...@@ -5247,7 +5280,7 @@ ...@@ -5247,7 +5280,7 @@
clone.appendChild(after); clone.appendChild(after);
} }
this.counters.pop(counters); this.counters.pop(counters);
if (style && this.options.copyStyles && !isIFrameElement(node)) { if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) {
copyCSSStyles(style, clone); copyCSSStyles(style, clone);
} }
//this.inlineAllImages(clone); //this.inlineAllImages(clone);
...@@ -5556,6 +5589,54 @@ ...@@ -5556,6 +5589,54 @@
var paddingRight = getAbsoluteValue(styles.paddingRight, element.bounds.width); var paddingRight = getAbsoluteValue(styles.paddingRight, element.bounds.width);
var paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width); var paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width);
var paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width); var paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width);
this.topLeftBorderDoubleOuterBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3, tlh - borderLeftWidth / 3, tlv - borderTopWidth / 3, CORNER.TOP_LEFT)
: new Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3);
this.topRightBorderDoubleOuterBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 3, trh - borderRightWidth / 3, trv - borderTopWidth / 3, CORNER.TOP_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3);
this.bottomRightBorderDoubleOuterBox =
brh > 0 || brv > 0
? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 3, brv - borderBottomWidth / 3, CORNER.BOTTOM_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
this.bottomLeftBorderDoubleOuterBox =
blh > 0 || blv > 0
? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + leftHeight, blh - borderLeftWidth / 3, blv - borderBottomWidth / 3, CORNER.BOTTOM_LEFT)
: new Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3);
this.topLeftBorderDoubleInnerBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3, tlh - (borderLeftWidth * 2) / 3, tlv - (borderTopWidth * 2) / 3, CORNER.TOP_LEFT)
: new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
this.topRightBorderDoubleInnerBox =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + topWidth, bounds.top + (borderTopWidth * 2) / 3, trh - (borderRightWidth * 2) / 3, trv - (borderTopWidth * 2) / 3, CORNER.TOP_RIGHT)
: new Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3);
this.bottomRightBorderDoubleInnerBox =
brh > 0 || brv > 0
? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - (borderRightWidth * 2) / 3, brv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_RIGHT)
: new Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3);
this.bottomLeftBorderDoubleInnerBox =
blh > 0 || blv > 0
? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + leftHeight, blh - (borderLeftWidth * 2) / 3, blv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_LEFT)
: new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3);
this.topLeftBorderStroke =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2, tlh - borderLeftWidth / 2, tlv - borderTopWidth / 2, CORNER.TOP_LEFT)
: new Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2);
this.topRightBorderStroke =
tlh > 0 || tlv > 0
? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 2, trh - borderRightWidth / 2, trv - borderTopWidth / 2, CORNER.TOP_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2);
this.bottomRightBorderStroke =
brh > 0 || brv > 0
? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 2, brv - borderBottomWidth / 2, CORNER.BOTTOM_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
this.bottomLeftBorderStroke =
blh > 0 || blv > 0
? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + leftHeight, blh - borderLeftWidth / 2, blv - borderBottomWidth / 2, CORNER.BOTTOM_LEFT)
: new Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2);
this.topLeftBorderBox = this.topLeftBorderBox =
tlh > 0 || tlv > 0 tlh > 0 || tlv > 0
? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT) ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT)
...@@ -5578,15 +5659,15 @@ ...@@ -5578,15 +5659,15 @@
: new Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth); : new Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth);
this.topRightPaddingBox = this.topRightPaddingBox =
trh > 0 || trv > 0 trh > 0 || trv > 0
? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderLeftWidth ? 0 : trh - borderLeftWidth, trv - borderTopWidth, CORNER.TOP_RIGHT) ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width - borderRightWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth), Math.max(0, trv - borderTopWidth), CORNER.TOP_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth); : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth);
this.bottomRightPaddingBox = this.bottomRightPaddingBox =
brh > 0 || brv > 0 brh > 0 || brv > 0
? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth), bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth), Math.max(0, brh - borderRightWidth), brv - borderBottomWidth, CORNER.BOTTOM_RIGHT) ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth), bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth), Math.max(0, brh - borderRightWidth), Math.max(0, brv - borderBottomWidth), CORNER.BOTTOM_RIGHT)
: new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth); : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth);
this.bottomLeftPaddingBox = this.bottomLeftPaddingBox =
blh > 0 || blv > 0 blh > 0 || blv > 0
? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + leftHeight, Math.max(0, blh - borderLeftWidth), blv - borderBottomWidth, CORNER.BOTTOM_LEFT) ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth), Math.max(0, blh - borderLeftWidth), Math.max(0, blv - borderBottomWidth), CORNER.BOTTOM_LEFT)
: new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth); : new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth);
this.topLeftContentBox = this.topLeftContentBox =
tlh > 0 || tlv > 0 tlh > 0 || tlv > 0
...@@ -5655,10 +5736,10 @@ ...@@ -5655,10 +5736,10 @@
var TransformEffect = /** @class */ (function () { var TransformEffect = /** @class */ (function () {
function TransformEffect(offsetX, offsetY, matrix) { function TransformEffect(offsetX, offsetY, matrix) {
this.type = 0 /* TRANSFORM */; this.type = 0 /* TRANSFORM */;
this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
this.offsetX = offsetX; this.offsetX = offsetX;
this.offsetY = offsetY; this.offsetY = offsetY;
this.matrix = matrix; this.matrix = matrix;
this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
} }
return TransformEffect; return TransformEffect;
}()); }());
...@@ -5670,10 +5751,19 @@ ...@@ -5670,10 +5751,19 @@
} }
return ClipEffect; return ClipEffect;
}()); }());
var OpacityEffect = /** @class */ (function () {
function OpacityEffect(opacity) {
this.type = 2 /* OPACITY */;
this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */;
this.opacity = opacity;
}
return OpacityEffect;
}());
var isTransformEffect = function (effect) { var isTransformEffect = function (effect) {
return effect.type === 0 /* TRANSFORM */; return effect.type === 0 /* TRANSFORM */;
}; };
var isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; }; var isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; };
var isOpacityEffect = function (effect) { return effect.type === 2 /* OPACITY */; };
var StackingContext = /** @class */ (function () { var StackingContext = /** @class */ (function () {
function StackingContext(container) { function StackingContext(container) {
...@@ -5693,6 +5783,9 @@ ...@@ -5693,6 +5783,9 @@
this.container = element; this.container = element;
this.effects = parentStack.slice(0); this.effects = parentStack.slice(0);
this.curves = new BoundCurves(element); this.curves = new BoundCurves(element);
if (element.styles.opacity < 1) {
this.effects.push(new OpacityEffect(element.styles.opacity));
}
if (element.styles.transform !== null) { if (element.styles.transform !== null) {
var offsetX = element.bounds.left + element.styles.transformOrigin[0].number; var offsetX = element.bounds.left + element.styles.transformOrigin[0].number;
var offsetY = element.bounds.top + element.styles.transformOrigin[1].number; var offsetY = element.bounds.top + element.styles.transformOrigin[1].number;
...@@ -5755,7 +5848,7 @@ ...@@ -5755,7 +5848,7 @@
else if (order_1 > 0) { else if (order_1 > 0) {
var index_2 = 0; var index_2 = 0;
parentStack.positiveZIndex.some(function (current, i) { parentStack.positiveZIndex.some(function (current, i) {
if (order_1 > current.element.container.styles.zIndex.order) { if (order_1 >= current.element.container.styles.zIndex.order) {
index_2 = i + 1; index_2 = i + 1;
return false; return false;
} }
...@@ -5830,6 +5923,61 @@ ...@@ -5830,6 +5923,61 @@
return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox, curves.topLeftBorderBox, curves.topLeftPaddingBox); return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox, curves.topLeftBorderBox, curves.topLeftPaddingBox);
} }
}; };
var parsePathForBorderDoubleOuter = function (curves, borderSide) {
switch (borderSide) {
case 0:
return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox, curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox);
case 1:
return createPathFromCurves(curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox, curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox);
case 2:
return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox, curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox);
case 3:
default:
return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox, curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox);
}
};
var parsePathForBorderDoubleInner = function (curves, borderSide) {
switch (borderSide) {
case 0:
return createPathFromCurves(curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox, curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox);
case 1:
return createPathFromCurves(curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox, curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox);
case 2:
return createPathFromCurves(curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox);
case 3:
default:
return createPathFromCurves(curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox, curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox);
}
};
var parsePathForBorderStroke = function (curves, borderSide) {
switch (borderSide) {
case 0:
return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke);
case 1:
return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke);
case 2:
return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke);
case 3:
default:
return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke);
}
};
var createStrokePathFromCurves = function (outer1, outer2) {
var path = [];
if (isBezierCurve(outer1)) {
path.push(outer1.subdivide(0.5, false));
}
else {
path.push(outer1);
}
if (isBezierCurve(outer2)) {
path.push(outer2.subdivide(0.5, true));
}
else {
path.push(outer2);
}
return path;
};
var createPathFromCurves = function (outer1, inner1, outer2, inner2) { var createPathFromCurves = function (outer1, inner1, outer2, inner2) {
var path = []; var path = [];
if (isBezierCurve(outer1)) { if (isBezierCurve(outer1)) {
...@@ -6123,6 +6271,9 @@ ...@@ -6123,6 +6271,9 @@
}; };
CanvasRenderer.prototype.applyEffect = function (effect) { CanvasRenderer.prototype.applyEffect = function (effect) {
this.ctx.save(); this.ctx.save();
if (isOpacityEffect(effect)) {
this.ctx.globalAlpha = effect.opacity;
}
if (isTransformEffect(effect)) { if (isTransformEffect(effect)) {
this.ctx.translate(effect.offsetX, effect.offsetY); this.ctx.translate(effect.offsetX, effect.offsetY);
this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]); this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]);
...@@ -6146,7 +6297,6 @@ ...@@ -6146,7 +6297,6 @@
case 0: case 0:
styles = stack.element.container.styles; styles = stack.element.container.styles;
if (!styles.isVisible()) return [3 /*break*/, 2]; if (!styles.isVisible()) return [3 /*break*/, 2];
this.ctx.globalAlpha = styles.opacity;
return [4 /*yield*/, this.renderStackContent(stack)]; return [4 /*yield*/, this.renderStackContent(stack)];
case 1: case 1:
_a.sent(); _a.sent();
...@@ -6593,8 +6743,8 @@ ...@@ -6593,8 +6743,8 @@
return image; return image;
} }
var canvas = this.canvas.ownerDocument.createElement('canvas'); var canvas = this.canvas.ownerDocument.createElement('canvas');
canvas.width = width; canvas.width = Math.max(1, width);
canvas.height = height; canvas.height = Math.max(1, height);
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height); ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
return canvas; return canvas;
...@@ -6714,7 +6864,7 @@ ...@@ -6714,7 +6864,7 @@
}); });
}); });
}; };
CanvasRenderer.prototype.renderBorder = function (color, side, curvePoints) { CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) {
return __awaiter(this, void 0, void 0, function () { return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) { return __generator(this, function (_a) {
this.path(parsePathForBorder(curvePoints, side)); this.path(parsePathForBorder(curvePoints, side));
...@@ -6724,6 +6874,30 @@ ...@@ -6724,6 +6874,30 @@
}); });
}); });
}; };
CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) {
return __awaiter(this, void 0, void 0, function () {
var outerPaths, innerPaths;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!(width < 3)) return [3 /*break*/, 2];
return [4 /*yield*/, this.renderSolidBorder(color, side, curvePoints)];
case 1:
_a.sent();
return [2 /*return*/];
case 2:
outerPaths = parsePathForBorderDoubleOuter(curvePoints, side);
this.path(outerPaths);
this.ctx.fillStyle = asString(color);
this.ctx.fill();
innerPaths = parsePathForBorderDoubleInner(curvePoints, side);
this.path(innerPaths);
this.ctx.fill();
return [2 /*return*/];
}
});
});
};
CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) { CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) {
return __awaiter(this, void 0, void 0, function () { return __awaiter(this, void 0, void 0, function () {
var styles, hasBackground, borders, backgroundPaintingArea, side, _i, borders_1, border; var styles, hasBackground, borders, backgroundPaintingArea, side, _i, borders_1, border;
...@@ -6735,10 +6909,10 @@ ...@@ -6735,10 +6909,10 @@
styles = paint.container.styles; styles = paint.container.styles;
hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length; hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length;
borders = [ borders = [
{ style: styles.borderTopStyle, color: styles.borderTopColor }, { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth },
{ style: styles.borderRightStyle, color: styles.borderRightColor }, { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth },
{ style: styles.borderBottomStyle, color: styles.borderBottomColor }, { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth },
{ style: styles.borderLeftStyle, color: styles.borderLeftColor } { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth }
]; ];
backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves); backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves);
if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2]; if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2];
...@@ -6785,24 +6959,145 @@ ...@@ -6785,24 +6959,145 @@
_i = 0, borders_1 = borders; _i = 0, borders_1 = borders;
_a.label = 3; _a.label = 3;
case 3: case 3:
if (!(_i < borders_1.length)) return [3 /*break*/, 7]; if (!(_i < borders_1.length)) return [3 /*break*/, 13];
border = borders_1[_i]; border = borders_1[_i];
if (!(border.style !== BORDER_STYLE.NONE && !isTransparent(border.color))) return [3 /*break*/, 5]; if (!(border.style !== BORDER_STYLE.NONE && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11];
return [4 /*yield*/, this.renderBorder(border.color, side, paint.curves)]; if (!(border.style === BORDER_STYLE.DASHED)) return [3 /*break*/, 5];
return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, BORDER_STYLE.DASHED)];
case 4: case 4:
_a.sent(); _a.sent();
_a.label = 5; return [3 /*break*/, 11];
case 5: case 5:
side++; if (!(border.style === BORDER_STYLE.DOTTED)) return [3 /*break*/, 7];
_a.label = 6; return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, BORDER_STYLE.DOTTED)];
case 6: case 6:
_a.sent();
return [3 /*break*/, 11];
case 7:
if (!(border.style === BORDER_STYLE.DOUBLE)) return [3 /*break*/, 9];
return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)];
case 8:
_a.sent();
return [3 /*break*/, 11];
case 9: return [4 /*yield*/, this.renderSolidBorder(border.color, side, paint.curves)];
case 10:
_a.sent();
_a.label = 11;
case 11:
side++;
_a.label = 12;
case 12:
_i++; _i++;
return [3 /*break*/, 3]; return [3 /*break*/, 3];
case 7: return [2 /*return*/]; case 13: return [2 /*return*/];
} }
}); });
}); });
}; };
CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) {
return __awaiter(this, void 0, void 0, function () {
var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, path1, path2;
return __generator(this, function (_a) {
this.ctx.save();
strokePaths = parsePathForBorderStroke(curvePoints, side);
boxPaths = parsePathForBorder(curvePoints, side);
if (style === BORDER_STYLE.DASHED) {
this.path(boxPaths);
this.ctx.clip();
}
if (isBezierCurve(boxPaths[0])) {
startX = boxPaths[0].start.x;
startY = boxPaths[0].start.y;
}
else {
startX = boxPaths[0].x;
startY = boxPaths[0].y;
}
if (isBezierCurve(boxPaths[1])) {
endX = boxPaths[1].end.x;
endY = boxPaths[1].end.y;
}
else {
endX = boxPaths[1].x;
endY = boxPaths[1].y;
}
if (side === 0 || side === 2) {
length = Math.abs(startX - endX);
}
else {
length = Math.abs(startY - endY);
}
this.ctx.beginPath();
if (style === BORDER_STYLE.DOTTED) {
this.formatPath(strokePaths);
}
else {
this.formatPath(boxPaths.slice(0, 2));
}
dashLength = width < 3 ? width * 3 : width * 2;
spaceLength = width < 3 ? width * 2 : width;
if (style === BORDER_STYLE.DOTTED) {
dashLength = width;
spaceLength = width;
}
useLineDash = true;
if (length <= dashLength * 2) {
useLineDash = false;
}
else if (length <= dashLength * 2 + spaceLength) {
multiplier = length / (2 * dashLength + spaceLength);
dashLength *= multiplier;
spaceLength *= multiplier;
}
else {
numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
spaceLength =
maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
? minSpace
: maxSpace;
}
if (useLineDash) {
if (style === BORDER_STYLE.DOTTED) {
this.ctx.setLineDash([0, dashLength + spaceLength]);
}
else {
this.ctx.setLineDash([dashLength, spaceLength]);
}
}
if (style === BORDER_STYLE.DOTTED) {
this.ctx.lineCap = 'round';
this.ctx.lineWidth = width;
}
else {
this.ctx.lineWidth = width * 2 + 1.1;
}
this.ctx.strokeStyle = asString(color);
this.ctx.stroke();
this.ctx.setLineDash([]);
// dashed round edge gap
if (style === BORDER_STYLE.DASHED) {
if (isBezierCurve(boxPaths[0])) {
path1 = boxPaths[3];
path2 = boxPaths[0];
this.ctx.beginPath();
this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
this.ctx.stroke();
}
if (isBezierCurve(boxPaths[1])) {
path1 = boxPaths[1];
path2 = boxPaths[2];
this.ctx.beginPath();
this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]);
this.ctx.stroke();
}
}
this.ctx.restore();
return [2 /*return*/];
});
});
};
CanvasRenderer.prototype.render = function (element) { CanvasRenderer.prototype.render = function (element) {
return __awaiter(this, void 0, void 0, function () { return __awaiter(this, void 0, void 0, function () {
var stack; var stack;
...@@ -6912,7 +7207,7 @@ ...@@ -6912,7 +7207,7 @@
if (options === void 0) { options = {}; } if (options === void 0) { options = {}; }
return renderElement(element, options); return renderElement(element, options);
}; };
if (typeof window !== "undefined") { if (typeof window !== 'undefined') {
CacheStorage.setContext(window); CacheStorage.setContext(window);
} }
var renderElement = function (element, opts) { return __awaiter(_this, void 0, void 0, function () { var renderElement = function (element, opts) { return __awaiter(_this, void 0, void 0, function () {
...@@ -7041,4 +7336,4 @@ ...@@ -7041,4 +7336,4 @@
return html2canvas; return html2canvas;
})); }));
//# sourceMappingURL=html2canvas.js.map //# sourceMappingURL=html2canvas.js.map
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment