update react test (#870)

packages/react-test/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@svgedit/react-test",
+  "version": "1.1.0",
+  "description": "",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rollup -c",
+    "prebuild": "standard . && npm i",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SVG-Edit/svgedit.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "standard": {
+    "ignore": [
+      "dist"
+    ],
+    "globals": [
+      "cy",
+      "assert"
+    ],
+    "env": [
+      "mocha",
+      "browser"
+    ]
+  },
+  "author": "OptimistikSAS",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.18.6"
+  }
+}

packages/react-test/rollup.config.mjs

@@ -0,0 +1,35 @@
+/* eslint-env node */
+import rimraf from 'rimraf'
+import babel from '@rollup/plugin-babel'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
+
+// remove existing distribution
+rimraf('./dist', () => console.info('recreating dist'))
+
+export default {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/react-test.js',
+    sourcemap: true
+  },
+  plugins: [
+    replace({
+      preventAssignment: true,
+      'process.env.NODE_ENV': '"production"'
+    }),
+    nodeResolve({
+      extensions: ['.js'],
+      browser: true
+    }),
+    babel({
+      babelHelpers: 'bundled',
+      presets: [['@babel/preset-react', { runtime: 'automatic' }]],
+      exclude: 'node_modules/**'
+    }),
+    commonjs({
+      transformMixedEsModules: true
+    })
+  ]
+}

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)
+      }
+    }
+  }
+}