I would like to create my custom arrow similar to Message Flow 2 arrow of draw.io palette.
The mentioned arrow has an object in the middle and they behave nicely; middle object not gets resized, it moves with the line, stays upright etc.
When inspecting the style of this arrow I only see the individual elements but not any expression binding them.
Arrow:
startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;strokeWidth=2;align=center;
Object in middle:
shape=message;html=1;outlineConnect=0;
I tried grouping an arrow with an object but could not reach the same result; the group no longer behaves as an arrow.
The simplest method I know is just to change the symbol's style (not the arrow's one), which is by default:
shape=message;html=1;outlineConnect=0;
to the desired one. Say, an isometric cube:
shape=isoCube2;isoAngle=15;html=1;
The new object will retain the behavior you describe. Then simply move it to the scratchpad, from where you can export a bunch of them as a library.
It's possible, but I don't know clean way of doing this.
To understand how Message Flow 2 works you can either look at the code:
var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;');
edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
edge.geometry.setTerminalPoint(new mxPoint(100, 0), false);
edge.geometry.relative = true;
edge.edge = true;
var cell = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message;html=1;outlineConnect=0;');
cell.geometry.relative = true;
cell.vertex = true;
cell.geometry.offset = new mxPoint(-10, -7);
edge.insert(cell);
or at diagram's XML (which you can find in menu Extras -> Edit Diagram)
...
<mxCell id="YzitZNannA--EQJoASZJ-14" value="" style="startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="370" y="160" as="sourcePoint" />
<mxPoint x="470" y="160" as="targetPoint" />
</mxGeometry>
</mxCell>
<mxCell id="YzitZNannA--EQJoASZJ-15" value="" style="shape=message;html=1;outlineConnect=0;" vertex="1" parent="YzitZNannA--EQJoASZJ-14">
<mxGeometry width="20" height="14" relative="1" as="geometry">
<mxPoint x="-10" y="-7" as="offset" />
</mxGeometry>
</mxCell>
...
From here you can see two things:
Object inside must have arrow object set as its parent. I don't know any way to do that other then js code, or direct change in Edit Diagram dialog.
Geometry must be relative. This can be set by Edit Diagram dialog or with Edit -> Edit Geometry option.
this is something that cannot be changed using style only. Since draw.io is an open source project, I suggest to take a closer look at: https://github.com/jgraph/drawio
It might help.
Regards,
Related
I'm very new to Oracle Apex and currently I want to use and customize Gantt charts. What I want to achieve it to show line breaks in the row-labels. Currently every newline character gets cut out and I am not sure where this happens and how I can prevent this.
The marked text contains newline characters. Don't be confused by the <br>, I just tests if this does the trick.
I just want to show more some information in the for each row. If there is another more elegant way, it would be very nice to give a tip.
Update:
I did some research and found a very nice example on a similar topic, in this case to create a custom tooltip https://youtu.be/2rZAIR_0tNg?t=2532.
I wanted to do the same thing for the row_axis label renderer, but nothing gets visualized.
The render function I use:
function custom_row_axis_label_renderer(data_context){
var row_axis_label_elem = document.createElement("g");
$("row_axis_label_elem").addClass("custom_row_axis_label");
row_axis_label_elem.innerHTML = '<text font-size="14px">Hello World</text>';
console.log(row_axis_label_elem);
return row_axis_label_elem;
}
The rendered element kind of exists, but it's get the size 0x0 from somewhere.
Am I missing something here?
Regards,
Nik
Meanwhile I found the solution on how to build a custom renderer. The main part I didn't new is that you NEED to pass x and y coordinates to have the new label to be rendered correctly. I found a proper example the the oracle forum, but unfortunately I can't find the link anymore to give credit to the original example.
Here is my code. It creates two text elements below each other to achieve a mocked line break and it adds a yellow icon. Of course you can use the data_context object to access the actual label. Add this part in the "Function and Global Variable Declaration
" part of your page:
custom_row_axis_label_renderer = function (data_context){
var row_axis_label_elem = document.createElementNS("http://www.w3.org/2000/svg", "g");
var upper_text = document.createElementNS("http://www.w3.org/2000/svg", "text");
var lower_text = document.createElementNS("http://www.w3.org/2000/svg", "text");
var icon_node = document.createElementNS("http://www.w3.org/2000/svg", "circle");
upper_text.textContent = "Hello";
upper_text.setAttribute("dominant-baseline","text-before-edge");
upper_text.setAttribute("class","oj-gantt-row-label");
upper_text.setAttribute("font-size","14px");
upper_text.setAttribute("text-anchor","end");
upper_text.setAttribute("x","220");
upper_text.setAttribute("y","5");
lower_text.textContent = "World";
lower_text.setAttribute("dominant-baseline","text-before-edge");
lower_text.setAttribute("class","oj-gantt-row-label");
lower_text.setAttribute("font-size","14px");
lower_text.setAttribute("text-anchor","end");
lower_text.setAttribute("x","220");
lower_text.setAttribute("y","25");
icon_node.setAttribute("cx","240");
icon_node.setAttribute("cy","25");
icon_node.setAttribute("r","8");
icon_node.setAttribute("class","u-color-7");
row_axis_label_elem.appendChild(upper_text);
row_axis_label_elem.appendChild(lower_text);
row_axis_label_elem.appendChild(icon_node);
return row_axis_label_elem;
}
Also you need to set the renderer of the row-axis-label. I also made the rows and task a little bit bigger to have enough space for two lines of text in the label. Add this in the "JavaScript Initialization Code" in the attriutes of you chart:
function( options ){
options.rowAxis.label = {renderer : custom_row_axis_label_renderer};
options.rowDefaults = {height : 60};
options.taskDefaults = {height: 40};
return options;
}
I have just updated my code to use the latest 2.4.0-alpha05 for the navigation component and I have custom navigation between the multiple stacks and my main nav graph is like the documentation I found.
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:startDestination="#+id/accounts"
android:id="#+id/bottom_nav">
<inclue app:graph="#navigation/accounts_tab_nav"/>
<include app:graph="#navigation/contact_tab_nav" />
<include app:graph="#navigation/profile_tab_nav" />
</navigation>
Most of my stacks animate with a slide from right to left. It looks like that when I am on the second screen, in let's say the profile screen, and then switch to the first tab it triggers the popEnter en popExitAnim that are defined in the action that leads to the second screen in the profile tab. Like so:
<fragment
android:id="#+id/profileMain"
android:name="com.app.ProfileFragment"
tools:layout="#layout/fragment_profile">
<action
android:id="#+id/action_profileMain_to_secondFragment"
app:destination="#id/secondFragment"
app:enterAnim="#anim/slide_in_right"
app:exitAnim="#anim/slide_out_left"
app:popEnterAnim="#anim/slide_in_left"
app:popExitAnim="#anim/slide_out_right" />
</fragment>
But obviously I want tho use the (default) fade animation when switching tabs. So how should I do that?
And I would like to pop to the root of the stack when reselecting a tab. But I probably have to do that myself?
I came up with a solution that seems to work for me, but I have to admit it feels a little bit hacky.
I have a public flag in my MainActivity:
var tabWasSelected = false
Then I remember if a tab item was selected in setOnItemSelectedListener
// always show selected Bottom Navigation item as selected (return true)
bottomNavigationView.setOnItemSelectedListener { item ->
// In order to get the expected behavior, you have to call default Navigation method manually
NavigationUI.onNavDestinationSelected(item, navController)
// set flag so that the fragment can call the correct animation on tab change in onCreateAnimation
tabWasSelected = true
return#setOnItemSelectedListener true
}
This will always select the item and navigate to the associated destination while maintaining multiple back stacks.
I then have created a Fragment class which all my other fragments inherit from. It simply overrides onCreateAnimation to set the correct animation. Here is what it looks like:
open class MyFragment: Fragment() {
override fun onCreateAnimation(transit: Int, enter: Boolean, nextAnim: Int): Animation? {
val activity = requireActivity()
if (activity is MainActivity) {
if (activity.tabWasSelected) {
if (enter) {
//flow is exit first, then enter, so we have to reset the flag on enter
//in order that following animations will run as defined in the nav graph
activity.tabWasSelected = false
return AnimationUtils.loadAnimation(requireContext(), R.anim.nav_default_pop_enter_anim)
} else {
return AnimationUtils.loadAnimation(requireContext(), R.anim.nav_default_pop_exit_anim)
}
}
}
//no tab was selected, so run the defined animation
return super.onCreateAnimation(transit, enter, nextAnim)
}
}
Instead of using setupWithNavController function, follow this way.
First, create your NavOptions which include animation shown below.
val options = NavOptions.Builder()
.setLaunchSingleTop(true)
.setEnterAnim(R.anim.enter_from_bottom)
.setExitAnim(R.anim.exit_to_top)
.setPopEnterAnim(R.anim.enter_from_top)
.setPopExitAnim(R.anim.exit_to_bottom)
.setPopUpTo(navController.graph.startDestination,false)
.build();
Then use setOnNavigationItemSelectedListener to navigate with animation like that.
bottomNavigationView.setOnNavigationItemSelectedListener
{ item ->
when(item.itemId) {
R.id.fragmentFirst -> {
navController.navigate(R.id.fragmentFirst,null,options)
}
R.id.fragmentSecond -> {
navigate(R.id.fragmentSecond,null,options)
}
R.id.fragmentThird -> {
navController.navigate(R.id.fragmentThird,null,options)
}
}
}
Finally, you should prevent same item selection case so you can add below code.
bottomNavigationView.setOnNavigationItemReselectedListener
{ item ->
return#setOnNavigationItemReselectedListener
}
I used bottomNavigation like that in my project to add animation for page transitions. I hope it helped.
In this instance I am not "stuck" but looking for some 'guidance' on how to perform a GUI layout mechanism that makes sense and easy to construct. I am using a TreeControl that visually "matches" Winamp's options/preferences dialog for all the settings and program options.
TO BE CLEAR: This is not something I've ever attempted and looking for user input to help me get across the finish line.
I have 6 items in the 'tree' (the 'parent') and 5 'subitems'. I have it fully constructed and I can get the data from whatever node is selected (which I'll post below images).
I am using a "do.Modal dialog" and, when I click on the tree node, I want the right side of the dialog to update to the needed controls for that node function. The execution of controls through "show" and "hide" to me seems pretty easy. The issue I have is the how to do the visual "static" controls in the resource editor when each "node paged" controls may or may not sit on top of each other visually during design time. During run time, when each node is selected on the nodes controls will be active but during design time, I may have controls sitting on top of each other and will be a logistical nightmare trying to sort out their positions etc.
How do I resolve that aspect of building it? I think of it as a select: 'node' show: 'option page controls' so I get the logic; I'm just wondering if I should have separate "popup" pages and call those … or deal with the controls directly. Does that makes sense?
I've done some searching on how to do this, but the examples are all over the place and I figured asking here makes the most sense. I'm sure there are multiple ways to do this, I'm just looking for the shortest path and easiest to maintain and possibly expand on the options in the future.
The examples of the dialog and the source code I'm using:
Here is the initialization code:
BOOL CSettingsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
HTREEITEM hParent, hToolbars, hColorScheme, hTabStyles, hPowerUser,
hResetApp;
//HTREEITEM hCompany, hLevel, hLevelNext; // Used in core example, not needed here
hParent = m_TreeCtrl.InsertItem((L"Preferences"), TVI_ROOT);
hToolbars = m_TreeCtrl.InsertItem((L"Toolbars"), hParent);
hColorScheme = m_TreeCtrl.InsertItem((L"Color Scheme"), hParent);
hTabStyles = m_TreeCtrl.InsertItem((L"Tab Styles"), hParent);
hPowerUser = m_TreeCtrl.InsertItem((L"Power User"), hParent);
hResetApp= m_TreeCtrl.InsertItem((L"Reset All Options"), hParent);
m_TreeCtrl.Expand(hParent, TVE_EXPAND);
m_TreeCtrl.SelectItem(hParent);
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Preferences Settings"));
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
Here is the dialog framework that I'm starting from scratch with just to arrive here:
void CSettingsDlg::OnTvnSelchangedTree1(NMHDR *pNMHDR, LRESULT *pResult)
{
//LPNMTREEVIEW pNMTreeView = reinterpret_cast<LPNMTREEVIEW>(pNMHDR);
//SetDlgItemInt(IDC_TXT_TREE1, m_TreeCtrl.GetItemData(pNMTreeView->itemNew.hItem));
//*pResult = 0;
HTREEITEM sel = m_TreeCtrl.GetSelectedItem();
CPoint point;
CString str;
GetCursorPos(&point);
m_TreeCtrl.ScreenToClient(&point);
UINT flags = 0;
HTREEITEM hitItem = m_TreeCtrl.HitTest(point, &flags);
if (hitItem && sel != hitItem)
{
sel = hitItem;
m_TreeCtrl.SelectItem(sel);
str = m_TreeCtrl.GetItemText(sel);
//MessageBox((LPCTSTR)str); // Just to verify.
}
if (str == "Preferences")
{
this->SetWindowText(_T("Preferences Settings"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Preferences Settings"));
}
if (str == "Toolbars")
{
this->SetWindowText(_T("Toolbars Settings"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Toolbars Settings"));
}
if (str == "Color Scheme")
{
this->SetWindowText(_T("Color Scheme"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Color Scheme Settings"));
}
if (str == "Tab Styles")
{
this->SetWindowText(_T("Tab Styles Settings"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Tab Styles Settings"));
}
if (str == "Power User")
{
this->SetWindowText(_T("Power User Settings"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Power User Settings"));
}
if (str == "Reset All Options")
{
this->SetWindowText(_T("Reset All Settings"));
GetDlgItem(IDC_SETTINGS_CAPTION)->SetWindowText(_T("Reset All Settings"));
}
*pResult = 0;
}
So as shown, you can see that I have the ability to change the static caption to the "active" page node that is selected from the tree. I'm looking to solve the best way to handle the GUI elements that will go on the right side....
Some controls for example will be:
Color scheme Node: 5 check boxes for theme changing
Toolbars Node: Radio button for Docked or Floating
Power User Node: Checkbox to disable user warning within program operation
Tab Styles Node: Radio buttons to select flat, 3d, whatever.
and when the user "selects" whatever it writes it to the registry and then I call the function to read the data blah blah blah...
So that is where I'm at. Does anyone have any suggestions on a course of action, so I don't paint myself into a corner?
Although I can't actually speak for how the authors of the "Winamp" software implemented their UI, I would suggest that you consider using a property sheet for your case, where each set of controls can be implemented as separate property pages, each of which will be defined (both in the resource script and in the C++ code) in ways very similar to individual modal dialog boxes.
The 'classic' property sheet has a horizontal row of tabs (normally, at the top of the sheet) to select each page, as shown in the sample below. Indeed, some sources/platforms refer to a property sheet as a "tabbed dialog".
However, the new(ish) CMFCPropertySheet class allows you to replace that tab control with one of several other options, which will show as separate 'panes' (on the left-hand side of the sheet). To use one of these alternative styles, call the SetLook() member function in your constructor override with the CMFCPropertySheet::PropSheetLook_Tree enum value. The example shown in the link is not exactly what you have shown in your question, but the CMFCPropertySheet and CMFCPropertyPage classes allow many, many customizations to their appearance and style.
I have never actually used the PropSheetLook_Tree style, but the image below shows "one I made earlier" with the PropSheetLook_OutlookBar style.
Hello,
I wonder how do I change my mouse event
because I would like to X.Caption activates only when I right-clicked on it.
thank you very much
If I'm correct ( other contributors, don't be afraid to correct me ), you might have to edit the internals of XTK for your needs. XTK has the "controls" defined in X.event.js for it's event such as HoverEvent and PanEvent which are acquired from the Google Closure Library. You can look into the Google Closure Library more as I haven't completely reviewed it, but X.caption is mostly derived from Goog.ui.Tooltip which can be used with the events from Goog.ui.Popup, Goog.ui.PopupBase, and Goog.events. You can try to include Goog.events into your Javascript and define your own click event or something related to that and look through the Google Closure Library some more.
If what I just wrote in the small paragraph above is not completely correct or anything like that, there are of course basic Javascript DOM Events for clicking. I'm not quite sure how those would work with XTK because XTK uses WebGL for rendering. You can review the basic events at http://www.w3schools.com/jsref/dom_obj_event.asp. If you find any solution for yourself, you are more than welcome to contribute it to XTK.
I think there are too ways no ? Change the xtk source code and compile your own version or something like this :
window.onload = function() {
myrenderer.config.HOVERING_ENABLED = false; // disabling show caption on mousehover
var mouse_x, mouse_y;
myrenderer.interactor.onMouseMove = function(event) {
mouse_x = event.offsetX;
mouse_y = event.offsetY;
}
myrenderer.interactor.onMouseDown = function(left,middle, right) {
if (right) {
var picked_id = myrenderer.pick(mouse_x, mouse_y);
if (picked_id==-1) throw new Error("No object");
var picked_object = myrenderer.get(picked_id);
var mycontainer = myrenderer.container;
var caption = new X.caption(mycontainer,mycontainer.offsetLeft + mouse_x + 10, mycontainer.offsetTop + mouse_y + 10,myrenderer.interactor);
caption.setHtml(picked_object.caption);
// use settimeout or something else to destroy the caption
}
}
}
The following JSFiddle shows how to do that. To actually display a tooltip etc. you can use any JS Library like jQuery UI.
http://jsfiddle.net/haehn/ZpX34/
I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.