Skip to content

Commit

Permalink
docs: fix error in cylinder shape (#3335)
Browse files Browse the repository at this point in the history
  • Loading branch information
NewByVector authored Mar 2, 2023
1 parent c76a23b commit ab0c7fe
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 33 deletions.
137 changes: 137 additions & 0 deletions sites/x6-sites/examples/node/custom-node/demo/cylinder.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { Graph, NumberExt } from '@antv/x6'

Graph.registerNode('cylinder', {
markup: [
{
tagName: 'path',
selector: 'body',
},
{
tagName: 'ellipse',
selector: 'top',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
body: {
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
lateral: 10,
},
top: {
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 2,
refCx: '50%',
refRx: '50%',
cy: 10,
ry: 10,
},
},
attrHooks: {
lateral: {
set(t: number | string, { refBBox }) {
const isPercentage = NumberExt.isPercentage(t)
if (isPercentage) {
// eslint-disable-next-line
t = parseFloat(t as string) / 100
}

const x = refBBox.x
const y = refBBox.y
const w = refBBox.width
const h = refBBox.height

// curve control point variables
const rx = w / 2
const ry = isPercentage ? h * (t as number) : (t as number)

const kappa = 0.551784
const cx = kappa * rx
const cy = kappa * ry

// shape variables
const xLeft = x
const xCenter = x + w / 2
const xRight = x + w

const ySideTop = y + ry
const yCurveTop = ySideTop - ry
const ySideBottom = y + h - ry
const yCurveBottom = y + h

// return calculated shape
const data = [
'M',
xLeft,
ySideTop,
'L',
xLeft,
ySideBottom,
'C',
x,
ySideBottom + cy,
xCenter - cx,
yCurveBottom,
xCenter,
yCurveBottom,
'C',
xCenter + cx,
yCurveBottom,
xRight,
ySideBottom + cy,
xRight,
ySideBottom,
'L',
xRight,
ySideTop,
'C',
xRight,
ySideTop - cy,
xCenter + cx,
yCurveTop,
xCenter,
yCurveTop,
'C',
xCenter - cx,
yCurveTop,
xLeft,
ySideTop - cy,
xLeft,
ySideTop,
'Z',
]

return { d: data.join(' ') }
},
},
},
})

const graph = new Graph({
container: document.getElementById('container'),
grid: true,
})

graph.addNode({
shape: 'cylinder',
x: 320,
y: 120,
width: 80,
height: 120,
label: 'cylinder',
attrs: {
top: {
fill: '#fe854f',
fillOpacity: 0.5,
},
body: {
fill: '#ED8A19',
fillOpacity: 0.8,
},
},
})
8 changes: 8 additions & 0 deletions sites/x6-sites/examples/node/custom-node/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*PJn8T5hMua8AAAAAAAAAAAAAARQnAQ"
},
{
"filename": "cylinder.ts",
"title": {
"zh": "Cylinder",
"en": "Cylinder"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*MkDMTaYuFAUAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "custom-icon-with-svg.ts",
"title": {
Expand Down
25 changes: 0 additions & 25 deletions sites/x6-sites/examples/node/native-node/demo/cylinder.ts

This file was deleted.

8 changes: 0 additions & 8 deletions sites/x6-sites/examples/node/native-node/demo/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,6 @@
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t6wZQarashoAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "cylinder.ts",
"title": {
"zh": "Cylinder",
"en": "Cylinder"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*MkDMTaYuFAUAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "image.ts",
"title": {
Expand Down

0 comments on commit ab0c7fe

Please sign in to comment.