Last active
October 29, 2020 14:06
-
-
Save kenwebb/6512de9a21d8784659e839225c0f8ea6 to your computer and use it in GitHub Desktop.
Animate Builder
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Thu Oct 29 2020 10:06:04 GMT-0400 (Eastern Daylight Time)--> | |
| <XholonWorkbook> | |
| <Notes><![CDATA[ | |
| Xholon | |
| ------ | |
| Title: Animate Builder | |
| Description: | |
| Url: http://www.primordion.com/Xholon/gwt/ | |
| InternalName: 6512de9a21d8784659e839225c0f8ea6 based on 7dbbe5d030df3e9d28302f85f8330edf | |
| Keywords: | |
| My Notes | |
| -------- | |
| October 27, 2020 | |
| Use json-editor to build a Xholon Animate node. | |
| http://127.0.0.1:8080/war/Xholon.html?app=Animate+Builder&src=lstr&gui=none&jslib=jsoneditor | |
| Examples of an Animate node (this is what I am trying to build in this workbook): | |
| 1. https://www.primordion.com/Xholon/gwt/wb/editwb.html?app=2cded6cb001104e801983e27ea532e05&src=gist | |
| <Animate selection="#xhgraph" xpath="PhysicalSystem/Universe" duration="0.5" cssStyle=".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}" tweenScript="xhSvgTween" efParams="{"selection":"#xhgraph", "sort":"disable", "width":600, "height":600, "mode":"tween", "labelContainers":true, "includeClass":true}"/> | |
| #formatted as JSON | |
| var animate = { | |
| "selection": "___SELECT___#xhanim|#xhgraph|#xhgraph>div[1]|#xhgraph>one", | |
| "xpath": "PhysicalSystem/Universe", | |
| "duration": "___SELECT___0.2|0.5|1.0|2.0", | |
| "cssStyle": ".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}", | |
| "tweenScript": "___SELECT___xhSvgTween|xhSvgTween_exp|xhSvgTween_not|xhSvgTweenLite", | |
| "efParams": { | |
| "selection": "___SELECT___#xhanim|#xhgraph|#xhgraph>div[1]|#xhgraph>one", | |
| "sort": "___SELECT___default|disable|ascending|descending", | |
| "width": "___SELECT___-1|600", | |
| "height": "___SELECT___-1|600", | |
| "mode": "___SELECT___new|replace|tween", | |
| "maxChars": 1, | |
| "filter": "--Behavior,Script", | |
| "labelContainers": false, | |
| "labelContainersOptions": "___SELECT___top|bottom|center", | |
| "includeId": false, | |
| "includeClass": true, | |
| "shape": "___SELECT___circle|ellipse|rect", | |
| "shapeParams": "5,5", | |
| "maxSvg": 50, | |
| "useIcons": false, | |
| "iconPos": "___SELECT___outside|inside|background|outside n|outside s|outside e|outside w|outside nw|outside ne|outside sw|outside se", | |
| "useSymbols": false, | |
| "useAnno": false, | |
| "annoPos": "___SELECT___outside|inside|tooltip|outside n|outside s|outside e|outside w|outside nw|outside ne|outside sw|outside se", | |
| "fontSizeMultiplier": 1.75, | |
| "marble": "", | |
| "supportTouch": false, | |
| "_jsdata": false, | |
| "nonportPorts": true, | |
| "togglePortColors": true, | |
| "supportClick": true, | |
| "supportContextmenu": true, | |
| "supportDblclick": true, | |
| "shouldShowStateMachineEntities": false, | |
| "shouldIncludeDecorations": true | |
| } | |
| } | |
| // ~/gwtspace/Xholon/Xholon/src/org/primordion/ef/d3/Xholon2HierarchyJSON.java | |
| // these are all the efParams | |
| protected native void makeEfParams() /*-{ | |
| var p = {}; | |
| p.shouldShowStateMachineEntities = false; | |
| p.shouldIncludeDecorations = true; | |
| p.sort = "default"; // "disable", "ascending", descending" | |
| p.filter = "--Behavior,Script"; | |
| p.width = -1; | |
| p.height = -1; | |
| p.selection = "#xhgraph"; // "#xhgraph>div[1]", "#xhanim" | |
| p.mode = "new"; // "replace", "tween" | |
| p.labelContainers = false; // whether or not to label the container nodes | |
| p.labelContainersOptions = "top"; // "top" "bottom" "center" | |
| p.includeId = false; | |
| p.includeClass = false; | |
| p.shape = "circle"; // "ellipse", "rect" | |
| p.shapeParams = "5,5"; // rect rx,ry | |
| p.maxSvg = 50; // max allowable number of SVG subtrees, to prevent running out of memory | |
| p.useIcons = false; | |
| p.iconPos = "outside"; // "outside", "inside", "background", n s e w nw ne sw se ex: "outside nw" | |
| p.useSymbols = false; | |
| p.useAnno = false; // whether or not to show Xholon annotations | |
| p.annoPos = "outside"; // "outside", "inside", "tooltip", n s e w nw ne sw se ex: "outside nw" | |
| p.maxChars = 1; | |
| p.fontSizeMultiplier = 1.75; | |
| p.marble = ''; // '{"type":"default","maxChars":4}' | |
| p.supportTouch = false; // Hammer.js | |
| p._jsdata = false; | |
| p.nonportPorts = true; // whether or not to call node.links() rather than node.ports() | |
| p.togglePortColors = true; // whether or not to toggle the color of remote nodes when mouse hovers | |
| p.supportClick = true; | |
| p.supportContextmenu = true; | |
| p.supportDblclick = true; | |
| this.efParams = p; | |
| }-*/; | |
| The Complete Process - to generate and use an Animate Builder | |
| ==================== | |
| Step 1 - Manually create an example JSON text (as below) | |
| ------ | |
| { | |
| "selection": "___SELECT___#xhanim|#xhgraph|#xhgraph>div[1]|#xhgraph>one", | |
| "xpath": "PhysicalSystem/Universe", | |
| "duration": "___SELECT___0.2|0.5|1.0|2.0", | |
| "cssStyle": ".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}", | |
| "tweenScript": "___SELECT___xhSvgTween|xhSvgTween_exp|xhSvgTween_not|xhSvgTweenLite", | |
| "efParams": { | |
| "selection": "___SELECT___#xhanim|#xhgraph|#xhgraph>div[1]|#xhgraph>one", | |
| "sort": "___SELECT___default|disable|ascending|descending", | |
| "width": "___SELECT___-1|600", | |
| "height": "___SELECT___-1|600", | |
| "mode": "___SELECT___new|replace|tween", | |
| "maxChars": 1, | |
| "filter": "--Behavior,Script", | |
| "labelContainers": false, | |
| "labelContainersOptions": "___SELECT___top|bottom|center", | |
| "includeId": false, | |
| "includeClass": true, | |
| "shape": "___SELECT___circle|ellipse|rect", | |
| "shapeParams": "5,5", | |
| "maxSvg": 50, | |
| "useIcons": false, | |
| "iconPos": "___SELECT___outside|inside|background|outside n|outside s|outside e|outside w|outside nw|outside ne|outside sw|outside se", | |
| "useSymbols": false, | |
| "useAnno": false, | |
| "annoPos": "___SELECT___outside|inside|tooltip|outside n|outside s|outside e|outside w|outside nw|outside ne|outside sw|outside se", | |
| "fontSizeMultiplier": 1.75, | |
| "marble": "", | |
| "supportTouch": false, | |
| "_jsdata": false, | |
| "nonportPorts": true, | |
| "togglePortColors": true, | |
| "supportClick": true, | |
| "supportContextmenu": true, | |
| "supportDblclick": true, | |
| "shouldShowStateMachineEntities": false, | |
| "shouldIncludeDecorations": true | |
| } | |
| } | |
| Step 2 - Start the online tool | |
| ------ | |
| https://niehausbert.gitlab.io/JSON2Schema/ | |
| The page will show a form. | |
| Step 3 | |
| ------ | |
| Enter a "Schema Title > Title" into the form, in this case "animate". | |
| Copy the example JSON text from Step 1, and paste it into the "JSON Input" textarea in the form. | |
| Press "Create JSON Template". | |
| The page will generate and display the text of a template. | |
| Step 4 | |
| ------ | |
| Press "Create JSON Schema". | |
| The page will generate and display the text of a schema. | |
| Optionally edit the text of the "JSON Schema". | |
| I edited many of the "description" items. | |
| Optionally set the following items to true | |
| "disable_collapse": false, | |
| "disable_edit_json": false, | |
| "disable_properties": false, | |
| Step 5 | |
| ------ | |
| Press "Create JSON Editor". | |
| The page will generate and display the complete animate form, ready for testing. | |
| Step 6 | |
| ------ | |
| Press "Export JSON Editor as ZIP". | |
| The page creates a pop-up that asks if I want to save the .zip file or open it with the Archive Manager. | |
| I saved it to ~/gwtspace/Xholon/Xholon/war/jsoneditor_AnimateBuilder | |
| Step 7 | |
| ------ | |
| Double click index.html in the new file folder. | |
| It successfully displays a complete animate form, that I can input into. | |
| I opened the Print menu, and clicked on "JSON". | |
| The web page displays the resulting JSON content. | |
| I clicked on "Print". | |
| It opened a pop-up containing the same resulting JSON content. | |
| It called "function printTextArea(pID) { ...}" in js/printcode.js | |
| Step 8 | |
| ------ | |
| Edit printcode.js | |
| Add code to format the JSON text as a Xholon <Animate> node. | |
| References | |
| ---------- | |
| (1) https://github.com/json-editor/json-editor | |
| (2) https://www.npmjs.com/package/@json-editor/json-editor | |
| () https://json-editor.github.io/json-editor/basic.html | |
| () https://github.com/json-editor/json-editor/wiki | |
| () https://github.com/json-editor/json-editor/wiki/Editors-for-creating-JSON-Editor-schemas | |
| () https://niehausbert.gitlab.io/JSON2Schema/ | |
| () https://pmk65.github.io/jedemov2/dist/demo.html | |
| () https://json-schema.org/draft/2019-09/json-schema-core.html | |
| ]]></Notes> | |
| <_-.XholonClass> | |
| <PhysicalSystem/> | |
| <AnimateBuilder/> | |
| </_-.XholonClass> | |
| <xholonClassDetails> | |
| </xholonClassDetails> | |
| <PhysicalSystem> | |
| <AnimateBuilder/> | |
| <!-- The following is an example of what is returned with I press the "click" button. It works. --> | |
| <Animate selection="#xhanim" xpath="PhysicalSystem/*[1]" duration="0.2" cssStyle=".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}" tweenScript="xhSvgTween" efParams="{ | |
| "selection":"#xhanim", | |
| "sort":"default", | |
| "width":600, | |
| "height":600, | |
| "mode":"new", | |
| "maxChars":1, | |
| "labelContainers":false, | |
| "labelContainersOptions":"top", | |
| "includeId":false, | |
| "includeClass":true, | |
| "shape":"circle", | |
| "maxSvg":50, | |
| "useIcons":false, | |
| "iconPos":"outside", | |
| "useSymbols":false, | |
| "useAnno":false, | |
| "annoPos":"outside", | |
| "fontSizeMultiplier":1.75, | |
| "supportTouch":false, | |
| "_jsdata":false, | |
| "nonportPorts":true, | |
| "togglePortColors":true, | |
| "supportClick":true, | |
| "supportContextmenu":true, | |
| "supportDblclick":true, | |
| "shouldShowStateMachineEntities":false, | |
| "shouldIncludeDecorations":true | |
| }"/> | |
| </PhysicalSystem> | |
| <AnimateBuilderbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[ | |
| var me, beh = { | |
| postConfigure: function() { | |
| me = this.cnode.parent(); | |
| $wnd.xh.avatar().action("pause"); | |
| $wnd.xh.css.style( "label.je-form-input-label {margin-top: 12px; font-size: 18px;} p.je-form-input-label {margin-top: 3px;} div.form-control, input, select {background-color: #ddf7bb;}" ); | |
| this.element = $doc.getElementById('xhappspecific'); | |
| this.descrips = { | |
| width: "Width of the Animate graphics on the screen, in pixels.", | |
| height: "Height of the Animate graphics on the screen, in pixels.", | |
| maxChars: "Maximum number of characters to display for each node.", | |
| selection: "CSS selector, specifying where to place the Animate element within the HTML page.", | |
| sort: "How the nodes are arranged on the page. default = arranged by size, disable = arranged in Xholon sibling order", | |
| mode: "mode" | |
| }; | |
| this.options = { | |
| theme: 'html', //'html' 'bootstrap4' | |
| schema: { | |
| "$schema": "http://json-schema.org/draft-04/schema#", | |
| "additionalProperties": true, | |
| "title": "animate", | |
| "definitions": { | |
| "comment": { | |
| "title": "Comment:", | |
| "type": "string", | |
| "format": "textarea", | |
| "default": "" | |
| }, | |
| "yesno": { | |
| "default": "yes", | |
| "type": "string", | |
| "enum": [ | |
| "yes", | |
| "no" | |
| ] | |
| } | |
| }, | |
| "type": "object", | |
| "id": "https://niebert.github.io/json-editor", | |
| "options": { | |
| "disable_collapse": true, | |
| "disable_edit_json": true, | |
| "disable_properties": true, | |
| "collapsed": false, | |
| "hidden": false | |
| }, | |
| "defaultProperties": [ | |
| "selection", | |
| "xpath", | |
| "duration", | |
| "cssStyle", | |
| "tweenScript", | |
| "efParams" | |
| ], | |
| "properties": { | |
| "selection": { | |
| "type": "string", | |
| "id": "/properties/selection", | |
| "title": "Selection", | |
| "default": "#xhanim", | |
| "enum": [ | |
| "#xhanim", | |
| "#xhgraph", | |
| "#xhgraph>div[1]", | |
| "#xhgraph>one" | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.selection}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 10 | |
| }, | |
| "xpath": { | |
| "type": "string", | |
| "id": "/properties/xpath", | |
| "title": "Xpath", | |
| "default": "PhysicalSystem/*[1]", | |
| "format": "text", | |
| "description": "An XPath expression to get from the app's CSH root node to the animation root node (xhAnimRoot).\nex: PhysicalSystem/Universe", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 20 | |
| }, | |
| "duration": { | |
| "type": "number", | |
| "id": "/properties/duration", | |
| "title": "Duration", | |
| "default": 0.2, | |
| "enum": [ | |
| 0.2, | |
| 0.5, | |
| 1.0, | |
| 2.0 | |
| ], | |
| "format": "text", | |
| "description": "Tween duration in seconds.", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 30 | |
| }, | |
| "cssStyle": { | |
| "type": "string", | |
| "id": "/properties/cssStyle", | |
| "title": "CssStyle", | |
| "default": ".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}", | |
| "format": "text", | |
| "description": "Optional style tag that should be added to HTML head.\nex: .d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 40 | |
| }, | |
| "tweenScript": { | |
| "type": "string", | |
| "id": "/properties/tweenScript", | |
| "title": "TweenScript", | |
| "default": "xhSvgTween", | |
| "enum": [ | |
| "xhSvgTween", | |
| "xhSvgTween_exp", | |
| "xhSvgTween_not", | |
| "xhSvgTweenLite" | |
| ], | |
| "format": "text", | |
| "description": "Description for 'tweenScript' Type: 'string' Path: '/properties/tweenScript'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 50 | |
| }, | |
| "efParams": { | |
| "type": "object", | |
| "id": "/properties/efParams", | |
| "title": "EfParams", | |
| "options": { | |
| "disable_collapse": true, | |
| "disable_edit_json": true, | |
| "disable_properties": true, | |
| "collapsed": false, | |
| "hidden": false | |
| }, | |
| "defaultProperties": [ | |
| "selection", | |
| "sort", | |
| "width", | |
| "height", | |
| "mode", | |
| "maxChars", | |
| "filter", | |
| "labelContainers", | |
| "labelContainersOptions", | |
| "includeId", | |
| "includeClass", | |
| "shape", | |
| "shapeParams", | |
| "maxSvg", | |
| "useIcons", | |
| "iconPos", | |
| "useSymbols", | |
| "useAnno", | |
| "annoPos", | |
| "fontSizeMultiplier", | |
| "marble", | |
| "supportTouch", | |
| "_jsdata", | |
| "nonportPorts", | |
| "togglePortColors", | |
| "supportClick", | |
| "supportContextmenu", | |
| "supportDblclick", | |
| "shouldShowStateMachineEntities", | |
| "shouldIncludeDecorations" | |
| ], | |
| "properties": { | |
| "selection": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/selection", | |
| "title": "Selection", | |
| "default": "#xhanim", | |
| "enum": [ | |
| "#xhanim", | |
| "#xhgraph", | |
| "#xhgraph>div[1]", | |
| "#xhgraph>one" | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.selection} (must be same value as selection item above)`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 10 | |
| }, | |
| "sort": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/sort", | |
| "title": "Sort", | |
| "default": "default", | |
| "enum": [ | |
| "default", | |
| "disable", | |
| "ascending", | |
| "descending" | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.sort}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 20 | |
| }, | |
| "width": { | |
| "type": "number", | |
| "id": "/properties/efParams/properties/width", | |
| "title": "Width", | |
| "default": -1, | |
| "enum": [ | |
| -1, | |
| 600 | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.width}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 30 | |
| }, | |
| "height": { | |
| "type": "number", | |
| "id": "/properties/efParams/properties/height", | |
| "title": "Height", | |
| "default": -1, | |
| "enum": [ | |
| -1, | |
| 600 | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.height}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 40 | |
| }, | |
| "mode": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/mode", | |
| "title": "Mode", | |
| "default": "new", | |
| "enum": [ | |
| "new", | |
| "replace", | |
| "tween" | |
| ], | |
| "format": "text", | |
| "description": `${this.descrips.mode}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 50 | |
| }, | |
| "maxChars": { | |
| "type": "integer", | |
| "id": "/properties/efParams/properties/maxChars", | |
| "title": "MaxChars", | |
| "default": 1, | |
| "description": `${this.descrips.maxChars}`, | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 60 | |
| }, | |
| "filter": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/filter", | |
| "title": "Filter", | |
| "default": "", | |
| "format": "text", | |
| "description": "Description for 'filter' Type: 'string' Path: '/properties/efParams/properties/filter'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 70 | |
| }, | |
| "labelContainers": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/labelContainers", | |
| "title": "LabelContainers", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "Whether or not to label the container nodes.", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 80 | |
| }, | |
| "labelContainersOptions": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/labelContainersOptions", | |
| "title": "LabelContainersOptions", | |
| "default": "top", | |
| "enum": [ | |
| "top", | |
| "bottom", | |
| "center" | |
| ], | |
| "format": "text", | |
| "description": "Description for 'labelContainersOptions' Type: 'string' Path: '/properties/efParams/properties/labelContainersOptions'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 90 | |
| }, | |
| "includeId": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/includeId", | |
| "title": "IncludeId", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "A description for 'includeId' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 100 | |
| }, | |
| "includeClass": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/includeClass", | |
| "title": "IncludeClass", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "A description for 'includeClass' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 110 | |
| }, | |
| "shape": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/shape", | |
| "title": "Shape", | |
| "default": "circle", | |
| "enum": [ | |
| "circle", | |
| "ellipse", | |
| "rect" | |
| ], | |
| "format": "text", | |
| "description": "Description for 'shape' Type: 'string' Path: '/properties/efParams/properties/shape'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 120 | |
| }, | |
| "shapeParams": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/shapeParams", | |
| "title": "ShapeParams", | |
| "default": "", | |
| "format": "text", | |
| "description": "Description for 'shapeParams' Type: 'string' Path: '/properties/efParams/properties/shapeParams'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 130 | |
| }, | |
| "maxSvg": { | |
| "type": "integer", | |
| "id": "/properties/efParams/properties/maxSvg", | |
| "title": "MaxSvg", | |
| "default": 50, | |
| "description": "Max allowable number of SVG subtrees, to prevent running out of memory.", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 140 | |
| }, | |
| "useIcons": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/useIcons", | |
| "title": "UseIcons", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "A description for 'useIcons' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 150 | |
| }, | |
| "iconPos": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/iconPos", | |
| "title": "IconPos", | |
| "default": "outside", | |
| "enum": [ | |
| "outside", | |
| "inside", | |
| "background", | |
| "outside n", | |
| "outside s", | |
| "outside e", | |
| "outside w", | |
| "outside nw", | |
| "outside ne", | |
| "outside sw", | |
| "outside se" | |
| ], | |
| "format": "text", | |
| "description": "Description for 'iconPos' Type: 'string' Path: '/properties/efParams/properties/iconPos'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 160 | |
| }, | |
| "useSymbols": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/useSymbols", | |
| "title": "UseSymbols", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "A description for 'useSymbols' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 170 | |
| }, | |
| "useAnno": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/useAnno", | |
| "title": "UseAnno", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "Whether or not to show Xholon annotations.", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 180 | |
| }, | |
| "annoPos": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/annoPos", | |
| "title": "AnnoPos", | |
| "default": "outside", | |
| "enum": [ | |
| "outside", | |
| "inside", | |
| "tooltip", | |
| "outside n", | |
| "outside s", | |
| "outside e", | |
| "outside w", | |
| "outside nw", | |
| "outside ne", | |
| "outside sw", | |
| "outside se" | |
| ], | |
| "format": "text", | |
| "description": "outside, inside, tooltip, n s e w nw ne sw se ex: outside nw", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 190 | |
| }, | |
| "fontSizeMultiplier": { | |
| "type": "number", | |
| "id": "/properties/efParams/properties/fontSizeMultiplier", | |
| "title": "FontSizeMultiplier", | |
| "default": 1.75, | |
| "description": "A description for 'fontSizeMultiplier' Type: 'number'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 200 | |
| }, | |
| "marble": { | |
| "type": "string", | |
| "id": "/properties/efParams/properties/marble", | |
| "title": "Marble", | |
| "default": "", | |
| "format": "text", | |
| "description": "ex: {\"type\":\"default\",\"maxChars\":4}", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 210 | |
| }, | |
| "supportTouch": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/supportTouch", | |
| "title": "SupportTouch", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "Hammer.js", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 220 | |
| }, | |
| "_jsdata": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/_jsdata", | |
| "title": " Jsdata", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "A description for '_jsdata' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 230 | |
| }, | |
| "nonportPorts": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/nonportPorts", | |
| "title": "NonportPorts", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "Whether or not to call node.links() rather than node.ports().", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 240 | |
| }, | |
| "togglePortColors": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/togglePortColors", | |
| "title": "TogglePortColors", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "Whether or not to toggle the color of remote nodes when mouse hovers.", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 250 | |
| }, | |
| "supportClick": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/supportClick", | |
| "title": "SupportClick", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "A description for 'supportClick' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 260 | |
| }, | |
| "supportContextmenu": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/supportContextmenu", | |
| "title": "SupportContextmenu", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "A description for 'supportContextmenu' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 270 | |
| }, | |
| "supportDblclick": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/supportDblclick", | |
| "title": "SupportDblclick", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "A description for 'supportDblclick' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 280 | |
| }, | |
| "shouldShowStateMachineEntities": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/shouldShowStateMachineEntities", | |
| "title": "ShouldShowStateMachineEntities", | |
| "format": "checkbox", | |
| "default": false, | |
| "description": "A description for 'shouldShowStateMachineEntities' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 290 | |
| }, | |
| "shouldIncludeDecorations": { | |
| "type": "boolean", | |
| "id": "/properties/efParams/properties/shouldIncludeDecorations", | |
| "title": "ShouldIncludeDecorations", | |
| "format": "checkbox", | |
| "default": true, | |
| "description": "A description for 'shouldIncludeDecorations' Type: 'boolean'", | |
| "options": { | |
| "hidden": false | |
| }, | |
| "propertyOrder": 300 | |
| } | |
| }, | |
| "propertyOrder": 60 | |
| } | |
| } | |
| } }; // end options | |
| this.editor = new $wnd.JSONEditor(this.element, this.options); | |
| }, | |
| // convert json-editor JSO to Xholon <Animate format | |
| // <Animate selection="#xhgraph" xpath="PhysicalSystem/Universe" duration="0.5" cssStyle=".d3cpnode circle {stroke-width: 0px;} .d3cpleaf circle {stroke-width: 0px;}" tweenScript="xhSvgTween" efParams="{"selection":"#xhgraph", "sort":"disable", "width":600, "height":600, "mode":"tween", "labelContainers":true, "includeClass":true}"/> | |
| edval2anval: function(edval) { | |
| var anstr = '<Animate'; | |
| anstr += ' selection="' + edval.selection + '"'; | |
| anstr += ' xpath="' + edval.xpath + '"'; | |
| anstr += ' duration="' + edval.duration + '"'; | |
| anstr += ' cssStyle="' + edval.cssStyle + '"'; | |
| anstr += ' tweenScript="' + edval.tweenScript + '"'; | |
| anstr += ' efParams="{\n'; | |
| const obj = edval.efParams; | |
| var comma = ""; | |
| for (const prop in obj) { | |
| var pval = obj[prop]; | |
| switch (typeof pval) { | |
| case "boolean": | |
| case "number": | |
| anstr += comma + " "" + prop + """ + ":"; | |
| anstr += pval; | |
| break; | |
| case "string": | |
| if (pval.length > 0) { | |
| anstr += comma + " "" + prop + """ + ":"; | |
| anstr += """ + pval + """; | |
| } | |
| break; | |
| default: | |
| anstr += null; // should never happen | |
| break; | |
| } | |
| comma = ",\n"; | |
| } | |
| anstr += '\n}"/>'; | |
| return anstr; | |
| }, | |
| handleNodeSelection: function() { | |
| const edval = this.editor.getValue(); | |
| const anvalStr = this.edval2anval(edval); | |
| me.println(anvalStr); | |
| // the Xholon print2Console() IGNORE_ME character | |
| return "\u0011"; | |
| } | |
| } | |
| //# sourceURL=AnimateBuilderbehavior.js | |
| ]]></AnimateBuilderbehavior> | |
| <SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml, | |
| <svg width="60" height="25" xmlns="http://www.w3.org/2000/svg"> | |
| <g> | |
| <title>Click to write JSON to the out tab</title> | |
| <rect id="PhysicalSystem/AnimateBuilder/AnimateBuilderbehavior" fill="#ddf7bb" height="25" width="50" x="10" y="0"/> | |
| <text x="21" y="17" style="pointer-events:none;">click</text> | |
| </g> | |
| </svg> | |
| ]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient> | |
| </XholonWorkbook> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment