fix: improve signs viewer by allow to copy position and select signs

Author: zardoy

prismarine-viewer/viewer/lib/worldrendererThree.ts

@@ -29,10 +29,6 @@ export class WorldRendererThree extends WorldRendererCommon {
     super(config)
     this.starField = new StarField(scene)
     this.holdingBlock = new HoldingBlock(this.scene)
-    this.onHandItemSwitch({
-      name: 'furnace',
-      properties: {}
-    })
 
     this.renderUpdateEmitter.on('textureDownloaded', () => {
       if (this.holdingBlock.toBeRenderedItem) {

src/react/ModuleSignsViewer.tsx

@@ -1,26 +1,45 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { WorldRendererThree } from 'prismarine-viewer/viewer/lib/worldrendererThree'
 import FullScreenWidget from './FullScreenWidget'
 
-export const name = 'signs'
+export const name = 'loaded world signs'
 
 export default () => {
+  const [selected, setSelected] = useState([] as string[])
+  const allSignsPos = [] as string[]
   const signs = viewer.world instanceof WorldRendererThree ? [...viewer.world.chunkTextures.values()].flatMap(textures => {
     return Object.entries(textures).map(([signPosKey, texture]) => {
+      allSignsPos.push(signPosKey)
       const pos = signPosKey.split(',').map(Number)
+      const isSelected = selected.includes(signPosKey)
       return <div key={signPosKey}>
-        <div style={{ color: 'white' }}>{pos.join(', ')}</div>
-        <div style={{ background: 'rgba(255, 255, 255, 0.5)', padding: 5, borderRadius: 5 }}>
+        <div style={{ color: 'white', userSelect: 'text', fontSize: 8, }}>{pos.join(', ')}</div>
+        <div
+          style={{ background: isSelected ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)', padding: 5, borderRadius: 5, cursor: 'pointer' }}
+          onClick={() => setSelected(selected.includes(signPosKey) ? selected.filter(x => x !== signPosKey) : [...selected, signPosKey])}>
           <AddElem elem={texture.image} />
         </div>
       </div>
     })
   }) : []
 
-  return <FullScreenWidget name='signs' title='Loaded Signs'>
+  return <FullScreenWidget name={name} title='Loaded Signs'>
     <div>
-      {signs.length} signs currently loaded:
+      {signs.length} signs currently in the scene:
     </div>
+    <div
+      style={{ cursor: 'pointer', }} onClick={() => {
+        // toggle all
+        if (selected.length === allSignsPos.length) {
+          setSelected([])
+          return
+        }
+        setSelected([...allSignsPos])
+      }}>Select All</div>
+    {selected.length && <div
+      style={{ cursor: 'pointer', }} onClick={() => {
+        void navigator.clipboard.writeText(selected.join('\n'))
+      }}>Copy Selected Signs</div>}
     {signs}
   </FullScreenWidget>
 }
@@ -29,13 +48,17 @@ const AddElem = ({ elem }) => {
   const ref = useRef<HTMLDivElement>(null)
   useEffect(() => {
     elem.style.width = '100%'
+    elem.style.height = '100%'
     ref.current!.appendChild(elem)
     return () => {
       elem.remove()
     }
   }, [])
 
-  return <div ref={ref} />
+  return <div
+    ref={ref} style={{
+      height: '35px',
+    }} />
 }
 
 // for (const key of Object.keys(viewer.world.sectionObjects)) {