React test (#700)

* first commit for react-test

* Update selection.js

* small arrangements to archived files

* prepare for PR
master
JFH 2022-01-08 22:41:33 +01:00 committed by GitHub
parent afa6e24235
commit 02feff8db5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 2160 additions and 63 deletions

View File

@ -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 -->

View File

@ -2,11 +2,6 @@
github: [brettz9] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] github: [brettz9] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username 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 issuehunt: svg-edit # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: # Replace with a single custom sponsorship URL

View File

@ -3,19 +3,10 @@
# SVGEdit # SVGEdit
[![npm](https://img.shields.io/npm/v/svgedit.svg)](https://www.npmjs.com/package/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) [![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) [![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) [![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) [![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 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 ## 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). 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. 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 ## Further reading and more information
* Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions) * Participate in [discussions](https://github.com/SVG-Edit/svgedit/discussions)
* See [AUTHORS](AUTHORS) file for authors. * See [AUTHORS](AUTHORS) file for authors.

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 500 B

View File

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@ -38,7 +38,7 @@ svgEditor.setConfig({
allowInitialUserOverride: true, allowInitialUserOverride: true,
extensions: [], extensions: [],
noDefaultExtensions: false, 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) // Variable XDOMAIN below is created by Rollup for the Xdomain build (see rollup.config.js)
/* globals XDOMAIN */ /* globals XDOMAIN */

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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
})
]
}

View File

@ -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

View File

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

View File

@ -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 {"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 {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 {boolean} [returnArray]
* @param {module:svgcanvas.ExtensionNameFilter} nameFilter
* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus. * @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.
*/ */
/* eslint-enable max-len */ /* eslint-enable max-len */
export const runExtensionsMethod = ( export const runExtensionsMethod = (
action, action,
vars, vars,
returnArray, returnArray
nameFilter
) => { ) => {
let result = returnArray ? [] : false let result = returnArray ? [] : false
for (const [name, ext] of Object.entries(svgCanvas.getExtensions())) { 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) { if (returnArray) {
result.push(ext[action](vars)) result.push(ext[action](vars))
} else { } else {

View File

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