Skip to content

Commit

Permalink
fix: update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@bubkoo
bubkoo committed Jun 1, 2020
1 parent 613d25f commit f80942a
Show file tree
Hide file tree
Showing 21 changed files with 74 additions and 262 deletions.
2 changes: 1 addition & 1 deletion examples/x6-example-features/src/pages/expand/index.tsx
View file
Expand Up @@ -156,7 +156,7 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 600,
gridSize: 1,
grid: 1,
defaultConnectionPoint: { name: 'boundary' },
magnetThreshold: 'onleave',
clickThreshold: 5,
Expand Down
159 changes: 4 additions & 155 deletions examples/x6-example-features/src/pages/index.less
View file
@@ -1,10 +1,6 @@
@prefix: x6;
@import '~@antv/x6/es/index.less';

.noScalingStroke() {
vector-effect: non-scaling-stroke;
}

.@{prefix}-graph-wrap {
.@{x6-prefix}-graph-wrap {
width: 100%;
height: 100%;
background-color: #ffffff;
Expand All @@ -18,161 +14,14 @@
}
}

.@{prefix}-graph-tools {
.@{x6-prefix}-graph-tools {
width: 800px;
margin: 0 auto 32px auto;
}

.@{prefix}-graph {
.@{x6-prefix}-graph {
width: 100%;
height: 100%;
position: relative;
box-shadow: 0 0 10px 1px #e9e9e9;
margin: 0 auto;
}

.@{prefix}-graph-background,
.@{prefix}-graph-grid,
.@{prefix}-graph-svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.@{prefix}-graph-svg-stage {
user-select: none;
}

.@{prefix}-node {
cursor: move;
}

.@{prefix}-node {
* {
-webkit-user-drag: none;
}

.scalable * {
.noScalingStroke();
}

[magnet='true'] {
cursor: crosshair;
transition: opacity 0.3s;

&:hover {
opacity: 0.7;
}
}

foreignObject {
overflow: hidden;

& > body {
margin: 0;
padding: 0;
position: static;
background-color: transparent;
}
}
}

.@{prefix}-edge {
.source-marker,
.target-marker {
.noScalingStroke();
}

.connection {
stroke-linejoin: round;
fill: none;
}

.connection-wrap {
stroke: #000000;
stroke-width: 15;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0;
cursor: move;
fill: none;

&:hover {
opacity: 0.4;
stroke-opacity: 0.4;
}
}

.vertices {
opacity: 0;
cursor: move;

.vertex {
fill: #1abc9c;

:hover {
fill: #34495e;
stroke: none;
}
}

.vertex-remove {
fill: #ffffff;
cursor: pointer;
}

.vertex-remove-area {
opacity: 0.1;
cursor: pointer;
}

.vertex-group:hover .vertex-remove-area {
opacity: 1;
}
}

.arrowheads {
opacity: 0;
cursor: move;

.arrowhead {
fill: #1abc9c;

:hover {
fill: #f39c12;
stroke: none;
}
}
}

.tools {
opacity: 0;
cursor: pointer;

.tool-options {
display: none;
}

.tool-remove circle {
fill: #ff0000;
}

.tool-remove path {
fill: #ffffff;
}
}

&:hover {
.vertices,
.arrowheads,
.tools {
opacity: 1;
}
}
}

.@{prefix}-highlight-opacity {
opacity: 0.3;
}
10 changes: 6 additions & 4 deletions examples/x6-example-features/src/pages/performance/async.tsx
View file
Expand Up @@ -76,13 +76,15 @@ export default class Example extends React.Component<
container: this.container,
width: 1000,
height: 600,
gridSize: 1,
grid: 1,
async: true,
frozen: true,
sorting: 'approx',
defaultAnchor: { name: 'nodeCenter' },
defaultConnectionPoint: { name: 'boundary' },
viewport: (view: CellView, isInViewport: boolean) => {
connecting: {
anchor: 'nodeCenter',
connectionPoint: 'boundary',
},
checkView: (view: CellView, isInViewport: boolean) => {
if (this.state.keepDragged && view.cid === draggedCid) {
return true
}
Expand Down
2 changes: 1 addition & 1 deletion examples/x6-example-features/src/pages/performance/conveyor.tsx
View file
Expand Up @@ -153,7 +153,7 @@ export default class Example extends React.Component {
container: this.container,
width: 1000,
height: 1000,
gridSize: 1,
grid: 1,
async: true,
sorting: 'approx',
background: {
Expand Down
2 changes: 1 addition & 1 deletion examples/x6-example-features/src/pages/performance/shapes.tsx
View file
Expand Up @@ -99,7 +99,7 @@ export default class Example extends React.Component {
container: this.container,
width: (COUNT / 2) * 110,
height: 500,
gridSize: 1,
grid: 1,
async: ASYNC,
})

Expand Down
8 changes: 5 additions & 3 deletions examples/x6-example-features/src/pages/ports/compensation.tsx
View file
Expand Up @@ -10,9 +10,11 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 400,
gridSize: 1,
validateMagnet() {
return false
grid: 1,
connecting: {
validateMagnet() {
return false
},
},
})

Expand Down
3 changes: 1 addition & 2 deletions examples/x6-example-features/src/pages/ports/defaults.tsx
View file
Expand Up @@ -12,7 +12,7 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 400,
gridSize: 1,
grid: 1,
})

const rect = graph.addNode({
Expand Down Expand Up @@ -85,7 +85,6 @@ export default class Example extends React.Component {
target: { cell: rect, port: ports[2].id },
})

this.graph = graph
this.rect = rect
}

Expand Down
67 changes: 42 additions & 25 deletions examples/x6-example-features/src/pages/ports/dynamic.tsx
View file
@@ -1,5 +1,5 @@
import React from 'react'
import { Graph, Edge, CellView, StandardShape } from '@antv/x6'
import { Graph, Edge, NodeView, StandardShape } from '@antv/x6'
import '../index.less'

class Shape extends StandardShape.Rect {
Expand Down Expand Up @@ -100,7 +100,7 @@ Shape.config({

const magnetAvailabilityHighlighter = {
name: 'stroke',
options: {
args: {
padding: 6,
attrs: {
strokeWidth: 3,
Expand All @@ -117,31 +117,48 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 600,
gridSize: 1,
linkPinning: false,
snapEdges: true,
defaultConnector: { name: 'smooth' },
defaultConnectionPoint: { name: 'boundary' },
markAvailable: true,
validateConnection: function (vS, mS, vT, mT, end, lV) {
if (!mT) return false
if (vS === vT) return false
if (mT.getAttribute('port-group') !== 'in') return false
if (vT.model instanceof Shape) {
var portId = mT.getAttribute('port')
var usedInPorts = vT.model.getUsedInPorts()
if (
usedInPorts.find(function (port) {
return port.id === portId
})
)
grid: 1,
connecting: {
snap: true,
dangling: true,
connector: 'smooth',
connectionPoint: 'boundary',
highlight: true,
validateConnection(
sourceView,
sourceMagnet,
targetView,
targetMagnet,
terminalType,
edgeView,
) {
if (!targetMagnet) {
return false
}
return true
}
if (sourceView === targetView) {
return false
}
if (targetMagnet.getAttribute('port-group') !== 'in') {
return false
}

if (targetView) {
const node = targetView.cell
if (node instanceof Shape) {
var portId = targetMagnet.getAttribute('port')
var usedInPorts = node.getUsedInPorts()
if (usedInPorts.find((port) => port && port.id === portId)) {
return false
}
}
}

return true
},
},
})

graph.options.highlighting.magnetAvailability = magnetAvailabilityHighlighter
graph.options.highlighting.magnetAvailable = magnetAvailabilityHighlighter

const shape1 = new Shape()
shape1.resize(120, 100)
Expand All @@ -161,11 +178,11 @@ export default class Example extends React.Component {
shape3.updateInPorts()
graph.addNode(shape3)

function update(view: CellView) {
function update(view: NodeView) {
var cell = view.cell
if (cell instanceof Shape) {
cell.getInPorts().forEach((port) => {
var portNode = view.findPortNode(port.id, 'portBody')
var portNode = view.findPortElem(port.id!, 'portBody')
view.unhighlight(portNode, {
highlighter: magnetAvailabilityHighlighter,
})
Expand Down
2 changes: 1 addition & 1 deletion examples/x6-example-features/src/pages/ports/port-label-layout.tsx
View file
Expand Up @@ -10,7 +10,7 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 400,
gridSize: 1,
grid: 1,
})

const ellipse = graph.addNode({
Expand Down
2 changes: 1 addition & 1 deletion examples/x6-example-features/src/pages/ports/port-layout.tsx
View file
Expand Up @@ -25,7 +25,7 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 400,
gridSize: 1,
grid: 1,
})

const rect = graph.addNode({
Expand Down
8 changes: 5 additions & 3 deletions examples/x6-example-features/src/pages/ports/zindex.tsx
View file
Expand Up @@ -10,9 +10,11 @@ export default class Example extends React.Component {
container: this.container,
width: 800,
height: 400,
gridSize: 1,
validateMagnet() {
return false
grid: 1,
connecting: {
validateMagnet() {
return false
},
},
})

Expand Down
1 change: 0 additions & 1 deletion examples/x6-example-features/src/pages/selection/index.tsx
View file
@@ -1,7 +1,6 @@
import React from 'react'
import { Graph } from '@antv/x6'
import '../index.less'
import '../../../../../packages/x6/src/addon/selection/index.less'

export default class Example extends React.Component {
private container: HTMLDivElement
Expand Down

0 comments on commit f80942a

Please sign in to comment.