-
Task
-
Resolution: Done
-
Major
-
None
-
None
-
False
-
None
-
False
-
If Release Note Needed, Set a Value
-
Set a Value
-
---
-
---
-
2022 Week 41-43 (from Oct 10), 2022 Week 44-46 (from Oct 31), 2022 Week 47-49 (from Nov 21)
Third parties must be able to customize, in the model side (JSON), the icon for states.
Actually in all states, in the SWF spec, are actually showing an icon that helps identifying its type, just before the name. This way, a concrete icon appears depending on the type of state (inject, operation, and so on)
Task
Add support for the metadata field, It expands as an object with 2 fields:
{
"name": "someState",
"type": "operation",
"metadata": {
"type": "ansible",
"icon": "somepath.png",
}
...
}
type (String)
- Built-in states types: ansible, kaoto
- Once a given built-in type is set, a custom icon will show for the state (built-in icon as well)
- Future built-in types may appear in the future, so be ready for easy extensions
<!-- Ansible --> <!-- Background color: #BB271A--> <!-- Path: --> <!doctype html> <svg viewBox="0 0 60 60" width="60" height="60"> <path d="M 31.047 11.68 L 47.108 46.485 L 22.848 29.706 L 31.047 11.68 Z M 59.577 54.501 L 34.874 2.301 C 34.167 0.796 32.757 0 31.047 0 C 29.331 0 27.819 0.796 27.114 2.301 L 0 59.559 L 9.274 59.559 L 20.008 35.95 L 52.04 58.671 C 53.326 59.586 54.256 60 55.466 60 C 57.885 60 60 58.407 60 56.109 C 60 55.734 59.85 55.14 59.577 54.501 Z" style="fill: rgb(255, 0, 0);"></path> </svg>
<!-- Kaoto --> <!-- Background color: #332174--> <!-- Path: --> <!doctype html> <svg viewBox="0 0.001 65 60" width="65" height="60"> <path d="M 13.524 8.426 L 4.212 16.823 L 21.506 16.823 C 35.471 16.823 38.797 16.463 38.797 15.142 C 38.797 13.823 24.387 -0.091 23.056 0.03 C 22.833 0.03 18.512 3.868 13.524 8.426 Z"></path> <path d="M 44.007 0.87 C 43.564 1.23 43.23 5.067 43.23 9.264 C 43.23 15.743 43.564 16.823 45.227 16.823 C 46.336 16.823 47.776 17.421 48.552 18.262 C 49.661 19.461 51.654 17.901 57.751 11.185 C 62.297 6.387 65.401 2.069 64.958 1.349 C 64.071 -0.091 45.227 -0.569 44.007 0.87 Z"></path> <path d="M 54.096 22.459 C 51.323 25.578 50.99 26.777 50.99 34.814 L 50.99 43.809 L 54.317 40.091 C 57.642 36.613 57.751 36.013 57.42 27.737 L 57.087 19.101 L 54.096 22.459 Z"></path> <path d="M 0.775 22.459 C 0.332 22.82 0 31.574 0 41.651 C 0 57.843 0.222 60.122 1.774 59.76 C 4.434 59.163 46.557 23.659 45.892 22.579 C 45.227 21.38 1.774 21.261 0.775 22.459 Z"></path> <path d="M 36.802 38.052 C 31.702 42.371 27.934 46.327 28.488 46.806 C 32.258 50.884 43.785 60.001 45.005 60.001 C 46.225 60.001 46.557 56.884 46.557 45.01 C 46.557 36.733 46.446 30.016 46.336 30.016 C 46.113 30.136 41.901 33.614 36.802 38.052 Z"></path> </svg>
icon (String)
- In case not using a built-in type, a custom icon is required
- The value must be a valid relative path, from the project root, for an image file [png|jpg] or base64 string
- Use of Resource API to fetch image data
- State icon should have unified circle border around an icon for both predefined and custom icon
- In case of file not found, use default state type icon [inject, foreach...event]
- The image should be 50x50. If the size is different, image scaled automatically by smallest side to 50, which means part of the bigger side of the image won't be displayed.
- causes
-
KOGITO-8467 SWF Viewer - Icon metadata set to svg is showing white circle
-
- Open
-
-
-
- Pull Request Sent
-
-
-
- Closed
-
-
-
- Closed
-