Skip to content

Commit

Permalink
fix(core): diagram rendering issues in safari (#1150)
Browse files Browse the repository at this point in the history 
* fix(core): diagram stroke-dasharray issues in safari

* fix react network components

* fix angular network components

* update storybook styling
  • Loading branch information
@theiliad
theiliad committed Sep 13, 2021
1 parent bb955e4 commit fc123dd
Show file tree
Hide file tree
Showing 9 changed files with 203 additions and 163 deletions.
138 changes: 72 additions & 66 deletions packages/angular/src/diagrams/card-node/card-node.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,85 @@
import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
import settings from "carbon-components/src/globals/js/settings";
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import settings from 'carbon-components/src/globals/js/settings';

const { prefix } = settings;

@Component({
selector: "ibm-diagram-card-node",
selector: 'ibm-diagram-card-node',
template: `
<ng-container [ngSwitch]="component">
<xhtml:div
*ngSwitchCase="'div'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[ngStyle]="{'border-color': color}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:div>
<ng-container [ngSwitch]="component">
<xhtml:div
*ngSwitchCase="'div'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[ngStyle]="{
'border-color': color,
position: position
}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:div>
<xhtml:button
*ngSwitchCase="'button'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[ngStyle]="{'border-color': color}"
(click)="click.emit($event)"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:button>
<xhtml:button
*ngSwitchCase="'button'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[ngStyle]="{
'border-color': color,
position: position
}"
(click)="click.emit($event)"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:button>
<xhtml:a
*ngSwitchCase="'a'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[attr.href]="href"
[ngStyle]="{'border-color': color}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:a>
</ng-container>
<ng-template #nodeTemplate>
<ng-content></ng-content>
</ng-template>
`
<xhtml:a
*ngSwitchCase="'a'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
namespace + '--' + component
]"
[attr.href]="href"
[ngStyle]="{ 'border-color': color, position: position }"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:a>
</ng-container>
<ng-template #nodeTemplate>
<ng-content></ng-content>
</ng-template>
`,
})

export class CardNodeComponent implements OnInit {
@Input() as = "div";
@Input() as = 'div';
@Input() href: string = null;
@Input() color;
@Input() stacked;
@Input() position: string = 'static';

@Output() click: EventEmitter<any> = new EventEmitter<any>();
@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
Expand All @@ -84,11 +90,11 @@ export class CardNodeComponent implements OnInit {

namespace = `${prefix}--cc--card-node`;

component = "div";
component = 'div';

ngOnInit() {
if (this.href) {
this.component = "a";
this.component = 'a';
} else {
this.component = this.as;
}
Expand Down
179 changes: 101 additions & 78 deletions packages/angular/src/diagrams/shape-node/shape-node.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,118 @@
import { Component, Input, Output, EventEmitter, TemplateRef, OnInit } from "@angular/core";
import settings from "carbon-components/src/globals/js/settings";
import {
Component,
Input,
Output,
EventEmitter,
TemplateRef,
OnInit,
} from '@angular/core';
import settings from 'carbon-components/src/globals/js/settings';

const { prefix } = settings;

@Component({
selector: "ibm-diagram-shape-node",
selector: 'ibm-diagram-shape-node',
template: `
<ng-container [ngSwitch]="component">
<ng-container [ngSwitch]="component">
<xhtml:div
*ngSwitchCase="'div'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[ngStyle]="{
'height.px': size,
'width.px': size,
position: position
}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:div>
<xhtml:div
*ngSwitchCase="'div'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[ngStyle]="{'height.px': size, 'width.px': size}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:div>
<xhtml:button
*ngSwitchCase="'button'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[ngStyle]="{
'height.px': size,
'width.px': size,
position: position
}"
(click)="click.emit($event)"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:button>
<xhtml:button
*ngSwitchCase="'button'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[ngStyle]="{'height.px': size, 'width.px': size}"
(click)="click.emit($event)"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:button>
<xhtml:a
*ngSwitchCase="'a'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[attr.href]="href"
[ngStyle]="{
'height.px': size,
'width.px': size,
position: position
}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:a>
</ng-container>
<xhtml:a
*ngSwitchCase="'a'"
[ngClass]="[
namespace,
stacked ? namespace + '--stacked' : '',
shape ? namespace + '--' + shape : '',
namespace + '--' + component
]"
[attr.href]="href"
[ngStyle]="{'height.px': size, 'width.px': size}"
(mouseenter)="mouseEnter.emit($event)"
(mouseover)="mouseOver.emit($event)"
(mouseout)="mouseOut.emit($event)"
(mouseleave)="mouseLeave.emit($event)"
(mousemove)="mouseMove.emit($event)"
tabindex="0"
>
<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
</xhtml:a>
</ng-container>
<ng-template #nodeTemplate>
<div *ngIf="renderIcon" attr.class="{{ namespace + '__icon' }}" >
<ng-container *ngTemplateOutlet="renderIcon"></ng-container>
</div>
<div attr.class="{{ namespace + '__body' }}">
<div attr.class="{{ namespace + '__title' }}">{{title}}</div>
<div attr.class="{{ namespace + '__subtitle' }}">{{subtitle}}</div>
</div>
</ng-template>
`
<ng-template #nodeTemplate>
<div *ngIf="renderIcon" attr.class="{{ namespace + '__icon' }}">
<ng-container *ngTemplateOutlet="renderIcon"></ng-container>
</div>
<div
attr.class="{{ namespace + '__body' }}"
[ngStyle]="{ position: bodyPosition }"
>
<div attr.class="{{ namespace + '__title' }}">{{ title }}</div>
<div attr.class="{{ namespace + '__subtitle' }}">
{{ subtitle }}
</div>
</div>
</ng-template>
`,
})

export class ShapeNodeComponent implements OnInit {
@Input() as = "div";
@Input() as = 'div';
@Input() href: string = null;
@Input() renderIcon: TemplateRef<any>;
@Input() size = 48;
@Input() stacked: boolean;
@Input() shape: "circle" | "square" | "rounded-square" = "circle";
@Input() shape: 'circle' | 'square' | 'rounded-square' = 'circle';
@Input() subtitle: string;
@Input() title: string;
@Input() position: string = 'fixed';
@Input() bodyPosition: string = 'absolute';

@Output() click: EventEmitter<any> = new EventEmitter<any>();
@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
Expand All @@ -98,14 +122,13 @@ export class ShapeNodeComponent implements OnInit {
@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();

namespace = `${prefix}--cc--shape-node`;
component = "div";
component = 'div';

ngOnInit() {
if (this.href) {
this.component = "a";
this.component = 'a';
} else {
this.component = this.as;
}
}

}

0 comments on commit fc123dd

Please sign in to comment.