Skip to content

Commit

Permalink
Merge pull request #13 from KappaSigmaMu/add-on-click
Browse files Browse the repository at this point in the history 
Change nodes' onClick and hover behavior
  • Loading branch information
@laurogripa
laurogripa authored Mar 21, 2022
2 parents 42404db + 865293a commit f1a77e6
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 64 deletions.
18 changes: 8 additions & 10 deletions dist/ThreeCanary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,15 +113,19 @@ function Points(_ref) {
key: i,
nodeId: i,
position: position,
onNodeSelected: handleSelectedNode
onNodeSelected: handleSelectedNode,
dialogData: nodesData[selected],
onNodeClick: onNodeClick
});
})));
}

function Point(_ref2) {
var nodeId = _ref2.nodeId,
position = _ref2.position,
onNodeSelected = _ref2.onNodeSelected;
dialogData = _ref2.dialogData,
onNodeSelected = _ref2.onNodeSelected,
onNodeClick = _ref2.onNodeClick;
var ref = (0, _react.useRef)();

var _useState3 = (0, _react.useState)(false),
Expand Down Expand Up @@ -166,7 +170,7 @@ function Point(_ref2) {
return setHover(false);
},
onClick: function onClick(e) {
return onNodeSelected(nodeId);
return onNodeClick(dialogData.hash);
}
})));
}
Expand Down Expand Up @@ -196,13 +200,7 @@ function PointDialog(_ref3) {
emissive: brandPalette[0]
}), /*#__PURE__*/_react.default.createElement(_drei.Html, {
distanceFactor: 2
}, /*#__PURE__*/_react.default.createElement(DialogContent, null, dialogData.img ? /*#__PURE__*/_react.default.createElement(DialogImage, {
src: dialogData.img,
alt: dialogData.name,
onClick: handleNodeClick
}) : null, dialogData.name ? /*#__PURE__*/_react.default.createElement(DialogTitle, {
onClick: handleNodeClick
}, dialogData.name) : null, dialogData.level ? /*#__PURE__*/_react.default.createElement(DialogLabel, null, dialogData.level) : null, dialogData.hash ? /*#__PURE__*/_react.default.createElement(DialogHash, null, formatHash(dialogData.hash)) : null)));
}, /*#__PURE__*/_react.default.createElement(DialogContent, null, dialogData.hash ? /*#__PURE__*/_react.default.createElement(DialogHash, null, dialogData.hash) : null)));
}

function Model(props) {
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@kappasigmamu/canary-component",
"version": "0.3.2",
"version": "0.3.3",
"description": "React Component that renders the KappaSigmaMu Canary in 3D",
"keywords": [
"kusama",
Expand Down
87 changes: 36 additions & 51 deletions src/lib/ThreeCanary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const formatHash = (str) => {
const sep = "..."
const strLen = str.length
const head = str.slice(0, numChars)
const tail = str.slice(strLen-5, strLen)
const tail = str.slice(strLen - 5, strLen)
return head + sep + tail
}

Expand All @@ -41,7 +41,7 @@ function Points({ objectUrl, nodesData, onNodeClick }) {

// Or nodes.Scene.children[0].geometry.attributes.position
const positions = nodes.canary.geometry.attributes.position

const numPositions = positions.count
const numNodes = nodesData.length
const randomIndexes = useMemo(() => randomN(0, numPositions, numNodes), [numPositions, numNodes])
Expand All @@ -59,18 +59,18 @@ function Points({ objectUrl, nodesData, onNodeClick }) {
<PointDialog position={selectedPositions[selected]} dialogData={nodesData[selected]} onNodeClick={onNodeClick} />
</group> : null
}
<Instances range={selectedPositions.length} material={new THREE.MeshBasicMaterial()} geometry={new THREE.SphereGeometry( 0.1 )}>
<Instances range={selectedPositions.length} material={new THREE.MeshBasicMaterial()} geometry={new THREE.SphereGeometry(0.1)}>
{
selectedPositions.map((position, i) => (
<Point key={i} nodeId={i} position={position} onNodeSelected={handleSelectedNode} />
<Point key={i} nodeId={i} position={position} onNodeSelected={handleSelectedNode} dialogData={nodesData[selected]} onNodeClick={onNodeClick} />
))
}
</Instances>
</>
)
}

function Point({ nodeId, position, onNodeSelected }) {
function Point({ nodeId, position, dialogData, onNodeSelected, onNodeClick }) {
const ref = useRef()
const [hovered, setHover] = useState(false)
const [active] = useState(false)
Expand All @@ -89,22 +89,22 @@ function Point({ nodeId, position, onNodeSelected }) {
if (hovered) {
ref.current.color.lerp(color.set(hovered ? brandPalette[0] : brandPalette[1]), hovered ? 1 : 0.1)
}

if (active) {
ref.current.scale.x = ref.current.scale.y = ref.current.scale.z += Math.sin( t ) / 4
ref.current.scale.x = ref.current.scale.y = ref.current.scale.z += Math.sin(t) / 4
ref.current.color.lerp(color.set(active ? brandPalette[2] : brandPalette[1]), active ? 1 : 0.1)
}
})
return (
<group scale={0.4} >
<group scale={0.4} >
<>
<Instance
ref={ref}
/* eslint-disable-next-line */
onPointerOver={(e) => (e.stopPropagation(), setHover(true), onNodeSelected(nodeId))}
onPointerOver={(e) => (e.stopPropagation(), setHover(true), onNodeSelected(nodeId))}
onPointerOut={() => setHover(false)}
onClick={(e) => onNodeSelected(nodeId)}
/>
onClick={(e) => onNodeClick(dialogData.hash)}
/>
</>
</group>
)
Expand All @@ -122,38 +122,23 @@ function PointDialog({ position, dialogData, onNodeClick }) {

useFrame((state) => {
const t = state.clock.getElapsedTime()
ref.current.position.copy(new THREE.Vector3(position[0]*scale, -position[2]*scale, position[1]*scale))
ref.current.position.copy(new THREE.Vector3(position[0] * scale, -position[2] * scale, position[1] * scale))
ref.current.scale.x = ref.current.scale.y = ref.current.scale.z = 0.05
ref.current.position.y += Math.sin( t ) / 16
ref.current.position.y += Math.sin(t) / 16
})
return (

<mesh ref={ref}>
<meshStandardMaterial roughness={0.75} metalness={0.8} emissive={brandPalette[0]} />
<Html distanceFactor={2}>
<DialogContent>
{ dialogData.img ?
<DialogImage
src={ dialogData.img }
alt={ dialogData.name }
onClick={handleNodeClick}
/> : null }
{ dialogData.name ?
<DialogTitle
onClick={handleNodeClick}>
{ dialogData.name }
</DialogTitle> : null }
{ dialogData.level ?
<DialogLabel>
{ dialogData.level }
</DialogLabel> : null }
{ dialogData.hash ?
<DialogHash>
{ formatHash(dialogData.hash) }
</DialogHash> : null }
</DialogContent>
</Html>
</mesh>
<mesh ref={ref}>
<meshStandardMaterial roughness={0.75} metalness={0.8} emissive={brandPalette[0]} />
<Html distanceFactor={2}>
<DialogContent>
{dialogData.hash ?
<DialogHash>
{dialogData.hash}
</DialogHash> : null}
</DialogContent>
</Html>
</mesh>

)
}
Expand All @@ -179,17 +164,17 @@ function Lights() {
useFrame((state) => {
const t = state.clock.getElapsedTime()

groupL.current.position.x = Math.sin( t ) / 2;
groupL.current.position.y = Math.cos( t ) / 2;
groupL.current.position.z = Math.cos( t ) / 2;
groupL.current.position.x = Math.sin(t) / 2;
groupL.current.position.y = Math.cos(t) / 2;
groupL.current.position.z = Math.cos(t) / 2;

groupR.current.position.x = Math.cos( t ) / 2;
groupR.current.position.y = Math.sin( t ) / 2;
groupR.current.position.z = Math.sin( t ) / 2;
groupR.current.position.x = Math.cos(t) / 2;
groupR.current.position.y = Math.sin(t) / 2;
groupR.current.position.z = Math.sin(t) / 2;

front.current.position.x = Math.sin( t ) / 2;
front.current.position.y = Math.cos( t ) / 2;
front.current.position.z = Math.sin( t ) / 2;
front.current.position.x = Math.sin(t) / 2;
front.current.position.y = Math.cos(t) / 2;
front.current.position.z = Math.sin(t) / 2;
})

return (
Expand Down Expand Up @@ -253,7 +238,7 @@ function Particles({ count }) {
<>
<instancedMesh ref={mesh} args={[null, null, count]}>
<boxGeometry args={[1]} />
<pointsMaterial color={brandPalette[1]} size={0.02} transparent={true} sizeAttenuation={false} opacity={0.3} />
<pointsMaterial color={brandPalette[1]} size={0.02} transparent={true} sizeAttenuation={false} opacity={0.3} />
</instancedMesh>
</>
)
Expand All @@ -264,10 +249,10 @@ function ThreeCanary(props) {

return (
<Canvas shadows dpr={[1, 2]} camera={{ position: [2.3, 1, 1], fov: 50 }} performance={{ min: 0.1 }}>

<Lights />
{/* <fog attach="fog" args={[brandPalette[-1], 4.5, 20]} /> */}
<gridHelper position={[0, -0.135, 0]} color={"#000"} args={[40,40]}/>
<gridHelper position={[0, -0.135, 0]} color={"#000"} args={[40, 40]} />

<Suspense fallback={null}>
<Model scale={0.1} objectUrl={props.objectUrl} />
Expand Down

0 comments on commit f1a77e6

Please sign in to comment.