update react test (#870)

packages/react-test/src/ReactTest.js

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+
+const ReactTest = ({ svgEdit }) => {
+  const { svgCanvas } = svgEdit
+  const handleSvgEditEvent = (ev) => {
+    const { vars } = ev.detail
+    switch (ev.detail.action) {
+      case 'mouseDown':
+        // This is triggered when the main mouse button is pressed down
+        // on the editor canvas (not the tool panels)
+        // Check the mode on mousedown
+        if (svgCanvas.getMode() === 'hello_world') {
+          // event based extensions must set the start themselves
+          // to a value of true in order for mouseUp to be triggered
+          svgCanvas.setStarted(true)
+        }
+        break
+      case 'mouseUp':
+        // This is triggered from anywhere, but "started" must have been set
+        // to true (see above). Note that "opts" is an object with event info
+        // Check the mode on mouseup
+        if (svgCanvas.getMode() === 'hello_world') {
+          const zoom = svgCanvas.getZoom()
+          // Get the actual coordinate by dividing by the zoom value
+          const x = vars.mouse_x / zoom
+          const y = vars.mouse_y / zoom
+          // Show the text using the custom alert function
+          alert(`hello world ${x},${y})`)
+        }
+        break
+      default:
+        break
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('svgedit', handleSvgEditEvent)
+    return () => {
+      // Clean up the subscription
+      document.removeEventListener('svgedit', handleSvgEditEvent)
+    }
+  })
+  const onClick = () => {
+    svgCanvas.setMode('hello_world')
+  }
+
+  return <se-button id='hello_world' title='Hello World' src='hello_world.svg' onClick={onClick} />
+}
+export default ReactTest

packages/react-test/src/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import ReactTest from './ReactTest'
+
+const name = 'react-test'
+const div = document.createElement('div')
+
+export default {
+  name,
+  async init () {
+    return {
+      name,
+      eventBased: true, // if eventbased is true, the extensions needs to listen to svgedit events
+      callback () {
+        // position the div used by React in the left bar
+        document.getElementById('tools_left').append(div)
+        ReactDOM.render(<ReactTest svgEdit={this} trigger='callback' />, div)
+      }
+    }
+  }
+}