React test (#700)

* first commit for react-test

* Update selection.js

* small arrangements to archived files

* prepare for PR

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,32 +1 @@
----
+Please submit Feature Requests in the  [discussion tab](https://github.com/SVG-Edit/svgedit/discussions)
-name: Feature Request
-about: Report a new feature
-title: ''
-labels: enhancement
-assignees: ''
----
-
-<!--
-
-NOTE: THIS PROJECT IS NOT BEING ACTIVELY MAINTAINED.
-
-YOU CAN FILE A SUGGESTION IN CASE SOMEONE DECIDES TO WORK ON IT.
-
--->
-
-## Motivation
-
-<!-- What would be the purpose of this new feature? -->
-
-## Current behavior
-
-<!-- If this is to enhance an existing rule, how does the rule
-   currently behave in regard to the new changes? -->
-
-## Desired behavior
-
-<!-- What would you like to see happen instead? -->
-
-## Alternatives considered
-
-<!-- For any alternatives you have considered -->

FUNDING.yml

@@ -2,11 +2,6 @@
 
 github: [brettz9] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
 issuehunt: svg-edit # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
+
-custom: # Replace with a single custom sponsorship URL
+

README.md

@@ -3,19 +3,10 @@
 # SVGEdit
 
 [![npm](https://img.shields.io/npm/v/svgedit.svg)](https://www.npmjs.com/package/svgedit)
-[![Dependencies](https://img.shields.io/david/SVG-Edit/svgedit.svg)](https://david-dm.org/SVG-Edit/svgedit)
+[![Actions Status](https://github.com/SVG-Edit/svgedit/workflows/Node%20CI/badge.svg)](https://github.com/SVG-Edit/svgedit/actions)
-[![devDependencies](https://img.shields.io/david/dev/SVG-Edit/svgedit.svg)](https://david-dm.org/SVG-Edit/svgedit?type=dev)
-
-<!-- [![Actions Status](https://github.com/SVG-Edit/svgedit/workflows/Node%20CI/badge.svg)](https://github.com/SVG-Edit/svgedit/actions)
-[![Actions Status](https://github.com/SVG-Edit/svgedit/workflows/Coverage/badge.svg)](https://github.com/SVG-Edit/svgedit/actions)
--->
-[![Tests badge](https://raw.githubusercontent.com/SVG-Edit/svgedit/master/badges/tests-badge.svg?sanitize=true)](badges/tests-badge.svg)
-[![Coverage badge](https://raw.githubusercontent.com/SVG-Edit/svgedit/master/badges/coverage-badge.svg?sanitize=true)](badges/coverage-badge.svg)
-
 [![Known Vulnerabilities](https://snyk.io/test/github/SVG-Edit/svgedit/badge.svg)](https://snyk.io/test/github/SVG-Edit/svgedit)
 [![Total Alerts](https://img.shields.io/lgtm/alerts/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/alerts)
 [![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/SVG-Edit/svgedit.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/SVG-Edit/svgedit/context:javascript)
-
 [![issuehunt-to-marktext](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/SVG-Edit/svgedit)
 
 SVG-edit is a fast, web-based, JavaScript-driven SVG drawing editor that
@@ -65,6 +56,20 @@ For earlier versions of SVGEdit, please look in their respective branches.
 ## Supported browsers
     Developments and Continuous Integration are done with a **Chrome** environment. Chrome, FireFox and Safari recent versions are supported (in the meaning that we will try to fix bugs for these browsers).
     Support for old browsers may require to use an older version of the package. However, please open an issue if you need support for a specific version of your browser so the project team can decide if we should support with the latest version.
+
+## Sample extension based on React
+A sample React component was used to build a svgedit extension. 
+To activate:
+- "npm run build" from the extension folder "src/editor/react-extensions/react-test" in order to create the bundle for the extension. 
+- modify "index.html" to activate the extension as a userExtensions
+```
+svgEditor.setConfig({
+          allowInitialUserOverride: true,
+          extensions: [],
+          noDefaultExtensions: false,
+          userExtensions: ['./react-extensions/react-test/dist/react-test.js']
+        })
+```
 ## Further reading and more information
  * Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions) 
  * See [AUTHORS](AUTHORS) file for authors.

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,
+  returnArray
-  nameFilter
 ) => {
   let result = returnArray ? [] : false
   for (const [name, ext] of Object.entries(svgCanvas.getExtensions())) {
-    if (nameFilter && !nameFilter(name)) {
+    if (typeof vars === 'function') {
-      return
+      vars = vars(name) // ext, action
     }
-    if (ext && action in ext) {
+    if (ext.eventBased) {
-      if (typeof vars === 'function') {
+      const event = new CustomEvent('svgedit', {
-        vars = vars(name) // ext, action
+        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`')