React-diagrams: Changing link color

[ianchanning]

I've got the various examples working nicely, thank you for this excellent project.

However I wanted to change the colour of the links. Conceptually this seems like a relatively simple idea, but it seems that I need to almost fully implement the custom animated links example to change the colour.

I'm sure I can get this to work - but I was wondering if there is a simpler way?

[ianchanning]

This is the simplest that I could come up with, effectively re-creating the DefaultLinkModel generateLinkSegment:

class AdvancedLinkModel extends DefaultLinkModel {

  constructor() {
    super('advanced');
    this.color = 'rgba(0,0,0,0.5)';
  }

}

class AdvancedPortModel extends DefaultPortModel {

  createLinkModel(): AdvancedLinkModel | null {
    return new AdvancedLinkModel();
  }

}

class AdvancedLinkFactory extends DefaultLinkFactory {

  constructor() {
    super();
    this.type = 'advanced';
  }

  getNewInstance(): AdvancedLinkModel {
    return new AdvancedLinkModel();
  }

  generateLinkSegment(model: AdvancedLinkModel, widget: DefaultLinkWidget, selected: boolean, path: string) {
    return (
      <path
        className={selected ? widget.bem('--path-selected') : ''}
        strokeWidth={model.width}
        stroke={model.color}
        d={path}
      />
    );
  }

}

[dailinyi]

const link = outputPoint.link(inputPort); link.setColor('#123456'); model.addLink(link);
isn't ok?

[ianchanning]

@dailinyi That is auto generating the links but I want users to be able to drag and drop links themselves

[PikkaPikkachu]

Same question, is there a simple css way to change the color?

[ianchanning]

@PikkaPikkachu I'm pretty sure the answer is no. This library seems to work around the idea of just creating a new object/class to extend the functionality rather than config.

[PikkaPikkachu]

@ianchanning I guess your solution to recreating the DefaultLinkModel class is the best, thanks!!

[dylanvorster]

You can also just change this: https://github.com/projectstorm/react-diagrams/blob/2df09edb7e5716a68884ed6d68faa78068003f52/src/sass/defaults/_DefaultLinkWidget.scss#L18

[dylanvorster]

But I will split out the defaults as a separate Lerna project

[magnafilix]

This is the simplest that I could come up with, effectively re-creating the DefaultLinkModel generateLinkSegment:

class AdvancedLinkModel extends DefaultLinkModel {

  constructor() {
    super('advanced');
    this.color = 'rgba(0,0,0,0.5)';
  }

}

class AdvancedPortModel extends DefaultPortModel {

  createLinkModel(): AdvancedLinkModel | null {
    return new AdvancedLinkModel();
  }

}

class AdvancedLinkFactory extends DefaultLinkFactory {

  constructor() {
    super();
    this.type = 'advanced';
  }

  getNewInstance(): AdvancedLinkModel {
    return new AdvancedLinkModel();
  }

  generateLinkSegment(model: AdvancedLinkModel, widget: DefaultLinkWidget, selected: boolean, path: string) {
    return (
      <path
        className={selected ? widget.bem('--path-selected') : ''}
        strokeWidth={model.width}
        stroke={model.color}
        d={path}
      />
    );
  }

}

@ianchanning , did you run into this issue when were instantiating AdvancedLinkFactory?

[RebeccaRol]

There is a css way - Add this scss changing stroke to whatever colour you want

`
.srd-diagram {
.srd-default-link {
path {
stroke: #000;
}

  &--path-selected{
    stroke: #000;
  }
}

}
`