Page Index Toggle Pages: 1 ... 5 6 [7] 8  Send TopicPrint
Very Hot Topic (More than 25 Replies) Html Node in Diagram ! (Read 11058 times)
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #90 - Apr 15th, 2020 at 11:06am
Print Post  
Hi,

For the time being, to draw a border, don't set the increased node bounds, set margin of the MainImage to 0 and add the following to your MindFusion.Drawing.Container.draw override:
Code
Select All
            var strokeColor = this.item.getSelected() ? "Orange" : "Transparent";
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context); 



You can add it before or after the drawShadow call, depending on what z-index you want to draw the border. The color can come from your model, "Orange" and "Transparent" options above are just for demonstration. Hope this helps.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #91 - Apr 15th, 2020 at 12:59pm
Print Post  
Hi,

This seems working but,
* For decision shaped node, seems two border is shown
* When moving the node, the border is trailing for any node

This is the code I tried,

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {
      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {
          var diagramElement = this.item.getTag().DataObject as DiagramElement;

          if (diagramElement) {
            if (diagramElement.isShadowElement) {
              this.item.setShadowColor("black");
              this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
              this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
              this.item.root.clipBeforeTransform.drawShadow(context);
            }

            var strokeColor = diagramElement.borderColor;
            if (this.item.getSelected()) {
              strokeColor = "Orange";
            }
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

Regards,
Kannan
  

Trailing_Border.png ( 489 KB | 32 Downloads )
Trailing_Border.png
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #92 - Apr 15th, 2020 at 1:21pm
Print Post  
Hi,

Indeed, noticed those two issues after posting the above solution. Both of these will be fixed in the next library release. For the time being, to fix the decision shape, call that somewhere in your code after creating the Diagram:
Code
Select All
(MindFusion.Diagramming.Shape.shapes as any).Decision.params.outline += " Z"; 

.

To fix the repainting issue, add the following to your Container.draw override, before drawing the shadow and the border:
Code
Select All
          if (this.invalidParent)
          {
            this.invalidParent.updateCanvasElements();
            this.invalidParent = null;
          } 



Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #93 - Apr 21st, 2020 at 12:30pm
Print Post  
Hi Lyubo,

I tried this like below and the border and shadow works fine. Thank you !

    var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
    MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {

      var defaultColor: string = "#03685A";

      if (drawShadows != false) {
        if (this.item && this.item.root && this.item.root.clipBeforeTransform) {

          if (this.invalidParent) {
            this.invalidParent.updateCanvasElements();
            this.invalidParent = null;
          }

          var diagramElement = this.item.getTag().dataObject as server.DiagramElement;

          if (diagramElement) {
            if (diagramElement.isShadowInstance) {
              this.item.setShadowColor("black");
              this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
              this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
              this.item.root.clipBeforeTransform.drawShadow(context);
            }

            var strokeColor = diagramElement.borderColor === defaultColor ? "Transparent" : diagramElement.borderColor;;
            if (this.item.getSelected()) {
              strokeColor = "Orange";
            }
            this.item.root.clipBeforeTransform.pen = strokeColor;
            this.item.root.clipBeforeTransform.strokeThickness = 6;
            this.item.root.clipBeforeTransform.draw(context);
          }
        }
      }
      originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
    };

I'm setting the border at runtime (through a color picker). After setting the color to my data object, I tried by calling node.invalidate() method but the color is not immediately reflecting. Is there any other way to do that?

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #94 - Apr 22nd, 2020 at 6:00am
Print Post  
Hi,

Can you send us the updated project with steps to reproduce, so we can investigate? Thank you!

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #95 - Apr 27th, 2020 at 4:23pm
Print Post  
Hi Lyubo,

I've created a sample and uploaded in the below url,

https://drive.google.com/open?id=1w6_ZHEUU9_kNst9e6vxbcMc_-4riQJfH

Select an element, right click and then choose a color in the context menu.

The color selected is not reflected in the node immediately.

On clicking in the diagram, the border color shows up.

Regards,
Kannan
  

Node_BackColor_Not_Changing.png ( 410 KB | 26 Downloads )
Node_BackColor_Not_Changing.png
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #96 - Apr 28th, 2020 at 5:36am
Print Post  
Hello,

What I observe in your test is that the border color actually changes immediately, but you're drawing an orange border on node selection, which prevents you from seeing the new color until you click away, effectively deselecting the node and disabling the Orange selection border.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #97 - Apr 28th, 2020 at 6:37am
Print Post  
Hi Lyubo,

Yes, you are correct. I've fixed this by deselecting the node after color change like this. Thank you  Smiley

(node as CompositeNode).setSelected(false);

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #98 - Apr 29th, 2020 at 12:30pm
Print Post  
Hi,

We've fixed the shadow clipping issue internally in the latest release. Can try out the updated scripts from the diagram-library and mindfusion-common packages.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #99 - Apr 29th, 2020 at 3:08pm
Print Post  
Hi Lyubo,

I took latest version and did below changes (and commented the draw handler code completely). Shadow looks better but border color not shown.

if (diagramElement.isShadowElement) {
//compNode.setShadowColor("Gray");
//compNode.setShadowOffsetX(3);
//compNode.setShadowOffsetY(3);
}
else {
compNode.setShadowColor("Transparent");
compNode.setShadowOffsetX(0);
compNode.setShadowOffsetY(0);
}

I tried with below code also, still border color not shown.

if (diagramElement.borderColor) {
compNode.setStroke(diagramElement.borderColor);
compNode.setStrokeThickness(3);
}

Could you please fix this setStroke issue also, it will be great help Smiley

Then I uncommented draw handler and tried with below changes,

var originalContainerDraw = MindFusion.Drawing.Container.prototype["draw"];
MindFusion.Drawing.Container.prototype["draw"] = function (context, drawShadows, shadowsOnly) {
if (drawShadows != false) {
if (this.item && this.item.root && this.item.root.clipBeforeTransform) {

if (this.invalidParent) {
this.invalidParent.updateCanvasElements();
this.invalidParent = null;
}

var diagramElement = this.item.getTag().DataObject as DiagramElement;

if (diagramElement) {
//if (diagramElement.isShadowElement) {
// this.item.setShadowColor("black");
// this.item.root.clipBeforeTransform.brush = "black"; // can use shadow color from item or elsewhere
// this.item.root.clipBeforeTransform.shadow = this.item.createShadow();
// this.item.root.clipBeforeTransform.drawShadow(context);
//}

var strokeColor = diagramElement.borderColor;
if (this.item.getSelected()) {
strokeColor = "Orange";
}
this.item.root.clipBeforeTransform.pen = strokeColor;
this.item.root.clipBeforeTransform.strokeThickness = 6;
this.item.root.clipBeforeTransform.draw(context);
}
}
}
originalContainerDraw.apply(this, [context, drawShadows, shadowsOnly]);
};

1. Shadow and Border color overlap (Circle-5)
2. Shadow is not as good as before (when draw is commented)

May I know why? Attached the screen shots.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #100 - Apr 30th, 2020 at 9:54am
Print Post  
Hi,

In your example you need to call the original draw method before your custom draw to place the shadow behind the border.

But maybe this won't be needed anymore, we've added a strokeThickness property to the Shape component that you could use;and we've also fixed the nodeDeleting keydown issue you've been having. Will let you know when the package is published.

To use the new strokeThickness property you can set it via the Shape component template and in code by calling shapeComponent.setStrokeThickness. The color of the border comes from the Shape.pen property.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #101 - May 4th, 2020 at 8:19am
Print Post  
Hi,

We've published the updated scripts on npm. Can try it out and let us know if it works better for you.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #102 - May 4th, 2020 at 11:23am
Print Post  
Hi Lyubo,

Thank you. I tried with the below code and completely commented the draw handler.

      var background = node.getComponent("OutlineShape") as any;
      if (background) {

        background.strokeThickness = this.strokeThickness;
        background.pen = borderColor;
      }

      node.invalidate();

But this didn't work. Am I missing anything? I've uploaded the sample. Could you please have a look?

https://drive.google.com/open?id=1sX7UUpxQN6NCOiK_kMxC0YRhYlAgRUkp

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
Senior Member
****
Offline


MindFusion team

Posts: 484
Joined: Jun 17th, 2010
Re: Html Node in Diagram !
Reply #103 - May 4th, 2020 at 12:27pm
Print Post  
Hi,

The thicker border is there, but it's covered by the image, since the stroke thickness is directed inwards to be contained in the node's dimensions. So to achieve the effect, you need to revert the old workaround for the MainImage margins and size we did before:

Code
Select All
// margin of "3" for MainImage in the node's template

// revert back to this in createCompositeNode method
node.setBounds(new Rect(diagramElement.x, diagramElement.y, diagramElement.width + 6, diagramElement.height + 6));
 



Now the shadow will be seen (like in Circle-1 in the screenshot), so you may want to consider applying a white stroke instead of transparent one.

Regards,
Lyubo
MindFusion
  

borders.png ( 27 KB | 24 Downloads )
borders.png
Back to top
 
IP Logged
 
Kannan Thirumal
Full Member
***
Offline


I Love Mind Fusion Diagram
:-)

Posts: 209
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Html Node in Diagram !
Reply #104 - May 4th, 2020 at 1:12pm
Print Post  
Hi Lyubo,

I tried that two changes but didn't work. Am I miss anything else?

Regards,
Kannan
  

diagram-node_template_003.txt (Attachment deleted | 0 Downloads )
diagram_component.ts ( 99 KB | 25 Downloads )
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 ... 5 6 [7] 8 
Send TopicPrint