|
18 | 18 | const markov = useMarkovChain(graph); |
19 | 19 | useMarkovColorizer(graph, markov).colorize(); |
20 | 20 |
|
21 | | - const int = gsap.utils.interpolate(colors.RED_500, colors.RED_800); |
| 21 | + // const int = gsap.utils.interpolate(colors.RED_500, colors.RED_800); |
22 | 22 |
|
23 | | - const { play, stop } = graph.defineTimeline({ |
24 | | - forShapes: ["circle"], |
25 | | - durationMs: 2000, |
26 | | - customInterpolations: { |
27 | | - stroke: { |
28 | | - value: (progress, schema) => ({ |
29 | | - color: progress < 0.5 ? int(progress * 2) : int(2 - progress * 2), |
30 | | - lineWidth: schema.stroke?.lineWidth ?? 10, |
31 | | - }), |
32 | | - easing: "in-out", |
33 | | - }, |
34 | | - }, |
35 | | - synchronize: true, |
36 | | - }); |
| 23 | + // const { play, stop } = graph.defineTimeline({ |
| 24 | + // forShapes: ["circle"], |
| 25 | + // durationMs: 2000, |
| 26 | + // customInterpolations: { |
| 27 | + // stroke: { |
| 28 | + // value: (progress, schema) => ({ |
| 29 | + // color: progress < 0.5 ? int(progress * 2) : int(2 - progress * 2), |
| 30 | + // lineWidth: schema.stroke?.lineWidth ?? 10, |
| 31 | + // }), |
| 32 | + // easing: "in-out", |
| 33 | + // }, |
| 34 | + // }, |
| 35 | + // synchronize: true, |
| 36 | + // }); |
37 | 37 |
|
38 | | - graph.subscribe("onFocusChange", (newIds, oldIds) => { |
39 | | - const newNodeIds = Array.from(newIds).filter(graph.getNode); |
40 | | - const oldNodeIds = Array.from(oldIds).filter(graph.getNode); |
41 | | - newNodeIds.forEach((nodeId) => { |
42 | | - stop({ shapeId: nodeId }); |
43 | | - }); |
44 | | - const noLongerFocused = Array.from(oldNodeIds).filter( |
45 | | - (nodeId) => !newNodeIds.includes(nodeId) |
46 | | - ); |
47 | | - for (const nodeId of noLongerFocused) { |
48 | | - if (markov.invalidStates.value.has(nodeId)) play({ shapeId: nodeId }); |
49 | | - } |
50 | | - }); |
| 38 | + // graph.subscribe("onFocusChange", (newIds, oldIds) => { |
| 39 | + // const newNodeIds = Array.from(newIds).filter(graph.getNode); |
| 40 | + // const oldNodeIds = Array.from(oldIds).filter(graph.getNode); |
| 41 | + // newNodeIds.forEach((nodeId) => { |
| 42 | + // stop({ shapeId: nodeId }); |
| 43 | + // }); |
| 44 | + // const noLongerFocused = Array.from(oldNodeIds).filter( |
| 45 | + // (nodeId) => !newNodeIds.includes(nodeId) |
| 46 | + // ); |
| 47 | + // for (const nodeId of noLongerFocused) { |
| 48 | + // if (markov.invalidStates.value.has(nodeId)) play({ shapeId: nodeId }); |
| 49 | + // } |
| 50 | + // }); |
51 | 51 |
|
52 | | - watch(markov.invalidStates, () => { |
53 | | - for (const node of graph.nodes.value) { |
54 | | - stop({ shapeId: node.id }); |
55 | | - if (markov.invalidStates.value.has(node.id)) play({ shapeId: node.id }); |
56 | | - } |
57 | | - }); |
| 52 | + // watch(markov.invalidStates, () => { |
| 53 | + // for (const node of graph.nodes.value) { |
| 54 | + // stop({ shapeId: node.id }); |
| 55 | + // if (markov.invalidStates.value.has(node.id)) play({ shapeId: node.id }); |
| 56 | + // } |
| 57 | + // }); |
58 | 58 |
|
59 | | - const test = () => { |
60 | | - for (const nodeId of markov.invalidStates.value) { |
61 | | - play({ shapeId: nodeId }); |
62 | | - } |
63 | | - }; |
| 59 | + // const test = () => { |
| 60 | + // for (const nodeId of markov.invalidStates.value) { |
| 61 | + // play({ shapeId: nodeId }); |
| 62 | + // } |
| 63 | + // }; |
64 | 64 | </script> |
65 | 65 |
|
66 | 66 | <template> |
67 | 67 | <GraphProduct v-bind="graphWithCanvas"> |
68 | 68 | <template #top-center> |
69 | 69 | <MarkovChainInfo :markov="markov" /> |
70 | | - <GButton @click="test">Test</GButton> |
| 70 | + <!-- <GButton @click="test">Test</GButton> --> |
71 | 71 | </template> |
72 | 72 |
|
73 | 73 | <template #bottom-center> |
|
0 commit comments