Skip to content

Commit

Permalink
chore: add screenshot for tournament (#5270)
Browse files Browse the repository at this point in the history 
* chore: add screenshot for tournament

* docs: update tournament example data format
  • Loading branch information
@Aarebecca
Aarebecca authored Dec 14, 2023
1 parent 85f969b commit ae2a1ad
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 139 deletions.
2 changes: 1 addition & 1 deletion packages/site/examples/feature/features/demo/meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"zh": "比赛流程图",
"en": "tournament"
},
"screenshot": ""
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PAaNQLJaZMQAAAAAAAAAAAAADmJ7AQ/original"
}
]
}
207 changes: 69 additions & 138 deletions packages/site/examples/feature/features/demo/tournament.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,69 +12,56 @@ class TournamentNode extends Extensions.RectNode {
const { data: cfg, id } = model;
const afterShapes = {};
const drawShape = (shapeType, shapeId, shapeCfg) => {
afterShapes[shapeId] = this.upsertShape(
shapeType,
shapeId,
shapeCfg,
{ model, shapeMap, diffData, diffState },
);
afterShapes[shapeId] = this.upsertShape(shapeType, shapeId, shapeCfg, { model, shapeMap, diffData, diffState });
return afterShapes[shapeId];
};
// 奖杯
if (id === 'winner') {
drawShape('text', 'winner-shape',
{
text: '🏆',
x: 0,
y: -50,
fontSize: 50,
textAlign: 'center',
textBaseline: 'middle',
},
);
drawShape('text', 'winner-shape', {
text: '🏆',
x: 0,
y: -50,
fontSize: 50,
textAlign: 'center',
textBaseline: 'middle',
});
}
// 名称
if (cfg.name) {
drawShape('text', 'name-text-shape',
{
text: cfg.name,
x: 0,
y: 0,
fontSize: 12,
textAlign: id === 'winner' ? 'center' : 'right',
textBaseline: 'middle',
fill: 'white',
},
);
drawShape('text', 'name-text-shape', {
text: cfg.name,
x: 0,
y: 0,
fontSize: 12,
textAlign: id === 'winner' ? 'center' : 'right',
textBaseline: 'middle',
fill: 'white',
});
}
// 得分
if (cfg.score) {
drawShape('text', 'score-text-shape',
{
text: `${cfg.score}`,
x: 40,
y: 0,
fontSize: 12,
textAlign: 'right',
textBaseline: 'middle',
fill: 'black',
},
);
drawShape('text', 'score-text-shape', {
text: `${cfg.score}`,
x: 40,
y: 0,
fontSize: 12,
textAlign: 'right',
textBaseline: 'middle',
fill: 'black',
});
}
// lost tag
if (cfg.state === STATE.LOST) {
const lostShape = drawShape('text', 'lost-text-shape',
{
text: 'LOST',
x: 50,
y: 0,
fontSize: 14,
fontWeight: 700,
textAlign: 'right',
textBaseline: 'middle',
fill: 'white',
},
);
const lostShape = drawShape('text', 'lost-text-shape', {
text: 'LOST',
x: 50,
y: 0,
fontSize: 14,
fontWeight: 700,
textAlign: 'right',
textBaseline: 'middle',
fill: 'white',
});
lostShape.rotate(-45);
// 输方的shape设置灰度
Object.keys(shapeMap).forEach((key) => {
Expand All @@ -88,18 +75,16 @@ class TournamentNode extends Extensions.RectNode {
}
// win tag
if (cfg.state === STATE.WIN) {
const winShape = drawShape('text', 'win-text-shape',
{
text: 'WIN',
x: 50,
y: 0,
fontSize: 14,
fontWeight: 700,
textAlign: 'right',
textBaseline: 'middle',
fill: 'yellow',
},
);
const winShape = drawShape('text', 'win-text-shape', {
text: 'WIN',
x: 50,
y: 0,
fontSize: 14,
fontWeight: 700,
textAlign: 'right',
textBaseline: 'middle',
fill: 'yellow',
});
winShape.rotate(-45);
}
return afterShapes;
Expand Down Expand Up @@ -155,102 +140,48 @@ const ExtGraph = extend(Graph, {
});
const data = {
id: 'winner',
data: {
layer: 4,
},
data: { layer: 4 },
children: [
{
id: 'layer3-1',
data: {
layer: 3,
},
data: { layer: 3 },
children: [
{
id: 'layer2-1',
data: {
layer: 2,
},
data: { layer: 2 },
children: [
{
id: 'layer1-1',
data: {
layer: 1,
},
},
{
id: 'layer1-2',
data: {
layer: 1,
},
},
{ id: 'layer1-1', data: { layer: 1 } },
{ id: 'layer1-2', data: { layer: 1 } },
],
},
{
id: 'layer2-2',
data: {
layer: 2,
},
data: { layer: 2 },
children: [
{
id: 'layer1-3',
data: {
layer: 1,
},
},
{
id: 'layer1-4',
data: {
layer: 1,
},
},
{ id: 'layer1-3', data: { layer: 1 } },
{ id: 'layer1-4', data: { layer: 1 } },
],
},
],
},
{
id: 'layer3-2',
data: {
layer: 3,
},
data: { layer: 3 },
children: [
{
id: 'layer2-3',
data: {
layer: 2,
},
data: { layer: 2 },
children: [
{
id: 'layer1-5',
data: {
layer: 1,
},
},
{
id: 'layer1-6',
data: {
layer: 1,
},
},
{ id: 'layer1-5', data: { layer: 1 } },
{ id: 'layer1-6', data: { layer: 1 } },
],
},
{
id: 'layer2-4',
data: {
layer: 2,
},
data: { layer: 2 },
children: [
{
id: 'layer1-7',
data: {
layer: 1,
},
},
{
id: 'layer1-8',
data: {
layer: 1,
},
},
{ id: 'layer1-7', data: { layer: 1 } },
{ id: 'layer1-8', data: { layer: 1 } },
],
},
],
Expand Down Expand Up @@ -323,9 +254,9 @@ graph.on('afterrender', () => {
const allEdges = graph.getAllEdgesData();
const allNodes = graph.getAllNodesData();

const layer1 = allNodes.filter(node => node.data.layer === 1);
const layer2 = allNodes.filter(node => node.data.layer === 2);
const layer3 = allNodes.filter(node => node.data.layer === 3);
const layer1 = allNodes.filter((node) => node.data.layer === 1);
const layer2 = allNodes.filter((node) => node.data.layer === 2);
const layer3 = allNodes.filter((node) => node.data.layer === 3);
const layer = [layer1, layer2, layer3, [data]];

const updateItemData = (itemType, id, data) => graph.updateData(itemType, { id, data });
Expand All @@ -337,7 +268,7 @@ graph.on('afterrender', () => {
state: STATE.INIT,
}));
// 选手初登场
playerInfo.forEach(info => {
playerInfo.forEach((info) => {
updateItemData('node', info.id, {
name: info.name,
state: STATE.PLAYING,
Expand All @@ -347,14 +278,14 @@ graph.on('afterrender', () => {
// 更新选手分数
const updateScore = () => {
const currentLayer = layer[layerIndex];
currentLayer.forEach(info => {
const edge = allEdges.find(edge => edge.target === info.id);
currentLayer.forEach((info) => {
const edge = allEdges.find((edge) => edge.target === info.id);
updateItemData('edge', edge.id, { state: STATE.PLAYING });
});
let index = 0;
timer = setInterval(() => {
index++;
currentLayer.forEach(info => {
currentLayer.forEach((info) => {
const score = setScore();
const prevScore = graph.getNodeData(info.id).data.score || 0;
const totalScore = parseFloat((score + prevScore).toFixed(2));
Expand Down

0 comments on commit ae2a1ad

Please sign in to comment.