React test (#700)

* first commit for react-test

* Update selection.js

* small arrangements to archived files

* prepare for PR

src/editor/index.html

@@ -38,7 +38,7 @@ svgEditor.setConfig({
           allowInitialUserOverride: true,
           extensions: [],
           noDefaultExtensions: false,
-          userExtensions: [/* '../ext-helloworld/ext-helloworld.js' */]
+          userExtensions: [/* './react-extensions/react-test/dist/react-test.js' */]
         })
 // Variable XDOMAIN below is created by Rollup for the Xdomain build (see rollup.config.js)
 /* globals XDOMAIN */

src/editor/react-extensions/react-test/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-test",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "author": "OptimistikSAS",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "standardjs": "^1.0.0-alpha"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/preset-react": "^7.16.7",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.63.0"
+  }
+}

src/editor/react-extensions/react-test/rollup.config.js

@@ -0,0 +1,33 @@
+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'
+import rimraf from 'rimraf'
+
+// 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
+    })
+  ]
+}

src/editor/react-extensions/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

src/editor/react-extensions/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)
+      }
+    }
+  }
+}

src/svgcanvas/selection.js

@@ -208,25 +208,28 @@ export const getMouseTargetMethod = (evt) => {
  * @param {"mouseDown"|"mouseMove"|"mouseUp"|"zoomChanged"|"IDsUpdated"|"canvasUpdated"|"toolButtonStateUpdate"|"selectedChanged"|"elementTransition"|"elementChanged"|"langReady"|"langChanged"|"addLangData"|"onNewDocument"|"workareaResized"} action
  * @param {module:svgcanvas.SvgCanvas#event:ext_mouseDown|module:svgcanvas.SvgCanvas#event:ext_mouseMove|module:svgcanvas.SvgCanvas#event:ext_mouseUp|module:svgcanvas.SvgCanvas#event:ext_zoomChanged|module:svgcanvas.SvgCanvas#event:ext_IDsUpdated|module:svgcanvas.SvgCanvas#event:ext_canvasUpdated|module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate|module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementTransition|module:svgcanvas.SvgCanvas#event:ext_elementChanged|module:svgcanvas.SvgCanvas#event:ext_langReady|module:svgcanvas.SvgCanvas#event:ext_langChanged|module:svgcanvas.SvgCanvas#event:ext_addLangData|module:svgcanvas.SvgCanvas#event:ext_onNewDocument|module:svgcanvas.SvgCanvas#event:ext_workareaResized|module:svgcanvas.ExtensionVarBuilder} [vars]
  * @param {boolean} [returnArray]
- * @param {module:svgcanvas.ExtensionNameFilter} nameFilter
  * @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.
  */
 /* eslint-enable max-len */
 export const runExtensionsMethod = (
   action,
   vars,
-  returnArray,
-  nameFilter
+  returnArray
 ) => {
   let result = returnArray ? [] : false
   for (const [name, ext] of Object.entries(svgCanvas.getExtensions())) {
-    if (nameFilter && !nameFilter(name)) {
-      return
+    if (typeof vars === 'function') {
+      vars = vars(name) // ext, action
     }
-    if (ext && action in ext) {
-      if (typeof vars === 'function') {
-        vars = vars(name) // ext, action
-      }
+    if (ext.eventBased) {
+      const event = new CustomEvent('svgedit', {
+        detail: {
+          action,
+          vars
+        }
+      })
+      document.dispatchEvent(event)
+    } else if (ext[action]) {
       if (returnArray) {
         result.push(ext[action](vars))
       } else {

src/svgcanvas/svgcanvas.js

@@ -479,10 +479,6 @@ class SvgCanvas {
     this.call('cleared')
   }
 
-  runExtension (name, action, vars) {
-    return this.runExtensions(action, vars, false, (n) => n === name)
-  }
-
   async addExtension (name, extInitFunc, { importLocale }) {
     if (typeof extInitFunc !== 'function') {
       throw new TypeError('Function argument expected for `svgcanvas.addExtension`')