From 7fac6d2818f9fce75bf043c2ab11f49590f0d8f1 Mon Sep 17 00:00:00 2001 From: Andileh Date: Mon, 16 Sep 2019 10:33:20 +0200 Subject: [PATCH 01/71] displayAllComponent in one component.If checkBox is selected add to state --- src/App.js | 2 + .../checkBoxSelection/checkBoxSelection.js | 9 +- .../checkBoxSelection/checkBoxSelection.scss | 25 +- src/components/chooseFolder/chooseFolder.js | 4 +- src/components/displayAllComponent.js | 38 +++ src/components/svgSetting/svgCardLayout.js | 235 ++++++++++-------- src/components/svgSetting/svgSetting.js | 52 +++- .../svgSetting/svgSettingOptions.js | 4 +- src/components/svgSetting/svgoConfig.js | 72 ++++++ 9 files changed, 310 insertions(+), 131 deletions(-) create mode 100644 src/components/displayAllComponent.js create mode 100644 src/components/svgSetting/svgoConfig.js diff --git a/src/App.js b/src/App.js index 7bac480..c763409 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import ChooseFolder from '../src/components/chooseFolder/chooseFolder'; import DisplaySvg from '../src/components/displaySvg/displaySvg'; import './App.scss'; +import DisplayAllComponent from './components/displayAllComponent'; import SvgSettingOptions from './components/svgSetting/svgSettingOptions'; class App extends Component { render() { @@ -14,6 +15,7 @@ class App extends Component { + diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 745e0a7..094fa62 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -14,15 +14,12 @@ class CheckBoxSelection extends Component { } handleDivClick= () => { - this.setState({ - isClicked: !this.state.isClicked - }); + this.setState({isClicked: !this.state.isClicked}); } render() { return ( -
); @@ -41,7 +39,8 @@ class CheckBoxSelection extends Component { } CheckBoxSelection.propTypes = { - filename: PropTypes.string, + filename: PropTypes.string, + index:PropTypes.string, isSelected: PropTypes.bool }; export default CheckBoxSelection; diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 1c94dc9..09c7fdf 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -1,13 +1,13 @@ .checkbox-container-clicked { - background-color: yellow; + background-color: #b5cfe1; width: 80%; - height: 10%; + height: 20%; } .checkbox-container-unclicked { background-color: white; width: 80%; - height: 10%; + height: 20%; border: 1px solid black; } @@ -38,11 +38,11 @@ } .card-settings { - height: 600px; + height: 350px; overflow-y: scroll; background-color: #b5cfe1; - width: 350px; - padding-left: 20px; + width: 250px; + //padding-left: 20px; box-shadow: 10px 10px 55px 0px black; } @@ -50,3 +50,16 @@ margin-top: 10px; margin-bottom: 10px; } +.opt { + margin-left: 350px; + padding-bottom: 800px; +} +.main-class { + display: flex; +} +.choose { + width: 25%; +} +.display { + width: 25%; +} diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index 436026f..5aef1d8 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -32,9 +32,9 @@ class ChooseFolder extends Component { } render() { - const listOfFileNames = []; + const listOfFileNames = []; for(var key of this.state.path) { - listOfFileNames.push(); + listOfFileNames.push(); } return ( diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js new file mode 100644 index 0000000..e4d92bf --- /dev/null +++ b/src/components/displayAllComponent.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react'; +import ChooseFolder from './chooseFolder/chooseFolder'; +import DisplaySvg from './displaySvg/displaySvg'; +import SvgSettingOptions from './svgSetting/svgSettingOptions'; +import '../components/checkBoxSelection/checkBoxSelection.scss'; + + +class DisplayAllComponent extends Component { + + render(){ + return( +
+
+ +
+ +
+ + + +
+
+ + + + +
+ +
+ +
+
+ ); + } +} +export default DisplayAllComponent; \ No newline at end of file diff --git a/src/components/svgSetting/svgCardLayout.js b/src/components/svgSetting/svgCardLayout.js index c84c0a5..afd28a6 100644 --- a/src/components/svgSetting/svgCardLayout.js +++ b/src/components/svgSetting/svgCardLayout.js @@ -1,216 +1,231 @@ export const CardLayout = [ - { - - text: 'Show original', - type: 'checkbox' - }, - { - text: 'Compare gzipped', - type: 'checkbox' - }, - { - text: 'Prettify markup', - type: 'checkbox' - }, - { - text: 'Precision', - type: 'slider' - }, { text: 'Remove doctype', - type: 'checkbox' + type: 'checkbox', + value: 'removeDoctype' }, { text: 'Remove XML instructions', - type: 'checkbox' + type: 'checkbox', + value:'removeXMLProcInst' }, { text: 'Remove comments', - type: 'checkbox' + type: 'checkbox', + value:'removeComments' }, { text: 'Remove ', - type: 'checkbox' + type: 'checkbox', + value:'removeMetadata' }, { - text: 'Remove xmln', - type: 'checkbox' + text: 'Cleanup attributes', + type: 'checkbox', + value:'cleanupAttrs' }, { text: 'Remove edit data', - type: 'checkbox' + type: 'checkbox', + value:'removeEditorsNSData' }, { text: 'Cleanup attributes whitespace', - type: 'checkbox' + type: 'checkbox', + value:'cleanupAttrs' }, { - text: 'Inline style', - type: 'checkbox' - + text:'Cleanup numeric values', + type:'checkbox', + value:'cleanupNumericValues' + }, { - text:'Minify style', - type: 'checkbox' + text: 'Remove unused def', + type: 'checkbox', + value:'removeUselessDefs' }, { - text: 'Style to attribute', - type: 'checkbox' + text: 'Remove XML procInst', + type: 'checkbox', + value:'removeXMLProcInst' }, { - text: 'Remove raster images', - type: 'checkbox' + text: 'Remove useless stroke and fill', + type: 'checkbox', + value:'removeUselessStrokeAndFil' + }, { - text: 'Remove unused def', - type: 'checkbox' + text: 'Remove viewbox', + type: 'checkbox', + value:'removeViewBox' }, { - text: 'Round/rewrite numbers', - type: 'checkbox' + text: 'Remove hidden elements', + type: 'checkbox', + value:' removeHiddenElems' }, { - text: 'Round/rewrite number list', - type: 'checkbox' + text: 'Remove empty text', + type: 'checkbox', + value:'removeEmptyText' }, { - text: 'Minify colours', - type: 'checkbox' - - }, - { - text: 'Remove unknowns and defaults', - type: 'checkbox' + text: 'Remove raster images', + type: 'checkbox', + value:'removeRasterImages' }, { - text: 'Remove unknowns and defaults', - type: 'checkbox' + text: 'Move attrs to parent group', + type: 'checkbox', + value:'moveElemsAttrsToGroup' }, { - text: 'Remove unneeded group attrs', - type: 'checkbox' + text: 'Move group attrs to elements', + type: 'checkbox', + value:'moveGroupAttrsToElems' }, { - text: 'Remove useless stroke and fill', - type: 'checkbox' + text: 'Remove empty attrs', + type: 'checkbox', + value:'removeEmptyAttrs' }, { - text: 'Remove viewbox', - type: 'checkbox' + text: 'Remove empty containers', + type: 'checkbox', + value:' removeEmptyContainers' }, { - text: 'Remove/tidy enable-background', - type: 'checkbox' + text: 'Merge paths', + type: 'checkbox', + value:' mergePaths' }, { - text: 'Remove hidden elements', - type: 'checkbox' + text: 'Sort attrs', + type: 'checkbox', + value:'sortAttrs' }, { - text: 'Remove empty text', - type: 'checkbox' + text: 'Remove ', + type: 'checkbox', + value:'removeTitle' }, { - text: 'Shapes to(smaller) paths', - type: 'checkbox' + text: 'Remove <desc>', + type: 'checkbox', + value:'removeDesc' }, - { - text: 'Move attrs to parent group', - type: 'checkbox' - + { text:'Remove Dimensions', + type: 'checkbox', + value:'removeDimensions' }, - { - text: 'Move group attrs to elements', - type: 'checkbox' - + { + text:'Convert shape to path', + type: 'checkbox', + value:'convertShapeToPath' + + }, + { + text:'Sort attribute', + type:'checkbox', + value:'sortAttrs' }, { - text: 'Collapse useless group', - type: 'checkbox' - + text:'Remove dimensions', + type:'checkbox', + value:' removeDimensions' }, { - text: 'Round/rewrite paths', - type: 'checkbox' - + text:'Remove raster images', + type:'checkbox', + value:'removeRasterImages' }, { - text: 'Round/rewrite transformation', - type: 'checkbox' - + text:'Cleanup numeric value', + type:'checkbox', + value:'cleanupNumericValues' }, { - text: 'Remove empty attrs', - type: 'checkbox' - + text:'Cleanup IDs', + type:'checkbox', + value:'cleanupIDs' }, { - text: 'Remove empty containers', - type: 'checkbox' - + text:'Remove Unused NS', + type:'checkbox', + value:'removeUnusedNS' }, { - text: 'Merge paths', - type: 'checkbox' - + text:'Convert path data', + type:'checkbox', + value:'convertPathData' + }, { - text: 'Remove unused namesopace', - type: 'checkbox' - + text:'Convert colors', + type:'checkbox', + value:'convertColors' + }, { - text: 'Sort attrs', - type: 'checkbox' - + text:'Convert transform', + type:'checkbox', + value:'convertTransform' + }, { - text: 'Remove <title>', - type: 'checkbox' - + text:'Remove non inheritable group attribute', + type:'checkbox', + value:'removeNonInheritableGroupAttr' + }, { - text: 'Remove <desc>', - type: 'checkbox' - + text:'Cleanup enable background', + type:'checkbox', + value:'cleanupEnableBackground' + }, { - text: 'Prefer viewBox to width/height', - type: 'checkbox' - + text:'Convert style to attribute', + type:'checkbox', + value:'convertStyleToAttrs' + }, { - text: 'Remove style elements', - type: 'checkbox' - + text:'Remove noninheritable group attribute', + type:'checkbox', + value:'removeNonInheritableGroupAttrs' + }, { - text: 'Remove script elements', - type: 'checkbox' - + text:'Collapse groups', + type:'checkbox', + value:'collapseGroups' + } ]; \ No newline at end of file diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index a553f91..8d2bc4c 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -1,24 +1,63 @@ import React, { Component } from 'react'; import '../checkBoxSelection/checkBoxSelection.scss'; import PropTypes from 'prop-types'; +import {Svgo} from '../svgSetting/svgoConfig'; + class SvgSetting extends Component { constructor(props) { super(props); this.state = { - isClicked: this.props.isSelected + isClicked: this.props.isSelected, + arr:[], + svgoObject: {...Svgo}, + isFound:true }; } handleDivClick= () => { - this.setState({ - isClicked: !this.state.isClicked + this.setState({isClicked: !this.state.isClicked}); + for(var i of this.state.arr){ + + if(i===this.props.k){ + console.log(i,this.props.k); + this.state.isFound=false; + break; + } + } + console.log(this.state.isFound); + if(this.state.isFound){ + this.state.arr.push(this.props.k); + this.state.isFound=false; + } + else{ + this.state.arr.pop(this.props.k); + } + this.m(this.state.arr[0]); + console.log(this.state.arr); + } + + m=(value)=>{ + let newSvgoObject = this.state.svgoObject.plugins.filter((option)=>{ + if(option[value] !== null && option[value] !== undefined){ + console.log(option[value]); + option[value] = true; + } + return true; }); + + console.log(newSvgoObject); } render() { return ( - <div OnClick ={this.handleDivClick}> - <input className='checkbox-input-svg' type='checkbox' checked={this.state.isClicked} + <div + + onClick={this.handleDivClick} + > + <input + + type='checkbox' + checked={this.state.isClicked} /> <label className='checkbox-label-svg'> {this.props.option} @@ -28,7 +67,8 @@ class SvgSetting extends Component { } } SvgSetting.propTypes = { - option: PropTypes.string, + option: PropTypes.string, + k:PropTypes.string, isSelected: PropTypes.bool }; export default SvgSetting; \ No newline at end of file diff --git a/src/components/svgSetting/svgSettingOptions.js b/src/components/svgSetting/svgSettingOptions.js index a5621b4..a6d6c94 100644 --- a/src/components/svgSetting/svgSettingOptions.js +++ b/src/components/svgSetting/svgSettingOptions.js @@ -14,7 +14,7 @@ class SvgSettingOptions extends Component { render() { for(var key in CardLayout) { if(CardLayout[key].type==='checkbox'){ - this.state.settingOptionList.push(<SvgSetting key={key} option={CardLayout[key].text} />); + this.state.settingOptionList.push(<SvgSetting key={key} k={CardLayout[key].value} option={CardLayout[key].text} />); }else if(CardLayout[key].type==='slider'){ this.state.settingOptionList.push(<div className='slider'><Slider key={key} option={CardLayout[key].text} /></div>); } @@ -22,7 +22,7 @@ class SvgSettingOptions extends Component { return ( <div className='card-settings' > - <div > + <div > <label> {'SVG settings'} </label> </div> <div > diff --git a/src/components/svgSetting/svgoConfig.js b/src/components/svgSetting/svgoConfig.js new file mode 100644 index 0000000..f4a0dbd --- /dev/null +++ b/src/components/svgSetting/svgoConfig.js @@ -0,0 +1,72 @@ +export const Svgo = { + plugins: [{ + cleanupAttrs: false + }, { + removeDoctype: false + },{ + removeXMLProcInst: false + },{ + removeComments: false + },{ + removeMetadata: false + },{ + removeTitle: false + },{ + removeDesc: false + },{ + removeUselessDefs: false + },{ + removeEditorsNSData: false + },{ + removeEmptyAttrs: false + },{ + removeHiddenElems: false + },{ + removeEmptyText: false + },{ + removeEmptyContainers: false + },{ + removeViewBox: false + },{ + cleanupEnableBackground: false + },{ + convertStyleToAttrs: false + },{ + convertColors: false + },{ + convertPathData: false + },{ + convertTransform: false + },{ + removeUnknownsAndDefaults: false + },{ + removeNonInheritableGroupAttrs: false + },{ + removeUselessStrokeAndFill: false + },{ + removeUnusedNS: false + },{ + cleanupIDs: false + },{ + cleanupNumericValues: false + },{ + moveElemsAttrsToGroup: false + },{ + moveGroupAttrsToElems: false + },{ + collapseGroups: false + },{ + removeRasterImages: false + },{ + mergePaths: false + },{ + convertShapeToPath: false + },{ + sortAttrs: false + },{ + removeDimensions:false + },{ + removeAttrs: {attrs: '(stroke|fill)'} + } + ] +}; \ No newline at end of file From 02815fda7d663ead8120a51c9dbeda0e0c363c4f Mon Sep 17 00:00:00 2001 From: Andileh <amathenjwa@retrorabbit.co.za> Date: Mon, 16 Sep 2019 11:37:44 +0200 Subject: [PATCH 02/71] missing import --- src/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.js b/src/App.js index c74f80e..70a57ac 100644 --- a/src/App.js +++ b/src/App.js @@ -9,6 +9,7 @@ import NavBar from './components/NavBar/NavBar'; import ReduxDemo from './components/ReduxDemo/ReduxDemo'; import mainReducer from './store/mainReducer'; import SvgSettingOptions from './components/svgSetting/svgSettingOptions'; +import DisplayAllComponent from './components/displayAllComponent'; import './App.scss'; class App extends Component { render() { From fd8eeb5e430903b77fb3dd9aaa21a16f87e9f5a4 Mon Sep 17 00:00:00 2001 From: Mpilo Mshengu <mmshengu@retrorebbit.co.za> Date: Mon, 16 Sep 2019 11:52:37 +0200 Subject: [PATCH 03/71] conflict --- package.json | 1 - src/App.js | 2 +- .../checkBoxSelection/checkBoxSelection.js | 70 ++++++++++++++++--- .../checkBoxSelection/checkBoxSelection.scss | 12 +--- src/components/chooseFolder/chooseFolder.js | 4 +- src/store/mainReducer.js | 5 +- 6 files changed, 71 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 7b8b8d1..ff24a65 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ ] }, "devDependencies": { - "babel-eslint": "10.0.2", "eslint": "6.3.0", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.14.3", diff --git a/src/App.js b/src/App.js index 70a57ac..f5c55e2 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ class App extends Component { <Route path='/displaySvg' component={DisplaySvg} /> <Route path='/reduxdemo' component={ReduxDemo} /> <Route path='/svgSettingOptions' component={SvgSettingOptions} /> - <Route path='/displayAll' component={DisplayAllComponent}/> + <Route path='/' component={DisplayAllComponent} /> </Switch> </div> </BrowserRouter> diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 094fa62..8c9828e 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -1,20 +1,56 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './checkBoxSelection.scss'; +import { connect } from 'react-redux'; +import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; + class CheckBoxSelection extends Component { constructor(props) { super(props); this.state = { - isClicked: false - }; + isClicked: false, + isFound:false, + index:null, + }; + this.b={ + name:'', + dataurl:'' + } } componentWillMount() { this.setState({ isClicked: this.props.isSelected }); - } + } + + convertSvgToDataUrl=(file)=>{ + let reader = new FileReader(); + reader.onload = (result)=>{ + this.b.name=file.name; + this.b.dataurl=result.target.result; + this.props.reduxState.svgSettingList.push (this.b); + }; + if (file) { + reader.readAsDataURL(file); + } + } handleDivClick= () => { - this.setState({isClicked: !this.state.isClicked}); + this.setState({ + isClicked: !this.state.isClicked + }); + for(var file in this.props.reduxState.svgSettingList){ + console.log(this.props.reduxState.svgSettingList[file]); + if(this.props.reduxState.svgSettingList[file].name===this.props.file.name){ + this.state.isFound=true; + this.state.index=file; + } + } + if(this.state.isFound===false){ + this.convertSvgToDataUrl(this.props.file); + }else{ + this.props.reduxState.svgSettingList.splice(this.state.index, 1); + this.state.isFound=false; + } } render() { @@ -38,9 +74,25 @@ class CheckBoxSelection extends Component { } } -CheckBoxSelection.propTypes = { - filename: PropTypes.string, - index:PropTypes.string, - isSelected: PropTypes.bool +CheckBoxSelection.propTypes={ + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + filename:PropTypes.string }; -export default CheckBoxSelection; + +const mapStateToProps = state => { + const reduxState = {reduxState:{...state}}; + return reduxState; +}; + +const mapDispatchToProps = dispatch => { + return { + addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), + updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), + deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(CheckBoxSelection); diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 09c7fdf..4a1baaa 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -1,21 +1,13 @@ .checkbox-container-clicked { - background-color: #b5cfe1; - width: 80%; - height: 20%; + background-color: yellow; } .checkbox-container-unclicked { background-color: white; - width: 80%; - height: 20%; border: 1px solid black; } -.checkbox-input, -.checkbox-label { - margin-top: 12%; - margin-left: 12%; -} + .checkbox-input-svg, .checkbox-label-svg { margin-top: 2%; diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index 5aef1d8..9226df6 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import './../checkBoxSelection/checkBoxSelection.scss'; import optimizeSvg from '../functions'; import CheckBoxSelection from '../checkBoxSelection/checkBoxSelection'; + class ChooseFolder extends Component { constructor(props) { super(props); @@ -34,7 +35,8 @@ class ChooseFolder extends Component { render() { const listOfFileNames = []; for(var key of this.state.path) { - listOfFileNames.push(<CheckBoxSelection key={key} filename={key.name} />); + console.log(typeof key,'test'); + listOfFileNames.push(<CheckBoxSelection key={key.name} filename={key.name} file={key} />); } return ( diff --git a/src/store/mainReducer.js b/src/store/mainReducer.js index be4bb60..926003e 100644 --- a/src/store/mainReducer.js +++ b/src/store/mainReducer.js @@ -1,7 +1,10 @@ import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from './actionTypes'; +import SvgSetting from '../components/svgSetting/svgSetting'; let initialState = { - fileNames: [] + fileNames: [], + svgSettingList:[], + file:Object }; export default (state=initialState, action) => { From 74e9a17714b4cb25b2a4984d47f18781a46b9700 Mon Sep 17 00:00:00 2001 From: Mpilo Mshengu <mmshengu@retrorebbit.co.za> Date: Tue, 17 Sep 2019 17:46:04 +0200 Subject: [PATCH 04/71] changes done --- package.json | 1 + src/App.js | 2 + .../checkBoxSelection/checkBoxSelection.js | 2 +- .../checkBoxSelection/checkBoxSelection.scss | 31 ++++- src/components/chooseFolder/chooseFolder.js | 3 +- src/components/displayAllComponent.js | 83 ++++++++++--- src/components/displaySvg/displaySvg.js | 2 +- src/components/displaySvg/finalSvgDisplay.js | 61 +++++++++ src/components/functions.js | 21 +++- src/components/svgSetting/svgSetting.js | 116 +++++++++++++----- src/store/mainReducer.js | 6 +- 11 files changed, 265 insertions(+), 63 deletions(-) create mode 100644 src/components/displaySvg/finalSvgDisplay.js diff --git a/package.json b/package.json index ff24a65..1ad7a32 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "prop-types": "15.7.2", "react": "16.9.0", "react-dom": "16.9.0", + "react-livechat": "^1.1.1", "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", diff --git a/src/App.js b/src/App.js index f5c55e2..f18e95c 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import ReduxDemo from './components/ReduxDemo/ReduxDemo'; import mainReducer from './store/mainReducer'; import SvgSettingOptions from './components/svgSetting/svgSettingOptions'; import DisplayAllComponent from './components/displayAllComponent'; +import FinalSvgDisplay from './components/displaySvg/finalSvgDisplay'; import './App.scss'; class App extends Component { render() { @@ -24,6 +25,7 @@ class App extends Component { <Route path='/displaySvg' component={DisplaySvg} /> <Route path='/reduxdemo' component={ReduxDemo} /> <Route path='/svgSettingOptions' component={SvgSettingOptions} /> + <Route path='/FinalSvgDisplay' component={FinalSvgDisplay} /> <Route path='/' component={DisplayAllComponent} /> </Switch> </div> diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 8c9828e..1aee22c 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -28,6 +28,7 @@ class CheckBoxSelection extends Component { this.b.name=file.name; this.b.dataurl=result.target.result; this.props.reduxState.svgSettingList.push (this.b); + console.log('andile'); }; if (file) { reader.readAsDataURL(file); @@ -39,7 +40,6 @@ class CheckBoxSelection extends Component { isClicked: !this.state.isClicked }); for(var file in this.props.reduxState.svgSettingList){ - console.log(this.props.reduxState.svgSettingList[file]); if(this.props.reduxState.svgSettingList[file].name===this.props.file.name){ this.state.isFound=true; this.state.index=file; diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 4a1baaa..b5664f2 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -1,5 +1,5 @@ .checkbox-container-clicked { - background-color: yellow; + background-color: #b5cfe1; } .checkbox-container-unclicked { @@ -32,8 +32,8 @@ .card-settings { height: 350px; overflow-y: scroll; - background-color: #b5cfe1; - width: 250px; + background-color:#b5cfe1 ; + width: 600px; //padding-left: 20px; box-shadow: 10px 10px 55px 0px black; } @@ -50,8 +50,29 @@ display: flex; } .choose { - width: 25%; + width: 50%; } .display { - width: 25%; + width: 50%; } + +.lll{ + width: 319px; + display: flex; +} +.optimizeButton{ + display: flex; + justify-items: center; + width:100px; + height: 70px; + border-radius: 35px; + background-color: #b5cfe1; + align-items: center; +} + +.mpilomshengu{ + display: flex; + justify-content: center; +} + + diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index 9226df6..3e98b24 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import './../checkBoxSelection/checkBoxSelection.scss'; -import optimizeSvg from '../functions'; +import {optimizeSvg} from '../functions'; import CheckBoxSelection from '../checkBoxSelection/checkBoxSelection'; class ChooseFolder extends Component { @@ -35,7 +35,6 @@ class ChooseFolder extends Component { render() { const listOfFileNames = []; for(var key of this.state.path) { - console.log(typeof key,'test'); listOfFileNames.push(<CheckBoxSelection key={key.name} filename={key.name} file={key} />); } diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index e4d92bf..3082eb3 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -1,38 +1,87 @@ import React, { Component } from 'react'; import ChooseFolder from './chooseFolder/chooseFolder'; +import { NavLink} from 'react-router-dom'; import DisplaySvg from './displaySvg/displaySvg'; import SvgSettingOptions from './svgSetting/svgSettingOptions'; import '../components/checkBoxSelection/checkBoxSelection.scss'; +import { changeObj, optimizeSvg } from '../../src/components/functions'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../store/actionTypes'; +import { async } from 'q'; +import base64 from 'base-64'; class DisplayAllComponent extends Component { + constructor(props) { + super(props); + this.state = { + original: '', + fake: '', + name: '' + }; + + } + + mmm = async () => { + for (var h of this.props.reduxState.svgOptions) { + changeObj(h, this.props.reduxState.svgObject.plugins); + } + for (var k of this.props.reduxState.svgSettingList) { + this.props.reduxState.displayOptimaze.push({'original':k.dataurl,'name':k.name,'fake':await optimizeSvg(k.dataurl, this.props.reduxState.svgObject.plugins)}); - render(){ - return( + } + } + + render() { + // const listOfFileNames = []; console.log("listOfFileNames : ",this.state.listOfFileNames); + return ( + <div> <div className='main-class'> <div className='choose'> - <ChooseFolder/> + <ChooseFolder /> </div> - <div className='display'> - <label>File to be optimized</label> - <DisplaySvg dataUrl="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5mZWF0dXJlcy9jYWxsZW5kYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8c3R5bGU+CiAgICAgICAgLmNvbG91ci1jbGFzc3tmaWxsOiNGRkZGRkY7fQogICAgPC9zdHlsZT4KICAgIDxnIGlkPSJmZWF0dXJlcy9jYWxsZW5kYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDAuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxIiB5PSI2LjA2MzI5MTE0IiB3aWR0aD0iNjUuODQ4MTAxMyIgaGVpZ2h0PSI2Ni44NjA3NTk1IiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cGF0aCBkPSJNMS41MTg5ODczNCwyMS45NjgzMjk3IEw2NS45NTk4NzQ0LDIxLjk2ODMyOTciIGlkPSJMaW5lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4LjEwMTI2NiwgMC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjEiIHk9IjEiIHdpZHRoPSI2LjEwMTI2NTgyIiBoZWlnaHQ9IjEyLjE3NzIxNTIiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxMi4xMzkyNDA1IiB5PSIxIiB3aWR0aD0iNi4xMDEyNjU4MiIgaGVpZ2h0PSIxMi4xNzcyMTUyIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMjMuMjc4NDgxIiB5PSIxIiB3aWR0aD0iNi4xMDEyNjU4MiIgaGVpZ2h0PSIxMi4xNzcyMTUyIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMzQuNDE3NzIxNSIgeT0iMSIgd2lkdGg9IjYuMTAxMjY1ODIiIGhlaWdodD0iMTIuMTc3MjE1MiIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjQ1LjU1Njk2MiIgeT0iMSIgd2lkdGg9IjYuMTAxMjY1ODIiIGhlaWdodD0iMTIuMTc3MjE1MiIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSI5LjEwMTI2NTgyIiB5PSIyOC4zNDE3NzIyIiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSIyMy4yNzg0ODEiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjM3LjQ1NTY5NjIiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjUxLjYzMjkxMTQiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjkuMTAxMjY1ODIiIHk9IjQyLjUxODk4NzMiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjIzLjI3ODQ4MSIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iMzcuNDU1Njk2MiIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iNTEuNjMyOTExNCIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iOS4xMDEyNjU4MiIgeT0iNTYuNjk2MjAyNSIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iMjMuMjc4NDgxIiB5PSI1Ni42OTYyMDI1IiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSIzNy40NTU2OTYyIiB5PSI1Ni42OTYyMDI1IiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRkZGRkZGIiBjbGFzcz0iY29sb3VyLWNsYXNzIiBjeD0iNjEuNzcyMTUxOSIgY3k9IjY2LjgzNTQ0MyIgcj0iMTIuMTY0NTU3Ij48L2NpcmNsZT4KICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJQYXRoLTEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iNTcuNjY2NjMzNyA2NS45MDQ5ODkxIDYwLjc1OTQ5MzcgNjguOTk3ODQ5MSA2NS45NTk4NzQ0IDYzLjc5NzQ2ODQiPjwvcG9seWxpbmU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" - weight='100px' height='300'/> - </div> - <div className='display'> - <label>optimizednFile</label> - - <DisplaySvg dataUrl="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODBweCIgaGVpZ2h0PSI4MHB4IiB2aWV3Qm94PSIwIDAgODAgODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5mZWF0dXJlcy9jYWxsZW5kYXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8c3R5bGU+CiAgICAgICAgLmNvbG91ci1jbGFzc3tmaWxsOiNGRkZGRkY7fQogICAgPC9zdHlsZT4KICAgIDxnIGlkPSJmZWF0dXJlcy9jYWxsZW5kYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDAuMDAwMDAwKSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxIiB5PSI2LjA2MzI5MTE0IiB3aWR0aD0iNjUuODQ4MTAxMyIgaGVpZ2h0PSI2Ni44NjA3NTk1IiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cGF0aCBkPSJNMS41MTg5ODczNCwyMS45NjgzMjk3IEw2NS45NTk4NzQ0LDIxLjk2ODMyOTciIGlkPSJMaW5lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIj48L3BhdGg+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4LjEwMTI2NiwgMC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjEiIHk9IjEiIHdpZHRoPSI2LjEwMTI2NTgyIiBoZWlnaHQ9IjEyLjE3NzIxNTIiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxMi4xMzkyNDA1IiB5PSIxIiB3aWR0aD0iNi4xMDEyNjU4MiIgaGVpZ2h0PSIxMi4xNzcyMTUyIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMjMuMjc4NDgxIiB5PSIxIiB3aWR0aD0iNi4xMDEyNjU4MiIgaGVpZ2h0PSIxMi4xNzcyMTUyIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgeD0iMzQuNDE3NzIxNSIgeT0iMSIgd2lkdGg9IjYuMTAxMjY1ODIiIGhlaWdodD0iMTIuMTc3MjE1MiIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHg9IjQ1LjU1Njk2MiIgeT0iMSIgd2lkdGg9IjYuMTAxMjY1ODIiIGhlaWdodD0iMTIuMTc3MjE1MiIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSI5LjEwMTI2NTgyIiB5PSIyOC4zNDE3NzIyIiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSIyMy4yNzg0ODEiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjM3LjQ1NTY5NjIiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjUxLjYzMjkxMTQiIHk9IjI4LjM0MTc3MjIiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjkuMTAxMjY1ODIiIHk9IjQyLjUxODk4NzMiIHdpZHRoPSI5LjEzOTI0MDUxIiBoZWlnaHQ9IjkuMTM5MjQwNTEiIHJ4PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNGRkZGRkYiIHg9IjIzLjI3ODQ4MSIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iMzcuNDU1Njk2MiIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iNTEuNjMyOTExNCIgeT0iNDIuNTE4OTg3MyIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iOS4xMDEyNjU4MiIgeT0iNTYuNjk2MjAyNSIgd2lkdGg9IjkuMTM5MjQwNTEiIGhlaWdodD0iOS4xMzkyNDA1MSIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZSIgZmlsbD0iI0ZGRkZGRiIgeD0iMjMuMjc4NDgxIiB5PSI1Ni42OTYyMDI1IiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjRkZGRkZGIiB4PSIzNy40NTU2OTYyIiB5PSI1Ni42OTYyMDI1IiB3aWR0aD0iOS4xMzkyNDA1MSIgaGVpZ2h0PSI5LjEzOTI0MDUxIiByeD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRkZGRkZGIiBjbGFzcz0iY29sb3VyLWNsYXNzIiBjeD0iNjEuNzcyMTUxOSIgY3k9IjY2LjgzNTQ0MyIgcj0iMTIuMTY0NTU3Ij48L2NpcmNsZT4KICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJQYXRoLTEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iNTcuNjY2NjMzNyA2NS45MDQ5ODkxIDYwLjc1OTQ5MzcgNjguOTk3ODQ5MSA2NS45NTk4NzQ0IDYzLjc5NzQ2ODQiPjwvcG9seWxpbmU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=" - weight='100px' height='300'/> - - </div> <div className='choose'> - <SvgSettingOptions/> + <SvgSettingOptions /> + <div className='mpilomshengu'> + <NavLink to='/FinalSvgDisplay' > + <div className='optimizeButton' onClick={this.mmm}>optimize</div> + </NavLink> + </div> + </div> + + + </div> + </div> ); } } -export default DisplayAllComponent; \ No newline at end of file + + + +DisplayAllComponent.propTypes = { + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func +}; + +const mapStateToProps = state => { + const reduxState = { reduxState: { ...state } }; + return reduxState; +}; + +const mapDispatchToProps = dispatch => { + return { + addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), + updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), + deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(DisplayAllComponent); \ No newline at end of file diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 1db0ac8..caa1ceb 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -23,7 +23,7 @@ class DisplaySvg extends Component { render() { return ( - <div> + <div className='ncika'> <figure> <img id='svg-display-id' diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js new file mode 100644 index 0000000..a4a38f3 --- /dev/null +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import DisplaySvg from './displaySvg'; +import { connect } from 'react-redux'; +import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; +class FinalSvgDisplay extends Component { + constructor(props) { + super(props); + this.state = { + fileSize: 0 + }; + } + + + + render() { + const listOfFileNames = []; + + for(var key in this.props.reduxState.displayOptimaze) { + console.log(this.props.reduxState.displayOptimaze.length); + listOfFileNames.push(<div className='lll'> + <DisplaySvg dataUrl={this.props.reduxState.displayOptimaze[key].original} + weight='100px' height='300' /> + <DisplaySvg dataUrl={"data:image/svg+xml;base64,"+this.props.reduxState.displayOptimaze[key].fake} + weight='100px' height='300' /> + </div>); + } + return ( + <div className =''> + {listOfFileNames} + </div> + ); + } +} + +FinalSvgDisplay.propTypes = { + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + listToDisplay: PropTypes.array +}; + + + + +const mapStateToProps = state => { + const reduxState = { reduxState: { ...state } }; + return reduxState; +}; + +const mapDispatchToProps = dispatch => { + return { + addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), + updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), + deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(FinalSvgDisplay); + diff --git a/src/components/functions.js b/src/components/functions.js index 84ae424..4bc26ab 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -1,10 +1,23 @@ import axios from 'axios'; import {BASE_URL,OPTIMIZE_SVG} from '../constants/constants'; -export default function optimizeSvg(dataUrl){ - return axios.post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl }) +export const optimizeSvg=(dataUrl,svgo)=>{ + return axios.post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl,svgo }) .then(res => { - return res.data; + return res.data.urlData; }) .catch(err => console.log(err)); -} +}; + + +export const changeObj=(value,svgoObjectPlugins)=>{ + let newSvgoObject = svgoObjectPlugins.filter((option)=>{ + if(option[value] !== null && option[value] !== undefined){ + option[value] = true; + } + return true; + + }); + return newSvgoObject; +}; + diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 8d2bc4c..a94ea0b 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -1,7 +1,9 @@ import React, { Component } from 'react'; import '../checkBoxSelection/checkBoxSelection.scss'; import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; import {Svgo} from '../svgSetting/svgoConfig'; +import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; class SvgSetting extends Component { constructor(props) { @@ -10,43 +12,70 @@ class SvgSetting extends Component { isClicked: this.props.isSelected, arr:[], svgoObject: {...Svgo}, - isFound:true + isFound:false }; } handleDivClick= () => { - this.setState({isClicked: !this.state.isClicked}); - for(var i of this.state.arr){ - - if(i===this.props.k){ - console.log(i,this.props.k); - this.state.isFound=false; - break; - } - } - console.log(this.state.isFound); - if(this.state.isFound){ - this.state.arr.push(this.props.k); - this.state.isFound=false; - } - else{ - this.state.arr.pop(this.props.k); - } - this.m(this.state.arr[0]); - console.log(this.state.arr); + this.setState({ + isClicked: !this.state.isClicked + }); + for(var file in this.props.reduxState.svgOptions){ + if(this.props.reduxState.svgOptions[file]===this.props.k){ + this.state.isFound=true; + this.state.index=file; + } + } + if(this.state.isFound===false){ + this.props.reduxState.svgOptions.push(this.props.k); + }else{ + this.props.reduxState.svgOptions.splice(this.state.index, 1); + this.state.isFound=false; + } + } + /*handleDivClick= () => { + this.setState({ + isClicked: !this.state.isClicked + }); + for(var file in this.props.reduxState.svgSettingList){ + console.log(this.props.reduxState.svgSettingList[file]); + if(this.props.reduxState.svgSettingList[file].name===this.props.file.name){ + this.state.isFound=true; + this.state.index=file; + } + } + if(this.state.isFound===false){ + this.convertSvgToDataUrl(this.props.file); + }else{ + this.props.reduxState.svgSettingList.splice(this.state.index, 1); + this.state.isFound=false; + } + } */ m=(value)=>{ - let newSvgoObject = this.state.svgoObject.plugins.filter((option)=>{ - if(option[value] !== null && option[value] !== undefined){ - console.log(option[value]); - option[value] = true; - } - return true; + + + let newSvgoObject = this.props.reduxState.svgObject.plugins.filter((option)=>{ + for(var p of value){ + if(option[p] !== null && option[p] !== undefined){ + option[p] = true; + } + return true; + + } + }); - console.log(newSvgoObject); + console.log(newSvgoObject); + return newSvgoObject; + } + + mm=()=>{ + this.m(this.props.reduxState.svgOptions); + console.log(this.props.reduxState); } + render() { return ( @@ -63,12 +92,35 @@ class SvgSetting extends Component { {this.props.option} </label> </div> + ); } } -SvgSetting.propTypes = { - option: PropTypes.string, - k:PropTypes.string, - isSelected: PropTypes.bool + + + +SvgSetting.propTypes={ + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + option: PropTypes.string, + k:PropTypes.string, + isSelected: PropTypes.bool + +}; + +const mapStateToProps = state => { + const reduxState = {reduxState:{...state}}; + return reduxState; +}; + +const mapDispatchToProps = dispatch => { + return { + addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), + updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), + deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; }; -export default SvgSetting; \ No newline at end of file + +export default connect(mapStateToProps, mapDispatchToProps)(SvgSetting); diff --git a/src/store/mainReducer.js b/src/store/mainReducer.js index 926003e..f567246 100644 --- a/src/store/mainReducer.js +++ b/src/store/mainReducer.js @@ -1,10 +1,14 @@ import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from './actionTypes'; import SvgSetting from '../components/svgSetting/svgSetting'; +import {Svgo} from '../../src/components/svgSetting/svgoConfig' let initialState = { fileNames: [], svgSettingList:[], - file:Object + file:Object, + svgOptions:[], + svgObject:{...Svgo}, + displayOptimaze:[] }; export default (state=initialState, action) => { From 7f4d391c7bdd5a2cfca86d8e97c4fc83d071c967 Mon Sep 17 00:00:00 2001 From: Mpilo Mshengu <mmshengu@retrorebbit.co.za> Date: Wed, 18 Sep 2019 09:51:33 +0200 Subject: [PATCH 05/71] changes --- .../checkBoxSelection/checkBoxSelection.js | 65 ++++++++----------- src/components/displayAllComponent.js | 59 ++++++----------- src/components/displaySvg/finalSvgDisplay.js | 20 +----- src/components/functions.js | 8 +-- src/store/mainReducer.js | 2 - 5 files changed, 56 insertions(+), 98 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 1aee22c..0845cc6 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -8,49 +8,40 @@ class CheckBoxSelection extends Component { constructor(props) { super(props); this.state = { - isClicked: false, - isFound:false, - index:null, - }; - this.b={ - name:'', - dataurl:'' - } + isClicked: false + }; } componentWillMount() { - this.setState({ isClicked: this.props.isSelected }); - } + this.setState({ isClicked: this.props.isSelected }); + } convertSvgToDataUrl=(file)=>{ - let reader = new FileReader(); - reader.onload = (result)=>{ - this.b.name=file.name; - this.b.dataurl=result.target.result; - this.props.reduxState.svgSettingList.push (this.b); - console.log('andile'); - }; - if (file) { - reader.readAsDataURL(file); - } + let reader = new FileReader(); + reader.onload = (result)=>{ + this.props.reduxState.svgSettingList.push ({'name':file.name,dataurl:result.target.result}); + }; + if (file) { + reader.readAsDataURL(file); + } } handleDivClick= () => { - this.setState({ - isClicked: !this.state.isClicked - }); - for(var file in this.props.reduxState.svgSettingList){ - if(this.props.reduxState.svgSettingList[file].name===this.props.file.name){ - this.state.isFound=true; - this.state.index=file; - } - } - if(this.state.isFound===false){ - this.convertSvgToDataUrl(this.props.file); - }else{ - this.props.reduxState.svgSettingList.splice(this.state.index, 1); - this.state.isFound=false; - } + let isFound=false; + let index=0; + this.setState({isClicked: !this.state.isClicked}); + for(var key in this.props.reduxState.svgSettingList){ + if(this.props.reduxState.svgSettingList[key].name===this.props.file.name){ + isFound=true; + index=key; + } + } + if(isFound===false){ + this.convertSvgToDataUrl(this.props.file); + }else{ + this.props.reduxState.svgSettingList.splice(index, 1); + isFound=false; + } } render() { @@ -78,8 +69,8 @@ CheckBoxSelection.propTypes={ reduxState: PropTypes.object, addToStore: PropTypes.func, updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, - filename:PropTypes.string + deleteFromStore: PropTypes.func, + filename:PropTypes.string }; const mapStateToProps = state => { diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 3082eb3..5074725 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -1,65 +1,48 @@ import React, { Component } from 'react'; import ChooseFolder from './chooseFolder/chooseFolder'; import { NavLink} from 'react-router-dom'; -import DisplaySvg from './displaySvg/displaySvg'; import SvgSettingOptions from './svgSetting/svgSettingOptions'; import '../components/checkBoxSelection/checkBoxSelection.scss'; import { changeObj, optimizeSvg } from '../../src/components/functions'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../store/actionTypes'; -import { async } from 'q'; -import base64 from 'base-64'; - class DisplayAllComponent extends Component { - constructor(props) { - super(props); - this.state = { - original: '', - fake: '', - name: '' - }; - - } - - mmm = async () => { - for (var h of this.props.reduxState.svgOptions) { - changeObj(h, this.props.reduxState.svgObject.plugins); - } - for (var k of this.props.reduxState.svgSettingList) { - this.props.reduxState.displayOptimaze.push({'original':k.dataurl,'name':k.name,'fake':await optimizeSvg(k.dataurl, this.props.reduxState.svgObject.plugins)}); + +getOptimizeSvg = async () => { + for (var option of this.props.reduxState.svgOptions) { + changeObj(option, this.props.reduxState.svgObject.plugins); + } + for (var setting of this.props.reduxState.svgSettingList) { + if(this.props.reduxState.svgOptions.length>0){ + this.props.reduxState.displayOptimaze.push({'original':setting.dataurl,'name':setting.name,'fake':await optimizeSvg(setting.dataurl, this.props.reduxState.svgObject.plugins)}); + }else{ + this.props.reduxState.displayOptimaze.push({'original':setting.dataurl,'name':setting.name,'fake':await optimizeSvg(setting.dataurl,null)}); } + } +} - render() { - // const listOfFileNames = []; console.log("listOfFileNames : ",this.state.listOfFileNames); - return ( - <div> +render() { + return ( + <div> <div className='main-class'> <div className='choose'> <ChooseFolder /> </div> - - - <div className='choose'> <SvgSettingOptions /> <div className='mpilomshengu'> - <NavLink to='/FinalSvgDisplay' > - <div className='optimizeButton' onClick={this.mmm}>optimize</div> - </NavLink> - </div> - + <NavLink to='/FinalSvgDisplay' > + <div className='optimizeButton' onClick={this.getOptimizeSvg}>Optimize</div> + </NavLink> + </div> </div> - - - </div> - </div> - ); - } + </div> + );} } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index a4a38f3..ca614b2 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -4,26 +4,15 @@ import DisplaySvg from './displaySvg'; import { connect } from 'react-redux'; import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; class FinalSvgDisplay extends Component { - constructor(props) { - super(props); - this.state = { - fileSize: 0 - }; - } - - render() { const listOfFileNames = []; for(var key in this.props.reduxState.displayOptimaze) { - console.log(this.props.reduxState.displayOptimaze.length); listOfFileNames.push(<div className='lll'> - <DisplaySvg dataUrl={this.props.reduxState.displayOptimaze[key].original} - weight='100px' height='300' /> - <DisplaySvg dataUrl={"data:image/svg+xml;base64,"+this.props.reduxState.displayOptimaze[key].fake} - weight='100px' height='300' /> - </div>); + <DisplaySvg dataUrl={this.props.reduxState.displayOptimaze[key].original} weight='100px' height='300' /> + <DisplaySvg dataUrl={"data:image/svg+xml;base64,"+this.props.reduxState.displayOptimaze[key].fake} weight='100px' height='300' /> + </div>); } return ( <div className =''> @@ -41,9 +30,6 @@ FinalSvgDisplay.propTypes = { listToDisplay: PropTypes.array }; - - - const mapStateToProps = state => { const reduxState = { reduxState: { ...state } }; return reduxState; diff --git a/src/components/functions.js b/src/components/functions.js index 4bc26ab..df8405a 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -12,10 +12,10 @@ export const optimizeSvg=(dataUrl,svgo)=>{ export const changeObj=(value,svgoObjectPlugins)=>{ let newSvgoObject = svgoObjectPlugins.filter((option)=>{ - if(option[value] !== null && option[value] !== undefined){ - option[value] = true; - } - return true; + if(option[value] !== null && option[value] !== undefined){ + option[value] = true; + } + return true; }); return newSvgoObject; diff --git a/src/store/mainReducer.js b/src/store/mainReducer.js index f567246..b953bb5 100644 --- a/src/store/mainReducer.js +++ b/src/store/mainReducer.js @@ -1,11 +1,9 @@ import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from './actionTypes'; -import SvgSetting from '../components/svgSetting/svgSetting'; import {Svgo} from '../../src/components/svgSetting/svgoConfig' let initialState = { fileNames: [], svgSettingList:[], - file:Object, svgOptions:[], svgObject:{...Svgo}, displayOptimaze:[] From 56756954d8d796668cbfe92888a715b66b1c62a0 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 08:34:08 +0200 Subject: [PATCH 06/71] display svg by data url functionality after being optimised --- src/components/displayAllComponent.js | 1 + src/components/displaySvg/finalSvgDisplay.js | 112 +++++++++++++------ 2 files changed, 80 insertions(+), 33 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 5074725..9db207c 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -26,6 +26,7 @@ getOptimizeSvg = async () => { } render() { + console.log("this.props.reduxState.svgSettingList :",this.props.reduxState.svgSettingList) return ( <div> <div className='main-class'> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index ca614b2..6d983ad 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -1,47 +1,93 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import DisplaySvg from './displaySvg'; -import { connect } from 'react-redux'; -import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import DisplaySvg from "./displaySvg"; +import { connect } from "react-redux"; +import { + ADD_VARIABLE, + UPDATE_VARIABLE, + DELETE_VARIABLE +} from "../../store/actionTypes"; class FinalSvgDisplay extends Component { + constructor(props) { + super(props); + this.state = { + list : [] + }; + } + + + + render() { + const listOfFileNames = []; - render() { - const listOfFileNames = []; - - for(var key in this.props.reduxState.displayOptimaze) { - listOfFileNames.push(<div className='lll'> - <DisplaySvg dataUrl={this.props.reduxState.displayOptimaze[key].original} weight='100px' height='300' /> - <DisplaySvg dataUrl={"data:image/svg+xml;base64,"+this.props.reduxState.displayOptimaze[key].fake} weight='100px' height='300' /> - </div>); - } - return ( - <div className =''> - {listOfFileNames} - </div> - ); + for (var key in this.props.reduxState.displayOptimaze) { + listOfFileNames.push( + <div className="lll"> + <DisplaySvg + dataUrl={this.props.reduxState.displayOptimaze[key].original} + weight="100px" + height="300" + /> + <DisplaySvg + dataUrl={ + "data:image/svg+xml;base64," + + this.props.reduxState.displayOptimaze[key].fake + } + weight="100px" + height="300" + /> + </div> + ); } + + + return ( + <div className=""> + {Array.isArray(listOfFileNames) && listOfFileNames.length > 0 ? + <div> + {listOfFileNames} + </div> : + <div> + No svg to display + </div>} + </div> + ); + } } FinalSvgDisplay.propTypes = { - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, - listToDisplay: PropTypes.array + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + listToDisplay: PropTypes.array }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const reduxState = { reduxState: { ...state } }; + return reduxState; }; const mapDispatchToProps = dispatch => { - return { - addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), - updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), - deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) - }; + return { + addToStore: (variableName, variableValue) => + dispatch({ + type: ADD_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + updateStore: (variableName, variableValue) => + dispatch({ + type: UPDATE_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + deleteFromStore: variableName => + dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; }; -export default connect(mapStateToProps, mapDispatchToProps)(FinalSvgDisplay); - +export default connect( + mapStateToProps, + mapDispatchToProps +)(FinalSvgDisplay); From ff7260d232da1bdf2fda5a240a24b0400e8dcd51 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 09:20:52 +0200 Subject: [PATCH 07/71] my change request attended --- package.json | 2 +- src/App.scss | 2 +- .../checkBoxSelection/checkBoxSelection.scss | 8 +- src/components/displayAllComponent.js | 124 ++++++----- src/components/displaySvg/finalSvgDisplay.js | 2 +- src/components/svgSetting/svgSetting.js | 199 ++++++++---------- 6 files changed, 172 insertions(+), 165 deletions(-) diff --git a/package.json b/package.json index 1ad7a32..552c2dc 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "prop-types": "15.7.2", "react": "16.9.0", "react-dom": "16.9.0", - "react-livechat": "^1.1.1", + "react-livechat": "1.1.1", "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", diff --git a/src/App.scss b/src/App.scss index b41d297..501d381 100644 --- a/src/App.scss +++ b/src/App.scss @@ -16,7 +16,7 @@ align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: white; + color: #FFFFFF; } .App-link { diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index b5664f2..57eb9e6 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -3,8 +3,8 @@ } .checkbox-container-unclicked { - background-color: white; - border: 1px solid black; + background-color: #FFFFFF; + border: 1px solid #000000; } @@ -35,7 +35,7 @@ background-color:#b5cfe1 ; width: 600px; //padding-left: 20px; - box-shadow: 10px 10px 55px 0px black; + box-shadow: 10px 10px 55px 0px #000000; } .slider { @@ -56,7 +56,7 @@ width: 50%; } -.lll{ +.display-svg-opt-notopt{ width: 319px; display: flex; } diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 9db207c..b9e84bc 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -1,71 +1,97 @@ -import React, { Component } from 'react'; -import ChooseFolder from './chooseFolder/chooseFolder'; -import { NavLink} from 'react-router-dom'; -import SvgSettingOptions from './svgSetting/svgSettingOptions'; -import '../components/checkBoxSelection/checkBoxSelection.scss'; -import { changeObj, optimizeSvg } from '../../src/components/functions'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../store/actionTypes'; +import React, { Component } from "react"; +import ChooseFolder from "./chooseFolder/chooseFolder"; +import { NavLink } from "react-router-dom"; +import SvgSettingOptions from "./svgSetting/svgSettingOptions"; +import "../components/checkBoxSelection/checkBoxSelection.scss"; +import { changeObj, optimizeSvg } from "../../src/components/functions"; +import { connect } from "react-redux"; +import PropTypes from "prop-types"; +import { + ADD_VARIABLE, + UPDATE_VARIABLE, + DELETE_VARIABLE +} from "../store/actionTypes"; class DisplayAllComponent extends Component { - - -getOptimizeSvg = async () => { + getOptimizeSvg = async () => { for (var option of this.props.reduxState.svgOptions) { - changeObj(option, this.props.reduxState.svgObject.plugins); + changeObj(option, this.props.reduxState.svgObject.plugins); } for (var setting of this.props.reduxState.svgSettingList) { - if(this.props.reduxState.svgOptions.length>0){ - this.props.reduxState.displayOptimaze.push({'original':setting.dataurl,'name':setting.name,'fake':await optimizeSvg(setting.dataurl, this.props.reduxState.svgObject.plugins)}); - }else{ - this.props.reduxState.displayOptimaze.push({'original':setting.dataurl,'name':setting.name,'fake':await optimizeSvg(setting.dataurl,null)}); - } - + if (this.props.reduxState.svgOptions.length > 0) { + this.props.reduxState.displayOptimaze.push({ + original: setting.dataurl, + name: setting.name, + fake: await optimizeSvg( + setting.dataurl, + this.props.reduxState.svgObject.plugins + ) + }); + } else { + this.props.reduxState.displayOptimaze.push({ + original: setting.dataurl, + name: setting.name, + fake: await optimizeSvg(setting.dataurl, null) + }); + } } -} + }; -render() { - console.log("this.props.reduxState.svgSettingList :",this.props.reduxState.svgSettingList) + render() { return ( - <div> - <div className='main-class'> - <div className='choose'> - <ChooseFolder /> - </div> - <div className='choose'> - <SvgSettingOptions /> - <div className='mpilomshengu'> - <NavLink to='/FinalSvgDisplay' > - <div className='optimizeButton' onClick={this.getOptimizeSvg}>Optimize</div> - </NavLink> - </div> + <div> + <div className="main-class"> + <div className="choose"> + <ChooseFolder /> + </div> + <div className="choose"> + <SvgSettingOptions /> + <div className="mpilomshengu"> + <NavLink to="/FinalSvgDisplay"> + <div className="optimizeButton" onClick={this.getOptimizeSvg}> + Optimize </div> + </NavLink> </div> + </div> </div> - );} + </div> + ); + } } - - DisplayAllComponent.propTypes = { - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const reduxState = { reduxState: { ...state } }; + return reduxState; }; const mapDispatchToProps = dispatch => { - return { - addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), - updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), - deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) - }; + return { + addToStore: (variableName, variableValue) => + dispatch({ + type: ADD_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + updateStore: (variableName, variableValue) => + dispatch({ + type: UPDATE_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + deleteFromStore: variableName => + dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; }; -export default connect(mapStateToProps, mapDispatchToProps)(DisplayAllComponent); \ No newline at end of file +export default connect( + mapStateToProps, + mapDispatchToProps +)(DisplayAllComponent); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 6d983ad..e637b41 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -22,7 +22,7 @@ class FinalSvgDisplay extends Component { for (var key in this.props.reduxState.displayOptimaze) { listOfFileNames.push( - <div className="lll"> + <div className="display-svg-opt-notopt"> <DisplaySvg dataUrl={this.props.reduxState.displayOptimaze[key].original} weight="100px" diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index a94ea0b..8144051 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -1,126 +1,107 @@ -import React, { Component } from 'react'; -import '../checkBoxSelection/checkBoxSelection.scss'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import {Svgo} from '../svgSetting/svgoConfig'; -import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; +import React, { Component } from "react"; +import "../checkBoxSelection/checkBoxSelection.scss"; +import PropTypes from "prop-types"; +import { connect } from "react-redux"; +import { Svgo } from "../svgSetting/svgoConfig"; +import { + ADD_VARIABLE, + UPDATE_VARIABLE, + DELETE_VARIABLE +} from "../../store/actionTypes"; class SvgSetting extends Component { - constructor(props) { - super(props); - this.state = { - isClicked: this.props.isSelected, - arr:[], - svgoObject: {...Svgo}, - isFound:false - }; + constructor(props) { + super(props); + this.state = { + isClicked: this.props.isSelected, + arr: [], + svgoObject: { ...Svgo }, + isFound: false + }; + } + + handleDivClick = () => { + this.setState({ + isClicked: !this.state.isClicked + }); + for (var file in this.props.reduxState.svgOptions) { + if (this.props.reduxState.svgOptions[file] === this.props.k) { + this.state.isFound = true; + this.state.index = file; + } + } + if (this.state.isFound === false) { + this.props.reduxState.svgOptions.push(this.props.k); + } else { + this.props.reduxState.svgOptions.splice(this.state.index, 1); + this.state.isFound = false; } + }; - handleDivClick= () => { - this.setState({ - isClicked: !this.state.isClicked - }); - for(var file in this.props.reduxState.svgOptions){ - if(this.props.reduxState.svgOptions[file]===this.props.k){ - this.state.isFound=true; - this.state.index=file; - } - } - if(this.state.isFound===false){ - this.props.reduxState.svgOptions.push(this.props.k); - }else{ - this.props.reduxState.svgOptions.splice(this.state.index, 1); - this.state.isFound=false; - } - - } - /*handleDivClick= () => { - this.setState({ - isClicked: !this.state.isClicked - }); - for(var file in this.props.reduxState.svgSettingList){ - console.log(this.props.reduxState.svgSettingList[file]); - if(this.props.reduxState.svgSettingList[file].name===this.props.file.name){ - this.state.isFound=true; - this.state.index=file; - } - } - if(this.state.isFound===false){ - this.convertSvgToDataUrl(this.props.file); - }else{ - this.props.reduxState.svgSettingList.splice(this.state.index, 1); - this.state.isFound=false; - } - } */ + m = value => { + let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( + option => { + for (var p of value) { + if (option[p] !== null && option[p] !== undefined) { + option[p] = true; + } + return true; + } + } + ); - m=(value)=>{ - - - let newSvgoObject = this.props.reduxState.svgObject.plugins.filter((option)=>{ - for(var p of value){ - if(option[p] !== null && option[p] !== undefined){ - option[p] = true; - } - return true; - - } - - }); - - console.log(newSvgoObject); - return newSvgoObject; - } + return newSvgoObject; + }; - mm=()=>{ - this.m(this.props.reduxState.svgOptions); - console.log(this.props.reduxState); - } - + mm = () => { + this.m(this.props.reduxState.svgOptions); + }; - render() { - return ( - <div - - onClick={this.handleDivClick} - > - <input - - type='checkbox' - checked={this.state.isClicked} - /> - <label className='checkbox-label-svg'> - {this.props.option} - </label> - </div> - - ); - } + render() { + return ( + <div onClick={this.handleDivClick}> + <input type="checkbox" checked={this.state.isClicked} /> + <label className="checkbox-label-svg">{this.props.option}</label> + </div> + ); + } } - - -SvgSetting.propTypes={ - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, - option: PropTypes.string, - k:PropTypes.string, - isSelected: PropTypes.bool - +SvgSetting.propTypes = { + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + option: PropTypes.string, + k: PropTypes.string, + isSelected: PropTypes.bool }; const mapStateToProps = state => { - const reduxState = {reduxState:{...state}}; - return reduxState; + const reduxState = { reduxState: { ...state } }; + return reduxState; }; const mapDispatchToProps = dispatch => { - return { - addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), - updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), - deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) - }; + return { + addToStore: (variableName, variableValue) => + dispatch({ + type: ADD_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + updateStore: (variableName, variableValue) => + dispatch({ + type: UPDATE_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + deleteFromStore: variableName => + dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; }; -export default connect(mapStateToProps, mapDispatchToProps)(SvgSetting); +export default connect( + mapStateToProps, + mapDispatchToProps +)(SvgSetting); From c23d351b56d23dc15e07c7dbf76a131272815ee2 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 11:48:12 +0200 Subject: [PATCH 08/71] restructured code as per change request --- src/components/checkBoxSelection/checkBoxSelection.js | 8 ++------ src/components/displayAllComponent.js | 4 ++-- src/components/displaySvg/finalSvgDisplay.js | 6 +++--- src/store/mainReducer.js | 2 +- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 0845cc6..30effbf 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -8,14 +8,10 @@ class CheckBoxSelection extends Component { constructor(props) { super(props); this.state = { - isClicked: false + isClicked: this.props.isSelected }; } - componentWillMount() { - this.setState({ isClicked: this.props.isSelected }); - } - convertSvgToDataUrl=(file)=>{ let reader = new FileReader(); reader.onload = (result)=>{ @@ -36,7 +32,7 @@ class CheckBoxSelection extends Component { index=key; } } - if(isFound===false){ + if(!isFound){ this.convertSvgToDataUrl(this.props.file); }else{ this.props.reduxState.svgSettingList.splice(index, 1); diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index b9e84bc..625c610 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -19,7 +19,7 @@ class DisplayAllComponent extends Component { } for (var setting of this.props.reduxState.svgSettingList) { if (this.props.reduxState.svgOptions.length > 0) { - this.props.reduxState.displayOptimaze.push({ + this.props.reduxState.displayOptimize.push({ original: setting.dataurl, name: setting.name, fake: await optimizeSvg( @@ -28,7 +28,7 @@ class DisplayAllComponent extends Component { ) }); } else { - this.props.reduxState.displayOptimaze.push({ + this.props.reduxState.displayOptimize.push({ original: setting.dataurl, name: setting.name, fake: await optimizeSvg(setting.dataurl, null) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index e637b41..db5a2be 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -20,18 +20,18 @@ class FinalSvgDisplay extends Component { render() { const listOfFileNames = []; - for (var key in this.props.reduxState.displayOptimaze) { + for (var key in this.props.reduxState.displayOptimize) { listOfFileNames.push( <div className="display-svg-opt-notopt"> <DisplaySvg - dataUrl={this.props.reduxState.displayOptimaze[key].original} + dataUrl={this.props.reduxState.displayOptimize[key].original} weight="100px" height="300" /> <DisplaySvg dataUrl={ "data:image/svg+xml;base64," + - this.props.reduxState.displayOptimaze[key].fake + this.props.reduxState.displayOptimize[key].fake } weight="100px" height="300" diff --git a/src/store/mainReducer.js b/src/store/mainReducer.js index b953bb5..a07510b 100644 --- a/src/store/mainReducer.js +++ b/src/store/mainReducer.js @@ -6,7 +6,7 @@ let initialState = { svgSettingList:[], svgOptions:[], svgObject:{...Svgo}, - displayOptimaze:[] + displayOptimize:[] }; export default (state=initialState, action) => { From c1f2ff89aa14e156d477d53953503e0c3e1246bb Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 15:31:47 +0200 Subject: [PATCH 09/71] cleaning up code --- package.json | 1 - .../checkBoxSelection/checkBoxSelection.scss | 2 +- src/components/displayAllComponent.js | 2 +- src/components/svgSetting/svgSetting.js | 10 +++++----- src/components/svgSetting/svgSettingOptions.js | 2 +- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 552c2dc..ff24a65 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ "prop-types": "15.7.2", "react": "16.9.0", "react-dom": "16.9.0", - "react-livechat": "1.1.1", "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 57eb9e6..950b175 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -70,7 +70,7 @@ align-items: center; } -.mpilomshengu{ +.optimise-button-div{ display: flex; justify-content: center; } diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 625c610..094b1af 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -46,7 +46,7 @@ class DisplayAllComponent extends Component { </div> <div className="choose"> <SvgSettingOptions /> - <div className="mpilomshengu"> + <div className="optimise-button-div"> <NavLink to="/FinalSvgDisplay"> <div className="optimizeButton" onClick={this.getOptimizeSvg}> Optimize diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 8144051..04d27ff 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -25,20 +25,20 @@ class SvgSetting extends Component { isClicked: !this.state.isClicked }); for (var file in this.props.reduxState.svgOptions) { - if (this.props.reduxState.svgOptions[file] === this.props.k) { + if (this.props.reduxState.svgOptions[file] === this.props.value) { this.state.isFound = true; this.state.index = file; } } if (this.state.isFound === false) { - this.props.reduxState.svgOptions.push(this.props.k); + this.props.reduxState.svgOptions.push(this.props.value); } else { this.props.reduxState.svgOptions.splice(this.state.index, 1); this.state.isFound = false; } }; - m = value => { + toChangePluginObjectValues = value => { let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( option => { for (var p of value) { @@ -53,8 +53,8 @@ class SvgSetting extends Component { return newSvgoObject; }; - mm = () => { - this.m(this.props.reduxState.svgOptions); + changingPluginValuesPerUserOption= () => { + this.changePluginObjectValues(this.props.reduxState.svgOptions); }; render() { diff --git a/src/components/svgSetting/svgSettingOptions.js b/src/components/svgSetting/svgSettingOptions.js index a6d6c94..8ea2791 100644 --- a/src/components/svgSetting/svgSettingOptions.js +++ b/src/components/svgSetting/svgSettingOptions.js @@ -14,7 +14,7 @@ class SvgSettingOptions extends Component { render() { for(var key in CardLayout) { if(CardLayout[key].type==='checkbox'){ - this.state.settingOptionList.push(<SvgSetting key={key} k={CardLayout[key].value} option={CardLayout[key].text} />); + this.state.settingOptionList.push(<SvgSetting key={key} value={CardLayout[key].value} option={CardLayout[key].text} />); }else if(CardLayout[key].type==='slider'){ this.state.settingOptionList.push(<div className='slider'><Slider key={key} option={CardLayout[key].text} /></div>); } From 702c9293e0872af638f11957f2390c47ae9bdb86 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 16:07:46 +0200 Subject: [PATCH 10/71] gave more meaningful words --- src/components/checkBoxSelection/checkBoxSelection.scss | 3 --- src/components/displayAllComponent.js | 4 ++-- src/components/displaySvg/finalSvgDisplay.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 950b175..864d3f9 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -28,16 +28,13 @@ margin-top: 20px; display: none; } - .card-settings { height: 350px; overflow-y: scroll; background-color:#b5cfe1 ; width: 600px; - //padding-left: 20px; box-shadow: 10px 10px 55px 0px #000000; } - .slider { margin-top: 10px; margin-bottom: 10px; diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 094b1af..e06518a 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -22,7 +22,7 @@ class DisplayAllComponent extends Component { this.props.reduxState.displayOptimize.push({ original: setting.dataurl, name: setting.name, - fake: await optimizeSvg( + normalSvg: await optimizeSvg( setting.dataurl, this.props.reduxState.svgObject.plugins ) @@ -31,7 +31,7 @@ class DisplayAllComponent extends Component { this.props.reduxState.displayOptimize.push({ original: setting.dataurl, name: setting.name, - fake: await optimizeSvg(setting.dataurl, null) + normalSvg: await optimizeSvg(setting.dataurl, null) }); } } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index db5a2be..094378c 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -31,7 +31,7 @@ class FinalSvgDisplay extends Component { <DisplaySvg dataUrl={ "data:image/svg+xml;base64," + - this.props.reduxState.displayOptimize[key].fake + this.props.reduxState.displayOptimize[key].normalSvg } weight="100px" height="300" From 94c4e250a301c6fe37e8eca2acded2a3b4159db4 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 16:16:36 +0200 Subject: [PATCH 11/71] naming and removal of unused variables --- src/components/displaySvg/finalSvgDisplay.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 094378c..80e9e9b 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -8,15 +8,7 @@ import { DELETE_VARIABLE } from "../../store/actionTypes"; class FinalSvgDisplay extends Component { - constructor(props) { - super(props); - this.state = { - list : [] - }; - } - - - + render() { const listOfFileNames = []; From 5741ff1ef2eb53004489186caf5ca4a56388066e Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 17:35:17 +0200 Subject: [PATCH 12/71] renamed a function --- .../checkBoxSelection/checkBoxSelection.js | 163 ++++++++++-------- .../svgSetting/svgSettingOptions.js | 72 ++++---- 2 files changed, 133 insertions(+), 102 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 30effbf..b594eaa 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -1,85 +1,108 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import './checkBoxSelection.scss'; -import { connect } from 'react-redux'; -import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from '../../store/actionTypes'; +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import "./checkBoxSelection.scss"; +import { connect } from "react-redux"; +import { + ADD_VARIABLE, + UPDATE_VARIABLE, + DELETE_VARIABLE +} from "../../store/actionTypes"; class CheckBoxSelection extends Component { - constructor(props) { - super(props); - this.state = { - isClicked: this.props.isSelected - }; - } - - convertSvgToDataUrl=(file)=>{ - let reader = new FileReader(); - reader.onload = (result)=>{ - this.props.reduxState.svgSettingList.push ({'name':file.name,dataurl:result.target.result}); - }; - if (file) { - reader.readAsDataURL(file); - } - } + constructor(props) { + super(props); + this.state = { + isClicked: this.props.isSelected + }; + } - handleDivClick= () => { - let isFound=false; - let index=0; - this.setState({isClicked: !this.state.isClicked}); - for(var key in this.props.reduxState.svgSettingList){ - if(this.props.reduxState.svgSettingList[key].name===this.props.file.name){ - isFound=true; - index=key; - } - } - if(!isFound){ - this.convertSvgToDataUrl(this.props.file); - }else{ - this.props.reduxState.svgSettingList.splice(index, 1); - isFound=false; - } - } + convertSvgToDataUrl = file => { + let reader = new FileReader(); + reader.onload = result => { + this.props.reduxState.svgSettingList.push({ + name: file.name, + dataurl: result.target.result + }); + }; + if (file) { + reader.readAsDataURL(file); + } + }; - render() { + changeColourAndTick = () => { + let isFound = false; + let index = 0; + this.setState({ isClicked: !this.state.isClicked }); + for (var key in this.props.reduxState.svgSettingList) { + if ( + this.props.reduxState.svgSettingList[key].name === this.props.file.name + ) { + isFound = true; + index = key; + } + } + if (!isFound) { + this.convertSvgToDataUrl(this.props.file); + } else { + this.props.reduxState.svgSettingList.splice(index, 1); + isFound = false; + } + }; - return ( - <div - className={this.state.isClicked ? 'checkbox-container-clicked' : 'checkbox-container-unclicked'} - onClick={this.handleDivClick} - > - <input - className='checkbox-input' - type='checkbox' - checked={this.state.isClicked} - /> - <label className='checkbox-label'> - {this.props.filename} - - </label> - </div> - ); - } + render() { + return ( + <div + className={ + this.state.isClicked + ? "checkbox-container-clicked" + : "checkbox-container-unclicked" + } + onClick={this.changeColourAndTick} + > + <input + className="checkbox-input" + type="checkbox" + checked={this.state.isClicked} + /> + <label className="checkbox-label">{this.props.filename}</label> + </div> + ); + } } -CheckBoxSelection.propTypes={ - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, - filename:PropTypes.string +CheckBoxSelection.propTypes = { + reduxState: PropTypes.object, + addToStore: PropTypes.func, + updateStore: PropTypes.func, + deleteFromStore: PropTypes.func, + filename: PropTypes.string }; const mapStateToProps = state => { - const reduxState = {reduxState:{...state}}; - return reduxState; + const reduxState = { reduxState: { ...state } }; + return reduxState; }; const mapDispatchToProps = dispatch => { - return { - addToStore: (variableName, variableValue) => dispatch({ type: ADD_VARIABLE, variableName: variableName, variableValue: variableValue }), - updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }), - deleteFromStore: (variableName) => dispatch({ type: DELETE_VARIABLE, variableName: variableName }) - }; + return { + addToStore: (variableName, variableValue) => + dispatch({ + type: ADD_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + updateStore: (variableName, variableValue) => + dispatch({ + type: UPDATE_VARIABLE, + variableName: variableName, + variableValue: variableValue + }), + deleteFromStore: variableName => + dispatch({ type: DELETE_VARIABLE, variableName: variableName }) + }; }; -export default connect(mapStateToProps, mapDispatchToProps)(CheckBoxSelection); +export default connect( + mapStateToProps, + mapDispatchToProps +)(CheckBoxSelection); diff --git a/src/components/svgSetting/svgSettingOptions.js b/src/components/svgSetting/svgSettingOptions.js index 8ea2791..f34766c 100644 --- a/src/components/svgSetting/svgSettingOptions.js +++ b/src/components/svgSetting/svgSettingOptions.js @@ -1,35 +1,43 @@ -import React, { Component } from 'react'; -import './../checkBoxSelection/checkBoxSelection.scss'; -import {CardLayout} from './svgCardLayout'; -import SvgSetting from './svgSetting'; -import Slider from './slider'; +import React, { Component } from "react"; +import "./../checkBoxSelection/checkBoxSelection.scss"; +import { CardLayout } from "./svgCardLayout"; +import SvgSetting from "./svgSetting"; +import Slider from "./slider"; class SvgSettingOptions extends Component { - constructor(props) { - super(props); - this.state = { - settingOptionList : [] - }; - } + constructor(props) { + super(props); + this.state = { + settingOptionList: [] + }; + } - render() { - for(var key in CardLayout) { - if(CardLayout[key].type==='checkbox'){ - this.state.settingOptionList.push(<SvgSetting key={key} value={CardLayout[key].value} option={CardLayout[key].text} />); - }else if(CardLayout[key].type==='slider'){ - this.state.settingOptionList.push(<div className='slider'><Slider key={key} option={CardLayout[key].text} /></div>); - } - } - - return ( - <div className='card-settings' > - <div > - <label> {'SVG settings'} </label> - </div> - <div > - { this.state.settingOptionList} - </div> - </div> - ); - } -} + render() { + for (var key in CardLayout) { + if (CardLayout[key].type === "checkbox") { + this.state.settingOptionList.push( + <SvgSetting + key={key} + value={CardLayout[key].value} + option={CardLayout[key].text} + /> + ); + } else if (CardLayout[key].type === "slider") { + this.state.settingOptionList.push( + <div className="slider"> + <Slider key={key} option={CardLayout[key].text} /> + </div> + ); + } + } + + return ( + <div className="card-settings"> + <div> + <label> {"SVG settings"} </label> + </div> + <div>{this.state.settingOptionList}</div> + </div> + ); + } +} export default SvgSettingOptions; From 89bf1b53ab697730bfde286ffbd90ab45095049b Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 30 Sep 2019 17:51:58 +0200 Subject: [PATCH 13/71] added bibel --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index ff24a65..58563a8 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "axios": "0.19.0", + "babel-eslint": "^10.0.3", "base-64": "0.1.0", "node-sass": "4.12.0", "prop-types": "15.7.2", From 2cddbe7f22ef042d935087c9c561090dd28519b4 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 1 Oct 2019 09:25:31 +0200 Subject: [PATCH 14/71] renaming, explained code, removed - change requests --- src/components/chooseFolder/chooseFolder.js | 4 ++-- src/components/displayAllComponent.js | 8 ++++---- src/components/displaySvg/finalSvgDisplay.js | 14 +++++++------- src/components/svgSetting/svgSetting.js | 8 ++++---- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index 3e98b24..cafd2c3 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -9,7 +9,7 @@ class ChooseFolder extends Component { this.state = { path: [], displayMenu: false, - originalDataUrl:'', + normalSvgDataUrl:'', optimizedDataUrl:'' }; } @@ -21,7 +21,7 @@ class ChooseFolder extends Component { convertSvgToDataUrl=(file)=>{ let reader = new FileReader(); reader.onload = (result)=>{ - this.setState({originalDataUrl:result.target.result}); + this.setState({normalSvgDataUrl:result.target.result}); }; if (file) { reader.readAsDataURL(file); diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index e06518a..042583a 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -20,18 +20,18 @@ class DisplayAllComponent extends Component { for (var setting of this.props.reduxState.svgSettingList) { if (this.props.reduxState.svgOptions.length > 0) { this.props.reduxState.displayOptimize.push({ - original: setting.dataurl, + normalSvg: setting.dataurl, name: setting.name, - normalSvg: await optimizeSvg( + optimisedSVG: await optimizeSvg( setting.dataurl, this.props.reduxState.svgObject.plugins ) }); } else { this.props.reduxState.displayOptimize.push({ - original: setting.dataurl, + normalSvg: setting.dataurl, name: setting.name, - normalSvg: await optimizeSvg(setting.dataurl, null) + optimisedSVG: await optimizeSvg(setting.dataurl, null) }); } } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 80e9e9b..bcde110 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -16,17 +16,17 @@ class FinalSvgDisplay extends Component { listOfFileNames.push( <div className="display-svg-opt-notopt"> <DisplaySvg - dataUrl={this.props.reduxState.displayOptimize[key].original} - weight="100px" - height="300" + dataUrl={this.props.reduxState.displayOptimize[key].normalSvg} + width="100px" + height="300px" /> <DisplaySvg dataUrl={ "data:image/svg+xml;base64," + - this.props.reduxState.displayOptimize[key].normalSvg + this.props.reduxState.displayOptimize[key].optimisedSVG } - weight="100px" - height="300" + width="100px" + height="300px" /> </div> ); @@ -34,7 +34,7 @@ class FinalSvgDisplay extends Component { return ( - <div className=""> + <div > {Array.isArray(listOfFileNames) && listOfFileNames.length > 0 ? <div> {listOfFileNames} diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 04d27ff..96a8825 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -38,12 +38,12 @@ class SvgSetting extends Component { } }; - toChangePluginObjectValues = value => { + toChangePluginObjectValues = values => { let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( option => { - for (var p of value) { - if (option[p] !== null && option[p] !== undefined) { - option[p] = true; + for (var value of values) { + if (option[value] !== null && option[value] !== undefined) { + option[value] = true; } return true; } From f41db4c74eebc24173fc1415c120cf5c0ce9d879 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 1 Oct 2019 09:41:56 +0200 Subject: [PATCH 15/71] change requests, renaming, removing & answering questions --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 58563a8..ff24a65 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "private": true, "dependencies": { "axios": "0.19.0", - "babel-eslint": "^10.0.3", "base-64": "0.1.0", "node-sass": "4.12.0", "prop-types": "15.7.2", From fa0d433f3b3f03fcb67d70911bffe1ee430493cc Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 1 Oct 2019 10:50:43 +0200 Subject: [PATCH 16/71] removed Array.isArray --- src/components/displaySvg/finalSvgDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index bcde110..2d7911d 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -35,7 +35,7 @@ class FinalSvgDisplay extends Component { return ( <div > - {Array.isArray(listOfFileNames) && listOfFileNames.length > 0 ? + {listOfFileNames.length > 0 ? <div> {listOfFileNames} </div> : From 9adf29f13372589c846286c6e32bd50e21979461 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 1 Oct 2019 13:46:07 +0200 Subject: [PATCH 17/71] renaming of values --- src/components/displaySvg/displaySvg.js | 2 +- src/components/displaySvg/finalSvgDisplay.js | 3 ++- src/components/displaySvg/finalSvgDisplay.scss | 4 ++++ src/components/svgSetting/svgSetting.js | 8 ++++---- 4 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 src/components/displaySvg/finalSvgDisplay.scss diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index caa1ceb..1db0ac8 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -23,7 +23,7 @@ class DisplaySvg extends Component { render() { return ( - <div className='ncika'> + <div> <figure> <img id='svg-display-id' diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 2d7911d..352fad3 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -36,7 +36,8 @@ class FinalSvgDisplay extends Component { return ( <div > {listOfFileNames.length > 0 ? - <div> + <div className="display-page-div"> + {listOfFileNames} </div> : <div> diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss new file mode 100644 index 0000000..2c983be --- /dev/null +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -0,0 +1,4 @@ +.display-page-div{ + padding: 171px; + width: 373px; +} \ No newline at end of file diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 96a8825..ce93685 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -38,12 +38,12 @@ class SvgSetting extends Component { } }; - toChangePluginObjectValues = values => { + toChangePluginObjectValues = arrayWithPluginOptions => { let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( option => { - for (var value of values) { - if (option[value] !== null && option[value] !== undefined) { - option[value] = true; + for (var plugiOption of arrayWithPluginOptions) { + if (option[plugiOption] !== null && option[plugiOption] !== undefined) { + option[plugiOption] = true; } return true; } From 090f19f3747a6e729ab14ed9b51ba7b830c518c8 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 1 Oct 2019 13:54:24 +0200 Subject: [PATCH 18/71] pr attendant --- src/components/chooseFolder/chooseFolder.js | 4 ++-- src/components/displayAllComponent.js | 4 ++-- src/components/displaySvg/finalSvgDisplay.js | 2 +- src/components/svgSetting/svgSetting.js | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index cafd2c3..c5f545e 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -9,7 +9,7 @@ class ChooseFolder extends Component { this.state = { path: [], displayMenu: false, - normalSvgDataUrl:'', + originalSvgDataUrl:'', optimizedDataUrl:'' }; } @@ -21,7 +21,7 @@ class ChooseFolder extends Component { convertSvgToDataUrl=(file)=>{ let reader = new FileReader(); reader.onload = (result)=>{ - this.setState({normalSvgDataUrl:result.target.result}); + this.setState({originalSvgDataUrl:result.target.result}); }; if (file) { reader.readAsDataURL(file); diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 042583a..6d1e971 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -20,7 +20,7 @@ class DisplayAllComponent extends Component { for (var setting of this.props.reduxState.svgSettingList) { if (this.props.reduxState.svgOptions.length > 0) { this.props.reduxState.displayOptimize.push({ - normalSvg: setting.dataurl, + originalSvg: setting.dataurl, name: setting.name, optimisedSVG: await optimizeSvg( setting.dataurl, @@ -29,7 +29,7 @@ class DisplayAllComponent extends Component { }); } else { this.props.reduxState.displayOptimize.push({ - normalSvg: setting.dataurl, + originalSvg: setting.dataurl, name: setting.name, optimisedSVG: await optimizeSvg(setting.dataurl, null) }); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 352fad3..8c1f414 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -16,7 +16,7 @@ class FinalSvgDisplay extends Component { listOfFileNames.push( <div className="display-svg-opt-notopt"> <DisplaySvg - dataUrl={this.props.reduxState.displayOptimize[key].normalSvg} + dataUrl={this.props.reduxState.displayOptimize[key].originalSvg} width="100px" height="300px" /> diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index ce93685..0cd4551 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -41,9 +41,9 @@ class SvgSetting extends Component { toChangePluginObjectValues = arrayWithPluginOptions => { let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( option => { - for (var plugiOption of arrayWithPluginOptions) { - if (option[plugiOption] !== null && option[plugiOption] !== undefined) { - option[plugiOption] = true; + for (var element of arrayWithPluginOptions) { + if (option[element] !== null && option[element] !== undefined) { + option[element] = true; } return true; } From ce0cc234a9ca3a25d7f3f214edd7cfd6a87cc652 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 2 Oct 2019 09:22:28 +0200 Subject: [PATCH 19/71] fixed barbel package with version 10.0.2 --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index ff24a65..7b8b8d1 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ ] }, "devDependencies": { + "babel-eslint": "10.0.2", "eslint": "6.3.0", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-react": "7.14.3", From f9208a2044a20ef8f1a79ae433992289726ba1f1 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 3 Oct 2019 11:13:57 +0200 Subject: [PATCH 20/71] hover effect and mark with pink when clicked --- src/components/displayAllComponent.js | 4 ++-- src/components/displaySvg/displaySvg.js | 11 ++++++++++- src/components/displaySvg/finalSvgDisplay.js | 9 ++++++++- src/components/displaySvg/finalSvgDisplay.scss | 13 ++++++++++++- 4 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 6d1e971..f50ee82 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -22,7 +22,7 @@ class DisplayAllComponent extends Component { this.props.reduxState.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, - optimisedSVG: await optimizeSvg( + optimisedSvg: await optimizeSvg( setting.dataurl, this.props.reduxState.svgObject.plugins ) @@ -31,7 +31,7 @@ class DisplayAllComponent extends Component { this.props.reduxState.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, - optimisedSVG: await optimizeSvg(setting.dataurl, null) + optimisedSvg: await optimizeSvg(setting.dataurl, null) }); } } diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 1db0ac8..c81cbd0 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -1,14 +1,20 @@ import React, { Component } from 'react'; import base64 from 'base-64'; +import "./finalSvgDisplay.scss"; import PropTypes from 'prop-types'; class DisplaySvg extends Component { constructor(props) { super(props); this.state = { - fileSize: 0 + fileSize: 0, + isClicked: false }; } + changeColourOnclickToMark=()=>{ + this.setState({isClicked: !this.state.isClicked}); + } + componentWillMount = () => { if (this.props.dataUrl) { this.setState({ @@ -24,9 +30,11 @@ class DisplaySvg extends Component { render() { return ( <div> + <div className={this.props.svgType == "optimisedSvg" ? "optimised-svg-div-"+this.state.isClicked : "original-svg-div"} onClick={this.changeColourOnclickToMark}> <figure> <img id='svg-display-id' + className={this.props.svgType} src={this.props.dataUrl} width={this.props.width} height={this.props.height} @@ -34,6 +42,7 @@ class DisplaySvg extends Component { /> <figcaption>{ 'File Size : '+this.state.fileSize +' KB'}</figcaption> </figure> + </div> </div> ); } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 8c1f414..27e1381 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -1,6 +1,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import DisplaySvg from "./displaySvg"; +import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; import { ADD_VARIABLE, @@ -15,19 +16,25 @@ class FinalSvgDisplay extends Component { for (var key in this.props.reduxState.displayOptimize) { listOfFileNames.push( <div className="display-svg-opt-notopt"> + <div className="original-svg-div"> <DisplaySvg + svgType= "originalSvg" dataUrl={this.props.reduxState.displayOptimize[key].originalSvg} width="100px" height="300px" /> + </div> + <div className="optimised-svg-div"> <DisplaySvg + svgType="optimisedSvg" dataUrl={ "data:image/svg+xml;base64," + - this.props.reduxState.displayOptimize[key].optimisedSVG + this.props.reduxState.displayOptimize[key].optimisedSvg } width="100px" height="300px" /> + </div> </div> ); } diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 2c983be..550573a 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -1,4 +1,15 @@ .display-page-div{ padding: 171px; width: 373px; -} \ No newline at end of file +} + + .optimised-svg-div-false{ + :hover{ + background-color:#FFC0CB; + } + + } + + .optimised-svg-div-true{ + background-color: #FFC0CB; + } From 63bbfa7ecccbf7ef1400e4c9a66958987607422d Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 8 Oct 2019 17:10:39 +0200 Subject: [PATCH 21/71] wrap path with <a> to detect which path to change. --- package.json | 5 +- src/components/displaySvg/finalSvgDisplay.js | 93 +++++++++++++------ .../displaySvg/finalSvgDisplay.scss | 12 ++- src/components/functions.js | 50 ++++++++++ 4 files changed, 130 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 7b8b8d1..5ba8e7a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "dependencies": { "axios": "0.19.0", - "base-64": "0.1.0", + "base-64": "^0.1.0", "node-sass": "4.12.0", "prop-types": "15.7.2", "react": "16.9.0", @@ -14,7 +14,8 @@ "react-scripts": "3.1.1", "redux": "4.0.4", "simple-svg-icons": "2.0.2", - "simple-svg-tools": "1.1.12" + "simple-svg-tools": "1.1.12", + "svg-inline-react": "^3.2.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 27e1381..5738756 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -3,53 +3,92 @@ import PropTypes from "prop-types"; import DisplaySvg from "./displaySvg"; import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; +import base64 from "base-64"; +import InlineSVG from "svg-inline-react"; import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from "../../store/actionTypes"; +import {wrapPathsWithLinkElement, svgElement , linkElementHead} from '../functions'; + class FinalSvgDisplay extends Component { - + constructor(props) { + super(props); + this.state = { + wrappedPathsElement : [], + pathArrayState : null + }; +} + + + + componentDidMount = () => { + var array = [] ; + var pathArrayLocal = []; + var pathArray = document.getElementsByTagName("path"); + console.log("pathArray : ", pathArray); + console.log("pathArray : ", pathArray.length); + + for (var i = 0; i < pathArray.length; i++) { + var elementWrapper = document.createElement("a"); + elementWrapper.setAttribute("class","className-1"); + elementWrapper.setAttribute("id","id-1"); + console.log("pathArray["+ i +"]",pathArray[i]); + pathArrayLocal.push(pathArray[i]); + elementWrapper.appendChild(pathArray[i]); + array.push(elementWrapper); + + } + + this.setState({ + wrappedPathsElement : array, + pathArrayState : pathArrayLocal + }); + }; + render() { const listOfFileNames = []; for (var key in this.props.reduxState.displayOptimize) { + var stringElement = base64.decode( + this.props.reduxState.displayOptimize[key].optimisedSvg + ); + var doc = new DOMParser().parseFromString(stringElement, "text/html").body.firstChild; + if(this.state.wrappedPathsElement.length > 0){ + for(var index=0; index < this.state.wrappedPathsElement.length ; index++){ + var tempStr = new XMLSerializer().serializeToString(this.state.wrappedPathsElement[index]).toString(); + stringElement = stringElement.replace(); + } + } + listOfFileNames.push( <div className="display-svg-opt-notopt"> - <div className="original-svg-div"> - <DisplaySvg - svgType= "originalSvg" - dataUrl={this.props.reduxState.displayOptimize[key].originalSvg} - width="100px" - height="300px" - /> + <div className="original-svg-div" key={key}> + <DisplaySvg + key={key} + svgType="originalSvg" + dataUrl={this.props.reduxState.displayOptimize[key].originalSvg} + width="100px" + height="300px" + /> </div> <div className="optimised-svg-div"> - <DisplaySvg - svgType="optimisedSvg" - dataUrl={ - "data:image/svg+xml;base64," + - this.props.reduxState.displayOptimize[key].optimisedSvg - } - width="100px" - height="300px" - /> + <InlineSVG src={stringElement} /> </div> </div> ); } - return ( - <div > - {listOfFileNames.length > 0 ? - <div className="display-page-div"> - - {listOfFileNames} - </div> : - <div> - No svg to display - </div>} + <div> + {listOfFileNames.length > 0 ? ( + <div> + <div className="display-page-div">{listOfFileNames}</div> + </div> + ) : ( + <div>No svg to display</div> + )} </div> ); } diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 550573a..4f6fb3b 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -7,9 +7,19 @@ :hover{ background-color:#FFC0CB; } - } + a:hover { + background-color: yellow; + } + .optimised-svg-div-true{ background-color: #FFC0CB; } + + .original-svg-div , .optimised-svg-div{ + float: left; + box-sizing: border-box; + width: 50%; + height: 50%; + } \ No newline at end of file diff --git a/src/components/functions.js b/src/components/functions.js index df8405a..88af7cf 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -1,6 +1,12 @@ import axios from 'axios'; import {BASE_URL,OPTIMIZE_SVG} from '../constants/constants'; +export var svgElementString = "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" viewBox=\"0 0 80 80\" xml:space=\"preserve\">,<defs><style>.colour-class{fill:#FFFFFF;}</style></defs>,<style>.st2,.st3{fill:none;stroke:#000;stroke-width:2}.st3{stroke-linecap:round;stroke-linejoin:bevel}</style><g id=\"Group-5\" transform=\"translate(11 -9)\"><g id=\"Group-3\" transform=\"translate(4 36)\"><path id=\"Path-4\" d=\"M1 7.5v8.6c5.5 2.5 11.5 3.8 18 3.8s12.5-1.3 18-3.8V7.5C30.7 9.8 24.7 11 19 11S7.3 9.8 1 7.5z\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#fff\"></path><ellipse id=\"Oval\" cx=\"19\" cy=\"6\" rx=\"18\" ry=\"5\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#fff\" stroke=\"#000\" stroke-width=\"2\"></ellipse><path id=\"Path_1_\" class=\"st2\" d=\"M1.4 16c1.8 2.1 9 4 17.6 4s15.8-1.9 17.6-4\"></path><path id=\"Path-19\" class=\"st2\" d=\"M1 6v35\"></path><path class=\"st2\" d=\"M37 6v18\"></path></g><path id=\"Path-3\" class=\"st3\" d=\"M5 77c3 3.5 9.4 5.2 19 5.2\"></path><path class=\"st3\" d=\"M5 68c3 3.5 9.4 5.2 19 5.2M5 60c3 3.5 9.4 5.2 19 5.2\"></path><ellipse class=\"st2\" cx=\"42\" cy=\"66\" rx=\"18\" ry=\"5\"></ellipse><path class=\"st2\" d=\"M24 83c1.9 2.4 9.3 4.6 18.1 4.6s16.3-2.2 18.1-4.6M24.4 76c1.8 2.1 9 4 17.6 4s15.8-1.9 17.6-4M24 66v17.5M60 66v17.5\"></path><g id=\"Group-7\"><path d=\"M6.8 23.4c.2.3.4.5.5.8s.1.5 0 .8c-.1.2-.4.4-.7.5-.7.1-1.4.2-2.2.2H2.3c-.5 0-.8-.1-.9-.4-.2-.3-.2-.6-.2-.9.1-.3.2-.6.5-.9.3-.5.6-.6 1.1-.6v-8h-.6c-.2-.1-.4-.2-.5-.3s-.3-.3-.3-.5c-.1-.2-.1-.4-.1-.6 0-.3.2-.7.5-1s.6-.6 1-.8.8-.4 1.2-.4.8.1 1 .3c.1.1.2.2.3.4.1.2.1.3.1.4v10.5H6c.4.1.6.2.8.5zM19.8 19.7c-.2 1.1-.6 2.1-1.1 3.1s-1.3 1.8-2.3 2.4c-.5.2-1 .4-1.5.5s-1.1.1-1.6 0-1-.3-1.5-.5c-.5-.3-.9-.6-1.2-1.1-.7-1-1.2-2-1.4-3.1s-.2-2.2 0-3.4c.1-.8.4-1.7.7-2.5s.8-1.5 1.4-2.2c.5-.5 1-.9 1.6-1.1.6-.3 1.2-.4 1.8-.4s1.2.1 1.8.3 1.1.6 1.6 1.1.9 1 1.2 1.6c.3.6.5 1.2.6 1.8.1.6.2 1.2.2 1.9-.2.3-.2.9-.3 1.6zm-2.6-.5c.1-.4.1-1 .1-1.6s-.1-1.2-.3-1.7c-.2-.6-.5-1-.8-1.4-.4-.4-.9-.6-1.5-.6-.7 0-1.3.2-1.7.7s-.7 1-1 1.7c-.2.7-.3 1.3-.4 2v1.8c0 .3.1.7.2 1 .1.4.3.7.4 1 .2.3.4.5.7.7s.6.3 1 .2c.5 0 1-.2 1.3-.4s.7-.5.9-.8c.2-.3.5-.7.6-1.1.2-.4.3-.9.4-1.4l.1-.1zM22.8 24.4c-.2-.3-.4-.5-.4-.8s0-.6.1-.8c.1-.2.3-.4.5-.6s.6-.2.9-.2c.2 0 .4.1.6.2s.4.2.5.3c.2.1.5.2.8.3.3.1.6.1.8.1.3 0 .6-.1.9-.2s.5-.2.8-.5.5-.6.6-.9c.2-.6.2-1 0-1.4s-.5-.6-.9-.8c-.4-.2-.8-.3-1.3-.3s-1 0-1.4.1l-.1.1-.1.1c-.2.2-.4.3-.6.3h-.6l-.6-.3c-.2-.2-.3-.3-.4-.6-.1-.3-.2-.6-.1-.9v-.9-.7-.7-.3-.5-.5-.4c-.1-.1-.2-.3-.3-.5-.1-.2-.1-.4 0-.6s.1-.4.2-.5c.1-.2.2-.3.4-.4.3-.2.5-.3.9-.3h4.7c.4 0 .7 0 1-.1s.5 0 .8.1.5.2.6.4c.2.2.2.4.3.7s0 .5-.1.7-.3.4-.5.6c-.3.2-.7.3-1.1.3h-4.1v2c.4-.1.7-.1 1.1-.1s.7 0 1.1.1.8.2 1.1.3.7.3 1.1.6c.4.3.8.6 1.1 1 .3.4.5.9.7 1.3.2.6.3 1.2.3 1.7 0 .6-.2 1.1-.4 1.6s-.6 1-1 1.4-.9.8-1.4 1c-.5.3-1 .5-1.6.6s-1.1.1-1.7 0c-1.2-.1-2.2-.5-3.2-1.1zM33.8 13c.1-.6.2-1.2.5-1.7.2-.5.6-1 1.2-1.3.6-.4 1.2-.6 1.9-.6.6 0 1.2.1 1.8.4.5.3 1 .7 1.4 1.2s.6 1.1.6 1.9c0 .6-.1 1.2-.4 1.7s-.6 1-1.1 1.3c-.5.4-1 .6-1.6.7s-1.2.1-1.7-.1c-.8-.3-1.4-.7-1.8-1.3-.4-.6-.6-1.3-.8-2.2zm11.8-3.2c.3-.3.6-.4.9-.5.3 0 .6.1.8.2s.4.4.5.7.1.7-.1 1c-.1.1-.1.3-.2.4l-.3.3-.6.9c-.2.3-.3.4-.5.7-.2.2-.3.4-.5.7s-.4.6-.7 1c-.9 1.3-1.8 2.7-2.8 4-.9 1.3-1.8 2.6-2.8 4-.2.3-.4.6-.6.8-.2.3-.4.5-.6.8-.1.2-.3.4-.5.6s-.3.4-.5.6l-.6.3c-.2.1-.5 0-.8-.2-.4-.2-.6-.5-.6-.7-.1-.3 0-.6.1-.9s.3-.6.5-.9.4-.5.5-.7l.6-.9.6-.9c1.3-1.9 2.6-3.8 3.9-5.6s3-3.9 4.3-5.7zm-8.7 2.1c-.2.1-.3.2-.4.4-.1.2-.2.4-.2.6.1.4.3.8.5 1s.5.3.8.3.5-.1.7-.3.3-.5.4-1c0-.2-.1-.4-.2-.6-.1-.2-.3-.3-.4-.4-.2-.1-.4-.2-.6-.2-.2.1-.4.1-.6.2zm5.3 10.7c.1-.5.2-1 .4-1.5s.5-.9.9-1.2c.6-.4 1.2-.7 1.9-.8.7-.1 1.3 0 1.9.3s1.1.6 1.5 1.2c.4.5.6 1.2.7 1.9 0 .7-.1 1.3-.4 1.8-.3.5-.7 1-1.2 1.3s-1 .5-1.7.6-1.2 0-1.8-.2c-.7-.3-1.2-.7-1.5-1.3-.3-.6-.6-1.2-.6-1.9l-.1-.2zm2.8-.8c-.1.2-.2.4-.2.7 0 .2 0 .5.2.7.1.2.3.4.5.5s.4.1.6.1c.2 0 .4-.1.6-.2.2-.1.3-.3.4-.6.1-.3.1-.6 0-.9-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.7-.1-.5.1-.7.2-.9.4z\"></path></g></g></svg>" ; +export const elementWrapperHead = "<a id=\"state_al\" class=\"state\" xlink:href=\"\"><path"; +export const elementToWrapHead = "<path"; +export var elementWrapperTail = "</path></a>"; +export const elementToWrapTail = "</path>"; + export const optimizeSvg=(dataUrl,svgo)=>{ return axios.post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl,svgo }) .then(res => { @@ -21,3 +27,47 @@ export const changeObj=(value,svgoObjectPlugins)=>{ return newSvgoObject; }; + +// Write <a > into svg paths tags + //1. detect elements to be wrapped + // if element contains fill attribute + // wrap with <a> that may contain onclick = {} + // everywhere their is </path> close with </a> + +export const wrapPathsWithLinkElementHead=(svgElementString, elementWrapperHead,elementWrapperTail , elementToWrapHead,elementToWrapTail)=>{ + //elementToWrapHead = <path + //elementToWrapTail = </path> + console.log("elementToWrapHead : ", elementToWrapHead); + console.log("elementWrapperHead : ", elementWrapperHead); + console.log("original svg : ", svgElementString) + var newSvgElement = svgElementString.replace(new RegExp(elementToWrapHead, 'g'), elementWrapperHead); + //var iteration = 0 ; + // for(var index = svgElementString.indexOf("<path");index >= 0 ;index = svgElementString.indexOf("<path", index + 1)){ + // var prevIndex = iteration == 0 ? 0 : index ; + // var nextLen = iteration == 0 ? 0 : linkElementHead.length + 2; + // newSvgElement = [newSvgElement.toString().slice(prevIndex, index + nextLen), elementWrapperHead , newSvgElement.toString().slice(index + nextLen, newSvgElement.toString().length) ].join(); + // storePieces.push(newSvgElement); + // iteration += 1 ; + // console.log(" newSvgElement : ", newSvgElement , "index : ", index); + + // } + console.log("newSvgElement :", newSvgElement); + return newSvgElement; + +} + + +export const wrapPathsWithLinkElementTail=(svgElementString,elementWrapperTail,elementToWrapTail)=>{ + //elementToWrapHead = <path + //elementToWrapTail = </path> + var newSvgElement = svgElementString.replace(elementToWrapTail, elementWrapperTail); + + return newSvgElement; + +} +// Remove <a > from svg paths tags + // 1. <a> to be removed + +// Insert OnClick functionality + // 1. detect position where to place OnClick + From 339e41325e77b1e1ec3b38ddceb3a320d23c8711 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 9 Oct 2019 13:54:44 +0200 Subject: [PATCH 22/71] =?UTF-8?q?=C3=8Fts=20hovering=20some=20parts=20with?= =?UTF-8?q?=20minor=20errors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/displaySvg/finalSvgDisplay.js | 35 +++++++++++++++---- .../displaySvg/finalSvgDisplay.scss | 13 +++++++ src/constants/constants.js | 11 +++++- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 5738756..83c50d8 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -5,6 +5,7 @@ import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; import base64 from "base-64"; import InlineSVG from "svg-inline-react"; +import {SVG_TAG_NAMES} from "../../constants/constants"; import { ADD_VARIABLE, UPDATE_VARIABLE, @@ -21,6 +22,10 @@ class FinalSvgDisplay extends Component { }; } +svgPathClick(){ + alert("I have been clicked"); +} + componentDidMount = () => { @@ -29,18 +34,27 @@ class FinalSvgDisplay extends Component { var pathArray = document.getElementsByTagName("path"); console.log("pathArray : ", pathArray); console.log("pathArray : ", pathArray.length); + + + for (var x of pathArray) { + console.log("X------> : ",x); + } - for (var i = 0; i < pathArray.length; i++) { + var i = 0; + for (var x of pathArray) { var elementWrapper = document.createElement("a"); elementWrapper.setAttribute("class","className-1"); + elementWrapper.setAttribute("onClick",this.svgPathClick); elementWrapper.setAttribute("id","id-1"); - console.log("pathArray["+ i +"]",pathArray[i]); - pathArrayLocal.push(pathArray[i]); - elementWrapper.appendChild(pathArray[i]); + console.log("element ["+ i +"]",x); + pathArrayLocal.push(x); + elementWrapper.appendChild(x); array.push(elementWrapper); - + console.log("elementWrapper :",`${i } elementWrapper`); + i++; } + this.setState({ wrappedPathsElement : array, pathArrayState : pathArrayLocal @@ -57,8 +71,15 @@ class FinalSvgDisplay extends Component { var doc = new DOMParser().parseFromString(stringElement, "text/html").body.firstChild; if(this.state.wrappedPathsElement.length > 0){ for(var index=0; index < this.state.wrappedPathsElement.length ; index++){ - var tempStr = new XMLSerializer().serializeToString(this.state.wrappedPathsElement[index]).toString(); - stringElement = stringElement.replace(); + var tempWrapedStr = new XMLSerializer().serializeToString(this.state.wrappedPathsElement[index]).toString(); + var tempToWrapStr = new XMLSerializer().serializeToString(this.state.pathArrayState[index]).toString(); + tempToWrapStr = tempToWrapStr.replace("xmlns=\"http://www.w3.org/2000/svg\"",""); + tempToWrapStr = tempToWrapStr.substring(0,5)+" "+tempToWrapStr.substring(6,tempToWrapStr.length).trim(); + // console.log("replace ----> "+tempToWrapStr.substring(0,5)+" "+tempToWrapStr.substring(6,tempToWrapStr.length).trim()+ "with this ---> "+tempWrapedStr); + // console.log("tempToWrapStr : ", tempToWrapStr.substring(41,tempToWrapStr.length)); + // console.log("tempWrapedStr) : ", tempWrapedStr.substring(41,tempWrapedStr.length)); + stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); + console.log("stringElement : ", stringElement); } } diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 4f6fb3b..4c58663 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -13,6 +13,19 @@ background-color: yellow; } + .className-1{ + :hover{ + background-color: yellow; + fill:yellow; + + } + fill: pink; + color: black; + } + + + + .optimised-svg-div-true{ background-color: #FFC0CB; } diff --git a/src/constants/constants.js b/src/constants/constants.js index 402f3dc..1ed54f8 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,2 +1,11 @@ export const BASE_URL = 'http://localhost:3500/'; -export const OPTIMIZE_SVG= 'optimizeSvg'; \ No newline at end of file +export const OPTIMIZE_SVG= 'optimizeSvg'; +export const SVG_TAG_NAMES= { + "Rectangle" : "rect", + "Path":"path", + "circle": "circle", + "polygon":"polygon", + "ellipse":"ellipse", + "linearGradient":"linearGradient", + "text":"text" +} \ No newline at end of file From d5e1e23c6414aebbcf28b78ab07212f820b7df82 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 10 Oct 2019 12:27:24 +0200 Subject: [PATCH 23/71] does not change the whole svg, its only changes path lines and leave a white space --- src/components/displaySvg/finalSvgDisplay.js | 123 ++++++++++++------ .../displaySvg/finalSvgDisplay.scss | 9 +- src/constants/constants.js | 18 +-- 3 files changed, 97 insertions(+), 53 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 83c50d8..d5358a2 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -5,59 +5,72 @@ import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; import base64 from "base-64"; import InlineSVG from "svg-inline-react"; -import {SVG_TAG_NAMES} from "../../constants/constants"; +import { SVG_TAG_NAMES } from "../../constants/constants"; import { ADD_VARIABLE, UPDATE_VARIABLE, DELETE_VARIABLE } from "../../store/actionTypes"; -import {wrapPathsWithLinkElement, svgElement , linkElementHead} from '../functions'; +import { + wrapPathsWithLinkElement, + svgElement, + linkElementHead +} from "../functions"; class FinalSvgDisplay extends Component { constructor(props) { super(props); this.state = { - wrappedPathsElement : [], - pathArrayState : null + wrappedPathsElement: [], + pathArrayState: null }; -} - -svgPathClick(){ - alert("I have been clicked"); -} + } + svgPathClick() { + alert("I have been clicked"); + } + generate_random_id = string_length => { + let random_string = ""; + let random_ascii; + let ascii_low = 65; + let ascii_high = 90; + for (let i = 0; i < string_length; i++) { + random_ascii = Math.floor( + Math.random() * (ascii_high - ascii_low) + ascii_low + ); + random_string += String.fromCharCode(random_ascii); + } + return `id_${random_string}`; + }; componentDidMount = () => { - var array = [] ; + var array = []; var pathArrayLocal = []; var pathArray = document.getElementsByTagName("path"); - console.log("pathArray : ", pathArray); - console.log("pathArray : ", pathArray.length); - - - for (var x of pathArray) { - console.log("X------> : ",x); - } - - var i = 0; + for (var x of pathArray) { + var element = new XMLSerializer().serializeToString(x).toString(); + if (!element.includes("id=")) { + element = element.replace( + "<path", + '<path id="id_' + this.generate_random_id(7) + '"' + ); + } var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class","className-1"); - elementWrapper.setAttribute("onClick",this.svgPathClick); - elementWrapper.setAttribute("id","id-1"); - console.log("element ["+ i +"]",x); + elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("onClick", this.svgPathClick); + elementWrapper.setAttribute("id", "id-1"); pathArrayLocal.push(x); - elementWrapper.appendChild(x); + elementWrapper.appendChild( + new DOMParser().parseFromString(element, "text/html").body.firstChild + ); array.push(elementWrapper); - console.log("elementWrapper :",`${i } elementWrapper`); - i++; } - this.setState({ - wrappedPathsElement : array, - pathArrayState : pathArrayLocal + wrappedPathsElement: array, + pathArrayState: pathArrayLocal }); }; @@ -68,18 +81,46 @@ svgPathClick(){ var stringElement = base64.decode( this.props.reduxState.displayOptimize[key].optimisedSvg ); - var doc = new DOMParser().parseFromString(stringElement, "text/html").body.firstChild; - if(this.state.wrappedPathsElement.length > 0){ - for(var index=0; index < this.state.wrappedPathsElement.length ; index++){ - var tempWrapedStr = new XMLSerializer().serializeToString(this.state.wrappedPathsElement[index]).toString(); - var tempToWrapStr = new XMLSerializer().serializeToString(this.state.pathArrayState[index]).toString(); - tempToWrapStr = tempToWrapStr.replace("xmlns=\"http://www.w3.org/2000/svg\"",""); - tempToWrapStr = tempToWrapStr.substring(0,5)+" "+tempToWrapStr.substring(6,tempToWrapStr.length).trim(); - // console.log("replace ----> "+tempToWrapStr.substring(0,5)+" "+tempToWrapStr.substring(6,tempToWrapStr.length).trim()+ "with this ---> "+tempWrapedStr); - // console.log("tempToWrapStr : ", tempToWrapStr.substring(41,tempToWrapStr.length)); - // console.log("tempWrapedStr) : ", tempWrapedStr.substring(41,tempWrapedStr.length)); - stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); - console.log("stringElement : ", stringElement); + console.log( + "this.state.wrappedPathsElement : ", + this.state.wrappedPathsElement + ); + if (this.state.wrappedPathsElement.length > 0) { + for ( + var index = 0; + index < this.state.wrappedPathsElement.length; + index++ + ) { + var tempWrapedStr = new XMLSerializer() + .serializeToString(this.state.wrappedPathsElement[index]) + .toString(); + var tempToWrapStr = new XMLSerializer() + .serializeToString(this.state.pathArrayState[index]) + .toString(); + tempToWrapStr = tempToWrapStr.replace( + 'xmlns="http://www.w3.org/2000/svg"', + "" + ); + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + + if (!tempWrapedStr.includes('id="')) { + const positionToInsert = + tempWrapedStr.toString().indexOf("<path") + 1; + tempWrapedStr = [ + (tempWrapedStr = tempWrapedStr + .toString() + .slice(0, positionToInsert)), + "id_" + this.generate_random_id(7), + tempWrapedStr + .toString() + .slice(positionToInsert, tempWrapedStr.toString().length) + ].join(); + } + + stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); } } diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 4c58663..19bbf5e 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -9,8 +9,9 @@ } } - a:hover { + rect:hover { background-color: yellow; + fill:green($color: #000000); } .className-1{ @@ -19,10 +20,12 @@ fill:yellow; } - fill: pink; - color: black; + } + a:hover{ + fill:yellow; + } diff --git a/src/constants/constants.js b/src/constants/constants.js index 1ed54f8..feb0e07 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,11 +1,11 @@ export const BASE_URL = 'http://localhost:3500/'; export const OPTIMIZE_SVG= 'optimizeSvg'; -export const SVG_TAG_NAMES= { - "Rectangle" : "rect", - "Path":"path", - "circle": "circle", - "polygon":"polygon", - "ellipse":"ellipse", - "linearGradient":"linearGradient", - "text":"text" -} \ No newline at end of file +export const SVG_TAG_NAMES= [ + "rect", + "path", + "circle", + "polygon", + "ellipse", + "linearGradient", + "text" +] \ No newline at end of file From 20539fdb73ada6468ac29fba4852da807a206dbb Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 10 Oct 2019 14:04:00 +0200 Subject: [PATCH 24/71] It hovers path and ellipse --- src/components/displaySvg/finalSvgDisplay.js | 73 +++++++++++--------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index d5358a2..6311a90 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -47,27 +47,30 @@ class FinalSvgDisplay extends Component { componentDidMount = () => { var array = []; var pathArrayLocal = []; - var pathArray = document.getElementsByTagName("path"); - - for (var x of pathArray) { - var element = new XMLSerializer().serializeToString(x).toString(); - if (!element.includes("id=")) { - element = element.replace( - "<path", - '<path id="id_' + this.generate_random_id(7) + '"' - ); - } - var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class", "className-1"); - elementWrapper.setAttribute("onClick", this.svgPathClick); - elementWrapper.setAttribute("id", "id-1"); - pathArrayLocal.push(x); - elementWrapper.appendChild( - new DOMParser().parseFromString(element, "text/html").body.firstChild - ); - array.push(elementWrapper); + + for(var y in SVG_TAG_NAMES){ + var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); + for (var x of pathArray) { + var element = new XMLSerializer().serializeToString(x).toString(); + if (!element.includes("id=")) { + element = element.replace( + "<"+SVG_TAG_NAMES[y], + "<"+SVG_TAG_NAMES[y]+" id=\"id_" + this.generate_random_id(7) + '"' + ); + } + var elementWrapper = document.createElement("a"); + elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("onClick", this.svgPathClick); + elementWrapper.setAttribute("id", "id-1"); + pathArrayLocal.push(x); + elementWrapper.appendChild( + new DOMParser().parseFromString(element, "text/html").body.firstChild + ); + array.push(elementWrapper); + } + } - + this.setState({ wrappedPathsElement: array, pathArrayState: pathArrayLocal @@ -94,32 +97,34 @@ class FinalSvgDisplay extends Component { var tempWrapedStr = new XMLSerializer() .serializeToString(this.state.wrappedPathsElement[index]) .toString(); + var tempToWrapStr = new XMLSerializer() .serializeToString(this.state.pathArrayState[index]) .toString(); + console.log("Before replacement 1 : ", tempToWrapStr); tempToWrapStr = tempToWrapStr.replace( 'xmlns="http://www.w3.org/2000/svg"', "" ); - tempToWrapStr = + console.log("Before replacement 2 : ", tempToWrapStr ," io,"+ tempToWrapStr.substring(0,5)); + if(tempToWrapStr.substring(0,5)== "<path"){ + tempToWrapStr = tempToWrapStr.substring(0, 5) + " " + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - - if (!tempWrapedStr.includes('id="')) { - const positionToInsert = - tempWrapedStr.toString().indexOf("<path") + 1; - tempWrapedStr = [ - (tempWrapedStr = tempWrapedStr - .toString() - .slice(0, positionToInsert)), - "id_" + this.generate_random_id(7), - tempWrapedStr - .toString() - .slice(positionToInsert, tempWrapedStr.toString().length) - ].join(); + }else if(tempToWrapStr.substring(0,5)=="<elli"){ + console.log("Part 1 : ", tempToWrapStr.substring(0, 8)); + console.log("Part 2 : ",tempToWrapStr.substring(8, tempToWrapStr.length).trim()); + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); } + + console.log(" remove this : ",tempToWrapStr); + console.log("stringElement : ",stringElement); + console.log(" place this: ",tempWrapedStr); stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); } } From d6077a6fb0fe450a8afb499c8bc78c2b62dcabe0 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 10 Oct 2019 16:20:55 +0200 Subject: [PATCH 25/71] hovering for rect, --- src/components/displaySvg/finalSvgDisplay.js | 104 ++++++++++++------- 1 file changed, 67 insertions(+), 37 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 6311a90..8f599f7 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -47,30 +47,33 @@ class FinalSvgDisplay extends Component { componentDidMount = () => { var array = []; var pathArrayLocal = []; - - for(var y in SVG_TAG_NAMES){ - var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); - for (var x of pathArray) { - var element = new XMLSerializer().serializeToString(x).toString(); - if (!element.includes("id=")) { - element = element.replace( - "<"+SVG_TAG_NAMES[y], - "<"+SVG_TAG_NAMES[y]+" id=\"id_" + this.generate_random_id(7) + '"' - ); - } - var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class", "className-1"); - elementWrapper.setAttribute("onClick", this.svgPathClick); - elementWrapper.setAttribute("id", "id-1"); - pathArrayLocal.push(x); - elementWrapper.appendChild( - new DOMParser().parseFromString(element, "text/html").body.firstChild + + for (var y in SVG_TAG_NAMES) { + var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); + for (var x of pathArray) { + var element = new XMLSerializer().serializeToString(x).toString(); + if (!element.includes("id=")) { + element = element.replace( + "<" + SVG_TAG_NAMES[y], + "<" + + SVG_TAG_NAMES[y] + + ' id="id_' + + this.generate_random_id(7) + + '"' ); - array.push(elementWrapper); } - + var elementWrapper = document.createElement("a"); + elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("onClick", this.svgPathClick); + elementWrapper.setAttribute("id", "id-1"); + pathArrayLocal.push(x); + elementWrapper.appendChild( + new DOMParser().parseFromString(element, "text/html").body.firstChild + ); + array.push(elementWrapper); + } } - + this.setState({ wrappedPathsElement: array, pathArrayState: pathArrayLocal @@ -101,30 +104,57 @@ class FinalSvgDisplay extends Component { var tempToWrapStr = new XMLSerializer() .serializeToString(this.state.pathArrayState[index]) .toString(); - console.log("Before replacement 1 : ", tempToWrapStr); tempToWrapStr = tempToWrapStr.replace( 'xmlns="http://www.w3.org/2000/svg"', "" ); - console.log("Before replacement 2 : ", tempToWrapStr ," io,"+ tempToWrapStr.substring(0,5)); - if(tempToWrapStr.substring(0,5)== "<path"){ + if ( + tempToWrapStr.substring(0, 5) == "<path" || + tempToWrapStr.substring(0, 5) == "<rect" + ) { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<elli") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<rect") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<circ") { + //<circle + // console.log("Part 1 : ", tempToWrapStr.substring(0,7)); + // console.log("Part 2 : ",tempToWrapStr.substring(8, tempToWrapStr.length)); + tempToWrapStr = + tempToWrapStr.substring(0, 7) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + //console.log("stringElement : ",stringElement) + console.log("final string : ", tempToWrapStr); + } else if (tempToWrapStr.substring(0, 5) == "<poly") { + //<polygon + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<line") { tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - }else if(tempToWrapStr.substring(0,5)=="<elli"){ - console.log("Part 1 : ", tempToWrapStr.substring(0, 8)); - console.log("Part 2 : ",tempToWrapStr.substring(8, tempToWrapStr.length).trim()); + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + //console.log("stringElement : ",stringElement) + } else if (tempToWrapStr.substring(0, 5) == "<text") { tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); } - - console.log(" remove this : ",tempToWrapStr); - console.log("stringElement : ",stringElement); - console.log(" place this: ",tempWrapedStr); stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); } } From dff8986696f97c2b330cf4ca4ddd8774298cfab1 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 15 Oct 2019 15:36:19 +0200 Subject: [PATCH 26/71] it does change the svg colour into a specified colour, but when clicked again it does not take it back into original colour --- src/components/displaySvg/finalSvgDisplay.js | 166 +++------------ .../displaySvg/finalSvgDisplay.scss | 8 +- src/components/functions.js | 190 ++++++++++++++---- src/constants/constants.js | 2 +- 4 files changed, 174 insertions(+), 192 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 8f599f7..9c4449f 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -11,171 +11,53 @@ import { UPDATE_VARIABLE, DELETE_VARIABLE } from "../../store/actionTypes"; -import { - wrapPathsWithLinkElement, - svgElement, - linkElementHead -} from "../functions"; +import { wrapElements, updateSvgElements } from "../functions"; class FinalSvgDisplay extends Component { constructor(props) { super(props); this.state = { wrappedPathsElement: [], - pathArrayState: null + pathArrayState: null, + storePathsIds: [], + clickedSvgState: [] }; } - svgPathClick() { - alert("I have been clicked"); - } - - generate_random_id = string_length => { - let random_string = ""; - let random_ascii; - let ascii_low = 65; - let ascii_high = 90; - for (let i = 0; i < string_length; i++) { - random_ascii = Math.floor( - Math.random() * (ascii_high - ascii_low) + ascii_low - ); - random_string += String.fromCharCode(random_ascii); - } - return `id_${random_string}`; + handleClick = () => { + console.log("my function"); }; componentDidMount = () => { var array = []; var pathArrayLocal = []; + var elementIds = []; + wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); + var functionStr = "function doSomething(elemId){ var arrayOfClickedIds = [];const prevColour = document.getElementById(elemId).getAttribute(\"fill\");if(arrayOfClickedIds.includes(elemId) ){alert(\"About to pop : \" + elemId);document.getElementById(elemId).setAttribute(\"fill\",prevColour);}else{ alert(\"About to push : \" + elemId);document.getElementById(elemId).setAttribute(\"fill\",\"brown\");}}" - for (var y in SVG_TAG_NAMES) { - var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); - for (var x of pathArray) { - var element = new XMLSerializer().serializeToString(x).toString(); - if (!element.includes("id=")) { - element = element.replace( - "<" + SVG_TAG_NAMES[y], - "<" + - SVG_TAG_NAMES[y] + - ' id="id_' + - this.generate_random_id(7) + - '"' - ); - } - var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class", "className-1"); - elementWrapper.setAttribute("onClick", this.svgPathClick); - elementWrapper.setAttribute("id", "id-1"); - pathArrayLocal.push(x); - elementWrapper.appendChild( - new DOMParser().parseFromString(element, "text/html").body.firstChild - ); - array.push(elementWrapper); - } - } + const script = document.createElement('script'); + var t = document.createTextNode(functionStr); + script.appendChild(t); + document.body.appendChild(script); this.setState({ wrappedPathsElement: array, - pathArrayState: pathArrayLocal + pathArrayState: pathArrayLocal, + storePathsIds: elementIds }); }; + handleNvEnter = (event) => { + console.log("Nv Enter:", event); + } render() { const listOfFileNames = []; - - for (var key in this.props.reduxState.displayOptimize) { - var stringElement = base64.decode( - this.props.reduxState.displayOptimize[key].optimisedSvg - ); - console.log( - "this.state.wrappedPathsElement : ", - this.state.wrappedPathsElement - ); - if (this.state.wrappedPathsElement.length > 0) { - for ( - var index = 0; - index < this.state.wrappedPathsElement.length; - index++ - ) { - var tempWrapedStr = new XMLSerializer() - .serializeToString(this.state.wrappedPathsElement[index]) - .toString(); - - var tempToWrapStr = new XMLSerializer() - .serializeToString(this.state.pathArrayState[index]) - .toString(); - tempToWrapStr = tempToWrapStr.replace( - 'xmlns="http://www.w3.org/2000/svg"', - "" - ); - if ( - tempToWrapStr.substring(0, 5) == "<path" || - tempToWrapStr.substring(0, 5) == "<rect" - ) { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<elli") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<rect") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<circ") { - //<circle - // console.log("Part 1 : ", tempToWrapStr.substring(0,7)); - // console.log("Part 2 : ",tempToWrapStr.substring(8, tempToWrapStr.length)); - tempToWrapStr = - tempToWrapStr.substring(0, 7) + - " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - //console.log("stringElement : ",stringElement) - console.log("final string : ", tempToWrapStr); - } else if (tempToWrapStr.substring(0, 5) == "<poly") { - //<polygon - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<line") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - //console.log("stringElement : ",stringElement) - } else if (tempToWrapStr.substring(0, 5) == "<text") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } - - stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr); - } - } - - listOfFileNames.push( - <div className="display-svg-opt-notopt"> - <div className="original-svg-div" key={key}> - <DisplaySvg - key={key} - svgType="originalSvg" - dataUrl={this.props.reduxState.displayOptimize[key].originalSvg} - width="100px" - height="300px" - /> - </div> - <div className="optimised-svg-div"> - <InlineSVG src={stringElement} /> - </div> - </div> - ); - } + updateSvgElements( + listOfFileNames, + this.props.reduxState.displayOptimize, + this.state.wrappedPathsElement, + this.state.pathArrayState + ); return ( <div> diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 19bbf5e..a86845a 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -9,10 +9,6 @@ } } - rect:hover { - background-color: yellow; - fill:green($color: #000000); - } .className-1{ :hover{ @@ -23,9 +19,7 @@ } - a:hover{ - fill:yellow; - } + diff --git a/src/components/functions.js b/src/components/functions.js index 88af7cf..b9aef85 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -1,11 +1,13 @@ import axios from 'axios'; +import React from "react"; +import InlineSVG from "svg-inline-react"; +import DisplaySvg from "../components/displaySvg/displaySvg"; +import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay.scss"; import {BASE_URL,OPTIMIZE_SVG} from '../constants/constants'; +import { SVG_TAG_NAMES } from "../constants/constants"; +import base64 from "base-64"; + -export var svgElementString = "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" viewBox=\"0 0 80 80\" xml:space=\"preserve\">,<defs><style>.colour-class{fill:#FFFFFF;}</style></defs>,<style>.st2,.st3{fill:none;stroke:#000;stroke-width:2}.st3{stroke-linecap:round;stroke-linejoin:bevel}</style><g id=\"Group-5\" transform=\"translate(11 -9)\"><g id=\"Group-3\" transform=\"translate(4 36)\"><path id=\"Path-4\" d=\"M1 7.5v8.6c5.5 2.5 11.5 3.8 18 3.8s12.5-1.3 18-3.8V7.5C30.7 9.8 24.7 11 19 11S7.3 9.8 1 7.5z\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#fff\"></path><ellipse id=\"Oval\" cx=\"19\" cy=\"6\" rx=\"18\" ry=\"5\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#fff\" stroke=\"#000\" stroke-width=\"2\"></ellipse><path id=\"Path_1_\" class=\"st2\" d=\"M1.4 16c1.8 2.1 9 4 17.6 4s15.8-1.9 17.6-4\"></path><path id=\"Path-19\" class=\"st2\" d=\"M1 6v35\"></path><path class=\"st2\" d=\"M37 6v18\"></path></g><path id=\"Path-3\" class=\"st3\" d=\"M5 77c3 3.5 9.4 5.2 19 5.2\"></path><path class=\"st3\" d=\"M5 68c3 3.5 9.4 5.2 19 5.2M5 60c3 3.5 9.4 5.2 19 5.2\"></path><ellipse class=\"st2\" cx=\"42\" cy=\"66\" rx=\"18\" ry=\"5\"></ellipse><path class=\"st2\" d=\"M24 83c1.9 2.4 9.3 4.6 18.1 4.6s16.3-2.2 18.1-4.6M24.4 76c1.8 2.1 9 4 17.6 4s15.8-1.9 17.6-4M24 66v17.5M60 66v17.5\"></path><g id=\"Group-7\"><path d=\"M6.8 23.4c.2.3.4.5.5.8s.1.5 0 .8c-.1.2-.4.4-.7.5-.7.1-1.4.2-2.2.2H2.3c-.5 0-.8-.1-.9-.4-.2-.3-.2-.6-.2-.9.1-.3.2-.6.5-.9.3-.5.6-.6 1.1-.6v-8h-.6c-.2-.1-.4-.2-.5-.3s-.3-.3-.3-.5c-.1-.2-.1-.4-.1-.6 0-.3.2-.7.5-1s.6-.6 1-.8.8-.4 1.2-.4.8.1 1 .3c.1.1.2.2.3.4.1.2.1.3.1.4v10.5H6c.4.1.6.2.8.5zM19.8 19.7c-.2 1.1-.6 2.1-1.1 3.1s-1.3 1.8-2.3 2.4c-.5.2-1 .4-1.5.5s-1.1.1-1.6 0-1-.3-1.5-.5c-.5-.3-.9-.6-1.2-1.1-.7-1-1.2-2-1.4-3.1s-.2-2.2 0-3.4c.1-.8.4-1.7.7-2.5s.8-1.5 1.4-2.2c.5-.5 1-.9 1.6-1.1.6-.3 1.2-.4 1.8-.4s1.2.1 1.8.3 1.1.6 1.6 1.1.9 1 1.2 1.6c.3.6.5 1.2.6 1.8.1.6.2 1.2.2 1.9-.2.3-.2.9-.3 1.6zm-2.6-.5c.1-.4.1-1 .1-1.6s-.1-1.2-.3-1.7c-.2-.6-.5-1-.8-1.4-.4-.4-.9-.6-1.5-.6-.7 0-1.3.2-1.7.7s-.7 1-1 1.7c-.2.7-.3 1.3-.4 2v1.8c0 .3.1.7.2 1 .1.4.3.7.4 1 .2.3.4.5.7.7s.6.3 1 .2c.5 0 1-.2 1.3-.4s.7-.5.9-.8c.2-.3.5-.7.6-1.1.2-.4.3-.9.4-1.4l.1-.1zM22.8 24.4c-.2-.3-.4-.5-.4-.8s0-.6.1-.8c.1-.2.3-.4.5-.6s.6-.2.9-.2c.2 0 .4.1.6.2s.4.2.5.3c.2.1.5.2.8.3.3.1.6.1.8.1.3 0 .6-.1.9-.2s.5-.2.8-.5.5-.6.6-.9c.2-.6.2-1 0-1.4s-.5-.6-.9-.8c-.4-.2-.8-.3-1.3-.3s-1 0-1.4.1l-.1.1-.1.1c-.2.2-.4.3-.6.3h-.6l-.6-.3c-.2-.2-.3-.3-.4-.6-.1-.3-.2-.6-.1-.9v-.9-.7-.7-.3-.5-.5-.4c-.1-.1-.2-.3-.3-.5-.1-.2-.1-.4 0-.6s.1-.4.2-.5c.1-.2.2-.3.4-.4.3-.2.5-.3.9-.3h4.7c.4 0 .7 0 1-.1s.5 0 .8.1.5.2.6.4c.2.2.2.4.3.7s0 .5-.1.7-.3.4-.5.6c-.3.2-.7.3-1.1.3h-4.1v2c.4-.1.7-.1 1.1-.1s.7 0 1.1.1.8.2 1.1.3.7.3 1.1.6c.4.3.8.6 1.1 1 .3.4.5.9.7 1.3.2.6.3 1.2.3 1.7 0 .6-.2 1.1-.4 1.6s-.6 1-1 1.4-.9.8-1.4 1c-.5.3-1 .5-1.6.6s-1.1.1-1.7 0c-1.2-.1-2.2-.5-3.2-1.1zM33.8 13c.1-.6.2-1.2.5-1.7.2-.5.6-1 1.2-1.3.6-.4 1.2-.6 1.9-.6.6 0 1.2.1 1.8.4.5.3 1 .7 1.4 1.2s.6 1.1.6 1.9c0 .6-.1 1.2-.4 1.7s-.6 1-1.1 1.3c-.5.4-1 .6-1.6.7s-1.2.1-1.7-.1c-.8-.3-1.4-.7-1.8-1.3-.4-.6-.6-1.3-.8-2.2zm11.8-3.2c.3-.3.6-.4.9-.5.3 0 .6.1.8.2s.4.4.5.7.1.7-.1 1c-.1.1-.1.3-.2.4l-.3.3-.6.9c-.2.3-.3.4-.5.7-.2.2-.3.4-.5.7s-.4.6-.7 1c-.9 1.3-1.8 2.7-2.8 4-.9 1.3-1.8 2.6-2.8 4-.2.3-.4.6-.6.8-.2.3-.4.5-.6.8-.1.2-.3.4-.5.6s-.3.4-.5.6l-.6.3c-.2.1-.5 0-.8-.2-.4-.2-.6-.5-.6-.7-.1-.3 0-.6.1-.9s.3-.6.5-.9.4-.5.5-.7l.6-.9.6-.9c1.3-1.9 2.6-3.8 3.9-5.6s3-3.9 4.3-5.7zm-8.7 2.1c-.2.1-.3.2-.4.4-.1.2-.2.4-.2.6.1.4.3.8.5 1s.5.3.8.3.5-.1.7-.3.3-.5.4-1c0-.2-.1-.4-.2-.6-.1-.2-.3-.3-.4-.4-.2-.1-.4-.2-.6-.2-.2.1-.4.1-.6.2zm5.3 10.7c.1-.5.2-1 .4-1.5s.5-.9.9-1.2c.6-.4 1.2-.7 1.9-.8.7-.1 1.3 0 1.9.3s1.1.6 1.5 1.2c.4.5.6 1.2.7 1.9 0 .7-.1 1.3-.4 1.8-.3.5-.7 1-1.2 1.3s-1 .5-1.7.6-1.2 0-1.8-.2c-.7-.3-1.2-.7-1.5-1.3-.3-.6-.6-1.2-.6-1.9l-.1-.2zm2.8-.8c-.1.2-.2.4-.2.7 0 .2 0 .5.2.7.1.2.3.4.5.5s.4.1.6.1c.2 0 .4-.1.6-.2.2-.1.3-.3.4-.6.1-.3.1-.6 0-.9-.1-.2-.3-.4-.5-.6-.2-.1-.5-.2-.7-.1-.5.1-.7.2-.9.4z\"></path></g></g></svg>" ; -export const elementWrapperHead = "<a id=\"state_al\" class=\"state\" xlink:href=\"\"><path"; -export const elementToWrapHead = "<path"; -export var elementWrapperTail = "</path></a>"; -export const elementToWrapTail = "</path>"; export const optimizeSvg=(dataUrl,svgo)=>{ return axios.post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl,svgo }) @@ -27,47 +29,151 @@ export const changeObj=(value,svgoObjectPlugins)=>{ return newSvgoObject; }; +export const generate_random_id = string_length => { + let random_string = ""; + let random_ascii; + let ascii_low = 65; + let ascii_high = 90; + for (let i = 0; i < string_length; i++) { + random_ascii = Math.floor( + Math.random() * (ascii_high - ascii_low) + ascii_low + ); + random_string += String.fromCharCode(random_ascii); + } + return `id_${random_string}`; + }; -// Write <a > into svg paths tags - //1. detect elements to be wrapped - // if element contains fill attribute - // wrap with <a> that may contain onclick = {} - // everywhere their is </path> close with </a> -export const wrapPathsWithLinkElementHead=(svgElementString, elementWrapperHead,elementWrapperTail , elementToWrapHead,elementToWrapTail)=>{ - //elementToWrapHead = <path - //elementToWrapTail = </path> - console.log("elementToWrapHead : ", elementToWrapHead); - console.log("elementWrapperHead : ", elementWrapperHead); - console.log("original svg : ", svgElementString) - var newSvgElement = svgElementString.replace(new RegExp(elementToWrapHead, 'g'), elementWrapperHead); - //var iteration = 0 ; - // for(var index = svgElementString.indexOf("<path");index >= 0 ;index = svgElementString.indexOf("<path", index + 1)){ - // var prevIndex = iteration == 0 ? 0 : index ; - // var nextLen = iteration == 0 ? 0 : linkElementHead.length + 2; - // newSvgElement = [newSvgElement.toString().slice(prevIndex, index + nextLen), elementWrapperHead , newSvgElement.toString().slice(index + nextLen, newSvgElement.toString().length) ].join(); - // storePieces.push(newSvgElement); - // iteration += 1 ; - // console.log(" newSvgElement : ", newSvgElement , "index : ", index); - - // } - console.log("newSvgElement :", newSvgElement); - return newSvgElement; +export const wrapElements=(SVG_TAG_NAMES,array,pathArrayLocal,idLengthToGenerate,idOfElements)=>{ + + for (var y in SVG_TAG_NAMES) { + var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); + for (var x of pathArray) { + var element = new XMLSerializer().serializeToString(x).toString().replace("xmlns=\"http://www.w3.org/2000/svg\"",""); + // add + "onclick=\"notify(evt)\"" as a string inside elements + if (!element.includes("id=")) { + var idInserter = "<" + + SVG_TAG_NAMES[y] + + ' id="id_' + + generate_random_id(idLengthToGenerate) + + '"'; + idOfElements.push(idInserter.substring(9)); + element = element.replace( + "<" + SVG_TAG_NAMES[y], + idInserter + ); + } + var elementWrapper = document.createElement("a"); + elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("id", "id-1"); + // elementWrapper.onclick = function() {doSomething();}; // for IE + // elementWrapper.addEventListener ("onClick", function() {doSomething();}, false); + pathArrayLocal.push(x); + elementWrapper.appendChild( + new DOMParser().parseFromString(element, "text/html").body.firstChild + ); + elementWrapper.firstChild.setAttribute('onclick','doSomething(this.id);'); // for FF + array.push(elementWrapper); + } + } } -export const wrapPathsWithLinkElementTail=(svgElementString,elementWrapperTail,elementToWrapTail)=>{ - //elementToWrapHead = <path - //elementToWrapTail = </path> - var newSvgElement = svgElementString.replace(elementToWrapTail, elementWrapperTail); - - return newSvgElement; - +export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsElement,pathArrayState)=>{ + + for (var key in optimisedArray) { + var stringElement = base64.decode( + optimisedArray[key].optimisedSvg + ); + if (wrappedPathsElement.length > 0) { + for ( + var index = 0; + index < wrappedPathsElement.length; + index++ + ) { + var tempWrapedStr = new XMLSerializer() + .serializeToString(wrappedPathsElement[index]) + .toString(); + + var tempToWrapStr = new XMLSerializer() + .serializeToString(pathArrayState[index]) + .toString(); + tempToWrapStr = tempToWrapStr.replace( + 'xmlns="http://www.w3.org/2000/svg"', + "" + ); + if ( + tempToWrapStr.substring(0, 5) == "<path" + ) { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<elli") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<rect") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<circ") { + tempToWrapStr = + tempToWrapStr.substring(0, 7) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<poly") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<line") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<text") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } + + stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr).replace("xmlns=\"http://www.w3.org/1999/xhtml\"",""); + } + } + + listOfFileNames.push( + <div className="display-svg-opt-notopt"> + <div className="original-svg-div" key={key}> + <DisplaySvg + key={key} + svgType="originalSvg" + dataUrl={optimisedArray[key].originalSvg} + width="100px" + height="300px" + /> + </div> + <div className="optimised-svg-div"> + <InlineSVG src={stringElement} /> + </div> + </div> + ); + } +} +function doSomething(elemId){ + const prevColour = document.getElementById(elemId).getAttribute("fill"); + var arrayOfClickedIds = [] + if(arrayOfClickedIds.includes(elemId) ){ + //remove from array + alert("About to pop : " + elemId); + document.getElementById(elemId).setAttribute("fill",prevColour); + }else{ + //push into an array + alert("About to push : " + elemId); + document.getElementById(elemId).setAttribute("fill","brown"); + } } -// Remove <a > from svg paths tags - // 1. <a> to be removed - -// Insert OnClick functionality - // 1. detect position where to place OnClick - diff --git a/src/constants/constants.js b/src/constants/constants.js index feb0e07..07c229c 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -8,4 +8,4 @@ export const SVG_TAG_NAMES= [ "ellipse", "linearGradient", "text" -] \ No newline at end of file +] From f396227f1aa240aea7ae9de0c9dbab04b9024666 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 15 Oct 2019 16:12:31 +0200 Subject: [PATCH 27/71] after changing colour its cant undo --- src/components/displaySvg/finalSvgDisplay.js | 2 +- src/components/functions.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 9c4449f..a95476e 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -33,7 +33,7 @@ class FinalSvgDisplay extends Component { var pathArrayLocal = []; var elementIds = []; wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); - var functionStr = "function doSomething(elemId){ var arrayOfClickedIds = [];const prevColour = document.getElementById(elemId).getAttribute(\"fill\");if(arrayOfClickedIds.includes(elemId) ){alert(\"About to pop : \" + elemId);document.getElementById(elemId).setAttribute(\"fill\",prevColour);}else{ alert(\"About to push : \" + elemId);document.getElementById(elemId).setAttribute(\"fill\",\"brown\");}}" + var functionStr = "function doSomething(elemId,white){ var arrayOfClickedIds = [];if(arrayOfClickedIds.includes(elemId) ){alert(\"About to pop : \" + elemId);document.getElementById(elemId).style.fill = prevColour;}else{ alert(\"About to push : \" + elemId);document.getElementById(elemId).style.fill = \"brown\";;}}" const script = document.createElement('script'); var t = document.createTextNode(functionStr); diff --git a/src/components/functions.js b/src/components/functions.js index b9aef85..542b7b1 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -164,16 +164,17 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle ); } } -function doSomething(elemId){ - const prevColour = document.getElementById(elemId).getAttribute("fill"); +function doSomething(elemId, prevColour){ var arrayOfClickedIds = [] if(arrayOfClickedIds.includes(elemId) ){ //remove from array alert("About to pop : " + elemId); - document.getElementById(elemId).setAttribute("fill",prevColour); + document.getElementById(elemId).setAttribute("fill",prevColour);//.style.width='330px'; + document.getElementById(elemId).style.fill = prevColour ; }else{ //push into an array alert("About to push : " + elemId); - document.getElementById(elemId).setAttribute("fill","brown"); + document.getElementById(elemId).setAttribute("fill","brown"); //.style.width='330px'; + document.getElementById(elemId).style.fill = "brown"; } } From c6d6b39de5760df0f742ba00dfaf83b487a6c0e9 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 17 Oct 2019 17:52:02 +0200 Subject: [PATCH 28/71] does edit svg and downloads them into your own directory --- package.json | 4 ++ .../checkBoxSelection/checkBoxSelection.scss | 20 +++++- src/components/displayAllComponent.js | 4 +- src/components/displaySvg/finalSvgDisplay.js | 64 ++++++++++++++++-- .../displaySvg/finalSvgDisplay.scss | 17 ++--- src/components/functions.js | 22 ++++-- src/image/downloadbutton.png | Bin 0 -> 7157 bytes 7 files changed, 102 insertions(+), 29 deletions(-) create mode 100644 src/image/downloadbutton.png diff --git a/package.json b/package.json index 5ba8e7a..7ee430b 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,10 @@ "dependencies": { "axios": "0.19.0", "base-64": "^0.1.0", + "file-system": "2.2.2", + "fs": "0.0.1-security", + "fs2": "^0.3.6", + "js": "^0.1.0", "node-sass": "4.12.0", "prop-types": "15.7.2", "react": "16.9.0", diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 864d3f9..7171259 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -57,8 +57,11 @@ width: 319px; display: flex; } -.optimizeButton{ - display: flex; +.optimize-Button{ + margin-top: 12%; + margin-top: 19%; +text-align: center; +display: inline-block; justify-items: center; width:100px; height: 70px; @@ -67,9 +70,22 @@ align-items: center; } +.download-Button{ + margin-top: 12%; + margin-top: 19%; +text-align: center; +display: inline-block; + justify-items: center; + width:100px; + height: 70px; + border-radius: 35px; + background-color: #b6e1b5; + align-items: center; +} .optimise-button-div{ display: flex; justify-content: center; + } diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index f50ee82..2312c30 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -48,9 +48,9 @@ class DisplayAllComponent extends Component { <SvgSettingOptions /> <div className="optimise-button-div"> <NavLink to="/FinalSvgDisplay"> - <div className="optimizeButton" onClick={this.getOptimizeSvg}> + <button className="optimize-Button" onClick={this.getOptimizeSvg}> Optimize - </div> + </button> </NavLink> </div> </div> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index a95476e..2ba74aa 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -28,15 +28,65 @@ class FinalSvgDisplay extends Component { console.log("my function"); }; + downloadNewSvgFiles = () => { + + var svgList = document.getElementsByTagName("svg"); + + //get svg source. + var serializer = new XMLSerializer(); + console.log("len : ",svgList.length); + for(var svgDataIndex in svgList){ + //get svg source. + var source = serializer.serializeToString(svgList[svgDataIndex]); + source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"doSomething(this.id);\"",""); + + //add name spaces. + if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns="http://www.w3.org/2000/svg"' + ); + + } + if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' + ); + } + + //add xml declaration + source = '<?xml version="1.0" standalone="no"?>\r\n' + source; + + //convert svg source to URI data scheme. + var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); + console.log("svgDataIndex :",svgDataIndex); + console.log("url :",url); + //set url value to a element's href attribute. + var dl = document.createElement("a"); + document.body.appendChild(dl); // This line makes it work in Firefox. + dl.setAttribute("href", url); + dl.setAttribute("download", "test.svg"); + dl.click(); + + if(svgList.length-1 == svgDataIndex){ + break; + } + } + + }; + componentDidMount = () => { var array = []; var pathArrayLocal = []; var elementIds = []; wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); - var functionStr = "function doSomething(elemId,white){ var arrayOfClickedIds = [];if(arrayOfClickedIds.includes(elemId) ){alert(\"About to pop : \" + elemId);document.getElementById(elemId).style.fill = prevColour;}else{ alert(\"About to push : \" + elemId);document.getElementById(elemId).style.fill = \"brown\";;}}" + var functionStr = + 'function doSomething(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; - const script = document.createElement('script'); + const script = document.createElement("script"); var t = document.createTextNode(functionStr); + script.setAttribute("class", "fucntionality-script"); script.appendChild(t); document.body.appendChild(script); @@ -47,9 +97,6 @@ class FinalSvgDisplay extends Component { }); }; - handleNvEnter = (event) => { - console.log("Nv Enter:", event); - } render() { const listOfFileNames = []; updateSvgElements( @@ -64,6 +111,13 @@ class FinalSvgDisplay extends Component { {listOfFileNames.length > 0 ? ( <div> <div className="display-page-div">{listOfFileNames}</div> + <button + className="download-Button" + onClick={this.downloadNewSvgFiles} + > + {" "} + Download edited svg + </button> </div> ) : ( <div>No svg to display</div> diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index a86845a..50a2b5b 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -19,17 +19,8 @@ } - - - - - .optimised-svg-div-true{ - background-color: #FFC0CB; + svg{ + margin-top: 94%; + padding-left: 22%; } - - .original-svg-div , .optimised-svg-div{ - float: left; - box-sizing: border-box; - width: 50%; - height: 50%; - } \ No newline at end of file + diff --git a/src/components/functions.js b/src/components/functions.js index 542b7b1..616097b 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -159,6 +159,7 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle </div> <div className="optimised-svg-div"> <InlineSVG src={stringElement} /> + </div> </div> ); @@ -166,15 +167,22 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle } function doSomething(elemId, prevColour){ var arrayOfClickedIds = [] - if(arrayOfClickedIds.includes(elemId) ){ - //remove from array - alert("About to pop : " + elemId); - document.getElementById(elemId).setAttribute("fill",prevColour);//.style.width='330px'; - document.getElementById(elemId).style.fill = prevColour ; - }else{ - //push into an array + var i = 0 ; + if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0){ + //push into an array alert("About to push : " + elemId); + arrayOfClickedIds.push(elemId); document.getElementById(elemId).setAttribute("fill","brown"); //.style.width='330px'; document.getElementById(elemId).style.fill = "brown"; + + }else{ + + + //remove from array + alert("About to pop : " + elemId); + arrayOfClickedIds.pop(elemId); + document.getElementById(elemId).removeAttribute("style"); + document.getElementById(elemId).setAttribute("fill",prevColour);//.style.width='330px'; } } + diff --git a/src/image/downloadbutton.png b/src/image/downloadbutton.png new file mode 100644 index 0000000000000000000000000000000000000000..367d2c02d1fec16c595a4c1884ec3b1e171421dc GIT binary patch literal 7157 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 literal 0 HcmV?d00001 From 95b8af5f1fc90caa50bbc9a4a6414c4ca3ebb1b4 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 21 Oct 2019 17:24:06 +0200 Subject: [PATCH 29/71] displaying and style improved --- package.json | 13 +-- src/components/NavBar/NavBar.scss | 2 +- .../checkBoxSelection/checkBoxSelection.scss | 14 +-- src/components/displayAllComponent.js | 7 +- src/components/displaySvg/displaySvg.js | 102 ++++++++++-------- src/components/displaySvg/finalSvgDisplay.js | 2 +- .../displaySvg/finalSvgDisplay.scss | 18 +++- src/components/functions.js | 10 +- src/index.js | 2 +- 9 files changed, 98 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index 7ee430b..619806b 100644 --- a/package.json +++ b/package.json @@ -4,22 +4,23 @@ "private": true, "dependencies": { "axios": "0.19.0", - "base-64": "^0.1.0", + "base-64": "0.1.0", + "bootstrap": "^4.3.1", "file-system": "2.2.2", "fs": "0.0.1-security", - "fs2": "^0.3.6", - "js": "^0.1.0", + "fs2": "0.3.6", "node-sass": "4.12.0", "prop-types": "15.7.2", - "react": "16.9.0", - "react-dom": "16.9.0", + "react": "^16.9.0", + "react-dom": "^16.9.0", "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", + "reactstrap": "^8.1.1", "redux": "4.0.4", "simple-svg-icons": "2.0.2", "simple-svg-tools": "1.1.12", - "svg-inline-react": "^3.2.0" + "svg-inline-react": "3.2.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 0fe6412..9b2fe0a 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -1,6 +1,6 @@ .navbar{ display: flex; - height: 30px; + height: 60px; background-color: #bcda12; align-items: center; diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 7171259..9885925 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -30,6 +30,7 @@ } .card-settings { height: 350px; + margin-left: 159px; overflow-y: scroll; background-color:#b5cfe1 ; width: 600px; @@ -70,17 +71,18 @@ display: inline-block; align-items: center; } -.download-Button{ - margin-top: 12%; - margin-top: 19%; -text-align: center; -display: inline-block; +.download-Button { + text-align: center; + display: inline-grid; justify-items: center; - width:100px; + width: 100px; height: 70px; border-radius: 35px; background-color: #b6e1b5; align-items: center; + margin-left: 50%; + position: fixed; + margin-top: 11px; } .optimise-button-div{ display: flex; diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 2312c30..fc99bb7 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -11,7 +11,7 @@ import { UPDATE_VARIABLE, DELETE_VARIABLE } from "../store/actionTypes"; - +import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay"; class DisplayAllComponent extends Component { getOptimizeSvg = async () => { for (var option of this.props.reduxState.svgOptions) { @@ -44,7 +44,7 @@ class DisplayAllComponent extends Component { <div className="choose"> <ChooseFolder /> </div> - <div className="choose"> + <div > <SvgSettingOptions /> <div className="optimise-button-div"> <NavLink to="/FinalSvgDisplay"> @@ -55,6 +55,9 @@ class DisplayAllComponent extends Component { </div> </div> </div> + <div className="display-svg-edit-download"> + + </div> </div> ); } diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index c81cbd0..b476336 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -1,57 +1,69 @@ -import React, { Component } from 'react'; -import base64 from 'base-64'; +import React, { Component } from "react"; +import base64 from "base-64"; import "./finalSvgDisplay.scss"; -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; +import InlineSVG from "svg-inline-react"; +import { Col, Row, Container } from "reactstrap"; class DisplaySvg extends Component { - constructor(props) { - super(props); - this.state = { - fileSize: 0, - isClicked: false - }; - } - - changeColourOnclickToMark=()=>{ - this.setState({isClicked: !this.state.isClicked}); - } - - componentWillMount = () => { - if (this.props.dataUrl) { - this.setState({ - fileSize: this.dataURLtoKilloBytes(this.props.dataUrl.split(',')[1]) - }); - } + constructor(props) { + super(props); + this.state = { + fileSize: 0, + isClicked: false }; + } - dataURLtoKilloBytes = dataURI => { - return base64.decode(dataURI).length / 1000; - }; + changeColourOnclickToMark = () => { + this.setState({ isClicked: !this.state.isClicked }); + }; - render() { - return ( - <div> - <div className={this.props.svgType == "optimisedSvg" ? "optimised-svg-div-"+this.state.isClicked : "original-svg-div"} onClick={this.changeColourOnclickToMark}> - <figure> - <img - id='svg-display-id' - className={this.props.svgType} - src={this.props.dataUrl} - width={this.props.width} - height={this.props.height} - alt='svg to be displayed' - /> - <figcaption>{ 'File Size : '+this.state.fileSize +' KB'}</figcaption> - </figure> - </div> - </div> - ); + componentWillMount = () => { + if (this.props.dataUrl) { + this.setState({ + fileSize: this.dataURLtoKilloBytes(this.props.dataUrl.split(",")[1]) + }); } + }; + + dataURLtoKilloBytes = dataURI => { + return base64.decode(dataURI).length / 1000; + }; + + render() { + return ( + <div> + <div className="display-svgs-border-match"> + <Container> + <Row> + <Col xs="6"> + <figure> + <img + className={this.props.svgType} + src={this.props.dataUrl} + width={this.props.width} + height={this.props.height} + alt="svg to be displayed" + /> + <figcaption> + {"File Size : " + this.state.fileSize + " KB"} + </figcaption> + </figure> + </Col> + <Col xs="6"> + <InlineSVG src={this.props.stringElement} /> + </Col> + </Row> + </Container> + </div> + </div> + ); + } } DisplaySvg.propTypes = { - dataUrl: PropTypes.string, - width: PropTypes.string, - height: PropTypes.string + dataUrl: PropTypes.string, + width: PropTypes.string, + height: PropTypes.string }; export default DisplaySvg; diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 2ba74aa..883b1d4 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -110,7 +110,7 @@ class FinalSvgDisplay extends Component { <div> {listOfFileNames.length > 0 ? ( <div> - <div className="display-page-div">{listOfFileNames}</div> + <div className="display-original-optimised">{listOfFileNames}</div> <button className="download-Button" onClick={this.downloadNewSvgFiles} diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 50a2b5b..beb1447 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -20,7 +20,21 @@ } svg{ - margin-top: 94%; - padding-left: 22%; + max-height: 106px; + max-width: fit-content; + margin-top: 94px; + background-color: white; } + .display-svgs-border-match{ + max-height: 571px; + border: outset; + border-color: green + } + + .display-original-optimised{ + overflow-y: scroll; + max-height: 571px; + border: outset; + border-color: green; + } diff --git a/src/components/functions.js b/src/components/functions.js index 616097b..fc3a9d8 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -147,7 +147,6 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle } listOfFileNames.push( - <div className="display-svg-opt-notopt"> <div className="original-svg-div" key={key}> <DisplaySvg key={key} @@ -155,13 +154,9 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle dataUrl={optimisedArray[key].originalSvg} width="100px" height="300px" + stringElement={stringElement} /> </div> - <div className="optimised-svg-div"> - <InlineSVG src={stringElement} /> - - </div> - </div> ); } } @@ -184,5 +179,4 @@ function doSomething(elemId, prevColour){ document.getElementById(elemId).removeAttribute("style"); document.getElementById(elemId).setAttribute("fill",prevColour);//.style.width='330px'; } -} - +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 3f1f5f9..6d97f11 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; - +import 'bootstrap/dist/css/bootstrap.css'; import './index.scss'; import App from './App'; import * as serviceWorker from './serviceWorker'; From 1aace419dd32ba9e53119b25db33d5379d268758 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 22 Oct 2019 11:52:03 +0200 Subject: [PATCH 30/71] changing of colours is done and slightly styled --- package.json | 8 +- src/components/NavBar/NavBar.js | 48 +-- src/components/NavBar/NavBar.scss | 5 + .../checkBoxSelection/checkBoxSelection.scss | 8 +- src/components/displayAllComponent.js | 10 +- src/components/displaySvg/displaySvg.js | 61 ++-- src/components/displaySvg/finalSvgDisplay.js | 92 +++--- .../displaySvg/finalSvgDisplay.scss | 21 +- src/components/functions.js | 312 +++++++++--------- src/index.js | 15 +- src/serviceWorker.js | 30 +- 11 files changed, 301 insertions(+), 309 deletions(-) diff --git a/package.json b/package.json index 619806b..53f053d 100644 --- a/package.json +++ b/package.json @@ -5,18 +5,18 @@ "dependencies": { "axios": "0.19.0", "base-64": "0.1.0", - "bootstrap": "^4.3.1", + "bootstrap": "4.3.1", "file-system": "2.2.2", "fs": "0.0.1-security", "fs2": "0.3.6", "node-sass": "4.12.0", "prop-types": "15.7.2", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "react": "16.9.0", + "react-dom": "16.9.0", "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", - "reactstrap": "^8.1.1", + "reactstrap": "8.1.1", "redux": "4.0.4", "simple-svg-icons": "2.0.2", "simple-svg-tools": "1.1.12", diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js index 9815f01..0d21fec 100644 --- a/src/components/NavBar/NavBar.js +++ b/src/components/NavBar/NavBar.js @@ -1,28 +1,28 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; -import './NavBar.scss'; +import "./NavBar.scss"; export default class NavBar extends Component { - render() { - return ( - <div className={'navbar'}> - <Link to='/'> - <div>{'Home'}</div> - </Link> - <div>{' | '}</div> - <Link to='/choosefile'> - <div>{'Choose File'}</div> - </Link> - <div>{' | '}</div> - <Link to='/displaySvg'> - <div>{'Display Svg'}</div> - </Link> - <div>{' | '}</div> - <Link to='/reduxdemo'> - <div>{'Redux Demo'}</div> - </Link> - </div> - ); - } + render() { + return ( + <div className={"navbar"}> + <Link to="/"> + <div>{"Home"}</div> + </Link> + <div className="navbar-devider">{" | "}</div> + <Link to="/choosefile"> + <div>{"Choose File"}</div> + </Link> + <div className="navbar-devider">{" | "}</div> + <Link to="/displaySvg"> + <div>{"Display Svg"}</div> + </Link> + <div className="navbar-devider">{" | "}</div> + <Link to="/reduxdemo"> + <div>{"Redux Demo"}</div> + </Link> + </div> + ); + } } diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 9b2fe0a..d392e64 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -12,4 +12,9 @@ a:hover{ background-color: #abc514; } +} + +.navbar-devider{ + font-size: 59px; + margin-top: -30px; } \ No newline at end of file diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 9885925..d4c484d 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -54,15 +54,11 @@ width: 50%; } -.display-svg-opt-notopt{ - width: 319px; - display: flex; -} .optimize-Button{ margin-top: 12%; margin-top: 19%; -text-align: center; -display: inline-block; + text-align: center; + display: inline-block; justify-items: center; width:100px; height: 70px; diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index fc99bb7..ac25980 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -44,20 +44,20 @@ class DisplayAllComponent extends Component { <div className="choose"> <ChooseFolder /> </div> - <div > + <div> <SvgSettingOptions /> <div className="optimise-button-div"> <NavLink to="/FinalSvgDisplay"> - <button className="optimize-Button" onClick={this.getOptimizeSvg}> + <button + className="optimize-Button" + onClick={this.getOptimizeSvg} + > Optimize </button> </NavLink> </div> </div> </div> - <div className="display-svg-edit-download"> - - </div> </div> ); } diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index b476336..826a3cb 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -8,7 +8,8 @@ class DisplaySvg extends Component { constructor(props) { super(props); this.state = { - fileSize: 0, + fileSizeNormal: 0, + fileSizeOptimised: 0, isClicked: false }; } @@ -20,7 +21,10 @@ class DisplaySvg extends Component { componentWillMount = () => { if (this.props.dataUrl) { this.setState({ - fileSize: this.dataURLtoKilloBytes(this.props.dataUrl.split(",")[1]) + fileSizeNormal: this.dataURLtoKilloBytes( + this.props.dataUrl.split(",")[1] + ), + fileSizeOptimised: this.props.stringElement.length / 1000 }); } }; @@ -32,28 +36,37 @@ class DisplaySvg extends Component { render() { return ( <div> - <div className="display-svgs-border-match"> - <Container> - <Row> - <Col xs="6"> - <figure> - <img - className={this.props.svgType} - src={this.props.dataUrl} - width={this.props.width} - height={this.props.height} - alt="svg to be displayed" - /> - <figcaption> - {"File Size : " + this.state.fileSize + " KB"} - </figcaption> - </figure> - </Col> - <Col xs="6"> - <InlineSVG src={this.props.stringElement} /> - </Col> - </Row> - </Container> + <div className="display-svgs-border-match"> + <Container> + <Row> + <Col xs="6"> + <figure> + <img + className={this.props.svgType} + src={this.props.dataUrl} + width={this.props.width} + height={this.props.height} + alt="svg to be displayed" + /> + <figcaption> + {"File Size : " + this.state.fileSizeNormal + " KB"} + </figcaption> + </figure> + </Col> + <Col xs="6"> + <InlineSVG src={this.props.stringElement} /> + <br /> + <br /> + <br /> + <br /> + <br /> + <br /> + <div> + {"File Size : " + this.state.fileSizeOptimised + " KB"} + </div> + </Col> + </Row> + </Container> </div> </div> ); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 883b1d4..a609c35 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -24,56 +24,54 @@ class FinalSvgDisplay extends Component { }; } - handleClick = () => { - console.log("my function"); - }; - downloadNewSvgFiles = () => { - var svgList = document.getElementsByTagName("svg"); //get svg source. var serializer = new XMLSerializer(); - console.log("len : ",svgList.length); - for(var svgDataIndex in svgList){ - //get svg source. - var source = serializer.serializeToString(svgList[svgDataIndex]); - source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"doSomething(this.id);\"",""); - - //add name spaces. - if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { - source = source.replace( - /^<svg/, - '<svg xmlns="http://www.w3.org/2000/svg"' - ); - - } - if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { - source = source.replace( - /^<svg/, - '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' - ); - } + for (var svgDataIndex in svgList) { + //get svg source. + var source = serializer.serializeToString(svgList[svgDataIndex]); + source = source + .replace('<a class="className-1" id="id-1">', "") + .replace("</a>", "") + .replace('onclick="doSomething(this.id);"', ""); + + //add name spaces. + if ( + !source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) + ) { + source = source.replace( + /^<svg/, + '<svg xmlns="http://www.w3.org/2000/svg"' + ); + } + if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' + ); + } + + //add xml declaration + source = '<?xml version="1.0" standalone="no"?>\r\n' + source; + + //convert svg source to URI data scheme. + var url = + "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); - //add xml declaration - source = '<?xml version="1.0" standalone="no"?>\r\n' + source; - - //convert svg source to URI data scheme. - var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); - console.log("svgDataIndex :",svgDataIndex); - console.log("url :",url); - //set url value to a element's href attribute. - var dl = document.createElement("a"); - document.body.appendChild(dl); // This line makes it work in Firefox. - dl.setAttribute("href", url); - dl.setAttribute("download", "test.svg"); - dl.click(); - - if(svgList.length-1 == svgDataIndex){ + //set url value to a element's href attribute. + var linkElementToHover = document.createElement("a"); + document.body.appendChild(linkElementToHover); // This line makes it work in Firefox. + linkElementToHover.setAttribute("href", url); + linkElementToHover.setAttribute("download", "test.svg"); + linkElementToHover.click(); + + if (svgList.length - 1 == svgDataIndex) { + //The loop counts twice the length leading to out of bound error break; } } - }; componentDidMount = () => { @@ -84,11 +82,11 @@ class FinalSvgDisplay extends Component { var functionStr = 'function doSomething(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; - const script = document.createElement("script"); - var t = document.createTextNode(functionStr); - script.setAttribute("class", "fucntionality-script"); - script.appendChild(t); - document.body.appendChild(script); + const scriptTag = document.createElement("script"); + var codeString = document.createTextNode(functionStr); + scriptTag.setAttribute("class", "fucntionality-script"); + scriptTag.appendChild(codeString); + document.body.appendChild(scriptTag); this.setState({ wrappedPathsElement: array, @@ -111,6 +109,7 @@ class FinalSvgDisplay extends Component { {listOfFileNames.length > 0 ? ( <div> <div className="display-original-optimised">{listOfFileNames}</div> + <div className="button-background"> <button className="download-Button" onClick={this.downloadNewSvgFiles} @@ -118,6 +117,7 @@ class FinalSvgDisplay extends Component { {" "} Download edited svg </button> + </div> </div> ) : ( <div>No svg to display</div> diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index beb1447..f3fce4f 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -3,18 +3,10 @@ width: 373px; } - .optimised-svg-div-false{ - :hover{ - background-color:#FFC0CB; - } - } - - .className-1{ :hover{ background-color: yellow; fill:yellow; - } } @@ -26,11 +18,11 @@ background-color: white; } - .display-svgs-border-match{ - max-height: 571px; + .display-svgs-border-match { + max-height: 381px; border: outset; - border-color: green - } + border-color: green; +} .display-original-optimised{ overflow-y: scroll; @@ -38,3 +30,8 @@ border: outset; border-color: green; } + + .button-background{ + background-color: grey; + height: 171px; + } diff --git a/src/components/functions.js b/src/components/functions.js index fc3a9d8..6c8c51b 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -1,182 +1,164 @@ -import axios from 'axios'; +import axios from "axios"; import React from "react"; -import InlineSVG from "svg-inline-react"; import DisplaySvg from "../components/displaySvg/displaySvg"; import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay.scss"; -import {BASE_URL,OPTIMIZE_SVG} from '../constants/constants'; -import { SVG_TAG_NAMES } from "../constants/constants"; +import { BASE_URL, OPTIMIZE_SVG } from "../constants/constants"; import base64 from "base-64"; - - -export const optimizeSvg=(dataUrl,svgo)=>{ - return axios.post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl,svgo }) - .then(res => { - return res.data.urlData; - }) - .catch(err => console.log(err)); +export const optimizeSvg = (dataUrl, svgo) => { + return axios + .post(`${BASE_URL}${OPTIMIZE_SVG}`, { dataUrl, svgo }) + .then(res => { + return res.data.urlData; + }) + .catch(err => console.log(err)); }; - -export const changeObj=(value,svgoObjectPlugins)=>{ - let newSvgoObject = svgoObjectPlugins.filter((option)=>{ - if(option[value] !== null && option[value] !== undefined){ - option[value] = true; - } - return true; - - }); - return newSvgoObject; +export const changeObj = (value, svgoObjectPlugins) => { + let newSvgoObject = svgoObjectPlugins.filter(option => { + if (option[value] !== null && option[value] !== undefined) { + option[value] = true; + } + return true; + }); + return newSvgoObject; }; export const generate_random_id = string_length => { - let random_string = ""; - let random_ascii; - let ascii_low = 65; - let ascii_high = 90; - for (let i = 0; i < string_length; i++) { - random_ascii = Math.floor( - Math.random() * (ascii_high - ascii_low) + ascii_low - ); - random_string += String.fromCharCode(random_ascii); - } - return `id_${random_string}`; - }; - - -export const wrapElements=(SVG_TAG_NAMES,array,pathArrayLocal,idLengthToGenerate,idOfElements)=>{ - - for (var y in SVG_TAG_NAMES) { - var pathArray = document.getElementsByTagName(SVG_TAG_NAMES[y]); - for (var x of pathArray) { - var element = new XMLSerializer().serializeToString(x).toString().replace("xmlns=\"http://www.w3.org/2000/svg\"",""); - // add + "onclick=\"notify(evt)\"" as a string inside elements - if (!element.includes("id=")) { - var idInserter = "<" + - SVG_TAG_NAMES[y] + - ' id="id_' + - generate_random_id(idLengthToGenerate) + - '"'; - idOfElements.push(idInserter.substring(9)); - element = element.replace( - "<" + SVG_TAG_NAMES[y], - idInserter - ); - } - var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class", "className-1"); - elementWrapper.setAttribute("id", "id-1"); - // elementWrapper.onclick = function() {doSomething();}; // for IE - // elementWrapper.addEventListener ("onClick", function() {doSomething();}, false); - pathArrayLocal.push(x); - elementWrapper.appendChild( - new DOMParser().parseFromString(element, "text/html").body.firstChild - ); - elementWrapper.firstChild.setAttribute('onclick','doSomething(this.id);'); // for FF + let random_string = ""; + let random_ascii; + let ascii_low = 65; + let ascii_high = 90; + for (let i = 0; i < string_length; i++) { + random_ascii = Math.floor( + Math.random() * (ascii_high - ascii_low) + ascii_low + ); + random_string += String.fromCharCode(random_ascii); + } + return `id_${random_string}`; +}; - array.push(elementWrapper); - } +export const wrapElements = ( + SVG_TAG_NAMES, + array, + drawingComponetLocal, + idLengthToGenerate, + idOfElements +) => { + for (var svgTagNameIndex in SVG_TAG_NAMES) { + var drawingComponet = document.getElementsByTagName( + SVG_TAG_NAMES[svgTagNameIndex] + ); + for (var drawingComponetIndex of drawingComponet) { + var element = new XMLSerializer() + .serializeToString(drawingComponetIndex) + .toString() + .replace('xmlns="http://www.w3.org/2000/svg"', ""); + if (!element.includes("id=")) { + var idInserter = + "<" + + SVG_TAG_NAMES[svgTagNameIndex] + + ' id="id_' + + generate_random_id(idLengthToGenerate) + + '"'; + idOfElements.push(idInserter.substring(9)); + element = element.replace( + "<" + SVG_TAG_NAMES[svgTagNameIndex], + idInserter + ); } -} + var elementWrapper = document.createElement("a"); + elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("id", "id-1"); + drawingComponetLocal.push(drawingComponetIndex); + elementWrapper.appendChild( + new DOMParser().parseFromString(element, "text/html").body.firstChild + ); + elementWrapper.firstChild.setAttribute( + "onclick", + "doSomething(this.id);" + ); // for FF + + array.push(elementWrapper); + } + } +}; +export const updateSvgElements = ( + listOfFileNames, + optimisedArray, + wrappedPathsElement, + drawingComponetState +) => { + for (var key in optimisedArray) { + var stringElement = base64.decode(optimisedArray[key].optimisedSvg); + if (wrappedPathsElement.length > 0) { + for (var index = 0; index < wrappedPathsElement.length; index++) { + var tempWrapedStr = new XMLSerializer() + .serializeToString(wrappedPathsElement[index]) + .toString(); -export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsElement,pathArrayState)=>{ - - for (var key in optimisedArray) { - var stringElement = base64.decode( - optimisedArray[key].optimisedSvg + var tempToWrapStr = new XMLSerializer() + .serializeToString(drawingComponetState[index]) + .toString(); + tempToWrapStr = tempToWrapStr.replace( + 'xmlns="http://www.w3.org/2000/svg"', + "" ); - if (wrappedPathsElement.length > 0) { - for ( - var index = 0; - index < wrappedPathsElement.length; - index++ - ) { - var tempWrapedStr = new XMLSerializer() - .serializeToString(wrappedPathsElement[index]) - .toString(); - - var tempToWrapStr = new XMLSerializer() - .serializeToString(pathArrayState[index]) - .toString(); - tempToWrapStr = tempToWrapStr.replace( - 'xmlns="http://www.w3.org/2000/svg"', - "" - ); - if ( - tempToWrapStr.substring(0, 5) == "<path" - ) { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<elli") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<rect") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<circ") { - tempToWrapStr = - tempToWrapStr.substring(0, 7) + - " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<poly") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<line") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + - " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<text") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + - " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } - - stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr).replace("xmlns=\"http://www.w3.org/1999/xhtml\"",""); - } + if (tempToWrapStr.substring(0, 5) == "<path") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<elli") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<rect") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<circ") { + tempToWrapStr = + tempToWrapStr.substring(0, 7) + + " " + + tempToWrapStr.substring(8, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<poly") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<line") { + tempToWrapStr = + tempToWrapStr.substring(0, 8) + + " " + + tempToWrapStr.substring(9, tempToWrapStr.length).trim(); + } else if (tempToWrapStr.substring(0, 5) == "<text") { + tempToWrapStr = + tempToWrapStr.substring(0, 5) + + " " + + tempToWrapStr.substring(6, tempToWrapStr.length).trim(); } - - listOfFileNames.push( - <div className="original-svg-div" key={key}> - <DisplaySvg - key={key} - svgType="originalSvg" - dataUrl={optimisedArray[key].originalSvg} - width="100px" - height="300px" - stringElement={stringElement} - /> - </div> - ); + + stringElement = stringElement + .replace(tempToWrapStr, tempWrapedStr) + .replace('xmlns="http://www.w3.org/1999/xhtml"', ""); } -} -function doSomething(elemId, prevColour){ - var arrayOfClickedIds = [] - var i = 0 ; - if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0){ - //push into an array - alert("About to push : " + elemId); - arrayOfClickedIds.push(elemId); - document.getElementById(elemId).setAttribute("fill","brown"); //.style.width='330px'; - document.getElementById(elemId).style.fill = "brown"; - - }else{ - - - //remove from array - alert("About to pop : " + elemId); - arrayOfClickedIds.pop(elemId); - document.getElementById(elemId).removeAttribute("style"); - document.getElementById(elemId).setAttribute("fill",prevColour);//.style.width='330px'; - } -} \ No newline at end of file + } + + listOfFileNames.push( + <div className="original-svg-div" key={key}> + <DisplaySvg + key={key} + svgType="originalSvg" + dataUrl={optimisedArray[key].originalSvg} + width="100px" + height="300px" + stringElement={stringElement} + /> + </div> + ); + } +}; diff --git a/src/index.js b/src/index.js index 6d97f11..4860114 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import 'bootstrap/dist/css/bootstrap.css'; -import './index.scss'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import "bootstrap/dist/css/bootstrap.css"; +import "./index.scss"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; -ReactDOM.render(<App />, document.getElementById('root')); +ReactDOM.render(<App />, document.getElementById("root")); serviceWorker.unregister(); - diff --git a/src/serviceWorker.js b/src/serviceWorker.js index f8c7e50..5ef2083 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -11,9 +11,9 @@ // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + window.location.hostname === "[::1]" || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ @@ -21,7 +21,7 @@ const isLocalhost = Boolean( ); export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { @@ -31,7 +31,7 @@ export function register(config) { return; } - window.addEventListener('load', () => { + window.addEventListener("load", () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { @@ -42,8 +42,8 @@ export function register(config) { // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://bit.ly/CRA-PWA" ); }); } else { @@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) { return; } installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { + if (installingWorker.state === "installed") { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + "New content is available and will be used when all " + + "tabs for this page are closed. See https://bit.ly/CRA-PWA." ); // Execute callback @@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log("Content is cached for offline use."); // Execute callback if (config && config.onSuccess) { @@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) { }; }) .catch(error => { - console.error('Error during service worker registration:', error); + console.error("Error during service worker registration:", error); }); } @@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) { fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); + const contentType = response.headers.get("content-type"); if ( response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) + (contentType != null && contentType.indexOf("javascript") === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + "No internet connection found. App is running in offline mode." ); }); } export function unregister() { - if ('serviceWorker' in navigator) { + if ("serviceWorker" in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); From ce46ff2fde507514a8b362963a4fc5483208cc32 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 22 Oct 2019 17:51:48 +0200 Subject: [PATCH 31/71] styling loader --- src/components/displaySvg/finalSvgDisplay.js | 17 ++++++++---- .../displaySvg/finalSvgDisplay.scss | 26 +++++++++++++++++++ src/components/functions.js | 3 +++ 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index a609c35..2f05c79 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -12,7 +12,7 @@ import { DELETE_VARIABLE } from "../../store/actionTypes"; import { wrapElements, updateSvgElements } from "../functions"; - +import { Col, Row, Container } from "reactstrap"; class FinalSvgDisplay extends Component { constructor(props) { super(props); @@ -74,11 +74,14 @@ class FinalSvgDisplay extends Component { } }; - componentDidMount = () => { + componentWillMount = () => { var array = []; var pathArrayLocal = []; var elementIds = []; - wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); + console.log(" before array len : ", array.length); + let newArray = wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); + + console.log("after array len : ",newArray.length); var functionStr = 'function doSomething(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; @@ -103,7 +106,7 @@ class FinalSvgDisplay extends Component { this.state.wrappedPathsElement, this.state.pathArrayState ); - + console.log("listOfFileNames len ", listOfFileNames.length); return ( <div> {listOfFileNames.length > 0 ? ( @@ -120,7 +123,11 @@ class FinalSvgDisplay extends Component { </div> </div> ) : ( - <div>No svg to display</div> + <div> + <h2 className="loader-text" align="center">Loading svg images .......</h2> + <div className="loader" ></div> + + </div> )} </div> ); diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index f3fce4f..f0af1df 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -35,3 +35,29 @@ background-color: grey; height: 171px; } + + .loader-text{ + margin-top: 210px; + } + + .loader { + border: 16px solid #f3f3f3; + border-radius: -114%; /* to make it round use a positive number*/ + /* border-top: 16px solid #bcda12; */ + width: 197px; + height: 199px; + animation: spin 4s linear infinite; + margin-top: 100px; + margin-left: 856px; + } + + /* Safari */ +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } diff --git a/src/components/functions.js b/src/components/functions.js index 6c8c51b..29cbcb9 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -45,6 +45,7 @@ export const wrapElements = ( idLengthToGenerate, idOfElements ) => { + while(array.length != 0){ for (var svgTagNameIndex in SVG_TAG_NAMES) { var drawingComponet = document.getElementsByTagName( SVG_TAG_NAMES[svgTagNameIndex] @@ -82,6 +83,8 @@ export const wrapElements = ( array.push(elementWrapper); } } +} + return array; }; export const updateSvgElements = ( From 4a291c360831c43a77262c9bffaadae7eca26bda Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 23 Oct 2019 11:54:11 +0200 Subject: [PATCH 32/71] 2019/10/23 - stable state --- src/components/displayAllComponent.js | 2 + src/components/displaySvg/displaySvg.js | 1 - src/components/displaySvg/finalSvgDisplay.js | 111 +++++++++---------- src/components/functions.js | 3 - 4 files changed, 54 insertions(+), 63 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index ac25980..2bbbb21 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -27,6 +27,8 @@ class DisplayAllComponent extends Component { this.props.reduxState.svgObject.plugins ) }); + + } else { this.props.reduxState.displayOptimize.push({ originalSvg: setting.dataurl, diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 826a3cb..f43d6a0 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -60,7 +60,6 @@ class DisplaySvg extends Component { <br /> <br /> <br /> - <br /> <div> {"File Size : " + this.state.fileSizeOptimised + " KB"} </div> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 2f05c79..496d240 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -12,7 +12,7 @@ import { DELETE_VARIABLE } from "../../store/actionTypes"; import { wrapElements, updateSvgElements } from "../functions"; -import { Col, Row, Container } from "reactstrap"; + class FinalSvgDisplay extends Component { constructor(props) { super(props); @@ -24,72 +24,71 @@ class FinalSvgDisplay extends Component { }; } + handleClick = () => { + console.log("my function"); + }; + downloadNewSvgFiles = () => { + var svgList = document.getElementsByTagName("svg"); //get svg source. var serializer = new XMLSerializer(); - for (var svgDataIndex in svgList) { - //get svg source. - var source = serializer.serializeToString(svgList[svgDataIndex]); - source = source - .replace('<a class="className-1" id="id-1">', "") - .replace("</a>", "") - .replace('onclick="doSomething(this.id);"', ""); - - //add name spaces. - if ( - !source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) - ) { - source = source.replace( - /^<svg/, - '<svg xmlns="http://www.w3.org/2000/svg"' - ); - } - if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { - source = source.replace( - /^<svg/, - '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' - ); - } - - //add xml declaration - source = '<?xml version="1.0" standalone="no"?>\r\n' + source; - - //convert svg source to URI data scheme. - var url = - "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); - - //set url value to a element's href attribute. - var linkElementToHover = document.createElement("a"); - document.body.appendChild(linkElementToHover); // This line makes it work in Firefox. - linkElementToHover.setAttribute("href", url); - linkElementToHover.setAttribute("download", "test.svg"); - linkElementToHover.click(); + console.log("len : ",svgList.length); + for(var svgDataIndex in svgList){ + //get svg source. + var source = serializer.serializeToString(svgList[svgDataIndex]); + source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"doSomething(this.id);\"",""); + + //add name spaces. + if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns="http://www.w3.org/2000/svg"' + ); + + } + if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' + ); + } - if (svgList.length - 1 == svgDataIndex) { - //The loop counts twice the length leading to out of bound error + //add xml declaration + source = '<?xml version="1.0" standalone="no"?>\r\n' + source; + + //convert svg source to URI data scheme. + var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); + console.log("svgDataIndex :",svgDataIndex); + console.log("url :",url); + //set url value to a element's href attribute. + var dl = document.createElement("a"); + document.body.appendChild(dl); // This line makes it work in Firefox. + dl.setAttribute("href", url); + dl.setAttribute("download", "test.svg"); + dl.click(); + + if(svgList.length-1 == svgDataIndex){ break; } } + }; - componentWillMount = () => { + componentDidMount = () => { var array = []; var pathArrayLocal = []; var elementIds = []; - console.log(" before array len : ", array.length); - let newArray = wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); - - console.log("after array len : ",newArray.length); + wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); var functionStr = 'function doSomething(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; - const scriptTag = document.createElement("script"); - var codeString = document.createTextNode(functionStr); - scriptTag.setAttribute("class", "fucntionality-script"); - scriptTag.appendChild(codeString); - document.body.appendChild(scriptTag); + const script = document.createElement("script"); + var t = document.createTextNode(functionStr); + script.setAttribute("class", "fucntionality-script"); + script.appendChild(t); + document.body.appendChild(script); this.setState({ wrappedPathsElement: array, @@ -106,13 +105,12 @@ class FinalSvgDisplay extends Component { this.state.wrappedPathsElement, this.state.pathArrayState ); - console.log("listOfFileNames len ", listOfFileNames.length); + return ( <div> {listOfFileNames.length > 0 ? ( <div> <div className="display-original-optimised">{listOfFileNames}</div> - <div className="button-background"> <button className="download-Button" onClick={this.downloadNewSvgFiles} @@ -120,14 +118,9 @@ class FinalSvgDisplay extends Component { {" "} Download edited svg </button> - </div> </div> ) : ( - <div> - <h2 className="loader-text" align="center">Loading svg images .......</h2> - <div className="loader" ></div> - - </div> + <div>No svg to display</div> )} </div> ); @@ -169,4 +162,4 @@ const mapDispatchToProps = dispatch => { export default connect( mapStateToProps, mapDispatchToProps -)(FinalSvgDisplay); +)(FinalSvgDisplay); \ No newline at end of file diff --git a/src/components/functions.js b/src/components/functions.js index 29cbcb9..6c8c51b 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -45,7 +45,6 @@ export const wrapElements = ( idLengthToGenerate, idOfElements ) => { - while(array.length != 0){ for (var svgTagNameIndex in SVG_TAG_NAMES) { var drawingComponet = document.getElementsByTagName( SVG_TAG_NAMES[svgTagNameIndex] @@ -83,8 +82,6 @@ export const wrapElements = ( array.push(elementWrapper); } } -} - return array; }; export const updateSvgElements = ( From c658dd9d9801336eac57f7b2929dee7ab5bcb6dc Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 31 Oct 2019 23:26:28 +0200 Subject: [PATCH 33/71] optimised svg display refresh --- src/components/chooseFolder/chooseFolder.js | 3 +- src/components/displayAllComponent.js | 48 +++++++++++++++---- src/components/displaySvg/finalSvgDisplay.js | 17 +++---- .../displaySvg/finalSvgDisplay.scss | 2 +- src/components/functions.js | 26 ++++++++-- src/constants/constants.js | 1 + 6 files changed, 70 insertions(+), 27 deletions(-) diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index c5f545e..1868344 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -36,8 +36,7 @@ class ChooseFolder extends Component { const listOfFileNames = []; for(var key of this.state.path) { listOfFileNames.push(<CheckBoxSelection key={key.name} filename={key.name} file={key} />); - } - + } return ( <div className='main'> <div className='file'> diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 2bbbb21..87306aa 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -3,7 +3,11 @@ import ChooseFolder from "./chooseFolder/chooseFolder"; import { NavLink } from "react-router-dom"; import SvgSettingOptions from "./svgSetting/svgSettingOptions"; import "../components/checkBoxSelection/checkBoxSelection.scss"; -import { changeObj, optimizeSvg } from "../../src/components/functions"; +import { + changeObj, + optimizeSvg, + optimizeSvgList +} from "../../src/components/functions"; import { connect } from "react-redux"; import PropTypes from "prop-types"; import { @@ -13,27 +17,52 @@ import { } from "../store/actionTypes"; import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay"; class DisplayAllComponent extends Component { + constructor(props) { + super(props); + this.state = { + optimisedSvg: [], + optimisedSvgDataUrl :{} + }; + } + getOptimizeSvg = async () => { for (var option of this.props.reduxState.svgOptions) { changeObj(option, this.props.reduxState.svgObject.plugins); } - for (var setting of this.props.reduxState.svgSettingList) { + var results =await optimizeSvgList( + this.props.reduxState.svgSettingList, + this.props.reduxState.svgOptions, + this.props.reduxState.svgObject.plugins + ).then(res => { + return res; + }).catch(error =>{ + return error ; + }); + + console.log("res 1 : ", results); + for(var i=0 ; i < results.length; i++){ + console.log("setting",results[i]) + this.props.reduxState.displayOptimize.push({ + originalSvg: results[i].dataurl, + name: results[i].name, + optimisedSvg: results[i].OptimsedDataUrl + }); + console.log("before looping x ", x); + for (var setting of x) { + console.log("settings : ",setting); if (this.props.reduxState.svgOptions.length > 0) { + console.log("this.props.reduxState.svgOptions.length > 0 "); this.props.reduxState.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, - optimisedSvg: await optimizeSvg( - setting.dataurl, - this.props.reduxState.svgObject.plugins - ) + optimisedSvg: setting.OptimsedDataUrl }); - - } else { + console.log("this.props.reduxState.svgOptions.length < 0 "); this.props.reduxState.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, - optimisedSvg: await optimizeSvg(setting.dataurl, null) + optimisedSvg: setting.OptimsedDataUrl }); } } @@ -60,6 +89,7 @@ class DisplayAllComponent extends Component { </div> </div> </div> + <div className="display-svg-edit-download"></div> </div> ); } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 496d240..5e5584c 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -24,17 +24,12 @@ class FinalSvgDisplay extends Component { }; } - handleClick = () => { - console.log("my function"); - }; - downloadNewSvgFiles = () => { var svgList = document.getElementsByTagName("svg"); //get svg source. var serializer = new XMLSerializer(); - console.log("len : ",svgList.length); for(var svgDataIndex in svgList){ //get svg source. var source = serializer.serializeToString(svgList[svgDataIndex]); @@ -60,8 +55,6 @@ class FinalSvgDisplay extends Component { //convert svg source to URI data scheme. var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); - console.log("svgDataIndex :",svgDataIndex); - console.log("url :",url); //set url value to a element's href attribute. var dl = document.createElement("a"); document.body.appendChild(dl); // This line makes it work in Firefox. @@ -95,7 +88,7 @@ class FinalSvgDisplay extends Component { pathArrayState: pathArrayLocal, storePathsIds: elementIds }); - }; + } render() { const listOfFileNames = []; @@ -105,10 +98,9 @@ class FinalSvgDisplay extends Component { this.state.wrappedPathsElement, this.state.pathArrayState ); - return ( <div> - {listOfFileNames.length > 0 ? ( + {listOfFileNames.length > 0? ( <div> <div className="display-original-optimised">{listOfFileNames}</div> <button @@ -120,7 +112,10 @@ class FinalSvgDisplay extends Component { </button> </div> ) : ( - <div>No svg to display</div> + <div> + <div className="loader-text" align="center">loading svg .....</div> + <div className="loader"></div> + </div> )} </div> ); diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index f0af1df..1529541 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -41,7 +41,7 @@ } .loader { - border: 16px solid #f3f3f3; + border: 16px solid greenyellow; border-radius: -114%; /* to make it round use a positive number*/ /* border-top: 16px solid #bcda12; */ width: 197px; diff --git a/src/components/functions.js b/src/components/functions.js index 6c8c51b..a18514c 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -2,8 +2,9 @@ import axios from "axios"; import React from "react"; import DisplaySvg from "../components/displaySvg/displaySvg"; import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay.scss"; -import { BASE_URL, OPTIMIZE_SVG } from "../constants/constants"; +import { BASE_URL, OPTIMIZE_SVG, OPTIMIZE_SVG_LIST} from "../constants/constants"; import base64 from "base-64"; +import { async } from "q"; export const optimizeSvg = (dataUrl, svgo) => { return axios @@ -14,6 +15,24 @@ export const optimizeSvg = (dataUrl, svgo) => { .catch(err => console.log(err)); }; +export const optimizeSvgList = async (dataUrlList, svgOptions,plugins) => { + var optimisedSvgArray = [] + // console.log(" started test"); + // console.log("dataUrlList : ", dataUrlList); + // console.log("svgo : ", svgOptions); + for (var option of svgOptions) { + changeObj(option, plugins); + } + dataUrlList.forEach(async element => { + var newOptimsedDataUrl = await optimizeSvg( + element.dataurl, + null + ); + optimisedSvgArray.push({ "name": element.name , "dataUrl":element.dataurl, "OptimsedDataUrl": newOptimsedDataUrl}); + }); + return optimisedSvgArray; +}; + export const changeObj = (value, svgoObjectPlugins) => { let newSvgoObject = svgoObjectPlugins.filter(option => { if (option[value] !== null && option[value] !== undefined) { @@ -77,8 +96,7 @@ export const wrapElements = ( elementWrapper.firstChild.setAttribute( "onclick", "doSomething(this.id);" - ); // for FF - + ); array.push(elementWrapper); } } @@ -147,7 +165,6 @@ export const updateSvgElements = ( .replace('xmlns="http://www.w3.org/1999/xhtml"', ""); } } - listOfFileNames.push( <div className="original-svg-div" key={key}> <DisplaySvg @@ -160,5 +177,6 @@ export const updateSvgElements = ( /> </div> ); + } }; diff --git a/src/constants/constants.js b/src/constants/constants.js index 07c229c..39fb295 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,5 +1,6 @@ export const BASE_URL = 'http://localhost:3500/'; export const OPTIMIZE_SVG= 'optimizeSvg'; +export const OPTIMIZE_SVG_LIST= 'optimizeSvgList'; export const SVG_TAG_NAMES= [ "rect", "path", From ea42fb862f79147dc4ad90528b0314707f14db6a Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 6 Nov 2019 09:30:21 +0200 Subject: [PATCH 34/71] com --- src/components/displayAllComponent.js | 104 +++++++++++++++--------- src/components/displaySvg/displaySvg.js | 1 + src/components/functions.js | 37 +++++---- 3 files changed, 91 insertions(+), 51 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 87306aa..6000502 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -16,57 +16,87 @@ import { DELETE_VARIABLE } from "../store/actionTypes"; import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay"; +import { conditionalExpression } from "@babel/types"; class DisplayAllComponent extends Component { constructor(props) { super(props); this.state = { optimisedSvg: [], - optimisedSvgDataUrl :{} + optimisedOriginalSvgList:[] }; } getOptimizeSvg = async () => { - for (var option of this.props.reduxState.svgOptions) { - changeObj(option, this.props.reduxState.svgObject.plugins); - } - var results =await optimizeSvgList( - this.props.reduxState.svgSettingList, - this.props.reduxState.svgOptions, - this.props.reduxState.svgObject.plugins - ).then(res => { - return res; - }).catch(error =>{ - return error ; - }); - - console.log("res 1 : ", results); - for(var i=0 ; i < results.length; i++){ - console.log("setting",results[i]) - this.props.reduxState.displayOptimize.push({ - originalSvg: results[i].dataurl, - name: results[i].name, - optimisedSvg: results[i].OptimsedDataUrl + try { + for (var option of this.props.reduxState.svgOptions) { + changeObj(option, this.props.reduxState.svgObject.plugins); + } + var results = await optimizeSvgList( + this.props.reduxState.svgSettingList, + this.props.reduxState.svgOptions, + this.props.reduxState.svgObject.plugins + ).then(res => { + // this.state.optimisedOriginalSvgList.push(res); + // this.setState({ + // optimisedOriginalSvgList : res + // }) + console.log("new res ", Arrays.toString(res)); + return res; + }).catch(error =>{ + return error ; }); - console.log("before looping x ", x); - for (var setting of x) { - console.log("settings : ",setting); - if (this.props.reduxState.svgOptions.length > 0) { - console.log("this.props.reduxState.svgOptions.length > 0 "); - this.props.reduxState.displayOptimize.push({ - originalSvg: setting.dataurl, - name: setting.name, - optimisedSvg: setting.OptimsedDataUrl - }); - } else { - console.log("this.props.reduxState.svgOptions.length < 0 "); + + + console.log("res : ", results[0]); + console.log("name[0] : ", results[0].name); + console.log("name[0][] : ", results[0][0].name); + console.log("res : ", this.state.optimisedOriginalSvgList); + console.log("results : ",results); + var obj = this.state.optimisedOriginalSvgList + Object.keys(obj).forEach((key)=>{ + console.log(key, obj[key]) + }) + for(var key = 0 ; key < this.state.optimisedOriginalSvgList.length ; key++){ + console.log("setting",this.state.optimisedOriginalSvgList[key]) + if (this.props.reduxState.svgOptions.length > 0) { this.props.reduxState.displayOptimize.push({ - originalSvg: setting.dataurl, - name: setting.name, - optimisedSvg: setting.OptimsedDataUrl + originalSvg: this.state.optimisedOriginalSvgList[key].dataurl, + name: this.state.optimisedOriginalSvgList[key].name, + optimisedSvg: this.state.optimisedOriginalSvgList[key].OptimsedDataUrl }); } + else { + console.log("this.state.optimisedOriginalSvgList ", this.state.optimisedOriginalSvgList); + console.log("this.state.[optimisedOriginalSvgList[0] ", this.state.optimisedOriginalSvgList[0]); + console.log("this.state.[optimisedOriginalSvgList[2] ", this.state.optimisedOriginalSvgList[1]); + console.log("this.state type ", Array.isArray(this.state.optimisedOriginalSvgList[0])); + var arr = this.state.optimisedOriginalSvgList[0] + console.log("arr ",arr[0]); + // console.log("Obj :", (this.state.optimisedOriginalSvgList[0]),"\n"+ key); + + // this.state.optimisedOriginalSvgList.forEach(item => {item.forEach((k, v) => { console.log(k + ": " + v)}); + // this.state.optimisedOriginalSvgList.map((item, key) => + // item.map((lst, key) => + + // )); + // this.state.optimisedOriginalSvgList.forEach(element => { + // console.log(element,"mpilo"); + // console.log(this.state.optimisedOriginalSvgList.map.entr,"Other"); + // console.log(element.map.entrySet(),"Zzzz"); + // }); + + this.props.reduxState.displayOptimize.push({ + originalSvg: this.state.optimisedOriginalSvgList[key].dataurl, + name: this.state.optimisedOriginalSvgList[key].name, + optimisedSvg:this.state.optimisedOriginalSvgList[key].dataurl + }); + } + }; + } catch (error) { + console.log(" error ",error.message); } - }; + console.log("exit ", this.props.reduxState.displayOptimize); +} render() { return ( diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index f43d6a0..e0c5c81 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -30,6 +30,7 @@ class DisplaySvg extends Component { }; dataURLtoKilloBytes = dataURI => { + console.log("dataURLtoKilloBytes"); return base64.decode(dataURI).length / 1000; }; diff --git a/src/components/functions.js b/src/components/functions.js index a18514c..b2b521a 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -28,7 +28,7 @@ export const optimizeSvgList = async (dataUrlList, svgOptions,plugins) => { element.dataurl, null ); - optimisedSvgArray.push({ "name": element.name , "dataUrl":element.dataurl, "OptimsedDataUrl": newOptimsedDataUrl}); + optimisedSvgArray.push(newOptimsedDataUrl.toString()); }); return optimisedSvgArray; }; @@ -108,6 +108,7 @@ export const updateSvgElements = ( wrappedPathsElement, drawingComponetState ) => { + try { for (var key in optimisedArray) { var stringElement = base64.decode(optimisedArray[key].optimisedSvg); if (wrappedPathsElement.length > 0) { @@ -165,18 +166,26 @@ export const updateSvgElements = ( .replace('xmlns="http://www.w3.org/1999/xhtml"', ""); } } - listOfFileNames.push( - <div className="original-svg-div" key={key}> - <DisplaySvg - key={key} - svgType="originalSvg" - dataUrl={optimisedArray[key].originalSvg} - width="100px" - height="300px" - stringElement={stringElement} - /> - </div> - ); - + try { + listOfFileNames.push( + <div className="original-svg-div" key={key}> + <DisplaySvg + key={key} + svgType="originalSvg" + dataUrl={optimisedArray[key].originalSvg} + width="100px" + height="300px" + stringElement={stringElement} + /> + </div> + ); + } catch (error) { + console.log("Failed to push to listOfFIleNames"); + console.log("Actual error :",error.message); + } + } + } catch (error) { + console.log(error.message); + } }; From 8e5b296cbf2e5ff25489d42d8e6f3faeccd4b63c Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 6 Nov 2019 10:52:43 +0200 Subject: [PATCH 35/71] recovered functioning app which hovers, changes and download svgs --- src/components/displaySvg/displaySvg.js | 5 +++++ src/components/functions.js | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index c81cbd0..c330539 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -2,6 +2,8 @@ import React, { Component } from 'react'; import base64 from 'base-64'; import "./finalSvgDisplay.scss"; import PropTypes from 'prop-types'; +import InlineSVG from "svg-inline-react"; + class DisplaySvg extends Component { constructor(props) { super(props); @@ -43,6 +45,9 @@ class DisplaySvg extends Component { <figcaption>{ 'File Size : '+this.state.fileSize +' KB'}</figcaption> </figure> </div> + <div> + <InlineSVG src={this.props.stringElement} /> + </div> </div> ); } diff --git a/src/components/functions.js b/src/components/functions.js index 616097b..308b133 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -1,6 +1,5 @@ import axios from 'axios'; import React from "react"; -import InlineSVG from "svg-inline-react"; import DisplaySvg from "../components/displaySvg/displaySvg"; import finalSvgDisplay from "../components/displaySvg/finalSvgDisplay.scss"; import {BASE_URL,OPTIMIZE_SVG} from '../constants/constants'; @@ -145,7 +144,7 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle stringElement = stringElement.replace(tempToWrapStr, tempWrapedStr).replace("xmlns=\"http://www.w3.org/1999/xhtml\"",""); } } - + console.log("As we were about to insert string elem : ", stringElement); listOfFileNames.push( <div className="display-svg-opt-notopt"> <div className="original-svg-div" key={key}> @@ -155,12 +154,13 @@ export const updateSvgElements=(listOfFileNames, optimisedArray, wrappedPathsEle dataUrl={optimisedArray[key].originalSvg} width="100px" height="300px" + stringElement={stringElement} /> </div> - <div className="optimised-svg-div"> + {/* <div className="optimised-svg-div"> <InlineSVG src={stringElement} /> - </div> + </div> */} </div> ); } From 4cd152abedb8b453f67953d29b06ae971f1fe3f1 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 6 Nov 2019 12:19:09 +0200 Subject: [PATCH 36/71] renames and applied ES6 where possible for readability --- src/components/displaySvg/displaySvg.js | 12 +--- src/components/displaySvg/finalSvgDisplay.js | 8 +-- src/components/functions.js | 70 ++++++++++---------- src/constants/constants.js | 2 +- 4 files changed, 43 insertions(+), 49 deletions(-) diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index e0c5c81..fb440f0 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -24,13 +24,12 @@ class DisplaySvg extends Component { fileSizeNormal: this.dataURLtoKilloBytes( this.props.dataUrl.split(",")[1] ), - fileSizeOptimised: this.props.stringElement.length / 1000 + fileSizeOptimised: this.props.finalStringElementWrappedWithLink.length / 1000 }); } }; dataURLtoKilloBytes = dataURI => { - console.log("dataURLtoKilloBytes"); return base64.decode(dataURI).length / 1000; }; @@ -55,13 +54,8 @@ class DisplaySvg extends Component { </figure> </Col> <Col xs="6"> - <InlineSVG src={this.props.stringElement} /> - <br /> - <br /> - <br /> - <br /> - <br /> - <div> + <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> + <div className="optimised-file-size"> {"File Size : " + this.state.fileSizeOptimised + " KB"} </div> </Col> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 5e5584c..4ff8f14 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -26,13 +26,13 @@ class FinalSvgDisplay extends Component { downloadNewSvgFiles = () => { - var svgList = document.getElementsByTagName("svg"); + var svgElementList = document.getElementsByTagName("svg"); //get svg source. var serializer = new XMLSerializer(); - for(var svgDataIndex in svgList){ + for(var svgDataIndex in svgElementList){ //get svg source. - var source = serializer.serializeToString(svgList[svgDataIndex]); + var source = serializer.serializeToString(svgElementList[svgDataIndex]); source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"doSomething(this.id);\"",""); //add name spaces. @@ -62,7 +62,7 @@ class FinalSvgDisplay extends Component { dl.setAttribute("download", "test.svg"); dl.click(); - if(svgList.length-1 == svgDataIndex){ + if(svgElementList.length-1 == svgDataIndex){ break; } } diff --git a/src/components/functions.js b/src/components/functions.js index db9dcf2..3fd5fbf 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -91,59 +91,59 @@ export const updateSvgElements = ( drawingComponetState ) => { for (var key in optimisedArray) { - var stringElement = base64.decode(optimisedArray[key].optimisedSvg); + var finalStringElementWrappedWithLink = base64.decode(optimisedArray[key].optimisedSvg); if (wrappedPathsElement.length > 0) { for (var index = 0; index < wrappedPathsElement.length; index++) { - var tempWrapedStr = new XMLSerializer() + var stringToWithLinkToWrap = new XMLSerializer() .serializeToString(wrappedPathsElement[index]) .toString(); - var tempToWrapStr = new XMLSerializer() + var StringToBeWrappedByLink = new XMLSerializer() .serializeToString(drawingComponetState[index]) .toString(); - tempToWrapStr = tempToWrapStr.replace( + StringToBeWrappedByLink = StringToBeWrappedByLink.replace( 'xmlns="http://www.w3.org/2000/svg"', "" ); - if (tempToWrapStr.substring(0, 5) == "<path") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + + if (StringToBeWrappedByLink.substring(0, 5) == "<path") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 5) + " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<elli") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + + StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<elli") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 8) + " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<rect") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + + StringToBeWrappedByLink.substring(8, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<rect") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 5) + " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<circ") { - tempToWrapStr = - tempToWrapStr.substring(0, 7) + + StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<circ") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 7) + " " + - tempToWrapStr.substring(8, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<poly") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + + StringToBeWrappedByLink.substring(8, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<poly") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 8) + " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<line") { - tempToWrapStr = - tempToWrapStr.substring(0, 8) + + StringToBeWrappedByLink.substring(9, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<line") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 8) + " " + - tempToWrapStr.substring(9, tempToWrapStr.length).trim(); - } else if (tempToWrapStr.substring(0, 5) == "<text") { - tempToWrapStr = - tempToWrapStr.substring(0, 5) + + StringToBeWrappedByLink.substring(9, StringToBeWrappedByLink.length).trim(); + } else if (StringToBeWrappedByLink.substring(0, 5) == "<text") { + StringToBeWrappedByLink = + StringToBeWrappedByLink.substring(0, 5) + " " + - tempToWrapStr.substring(6, tempToWrapStr.length).trim(); + StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); } - stringElement = stringElement - .replace(tempToWrapStr, tempWrapedStr) + finalStringElementWrappedWithLink = finalStringElementWrappedWithLink + .replace(StringToBeWrappedByLink, stringToWithLinkToWrap) .replace('xmlns="http://www.w3.org/1999/xhtml"', ""); } } @@ -156,7 +156,7 @@ export const updateSvgElements = ( dataUrl={optimisedArray[key].originalSvg} width="100px" height="300px" - stringElement={stringElement} + finalStringElementWrappedWithLink={finalStringElementWrappedWithLink} /> </div> ); diff --git a/src/constants/constants.js b/src/constants/constants.js index 39fb295..d507282 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,6 +1,6 @@ export const BASE_URL = 'http://localhost:3500/'; export const OPTIMIZE_SVG= 'optimizeSvg'; -export const OPTIMIZE_SVG_LIST= 'optimizeSvgList'; +export const OPTIMIZE_SVG_LIST= 'optimizesvgElementList'; export const SVG_TAG_NAMES= [ "rect", "path", From f68ff085961ea49ea2c8fd7fd445c639e98cd504 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 08:25:29 +0200 Subject: [PATCH 37/71] renamed a function doSomething to meaningful --- src/components/displayAllComponent.js | 20 +++++++++++++++++--- src/components/displaySvg/finalSvgDisplay.js | 4 ++-- src/components/functions.js | 2 +- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 2312c30..b3fa10e 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import ChooseFolder from "./chooseFolder/chooseFolder"; -import { NavLink } from "react-router-dom"; +import { NavLink,Redirect } from "react-router-dom"; import SvgSettingOptions from "./svgSetting/svgSettingOptions"; import "../components/checkBoxSelection/checkBoxSelection.scss"; import { changeObj, optimizeSvg } from "../../src/components/functions"; @@ -13,6 +13,12 @@ import { } from "../store/actionTypes"; class DisplayAllComponent extends Component { + constructor(props) { + super(props); + this.state = { + redirect : false + }; + } getOptimizeSvg = async () => { for (var option of this.props.reduxState.svgOptions) { changeObj(option, this.props.reduxState.svgObject.plugins); @@ -35,11 +41,21 @@ class DisplayAllComponent extends Component { }); } } + this.setState({ + redirect: true + }) }; + renderRedirect = () => { + if (this.state.redirect) { + return <Redirect to='/FinalSvgDisplay' /> + } + } + render() { return ( <div> + {this.renderRedirect()} <div className="main-class"> <div className="choose"> <ChooseFolder /> @@ -47,11 +63,9 @@ class DisplayAllComponent extends Component { <div className="choose"> <SvgSettingOptions /> <div className="optimise-button-div"> - <NavLink to="/FinalSvgDisplay"> <button className="optimize-Button" onClick={this.getOptimizeSvg}> Optimize </button> - </NavLink> </div> </div> </div> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 4ff8f14..6ee7275 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -33,7 +33,7 @@ class FinalSvgDisplay extends Component { for(var svgDataIndex in svgElementList){ //get svg source. var source = serializer.serializeToString(svgElementList[svgDataIndex]); - source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"doSomething(this.id);\"",""); + source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"changeSvgColourById(this.id);\"",""); //add name spaces. if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { @@ -75,7 +75,7 @@ class FinalSvgDisplay extends Component { var elementIds = []; wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); var functionStr = - 'function doSomething(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; + 'function changeSvgColourById(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; const script = document.createElement("script"); var t = document.createTextNode(functionStr); diff --git a/src/components/functions.js b/src/components/functions.js index 3fd5fbf..ae8d6bc 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -76,7 +76,7 @@ export const wrapElements = ( ); elementWrapper.firstChild.setAttribute( "onclick", - "doSomething(this.id);" + "changeSvgColourById(this.id);" ); // for FF array.push(elementWrapper); From 5d2975abf03dc33fc6f79549e72d1c8e622cb0e5 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 08:36:02 +0200 Subject: [PATCH 38/71] typo divider changed --- src/components/NavBar/NavBar.js | 6 +++--- src/components/NavBar/NavBar.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js index 0d21fec..28dfccb 100644 --- a/src/components/NavBar/NavBar.js +++ b/src/components/NavBar/NavBar.js @@ -10,15 +10,15 @@ export default class NavBar extends Component { <Link to="/"> <div>{"Home"}</div> </Link> - <div className="navbar-devider">{" | "}</div> + <div className="navbar-divider">{" | "}</div> <Link to="/choosefile"> <div>{"Choose File"}</div> </Link> - <div className="navbar-devider">{" | "}</div> + <div className="navbar-divider">{" | "}</div> <Link to="/displaySvg"> <div>{"Display Svg"}</div> </Link> - <div className="navbar-devider">{" | "}</div> + <div className="navbar-divider">{" | "}</div> <Link to="/reduxdemo"> <div>{"Redux Demo"}</div> </Link> diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index d392e64..6f95716 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -14,7 +14,7 @@ } } -.navbar-devider{ +.navbar-divider{ font-size: 59px; margin-top: -30px; } \ No newline at end of file From 66eb1d93e741e4574070390892a2059f937c5352 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 09:12:28 +0200 Subject: [PATCH 39/71] renamed class name into small letters --- src/components/checkBoxSelection/checkBoxSelection.scss | 2 +- src/components/displayAllComponent.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index d4c484d..5d16e66 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -54,7 +54,7 @@ width: 50%; } -.optimize-Button{ +.optimize-button{ margin-top: 12%; margin-top: 19%; text-align: center; diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index b3fa10e..37eca39 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -63,7 +63,7 @@ class DisplayAllComponent extends Component { <div className="choose"> <SvgSettingOptions /> <div className="optimise-button-div"> - <button className="optimize-Button" onClick={this.getOptimizeSvg}> + <button className="optimize-button" onClick={this.getOptimizeSvg}> Optimize </button> </div> From 9b607db0386262356808f5cfe3044e500cb514a9 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 09:15:46 +0200 Subject: [PATCH 40/71] renmoved the outer div which was not neccessary --- src/components/displayAllComponent.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 37eca39..5951a8d 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -54,9 +54,8 @@ class DisplayAllComponent extends Component { render() { return ( - <div> - {this.renderRedirect()} <div className="main-class"> + {this.renderRedirect()} <div className="choose"> <ChooseFolder /> </div> @@ -69,7 +68,6 @@ class DisplayAllComponent extends Component { </div> </div> </div> - </div> ); } } From 9efa0c73f09bd0de6c8fe36c8ed5bc72b6a1c1a5 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 10:42:40 +0200 Subject: [PATCH 41/71] removed -ves in styling, renamed className-1 ,removed file dependencies, used format not this.state.isFound, removed k: PropTypes.string --- package.json | 3 --- src/components/NavBar/NavBar.scss | 5 ++-- src/components/displayAllComponent.js | 23 ------------------- src/components/displaySvg/finalSvgDisplay.js | 2 +- .../displaySvg/finalSvgDisplay.scss | 15 +++++------- src/components/functions.js | 2 +- src/components/svgSetting/svgSetting.js | 3 +-- 7 files changed, 11 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 53f053d..b325f3d 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,6 @@ "axios": "0.19.0", "base-64": "0.1.0", "bootstrap": "4.3.1", - "file-system": "2.2.2", - "fs": "0.0.1-security", - "fs2": "0.3.6", "node-sass": "4.12.0", "prop-types": "15.7.2", "react": "16.9.0", diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss index 6f95716..c4d6013 100644 --- a/src/components/NavBar/NavBar.scss +++ b/src/components/NavBar/NavBar.scss @@ -1,6 +1,6 @@ .navbar{ display: flex; - height: 60px; + height: 105px; background-color: #bcda12; align-items: center; @@ -15,6 +15,5 @@ } .navbar-divider{ - font-size: 59px; - margin-top: -30px; + font-size: 59px; } \ No newline at end of file diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 5951a8d..e7edc9f 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -74,9 +74,6 @@ class DisplayAllComponent extends Component { DisplayAllComponent.propTypes = { reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func }; const mapStateToProps = state => { @@ -84,26 +81,6 @@ const mapStateToProps = state => { return reduxState; }; -const mapDispatchToProps = dispatch => { - return { - addToStore: (variableName, variableValue) => - dispatch({ - type: ADD_VARIABLE, - variableName: variableName, - variableValue: variableValue - }), - updateStore: (variableName, variableValue) => - dispatch({ - type: UPDATE_VARIABLE, - variableName: variableName, - variableValue: variableValue - }), - deleteFromStore: variableName => - dispatch({ type: DELETE_VARIABLE, variableName: variableName }) - }; -}; - export default connect( mapStateToProps, - mapDispatchToProps )(DisplayAllComponent); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 6ee7275..b0864ad 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -33,7 +33,7 @@ class FinalSvgDisplay extends Component { for(var svgDataIndex in svgElementList){ //get svg source. var source = serializer.serializeToString(svgElementList[svgDataIndex]); - source = source.replace("<a class=\"className-1\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"changeSvgColourById(this.id);\"",""); + source = source.replace("<a class=\"svg-elem-wrapper\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"changeSvgColourById(this.id);\"",""); //add name spaces. if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 1529541..5448e06 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -3,13 +3,10 @@ width: 373px; } - .className-1{ - :hover{ - background-color: yellow; - fill:yellow; - } - - } + a:hover { + background-color: yellow; + fill:yellow; + } svg{ max-height: 106px; @@ -42,8 +39,8 @@ .loader { border: 16px solid greenyellow; - border-radius: -114%; /* to make it round use a positive number*/ - /* border-top: 16px solid #bcda12; */ + border-radius: 114%; + border-top: 16px solid #bcda12; width: 197px; height: 199px; animation: spin 4s linear infinite; diff --git a/src/components/functions.js b/src/components/functions.js index ae8d6bc..4d0be04 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -68,7 +68,7 @@ export const wrapElements = ( ); } var elementWrapper = document.createElement("a"); - elementWrapper.setAttribute("class", "className-1"); + elementWrapper.setAttribute("class", "svg-elem-wrapper"); elementWrapper.setAttribute("id", "id-1"); drawingComponetLocal.push(drawingComponetIndex); elementWrapper.appendChild( diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 0cd4551..914fbd0 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -30,7 +30,7 @@ class SvgSetting extends Component { this.state.index = file; } } - if (this.state.isFound === false) { + if (!this.state.isFound) { this.props.reduxState.svgOptions.push(this.props.value); } else { this.props.reduxState.svgOptions.splice(this.state.index, 1); @@ -73,7 +73,6 @@ SvgSetting.propTypes = { updateStore: PropTypes.func, deleteFromStore: PropTypes.func, option: PropTypes.string, - k: PropTypes.string, isSelected: PropTypes.bool }; From 3f52709fa2971a21e28139168869e26fcef98e02 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 11:46:49 +0200 Subject: [PATCH 42/71] renamed home-display-class --- src/components/checkBoxSelection/checkBoxSelection.scss | 2 +- src/components/displayAllComponent.js | 2 +- src/components/svgSetting/svgSetting.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 5d16e66..8b57b56 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -44,7 +44,7 @@ margin-left: 350px; padding-bottom: 800px; } -.main-class { +.home-display-class { display: flex; } .choose { diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index e7edc9f..e92a86b 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -54,7 +54,7 @@ class DisplayAllComponent extends Component { render() { return ( - <div className="main-class"> + <div className="home-display-class"> {this.renderRedirect()} <div className="choose"> <ChooseFolder /> diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 914fbd0..0ba3164 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -58,6 +58,7 @@ class SvgSetting extends Component { }; render() { + console.log("props :", this.props); return ( <div onClick={this.handleDivClick}> <input type="checkbox" checked={this.state.isClicked} /> From 725a44a2479d682a2b584326abe6792b03949f16 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 14:17:50 +0200 Subject: [PATCH 43/71] removed reactstrap from dependencies and imports --- package.json | 1 - src/components/displaySvg/displaySvg.js | 15 ++++++--------- src/components/displaySvg/finalSvgDisplay.js | 1 - src/components/displaySvg/finalSvgDisplay.scss | 9 +++++++++ src/components/svgSetting/svgSetting.js | 2 -- 5 files changed, 15 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index b325f3d..3bf8d49 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "react-redux": "7.1.1", "react-router-dom": "5.0.1", "react-scripts": "3.1.1", - "reactstrap": "8.1.1", "redux": "4.0.4", "simple-svg-icons": "2.0.2", "simple-svg-tools": "1.1.12", diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index fb440f0..f717668 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -3,7 +3,6 @@ import base64 from "base-64"; import "./finalSvgDisplay.scss"; import PropTypes from "prop-types"; import InlineSVG from "svg-inline-react"; -import { Col, Row, Container } from "reactstrap"; class DisplaySvg extends Component { constructor(props) { super(props); @@ -37,9 +36,8 @@ class DisplaySvg extends Component { return ( <div> <div className="display-svgs-border-match"> - <Container> - <Row> - <Col xs="6"> + <ul> + <li> <figure> <img className={this.props.svgType} @@ -52,15 +50,14 @@ class DisplaySvg extends Component { {"File Size : " + this.state.fileSizeNormal + " KB"} </figcaption> </figure> - </Col> - <Col xs="6"> + </li> + <li> <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> <div className="optimised-file-size"> {"File Size : " + this.state.fileSizeOptimised + " KB"} </div> - </Col> - </Row> - </Container> + </li> + </ul> </div> </div> ); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index b0864ad..03fb496 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -4,7 +4,6 @@ import DisplaySvg from "./displaySvg"; import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; import base64 from "base-64"; -import InlineSVG from "svg-inline-react"; import { SVG_TAG_NAMES } from "../../constants/constants"; import { ADD_VARIABLE, diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 5448e06..db1fd87 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -58,3 +58,12 @@ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + + li{ + display: table-cell; + margin: 5px; padding: 10px; + vertical-align: top; + position:relative; + text-align: center; + left: 226% + } diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 0ba3164..b7cd533 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -58,7 +58,6 @@ class SvgSetting extends Component { }; render() { - console.log("props :", this.props); return ( <div onClick={this.handleDivClick}> <input type="checkbox" checked={this.state.isClicked} /> @@ -81,7 +80,6 @@ const mapStateToProps = state => { const reduxState = { reduxState: { ...state } }; return reduxState; }; - const mapDispatchToProps = dispatch => { return { addToStore: (variableName, variableValue) => From 3c456942257531480deb9e322e2c29a0d2c9dfc6 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 14:25:14 +0200 Subject: [PATCH 44/71] removed bootstrap : 4.3.1 --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 3bf8d49..02675d5 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "dependencies": { "axios": "0.19.0", "base-64": "0.1.0", - "bootstrap": "4.3.1", "node-sass": "4.12.0", "prop-types": "15.7.2", "react": "16.9.0", From a1619a6d33a100e31f0dde8905d3ed5853e59ce9 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 14:30:38 +0200 Subject: [PATCH 45/71] removed simple-svg-tools and other dependencies --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 02675d5..61eb6b9 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,6 @@ "react-router-dom": "5.0.1", "react-scripts": "3.1.1", "redux": "4.0.4", - "simple-svg-icons": "2.0.2", - "simple-svg-tools": "1.1.12", "svg-inline-react": "3.2.0" }, "scripts": { From 6c4e0428b39a3188387d69bf125f761ff4c1bc6f Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 15:27:56 +0200 Subject: [PATCH 46/71] redux in displayAllComponent corrected --- src/components/displayAllComponent.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index e92a86b..1e37b8a 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -20,12 +20,12 @@ class DisplayAllComponent extends Component { }; } getOptimizeSvg = async () => { - for (var option of this.props.reduxState.svgOptions) { - changeObj(option, this.props.reduxState.svgObject.plugins); + for (var option of this.props.svgOptions) { + changeObj(option, this.props.svgObject.plugins); } - for (var setting of this.props.reduxState.svgSettingList) { - if (this.props.reduxState.svgOptions.length > 0) { - this.props.reduxState.displayOptimize.push({ + for (var setting of this.props.svgSettingList) { + if (this.props.svgOptions.length > 0) { + this.props.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg( @@ -34,7 +34,7 @@ class DisplayAllComponent extends Component { ) }); } else { - this.props.reduxState.displayOptimize.push({ + this.props.displayOptimize.push({ originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg(setting.dataurl, null) @@ -53,6 +53,7 @@ class DisplayAllComponent extends Component { } render() { + console.log("current props", this.props); return ( <div className="home-display-class"> {this.renderRedirect()} @@ -74,11 +75,19 @@ class DisplayAllComponent extends Component { DisplayAllComponent.propTypes = { reduxState: PropTypes.object, + svgSettingList: PropTypes.object, + svgSettingList : PropTypes.object, + svgOptions: PropTypes.object, + svgObject: PropTypes.object, + displayOptimize: PropTypes.object }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const svgSettingList = state.svgSettingList; + const svgOptions = state.svgOptions; + const svgObject = state.svgObject; + const displayOptimize = state.displayOptimize; + return {svgSettingList,svgOptions,svgObject,displayOptimize}; }; export default connect( From 7960e438bbd8aaa74c60139b67be4bccf31c3f23 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 15:28:58 +0200 Subject: [PATCH 47/71] console.log removed --- src/components/displayAllComponent.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 1e37b8a..ef7202f 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -53,7 +53,6 @@ class DisplayAllComponent extends Component { } render() { - console.log("current props", this.props); return ( <div className="home-display-class"> {this.renderRedirect()} From 2394d5070e0350aa97b9a519178e5ac1856797aa Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 7 Nov 2019 16:08:59 +0200 Subject: [PATCH 48/71] redux issue fixed , only calling what will be used --- .../checkBoxSelection/checkBoxSelection.js | 24 +++++++++------- src/components/displayAllComponent.js | 3 +- src/components/displaySvg/finalSvgDisplay.js | 12 ++++---- src/components/svgSetting/svgSetting.js | 28 +++++++++++-------- 4 files changed, 36 insertions(+), 31 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index b594eaa..56f9ae4 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -19,7 +19,7 @@ class CheckBoxSelection extends Component { convertSvgToDataUrl = file => { let reader = new FileReader(); reader.onload = result => { - this.props.reduxState.svgSettingList.push({ + this.props.svgSettingList.push({ name: file.name, dataurl: result.target.result }); @@ -33,9 +33,9 @@ class CheckBoxSelection extends Component { let isFound = false; let index = 0; this.setState({ isClicked: !this.state.isClicked }); - for (var key in this.props.reduxState.svgSettingList) { + for (var key in this.props.svgSettingList) { if ( - this.props.reduxState.svgSettingList[key].name === this.props.file.name + this.props.svgSettingList[key].name === this.props.file.name ) { isFound = true; index = key; @@ -44,7 +44,7 @@ class CheckBoxSelection extends Component { if (!isFound) { this.convertSvgToDataUrl(this.props.file); } else { - this.props.reduxState.svgSettingList.splice(index, 1); + this.props.svgSettingList.splice(index, 1); isFound = false; } }; @@ -71,16 +71,20 @@ class CheckBoxSelection extends Component { } CheckBoxSelection.propTypes = { - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, + svgSettingList: PropTypes.object, + svgSettingList : PropTypes.object, + svgOptions: PropTypes.object, + svgObject: PropTypes.object, + displayOptimize: PropTypes.object, filename: PropTypes.string }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const svgSettingList = state.svgSettingList; + const svgOptions = state.svgOptions; + const svgObject = state.svgObject; + const displayOptimize = state.displayOptimize; + return {svgSettingList,svgOptions,svgObject,displayOptimize}; }; const mapDispatchToProps = dispatch => { diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index ef7202f..7bcd250 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -30,7 +30,7 @@ class DisplayAllComponent extends Component { name: setting.name, optimisedSvg: await optimizeSvg( setting.dataurl, - this.props.reduxState.svgObject.plugins + this.props.svgObject.plugins ) }); } else { @@ -73,7 +73,6 @@ class DisplayAllComponent extends Component { } DisplayAllComponent.propTypes = { - reduxState: PropTypes.object, svgSettingList: PropTypes.object, svgSettingList : PropTypes.object, svgOptions: PropTypes.object, diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 03fb496..ea8257f 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -90,10 +90,11 @@ class FinalSvgDisplay extends Component { } render() { + console.log("props : ", this.props); const listOfFileNames = []; updateSvgElements( listOfFileNames, - this.props.reduxState.displayOptimize, + this.props.displayOptimize, this.state.wrappedPathsElement, this.state.pathArrayState ); @@ -122,16 +123,13 @@ class FinalSvgDisplay extends Component { } FinalSvgDisplay.propTypes = { - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, + displayOptimize : PropTypes.object, listToDisplay: PropTypes.array }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const displayOptimize = state.displayOptimize; + return {displayOptimize}; }; const mapDispatchToProps = dispatch => { diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index b7cd533..9c78e63 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -24,22 +24,22 @@ class SvgSetting extends Component { this.setState({ isClicked: !this.state.isClicked }); - for (var file in this.props.reduxState.svgOptions) { - if (this.props.reduxState.svgOptions[file] === this.props.value) { + for (var file in this.props.svgOptions) { + if (this.props.svgOptions[file] === this.props.value) { this.state.isFound = true; this.state.index = file; } } if (!this.state.isFound) { - this.props.reduxState.svgOptions.push(this.props.value); + this.props.svgOptions.push(this.props.value); } else { - this.props.reduxState.svgOptions.splice(this.state.index, 1); + this.props.svgOptions.splice(this.state.index, 1); this.state.isFound = false; } }; toChangePluginObjectValues = arrayWithPluginOptions => { - let newSvgoObject = this.props.reduxState.svgObject.plugins.filter( + let newSvgoObject = this.props.svgObject.plugins.filter( option => { for (var element of arrayWithPluginOptions) { if (option[element] !== null && option[element] !== undefined) { @@ -54,7 +54,7 @@ class SvgSetting extends Component { }; changingPluginValuesPerUserOption= () => { - this.changePluginObjectValues(this.props.reduxState.svgOptions); + this.changePluginObjectValues(this.props.svgOptions); }; render() { @@ -68,17 +68,21 @@ class SvgSetting extends Component { } SvgSetting.propTypes = { - reduxState: PropTypes.object, - addToStore: PropTypes.func, - updateStore: PropTypes.func, - deleteFromStore: PropTypes.func, + svgSettingList: PropTypes.object, + svgSettingList : PropTypes.object, + svgOptions: PropTypes.object, + svgObject: PropTypes.object, + displayOptimize: PropTypes.object, option: PropTypes.string, isSelected: PropTypes.bool }; const mapStateToProps = state => { - const reduxState = { reduxState: { ...state } }; - return reduxState; + const svgSettingList = state.svgSettingList; + const svgOptions = state.svgOptions; + const svgObject = state.svgObject; + const displayOptimize = state.displayOptimize; + return {svgSettingList,svgOptions,svgObject,displayOptimize}; }; const mapDispatchToProps = dispatch => { return { From c893cfb36a0d690bbbca9a60b170a212120a83e5 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Fri, 8 Nov 2019 10:53:24 +0200 Subject: [PATCH 49/71] used let, removed some styling --- .../checkBoxSelection/checkBoxSelection.scss | 7 +------ src/components/displayAllComponent.js | 15 ++++++++++----- src/components/displaySvg/displaySvg.js | 10 ++++++---- src/components/displaySvg/finalSvgDisplay.js | 1 - src/components/displaySvg/finalSvgDisplay.scss | 8 ++++---- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 8b57b56..c809824 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -30,20 +30,15 @@ } .card-settings { height: 350px; - margin-left: 159px; overflow-y: scroll; background-color:#b5cfe1 ; width: 600px; - box-shadow: 10px 10px 55px 0px #000000; } .slider { margin-top: 10px; margin-bottom: 10px; } -.opt { - margin-left: 350px; - padding-bottom: 800px; -} + .home-display-class { display: flex; } diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 7bcd250..db1cace 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -20,26 +20,31 @@ class DisplayAllComponent extends Component { }; } getOptimizeSvg = async () => { + let OriginalAndOptimised = {} for (var option of this.props.svgOptions) { changeObj(option, this.props.svgObject.plugins); } for (var setting of this.props.svgSettingList) { if (this.props.svgOptions.length > 0) { - this.props.displayOptimize.push({ + OriginalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg( setting.dataurl, this.props.svgObject.plugins ) - }); + } } else { - this.props.displayOptimize.push({ + OriginalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, - optimisedSvg: await optimizeSvg(setting.dataurl, null) - }); + optimisedSvg: await optimizeSvg( + setting.dataurl, + this.props.svgObject.plugins + ) + } } + this.props.displayOptimize.push(OriginalAndOptimised); } this.setState({ redirect: true diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index f717668..e3b6f85 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -52,10 +52,12 @@ class DisplaySvg extends Component { </figure> </li> <li> - <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> - <div className="optimised-file-size"> - {"File Size : " + this.state.fileSizeOptimised + " KB"} - </div> + <figure> + <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> + <figcaption> + {"File Size : " + this.state.fileSizeOptimised + " KB"} + </figcaption> + </figure> </li> </ul> </div> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index ea8257f..7b95816 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -90,7 +90,6 @@ class FinalSvgDisplay extends Component { } render() { - console.log("props : ", this.props); const listOfFileNames = []; updateSvgElements( listOfFileNames, diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index db1fd87..1a6eb1f 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -38,14 +38,13 @@ } .loader { - border: 16px solid greenyellow; + border: 16px solid greenyellow; border-radius: 114%; border-top: 16px solid #bcda12; width: 197px; height: 199px; animation: spin 4s linear infinite; - margin-top: 100px; - margin-left: 856px; + margin: 0 auto; } /* Safari */ @@ -61,7 +60,8 @@ li{ display: table-cell; - margin: 5px; padding: 10px; + margin: 5px; + padding: 10px; vertical-align: top; position:relative; text-align: center; From c913a1722c9fee87baa09911003c3c81c0267cd8 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Fri, 8 Nov 2019 12:10:26 +0200 Subject: [PATCH 50/71] all margins removed, unused reduced not extracted, used padding instead, export removed --- .../checkBoxSelection/checkBoxSelection.js | 1 - .../checkBoxSelection/checkBoxSelection.scss | 18 ++++++------------ src/components/displaySvg/displaySvg.js | 4 +++- src/components/displaySvg/finalSvgDisplay.js | 7 ++++--- src/components/displaySvg/finalSvgDisplay.scss | 14 ++++++-------- src/components/svgSetting/svgSetting.js | 7 +------ 6 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 56f9ae4..51cd1e4 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -72,7 +72,6 @@ class CheckBoxSelection extends Component { CheckBoxSelection.propTypes = { svgSettingList: PropTypes.object, - svgSettingList : PropTypes.object, svgOptions: PropTypes.object, svgObject: PropTypes.object, displayOptimize: PropTypes.object, diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index c809824..0abac29 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -10,8 +10,7 @@ .checkbox-input-svg, .checkbox-label-svg { - margin-top: 2%; - margin-left: 2%; + padding-left: 3%; } .main { @@ -21,11 +20,10 @@ .file { display: flex; - margin-top: 20px; + padding: 2%; } .hide-file-list { - margin-top: 20px; display: none; } .card-settings { @@ -34,10 +32,6 @@ background-color:#b5cfe1 ; width: 600px; } -.slider { - margin-top: 10px; - margin-bottom: 10px; -} .home-display-class { display: flex; @@ -50,8 +44,6 @@ } .optimize-button{ - margin-top: 12%; - margin-top: 19%; text-align: center; display: inline-block; justify-items: center; @@ -62,6 +54,10 @@ align-items: center; } +// .download-Button{ +// padding-left: 50%; +// padding-top: 3%; +// } .download-Button { text-align: center; display: inline-grid; @@ -71,9 +67,7 @@ border-radius: 35px; background-color: #b6e1b5; align-items: center; - margin-left: 50%; position: fixed; - margin-top: 11px; } .optimise-button-div{ display: flex; diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index e3b6f85..1292ff6 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -35,7 +35,7 @@ class DisplaySvg extends Component { render() { return ( <div> - <div className="display-svgs-border-match"> + <div className="display-svgs-border-match" align="center"> <ul> <li> <figure> @@ -53,7 +53,9 @@ class DisplaySvg extends Component { </li> <li> <figure> + <div className="inline-display-position"> <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> + </div> <figcaption> {"File Size : " + this.state.fileSizeOptimised + " KB"} </figcaption> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 7b95816..2924709 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -102,17 +102,18 @@ class FinalSvgDisplay extends Component { {listOfFileNames.length > 0? ( <div> <div className="display-original-optimised">{listOfFileNames}</div> + <div align="center"> <button className="download-Button" onClick={this.downloadNewSvgFiles} > - {" "} Download edited svg </button> + </div> </div> ) : ( - <div> - <div className="loader-text" align="center">loading svg .....</div> + <div className="position-loader" align="center"> + <div className="loader-text">loading svg .....</div> <div className="loader"></div> </div> )} diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 1a6eb1f..3a14a42 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -8,10 +8,12 @@ fill:yellow; } + .inline-display-position{ + padding-top: 71%; + } svg{ max-height: 106px; max-width: fit-content; - margin-top: 94px; background-color: white; } @@ -32,10 +34,9 @@ background-color: grey; height: 171px; } - - .loader-text{ - margin-top: 210px; - } + .position-loader{ + padding-top: 11%; +} .loader { border: 16px solid greenyellow; @@ -44,7 +45,6 @@ width: 197px; height: 199px; animation: spin 4s linear infinite; - margin: 0 auto; } /* Safari */ @@ -60,10 +60,8 @@ li{ display: table-cell; - margin: 5px; padding: 10px; vertical-align: top; position:relative; text-align: center; - left: 226% } diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 9c78e63..a3a72f7 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -68,21 +68,16 @@ class SvgSetting extends Component { } SvgSetting.propTypes = { - svgSettingList: PropTypes.object, - svgSettingList : PropTypes.object, svgOptions: PropTypes.object, svgObject: PropTypes.object, - displayOptimize: PropTypes.object, option: PropTypes.string, isSelected: PropTypes.bool }; const mapStateToProps = state => { - const svgSettingList = state.svgSettingList; const svgOptions = state.svgOptions; const svgObject = state.svgObject; - const displayOptimize = state.displayOptimize; - return {svgSettingList,svgOptions,svgObject,displayOptimize}; + return {svgOptions,svgObject}; }; const mapDispatchToProps = dispatch => { return { From a07c3867229a87d3e8a46bf8dcc4afb48afa2092 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Fri, 8 Nov 2019 16:25:04 +0200 Subject: [PATCH 51/71] handled the case of nulls, visited all file where I would be possible extracting states that were wont be used --- src/components/checkBoxSelection/checkBoxSelection.js | 8 +------- src/components/displayAllComponent.js | 1 - src/components/displaySvg/displaySvg.js | 9 +++++---- src/components/displaySvg/finalSvgDisplay.js | 1 - src/components/displaySvg/finalSvgDisplay.scss | 4 ++-- src/components/functions.js | 2 +- src/constants/constants.js | 2 ++ 7 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 51cd1e4..12ec34c 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -72,18 +72,12 @@ class CheckBoxSelection extends Component { CheckBoxSelection.propTypes = { svgSettingList: PropTypes.object, - svgOptions: PropTypes.object, - svgObject: PropTypes.object, - displayOptimize: PropTypes.object, filename: PropTypes.string }; const mapStateToProps = state => { const svgSettingList = state.svgSettingList; - const svgOptions = state.svgOptions; - const svgObject = state.svgObject; - const displayOptimize = state.displayOptimize; - return {svgSettingList,svgOptions,svgObject,displayOptimize}; + return {svgSettingList}; }; const mapDispatchToProps = dispatch => { diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index db1cace..75c94ec 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -79,7 +79,6 @@ class DisplayAllComponent extends Component { DisplayAllComponent.propTypes = { svgSettingList: PropTypes.object, - svgSettingList : PropTypes.object, svgOptions: PropTypes.object, svgObject: PropTypes.object, displayOptimize: PropTypes.object diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 1292ff6..01f8397 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -3,6 +3,7 @@ import base64 from "base-64"; import "./finalSvgDisplay.scss"; import PropTypes from "prop-types"; import InlineSVG from "svg-inline-react"; +import {DEFAULT_DATA_URL,DEFAULT_SVG_STRING} from "../../constants/constants"; class DisplaySvg extends Component { constructor(props) { super(props); @@ -41,9 +42,9 @@ class DisplaySvg extends Component { <figure> <img className={this.props.svgType} - src={this.props.dataUrl} - width={this.props.width} - height={this.props.height} + src={this.props.dataUrl ?this.props.dataUrl : DEFAULT_DATA_URL} + width={this.props.width ? this.props.width : "auto"} + height={this.props.height? this.props.height : "auto"} alt="svg to be displayed" /> <figcaption> @@ -54,7 +55,7 @@ class DisplaySvg extends Component { <li> <figure> <div className="inline-display-position"> - <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> + <InlineSVG src={this.props.finalStringElementWrappedWithLink ? this.props.finalStringElementWrappedWithLink : DEFAULT_SVG_STRING } /> </div> <figcaption> {"File Size : " + this.state.fileSizeOptimised + " KB"} diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 2924709..7a37f3b 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -124,7 +124,6 @@ class FinalSvgDisplay extends Component { FinalSvgDisplay.propTypes = { displayOptimize : PropTypes.object, - listToDisplay: PropTypes.array }; const mapStateToProps = state => { diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 3a14a42..7bda142 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -40,8 +40,8 @@ .loader { border: 16px solid greenyellow; - border-radius: 114%; - border-top: 16px solid #bcda12; + border-radius: 56%; + border-top: 16px solid #bcda12; width: 197px; height: 199px; animation: spin 4s linear infinite; diff --git a/src/components/functions.js b/src/components/functions.js index 4d0be04..e73b058 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -24,7 +24,7 @@ export const changeObj = (value, svgoObjectPlugins) => { return newSvgoObject; }; -export const generate_random_id = string_length => { +const generate_random_id = string_length => { let random_string = ""; let random_ascii; let ascii_low = 65; diff --git a/src/constants/constants.js b/src/constants/constants.js index d507282..79a5b87 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,6 +1,8 @@ export const BASE_URL = 'http://localhost:3500/'; export const OPTIMIZE_SVG= 'optimizeSvg'; export const OPTIMIZE_SVG_LIST= 'optimizesvgElementList'; +export const DEFAULT_DATA_URL ='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cmFkaWFsR3JhZGllbnQgaWQ9IklrVWg2ZXk1QmhuQ2h+aHJNczFmZGEiIGN4PSIzMi41IiBjeT0iMzEuNSIgcj0iMzAuNTE2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNhZmVlZmYiLz48c3RvcCBvZmZzZXQ9Ii4xOTMiIHN0b3AtY29sb3I9IiNiYmYxZmYiLz48c3RvcCBvZmZzZXQ9Ii43MDMiIHN0b3AtY29sb3I9IiNkN2Y4ZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlMWZhZmYiLz48L3JhZGlhbEdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjSWtVaDZleTVCaG5DaH5ock1zMWZkYSkiIGQ9Ik01OSwyMGgxLjVjMi4xNjgsMCwzLjg5Mi0xLjk5OCwzLjQyMi00LjI0M0M2My41OCwxNC4xMjIsNjIuMDU2LDEzLDYwLjM4NSwxM0w1MywxMyBjLTEuMTA1LDAtMi0wLjg5NS0yLTJjMC0xLjEwNSwwLjg5NS0yLDItMmgzLjM4NWMxLjY3LDAsMy4xOTUtMS4xMjIsMy41MzctMi43NTdDNjAuMzkyLDMuOTk4LDU4LjY2OCwyLDU2LjUsMkgzNC4wMDZIMzIuNWgtMjQgQzYuNTc1LDIsNSwzLjU3NSw1LDUuNVM2LjU3NSw5LDguNSw5SDEwYzEuMTA1LDAsMiwwLjg5NSwyLDJjMCwxLjEwNS0wLjg5NSwyLTIsMmwtNS4zODUsMGMtMS42NywwLTMuMTk1LDEuMTIyLTMuNTM3LDIuNzU3IEMwLjYwOCwxOC4wMDIsMi4zMzIsMjAsNC41LDIwSDE4djEyTDQuNjE1LDMyYy0xLjY3LDAtMy4xOTUsMS4xMjItMy41MzcsMi43NTdDMC42MDgsMzcuMDAyLDIuMzMyLDM5LDQuNSwzOUg1YzEuMTA1LDAsMiwwLjg5NSwyLDIgYzAsMS4xMDUtMC44OTUsMi0yLDJINC41Yy0yLjE2OCwwLTMuODkyLDEuOTk4LTMuNDIyLDQuMjQzQzEuNDIsNDguODc4LDIuOTQ1LDUwLDQuNjE1LDUwSDEwYzEuMTA1LDAsMiwwLjg5NSwyLDIgYzAsMS4xMDUtMC44OTUsMi0yLDJsLTEuMzg1LDBjLTEuNjcsMC0zLjE5NSwxLjEyMi0zLjUzNywyLjc1N0M0LjYwOCw1OS4wMDIsNi4zMzIsNjEsOC41LDYxaDIyLjQ5NEgzMi41aDIzIGMxLjkyNSwwLDMuNS0xLjU3NSwzLjUtMy41UzU3LjQyNSw1NCw1NS41LDU0SDU1Yy0xLjEwNSwwLTItMC44OTUtMi0yYzAtMS4xMDUsMC44OTUtMiwyLTJoNC4zODVjMS42NywwLDMuMTk1LTEuMTIyLDMuNTM3LTIuNzU3IEM2My4zOTIsNDQuOTk4LDYxLjY2OCw0Myw1OS41LDQzSDQ3VjMxaDEyLjM4NWMxLjY3LDAsMy4xOTUtMS4xMjIsMy41MzctMi43NTdDNjMuMzkyLDI1Ljk5OCw2MS42NjgsMjQsNTkuNSwyNEg1OSBjLTEuMTA1LDAtMi0wLjg5NS0yLTJDNTcsMjAuODk1LDU3Ljg5NSwyMCw1OSwyMHoiLz48bGluZWFyR3JhZGllbnQgaWQ9IklrVWg2ZXk1QmhuQ2h+aHJNczFmZGIiIHgxPSIzMiIgeDI9IjMyIiB5MT0iNTYiIHkyPSI2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZjYzNGQiLz48c3RvcCBvZmZzZXQ9Ii4yMDQiIHN0b3AtY29sb3I9IiNmZTY0NjQiLz48c3RvcCBvZmZzZXQ9Ii41MjEiIHN0b3AtY29sb3I9IiNmYzY1ODEiLz48c3RvcCBvZmZzZXQ9Ii43OTQiIHN0b3AtY29sb3I9IiNmYTY2OTQiLz48c3RvcCBvZmZzZXQ9Ii45ODkiIHN0b3AtY29sb3I9IiNmYTY2OWEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmYTY2OWEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjSWtVaDZleTVCaG5DaH5ock1zMWZkYikiIGQ9Ik01NywzMWMwLDEzLjgwNS0xMS4xOTUsMjUtMjUsMjVTNyw0NC44MDUsNywzMVMxOC4xOTUsNiwzMiw2UzU3LDE3LjE5NSw1NywzMXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDMuMjY4LDE5LjczMkw0My4yNjgsMTkuNzMyYzAuOTc2LDAuOTc2LDAuOTc2LDIuNTU5LDAsMy41MzVMMjQuMjY3LDQyLjI2OCBjLTAuOTc2LDAuOTc2LTIuNTU5LDAuOTc2LTMuNTM1LDBsMCwwYy0wLjk3Ni0wLjk3Ni0wLjk3Ni0yLjU1OSwwLTMuNTM1bDE5LjAwMS0xOS4wMDFDNDAuNzA5LDE4Ljc1Niw0Mi4yOTIsMTguNzU2LDQzLjI2OCwxOS43MzIgeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00My4yNjgsNDIuMjY4TDQzLjI2OCw0Mi4yNjhjLTAuOTc2LDAuOTc2LTIuNTU5LDAuOTc2LTMuNTM1LDBMMjAuNzMyLDIzLjI2NyBjLTAuOTc2LTAuOTc2LTAuOTc2LTIuNTU5LDAtMy41MzVsMCwwYzAuOTc2LTAuOTc2LDIuNTU5LTAuOTc2LDMuNTM1LDBsMTkuMDAxLDE5LjAwMUM0NC4yNDQsMzkuNzA5LDQ0LjI0NCw0MS4yOTIsNDMuMjY4LDQyLjI2OHoiLz48L3N2Zz4='; +export const DEFAULT_SVG_STRING = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><radialGradient id="IkUh6ey5BhnCh~hrMs1fda" cx="32.5" cy="31.5" r="30.516" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#afeeff"/><stop offset=".193" stop-color="#bbf1ff"/><stop offset=".703" stop-color="#d7f8ff"/><stop offset="1" stop-color="#e1faff"/></radialGradient><path fill="url(#IkUh6ey5BhnCh~hrMs1fda)" d="M59,20h1.5c2.168,0,3.892-1.998,3.422-4.243C63.58,14.122,62.056,13,60.385,13L53,13 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h3.385c1.67,0,3.195-1.122,3.537-2.757C60.392,3.998,58.668,2,56.5,2H34.006H32.5h-24 C6.575,2,5,3.575,5,5.5S6.575,9,8.5,9H10c1.105,0,2,0.895,2,2c0,1.105-0.895,2-2,2l-5.385,0c-1.67,0-3.195,1.122-3.537,2.757 C0.608,18.002,2.332,20,4.5,20H18v12L4.615,32c-1.67,0-3.195,1.122-3.537,2.757C0.608,37.002,2.332,39,4.5,39H5c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2H4.5c-2.168,0-3.892,1.998-3.422,4.243C1.42,48.878,2.945,50,4.615,50H10c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2l-1.385,0c-1.67,0-3.195,1.122-3.537,2.757C4.608,59.002,6.332,61,8.5,61h22.494H32.5h23 c1.925,0,3.5-1.575,3.5-3.5S57.425,54,55.5,54H55c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h4.385c1.67,0,3.195-1.122,3.537-2.757 C63.392,44.998,61.668,43,59.5,43H47V31h12.385c1.67,0,3.195-1.122,3.537-2.757C63.392,25.998,61.668,24,59.5,24H59 c-1.105,0-2-0.895-2-2C57,20.895,57.895,20,59,20z"/><linearGradient id="IkUh6ey5BhnCh~hrMs1fdb" x1="32" x2="32" y1="56" y2="6" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#ff634d"/><stop offset=".204" stop-color="#fe6464"/><stop offset=".521" stop-color="#fc6581"/><stop offset=".794" stop-color="#fa6694"/><stop offset=".989" stop-color="#fa669a"/><stop offset="1" stop-color="#fa669a"/></linearGradient><path fill="url(#IkUh6ey5BhnCh~hrMs1fdb)" d="M57,31c0,13.805-11.195,25-25,25S7,44.805,7,31S18.195,6,32,6S57,17.195,57,31z"/><path fill="#fff" d="M43.268,19.732L43.268,19.732c0.976,0.976,0.976,2.559,0,3.535L24.267,42.268 c-0.976,0.976-2.559,0.976-3.535,0l0,0c-0.976-0.976-0.976-2.559,0-3.535l19.001-19.001C40.709,18.756,42.292,18.756,43.268,19.732 z"/><path fill="#fff" d="M43.268,42.268L43.268,42.268c-0.976,0.976-2.559,0.976-3.535,0L20.732,23.267 c-0.976-0.976-0.976-2.559,0-3.535l0,0c0.976-0.976,2.559-0.976,3.535,0l19.001,19.001C44.244,39.709,44.244,41.292,43.268,42.268z"/></svg>' export const SVG_TAG_NAMES= [ "rect", "path", From 99f64e7ba3305e028fb071664049c1d6f9ca68bd Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 09:56:54 +0200 Subject: [PATCH 52/71] removed redirect and wrote it as a single line usin ES6, terminated a loop just after its have found an item, renamed handleDivClick to more meaningful naming etc just incase --- .../checkBoxSelection/checkBoxSelection.js | 1 + src/components/displayAllComponent.js | 16 +++++----------- src/components/svgSetting/svgSetting.js | 7 +++++-- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 12ec34c..573ff97 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -39,6 +39,7 @@ class CheckBoxSelection extends Component { ) { isFound = true; index = key; + break; } } if (!isFound) { diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 75c94ec..da2cf86 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -20,13 +20,13 @@ class DisplayAllComponent extends Component { }; } getOptimizeSvg = async () => { - let OriginalAndOptimised = {} + let originalAndOptimised = {} for (var option of this.props.svgOptions) { changeObj(option, this.props.svgObject.plugins); } for (var setting of this.props.svgSettingList) { if (this.props.svgOptions.length > 0) { - OriginalAndOptimised = { + originalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg( @@ -35,7 +35,7 @@ class DisplayAllComponent extends Component { ) } } else { - OriginalAndOptimised = { + originalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg( @@ -44,23 +44,17 @@ class DisplayAllComponent extends Component { ) } } - this.props.displayOptimize.push(OriginalAndOptimised); + this.props.displayOptimize.push(originalAndOptimised); } this.setState({ redirect: true }) }; - renderRedirect = () => { - if (this.state.redirect) { - return <Redirect to='/FinalSvgDisplay' /> - } - } - render() { return ( <div className="home-display-class"> - {this.renderRedirect()} + {this.state.redirect ? <Redirect to='/FinalSvgDisplay' /> : null} <div className="choose"> <ChooseFolder /> </div> diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index a3a72f7..b88f1c2 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -20,7 +20,7 @@ class SvgSetting extends Component { }; } - handleDivClick = () => { + handleSettingsClick = () => { this.setState({ isClicked: !this.state.isClicked }); @@ -28,8 +28,11 @@ class SvgSetting extends Component { if (this.props.svgOptions[file] === this.props.value) { this.state.isFound = true; this.state.index = file; + break; } } + + if (!this.state.isFound) { this.props.svgOptions.push(this.props.value); } else { @@ -59,7 +62,7 @@ class SvgSetting extends Component { render() { return ( - <div onClick={this.handleDivClick}> + <div onClick={this.handleSettingsClick}> <input type="checkbox" checked={this.state.isClicked} /> <label className="checkbox-label-svg">{this.props.option}</label> </div> From ecb9ed6b7b026aa05e89f49e72d72586c0128491 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 10:08:40 +0200 Subject: [PATCH 53/71] I have changed border-radius to be 25px --- src/components/checkBoxSelection/checkBoxSelection.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 0abac29..8d30ad8 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -49,7 +49,7 @@ justify-items: center; width:100px; height: 70px; - border-radius: 35px; + border-radius: 25px; background-color: #b5cfe1; align-items: center; } @@ -64,7 +64,7 @@ justify-items: center; width: 100px; height: 70px; - border-radius: 35px; + border-radius: 25px; background-color: #b6e1b5; align-items: center; position: fixed; From cc6983287136fc9333c18755599a3233174a24ab Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 10:50:17 +0200 Subject: [PATCH 54/71] I have deleted the png download button, was selected by a mistake --- src/image/downloadbutton.png | Bin 7157 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/image/downloadbutton.png diff --git a/src/image/downloadbutton.png b/src/image/downloadbutton.png deleted file mode 100644 index 367d2c02d1fec16c595a4c1884ec3b1e171421dc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7157 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 From 3619df5fc633d8dfdcdf6b9995c0c872bad7164f Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 13:56:40 +0200 Subject: [PATCH 55/71] more request attended --- .../checkBoxSelection/checkBoxSelection.scss | 13 +---- src/components/displayAllComponent.js | 49 ++++++++----------- src/components/displaySvg/finalSvgDisplay.js | 2 - .../displaySvg/finalSvgDisplay.scss | 8 +-- src/components/svgSetting/svgSetting.js | 6 +-- src/index.js | 1 - 6 files changed, 27 insertions(+), 52 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index 8d30ad8..ee3fcd8 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -33,7 +33,7 @@ width: 600px; } -.home-display-class { +.home-display { display: flex; } .choose { @@ -54,19 +54,10 @@ align-items: center; } -// .download-Button{ -// padding-left: 50%; -// padding-top: 3%; -// } .download-Button { - text-align: center; - display: inline-grid; - justify-items: center; - width: 100px; height: 70px; - border-radius: 25px; + border-radius: 35px; background-color: #b6e1b5; - align-items: center; position: fixed; } .optimise-button-div{ diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index da2cf86..c1e2ccb 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -1,26 +1,21 @@ import React, { Component } from "react"; import ChooseFolder from "./chooseFolder/chooseFolder"; -import { NavLink,Redirect } from "react-router-dom"; +import { Redirect } from "react-router-dom"; import SvgSettingOptions from "./svgSetting/svgSettingOptions"; import "../components/checkBoxSelection/checkBoxSelection.scss"; import { changeObj, optimizeSvg } from "../../src/components/functions"; import { connect } from "react-redux"; import PropTypes from "prop-types"; -import { - ADD_VARIABLE, - UPDATE_VARIABLE, - DELETE_VARIABLE -} from "../store/actionTypes"; class DisplayAllComponent extends Component { constructor(props) { super(props); this.state = { - redirect : false + redirect: false }; } getOptimizeSvg = async () => { - let originalAndOptimised = {} + let originalAndOptimised = {}; for (var option of this.props.svgOptions) { changeObj(option, this.props.svgObject.plugins); } @@ -33,7 +28,7 @@ class DisplayAllComponent extends Component { setting.dataurl, this.props.svgObject.plugins ) - } + }; } else { originalAndOptimised = { originalSvg: setting.dataurl, @@ -42,31 +37,29 @@ class DisplayAllComponent extends Component { setting.dataurl, this.props.svgObject.plugins ) - } + }; } this.props.displayOptimize.push(originalAndOptimised); } - this.setState({ - redirect: true - }) + this.setState({ redirect: true }); }; render() { return ( - <div className="home-display-class"> - {this.state.redirect ? <Redirect to='/FinalSvgDisplay' /> : null} - <div className="choose"> - <ChooseFolder /> - </div> - <div className="choose"> - <SvgSettingOptions /> - <div className="optimise-button-div"> - <button className="optimize-button" onClick={this.getOptimizeSvg}> - Optimize - </button> - </div> + <div className="home-display"> + {this.state.redirect ? <Redirect to="/FinalSvgDisplay" /> : null} + <div className="choose"> + <ChooseFolder /> + </div> + <div className="choose"> + <SvgSettingOptions /> + <div className="optimise-button-div"> + <button className="optimize-button" onClick={this.getOptimizeSvg}> + Optimize + </button> </div> </div> + </div> ); } } @@ -83,9 +76,7 @@ const mapStateToProps = state => { const svgOptions = state.svgOptions; const svgObject = state.svgObject; const displayOptimize = state.displayOptimize; - return {svgSettingList,svgOptions,svgObject,displayOptimize}; + return { svgSettingList, svgOptions, svgObject, displayOptimize }; }; -export default connect( - mapStateToProps, -)(DisplayAllComponent); +export default connect(mapStateToProps)(DisplayAllComponent); diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 7a37f3b..23fa136 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -1,9 +1,7 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; -import DisplaySvg from "./displaySvg"; import finalSvgDisplay from "./finalSvgDisplay.scss"; import { connect } from "react-redux"; -import base64 from "base-64"; import { SVG_TAG_NAMES } from "../../constants/constants"; import { ADD_VARIABLE, diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 7bda142..78935fe 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -3,10 +3,10 @@ width: 373px; } - a:hover { +ellipse:hover,rect:hover,path:hover,text:hover,linearGradient:hover,polygon:hover,circle:hover { background-color: yellow; - fill:yellow; - } + fill: yellow; +} .inline-display-position{ padding-top: 71%; @@ -14,7 +14,7 @@ svg{ max-height: 106px; max-width: fit-content; - background-color: white; + // background-color: white; } .display-svgs-border-match { diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index b88f1c2..dbf9b3b 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -41,7 +41,7 @@ class SvgSetting extends Component { } }; - toChangePluginObjectValues = arrayWithPluginOptions => { + toChangePluginObjectValues = (arrayWithPluginOptions) => { let newSvgoObject = this.props.svgObject.plugins.filter( option => { for (var element of arrayWithPluginOptions) { @@ -56,10 +56,6 @@ class SvgSetting extends Component { return newSvgoObject; }; - changingPluginValuesPerUserOption= () => { - this.changePluginObjectValues(this.props.svgOptions); - }; - render() { return ( <div onClick={this.handleSettingsClick}> diff --git a/src/index.js b/src/index.js index 4860114..a28b3ec 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ import React from "react"; import ReactDOM from "react-dom"; -import "bootstrap/dist/css/bootstrap.css"; import "./index.scss"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; From dcab3d187abf5849854913460e3b5e7e4b1bad50 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 14:30:02 +0200 Subject: [PATCH 56/71] I have applied array.findIndex in svgSetting and checkBoxSelection --- src/components/svgSetting/svgSetting.js | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index dbf9b3b..7bef83c 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -16,7 +16,7 @@ class SvgSetting extends Component { isClicked: this.props.isSelected, arr: [], svgoObject: { ...Svgo }, - isFound: false + IndexOf: -1 }; } @@ -24,20 +24,19 @@ class SvgSetting extends Component { this.setState({ isClicked: !this.state.isClicked }); - for (var file in this.props.svgOptions) { - if (this.props.svgOptions[file] === this.props.value) { - this.state.isFound = true; - this.state.index = file; - break; - } - } - - if (!this.state.isFound) { + + this.setState({ + IndexOf : this.props.svgOptions.findIndex(this.props.value) + }) + + if (this.state.IndexOf < 0) { this.props.svgOptions.push(this.props.value); } else { - this.props.svgOptions.splice(this.state.index, 1); - this.state.isFound = false; + this.props.svgOptions.splice(this.state.IndexOf, 1); + this.setState({ + IndexOf : -1 + }) } }; From 16c2498b38f5e2d8b7220da42235414e18299800 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 15:12:02 +0200 Subject: [PATCH 57/71] removed unused function toChangePluginObjectValues --- .../checkBoxSelection/checkBoxSelection.js | 19 +++++--------- src/components/svgSetting/svgSetting.js | 26 ++++--------------- 2 files changed, 11 insertions(+), 34 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 573ff97..24851c7 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -30,23 +30,16 @@ class CheckBoxSelection extends Component { }; changeColourAndTick = () => { - let isFound = false; let index = 0; this.setState({ isClicked: !this.state.isClicked }); - for (var key in this.props.svgSettingList) { - if ( - this.props.svgSettingList[key].name === this.props.file.name - ) { - isFound = true; - index = key; - break; - } - } - if (!isFound) { + index = this.props.svgSettingList.findIndex( + setting => setting.name == this.props.file.name + ); + + if (index < 0) { this.convertSvgToDataUrl(this.props.file); } else { this.props.svgSettingList.splice(index, 1); - isFound = false; } }; @@ -78,7 +71,7 @@ CheckBoxSelection.propTypes = { const mapStateToProps = state => { const svgSettingList = state.svgSettingList; - return {svgSettingList}; + return { svgSettingList }; }; const mapDispatchToProps = dispatch => { diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 7bef83c..5d59b7c 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -25,36 +25,20 @@ class SvgSetting extends Component { isClicked: !this.state.isClicked }); - this.setState({ - IndexOf : this.props.svgOptions.findIndex(this.props.value) - }) + IndexOf: this.props.svgOptions.findIndex(this.props.value) + }); if (this.state.IndexOf < 0) { this.props.svgOptions.push(this.props.value); } else { this.props.svgOptions.splice(this.state.IndexOf, 1); this.setState({ - IndexOf : -1 - }) + IndexOf: -1 + }); } }; - toChangePluginObjectValues = (arrayWithPluginOptions) => { - let newSvgoObject = this.props.svgObject.plugins.filter( - option => { - for (var element of arrayWithPluginOptions) { - if (option[element] !== null && option[element] !== undefined) { - option[element] = true; - } - return true; - } - } - ); - - return newSvgoObject; - }; - render() { return ( <div onClick={this.handleSettingsClick}> @@ -75,7 +59,7 @@ SvgSetting.propTypes = { const mapStateToProps = state => { const svgOptions = state.svgOptions; const svgObject = state.svgObject; - return {svgOptions,svgObject}; + return { svgOptions, svgObject }; }; const mapDispatchToProps = dispatch => { return { From 20f5cc9f610b2ec6d4d36ad342e603325250b78b Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Mon, 11 Nov 2019 16:15:02 +0200 Subject: [PATCH 58/71] renamed var t and used let instead of var ,naming of IndexOf --- src/components/displaySvg/finalSvgDisplay.js | 4 ++-- src/components/svgSetting/svgSetting.js | 15 ++++++--------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index 23fa136..f5f1128 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -75,9 +75,9 @@ class FinalSvgDisplay extends Component { 'function changeSvgColourById(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; const script = document.createElement("script"); - var t = document.createTextNode(functionStr); + var textNodeToChangeAvgColour = document.createTextNode(functionStr); script.setAttribute("class", "fucntionality-script"); - script.appendChild(t); + script.appendChild(textNodeToChangeAvgColour); document.body.appendChild(script); this.setState({ diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 5d59b7c..d54c57f 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -15,27 +15,24 @@ class SvgSetting extends Component { this.state = { isClicked: this.props.isSelected, arr: [], - svgoObject: { ...Svgo }, - IndexOf: -1 - }; + svgoObject: { ...Svgo } + }; } handleSettingsClick = () => { + let indexOf = -1; this.setState({ isClicked: !this.state.isClicked }); - this.setState({ - IndexOf: this.props.svgOptions.findIndex(this.props.value) - }); + + indexOf = this.props.svgOptions.findIndex(this.props.value); if (this.state.IndexOf < 0) { this.props.svgOptions.push(this.props.value); } else { this.props.svgOptions.splice(this.state.IndexOf, 1); - this.setState({ - IndexOf: -1 - }); + indexOf = -1; } }; From b2bce0a3b247104d89c5008a9d1c058ed9144730 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 12 Nov 2019 08:49:38 +0200 Subject: [PATCH 59/71] changed var to be let ,removed initialisation of IndexOf, lower case B, use of px --- .../checkBoxSelection/checkBoxSelection.scss | 2 +- src/components/chooseFolder/chooseFolder.js | 4 ++- src/components/displaySvg/finalSvgDisplay.js | 26 +++++++++---------- .../displaySvg/finalSvgDisplay.scss | 12 ++++----- src/components/functions.js | 22 ++++++++-------- src/components/svgSetting/svgSetting.js | 8 +++--- 6 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.scss b/src/components/checkBoxSelection/checkBoxSelection.scss index ee3fcd8..98dfb66 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.scss +++ b/src/components/checkBoxSelection/checkBoxSelection.scss @@ -54,7 +54,7 @@ align-items: center; } -.download-Button { +.download-button { height: 70px; border-radius: 35px; background-color: #b6e1b5; diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index 1868344..ba823e7 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -34,9 +34,10 @@ class ChooseFolder extends Component { render() { const listOfFileNames = []; - for(var key of this.state.path) { + for(let key of this.state.path) { listOfFileNames.push(<CheckBoxSelection key={key.name} filename={key.name} file={key} />); } + return ( <div className='main'> <div className='file'> @@ -44,6 +45,7 @@ class ChooseFolder extends Component { <input type='file' webkitdirectory='' onChange={this.onChangeHandler} /> </label> </div> + <div > {listOfFileNames} </div> diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index f5f1128..d36fa82 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -23,13 +23,13 @@ class FinalSvgDisplay extends Component { downloadNewSvgFiles = () => { - var svgElementList = document.getElementsByTagName("svg"); + let svgElementList = document.getElementsByTagName("svg"); //get svg source. - var serializer = new XMLSerializer(); - for(var svgDataIndex in svgElementList){ + let serializer = new XMLSerializer(); + for(let svgDataIndex in svgElementList){ //get svg source. - var source = serializer.serializeToString(svgElementList[svgDataIndex]); + let source = serializer.serializeToString(svgElementList[svgDataIndex]); source = source.replace("<a class=\"svg-elem-wrapper\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"changeSvgColourById(this.id);\"",""); //add name spaces. @@ -51,9 +51,9 @@ class FinalSvgDisplay extends Component { source = '<?xml version="1.0" standalone="no"?>\r\n' + source; //convert svg source to URI data scheme. - var url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); + let url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); //set url value to a element's href attribute. - var dl = document.createElement("a"); + let dl = document.createElement("a"); document.body.appendChild(dl); // This line makes it work in Firefox. dl.setAttribute("href", url); dl.setAttribute("download", "test.svg"); @@ -67,15 +67,15 @@ class FinalSvgDisplay extends Component { }; componentDidMount = () => { - var array = []; - var pathArrayLocal = []; - var elementIds = []; + let array = []; + let pathArrayLocal = []; + let elementIds = []; wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); - var functionStr = - 'function changeSvgColourById(elemId,white){ var arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; + let functionStr = + 'function changeSvgColourById(elemId,white){ let arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; const script = document.createElement("script"); - var textNodeToChangeAvgColour = document.createTextNode(functionStr); + let textNodeToChangeAvgColour = document.createTextNode(functionStr); script.setAttribute("class", "fucntionality-script"); script.appendChild(textNodeToChangeAvgColour); document.body.appendChild(script); @@ -102,7 +102,7 @@ class FinalSvgDisplay extends Component { <div className="display-original-optimised">{listOfFileNames}</div> <div align="center"> <button - className="download-Button" + className="download-button" onClick={this.downloadNewSvgFiles} > Download edited svg diff --git a/src/components/displaySvg/finalSvgDisplay.scss b/src/components/displaySvg/finalSvgDisplay.scss index 78935fe..9e2ad91 100644 --- a/src/components/displaySvg/finalSvgDisplay.scss +++ b/src/components/displaySvg/finalSvgDisplay.scss @@ -3,18 +3,18 @@ width: 373px; } -ellipse:hover,rect:hover,path:hover,text:hover,linearGradient:hover,polygon:hover,circle:hover { + + +ellipse,rect,path,text,linearGradient,polygon,circle{ &:hover{ background-color: yellow; fill: yellow; -} - +} } .inline-display-position{ - padding-top: 71%; + padding-top: 40px; } svg{ max-height: 106px; max-width: fit-content; - // background-color: white; } .display-svgs-border-match { @@ -40,7 +40,7 @@ ellipse:hover,rect:hover,path:hover,text:hover,linearGradient:hover,polygon:hove .loader { border: 16px solid greenyellow; - border-radius: 56%; + border-radius: 111px; border-top: 16px solid #bcda12; width: 197px; height: 199px; diff --git a/src/components/functions.js b/src/components/functions.js index e73b058..0be93b9 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -45,17 +45,17 @@ export const wrapElements = ( idLengthToGenerate, idOfElements ) => { - for (var svgTagNameIndex in SVG_TAG_NAMES) { - var drawingComponet = document.getElementsByTagName( + for (let svgTagNameIndex in SVG_TAG_NAMES) { + let drawingComponet = document.getElementsByTagName( SVG_TAG_NAMES[svgTagNameIndex] ); - for (var drawingComponetIndex of drawingComponet) { - var element = new XMLSerializer() + for (let drawingComponetIndex of drawingComponet) { + let element = new XMLSerializer() .serializeToString(drawingComponetIndex) .toString() .replace('xmlns="http://www.w3.org/2000/svg"', ""); if (!element.includes("id=")) { - var idInserter = + let idInserter = "<" + SVG_TAG_NAMES[svgTagNameIndex] + ' id="id_' + @@ -67,7 +67,7 @@ export const wrapElements = ( idInserter ); } - var elementWrapper = document.createElement("a"); + let elementWrapper = document.createElement("a"); elementWrapper.setAttribute("class", "svg-elem-wrapper"); elementWrapper.setAttribute("id", "id-1"); drawingComponetLocal.push(drawingComponetIndex); @@ -90,15 +90,15 @@ export const updateSvgElements = ( wrappedPathsElement, drawingComponetState ) => { - for (var key in optimisedArray) { - var finalStringElementWrappedWithLink = base64.decode(optimisedArray[key].optimisedSvg); + for (let key in optimisedArray) { + let finalStringElementWrappedWithLink = base64.decode(optimisedArray[key].optimisedSvg); if (wrappedPathsElement.length > 0) { - for (var index = 0; index < wrappedPathsElement.length; index++) { - var stringToWithLinkToWrap = new XMLSerializer() + for (let index = 0; index < wrappedPathsElement.length; index++) { + let stringToWithLinkToWrap = new XMLSerializer() .serializeToString(wrappedPathsElement[index]) .toString(); - var StringToBeWrappedByLink = new XMLSerializer() + let StringToBeWrappedByLink = new XMLSerializer() .serializeToString(drawingComponetState[index]) .toString(); StringToBeWrappedByLink = StringToBeWrappedByLink.replace( diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index d54c57f..fb4b6c9 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -20,19 +20,17 @@ class SvgSetting extends Component { } handleSettingsClick = () => { - let indexOf = -1; this.setState({ isClicked: !this.state.isClicked }); - indexOf = this.props.svgOptions.findIndex(this.props.value); + let indexOf = this.props.svgOptions.findIndex(this.props.value); - if (this.state.IndexOf < 0) { + if (indexOf < 0) { this.props.svgOptions.push(this.props.value); } else { - this.props.svgOptions.splice(this.state.IndexOf, 1); - indexOf = -1; + this.props.svgOptions = this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)) } }; From e36ffc01118b6aff00dc02afc301655fe2b88c85 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 12 Nov 2019 09:21:46 +0200 Subject: [PATCH 60/71] removed constants --- src/components/displaySvg/displaySvg.js | 9 +++++---- src/components/svgSetting/svgSetting.js | 2 +- src/constants/constants.js | 2 -- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 01f8397..5a10027 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -3,7 +3,6 @@ import base64 from "base-64"; import "./finalSvgDisplay.scss"; import PropTypes from "prop-types"; import InlineSVG from "svg-inline-react"; -import {DEFAULT_DATA_URL,DEFAULT_SVG_STRING} from "../../constants/constants"; class DisplaySvg extends Component { constructor(props) { super(props); @@ -36,13 +35,14 @@ class DisplaySvg extends Component { render() { return ( <div> + { (this.props.dataUrl && this.props.finalStringElementWrappedWithLink) ? <div className="display-svgs-border-match" align="center"> <ul> <li> <figure> <img className={this.props.svgType} - src={this.props.dataUrl ?this.props.dataUrl : DEFAULT_DATA_URL} + src={this.props.dataUrl} width={this.props.width ? this.props.width : "auto"} height={this.props.height? this.props.height : "auto"} alt="svg to be displayed" @@ -55,7 +55,7 @@ class DisplaySvg extends Component { <li> <figure> <div className="inline-display-position"> - <InlineSVG src={this.props.finalStringElementWrappedWithLink ? this.props.finalStringElementWrappedWithLink : DEFAULT_SVG_STRING } /> + <InlineSVG src={this.props.finalStringElementWrappedWithLink} /> </div> <figcaption> {"File Size : " + this.state.fileSizeOptimised + " KB"} @@ -64,7 +64,8 @@ class DisplaySvg extends Component { </li> </ul> </div> - </div> + : null} + </div> ); } } diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index fb4b6c9..75f29db 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -25,7 +25,7 @@ class SvgSetting extends Component { }); - let indexOf = this.props.svgOptions.findIndex(this.props.value); + let indexOf = this.props.svgOptions.findIndex(this.props.value); if (indexOf < 0) { this.props.svgOptions.push(this.props.value); diff --git a/src/constants/constants.js b/src/constants/constants.js index 79a5b87..d507282 100644 --- a/src/constants/constants.js +++ b/src/constants/constants.js @@ -1,8 +1,6 @@ export const BASE_URL = 'http://localhost:3500/'; export const OPTIMIZE_SVG= 'optimizeSvg'; export const OPTIMIZE_SVG_LIST= 'optimizesvgElementList'; -export const DEFAULT_DATA_URL ='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cmFkaWFsR3JhZGllbnQgaWQ9IklrVWg2ZXk1QmhuQ2h+aHJNczFmZGEiIGN4PSIzMi41IiBjeT0iMzEuNSIgcj0iMzAuNTE2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNhZmVlZmYiLz48c3RvcCBvZmZzZXQ9Ii4xOTMiIHN0b3AtY29sb3I9IiNiYmYxZmYiLz48c3RvcCBvZmZzZXQ9Ii43MDMiIHN0b3AtY29sb3I9IiNkN2Y4ZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlMWZhZmYiLz48L3JhZGlhbEdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjSWtVaDZleTVCaG5DaH5ock1zMWZkYSkiIGQ9Ik01OSwyMGgxLjVjMi4xNjgsMCwzLjg5Mi0xLjk5OCwzLjQyMi00LjI0M0M2My41OCwxNC4xMjIsNjIuMDU2LDEzLDYwLjM4NSwxM0w1MywxMyBjLTEuMTA1LDAtMi0wLjg5NS0yLTJjMC0xLjEwNSwwLjg5NS0yLDItMmgzLjM4NWMxLjY3LDAsMy4xOTUtMS4xMjIsMy41MzctMi43NTdDNjAuMzkyLDMuOTk4LDU4LjY2OCwyLDU2LjUsMkgzNC4wMDZIMzIuNWgtMjQgQzYuNTc1LDIsNSwzLjU3NSw1LDUuNVM2LjU3NSw5LDguNSw5SDEwYzEuMTA1LDAsMiwwLjg5NSwyLDJjMCwxLjEwNS0wLjg5NSwyLTIsMmwtNS4zODUsMGMtMS42NywwLTMuMTk1LDEuMTIyLTMuNTM3LDIuNzU3IEMwLjYwOCwxOC4wMDIsMi4zMzIsMjAsNC41LDIwSDE4djEyTDQuNjE1LDMyYy0xLjY3LDAtMy4xOTUsMS4xMjItMy41MzcsMi43NTdDMC42MDgsMzcuMDAyLDIuMzMyLDM5LDQuNSwzOUg1YzEuMTA1LDAsMiwwLjg5NSwyLDIgYzAsMS4xMDUtMC44OTUsMi0yLDJINC41Yy0yLjE2OCwwLTMuODkyLDEuOTk4LTMuNDIyLDQuMjQzQzEuNDIsNDguODc4LDIuOTQ1LDUwLDQuNjE1LDUwSDEwYzEuMTA1LDAsMiwwLjg5NSwyLDIgYzAsMS4xMDUtMC44OTUsMi0yLDJsLTEuMzg1LDBjLTEuNjcsMC0zLjE5NSwxLjEyMi0zLjUzNywyLjc1N0M0LjYwOCw1OS4wMDIsNi4zMzIsNjEsOC41LDYxaDIyLjQ5NEgzMi41aDIzIGMxLjkyNSwwLDMuNS0xLjU3NSwzLjUtMy41UzU3LjQyNSw1NCw1NS41LDU0SDU1Yy0xLjEwNSwwLTItMC44OTUtMi0yYzAtMS4xMDUsMC44OTUtMiwyLTJoNC4zODVjMS42NywwLDMuMTk1LTEuMTIyLDMuNTM3LTIuNzU3IEM2My4zOTIsNDQuOTk4LDYxLjY2OCw0Myw1OS41LDQzSDQ3VjMxaDEyLjM4NWMxLjY3LDAsMy4xOTUtMS4xMjIsMy41MzctMi43NTdDNjMuMzkyLDI1Ljk5OCw2MS42NjgsMjQsNTkuNSwyNEg1OSBjLTEuMTA1LDAtMi0wLjg5NS0yLTJDNTcsMjAuODk1LDU3Ljg5NSwyMCw1OSwyMHoiLz48bGluZWFyR3JhZGllbnQgaWQ9IklrVWg2ZXk1QmhuQ2h+aHJNczFmZGIiIHgxPSIzMiIgeDI9IjMyIiB5MT0iNTYiIHkyPSI2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3ByZWFkTWV0aG9kPSJyZWZsZWN0Ij48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZjYzNGQiLz48c3RvcCBvZmZzZXQ9Ii4yMDQiIHN0b3AtY29sb3I9IiNmZTY0NjQiLz48c3RvcCBvZmZzZXQ9Ii41MjEiIHN0b3AtY29sb3I9IiNmYzY1ODEiLz48c3RvcCBvZmZzZXQ9Ii43OTQiIHN0b3AtY29sb3I9IiNmYTY2OTQiLz48c3RvcCBvZmZzZXQ9Ii45ODkiIHN0b3AtY29sb3I9IiNmYTY2OWEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmYTY2OWEiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGZpbGw9InVybCgjSWtVaDZleTVCaG5DaH5ock1zMWZkYikiIGQ9Ik01NywzMWMwLDEzLjgwNS0xMS4xOTUsMjUtMjUsMjVTNyw0NC44MDUsNywzMVMxOC4xOTUsNiwzMiw2UzU3LDE3LjE5NSw1NywzMXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNDMuMjY4LDE5LjczMkw0My4yNjgsMTkuNzMyYzAuOTc2LDAuOTc2LDAuOTc2LDIuNTU5LDAsMy41MzVMMjQuMjY3LDQyLjI2OCBjLTAuOTc2LDAuOTc2LTIuNTU5LDAuOTc2LTMuNTM1LDBsMCwwYy0wLjk3Ni0wLjk3Ni0wLjk3Ni0yLjU1OSwwLTMuNTM1bDE5LjAwMS0xOS4wMDFDNDAuNzA5LDE4Ljc1Niw0Mi4yOTIsMTguNzU2LDQzLjI2OCwxOS43MzIgeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik00My4yNjgsNDIuMjY4TDQzLjI2OCw0Mi4yNjhjLTAuOTc2LDAuOTc2LTIuNTU5LDAuOTc2LTMuNTM1LDBMMjAuNzMyLDIzLjI2NyBjLTAuOTc2LTAuOTc2LTAuOTc2LTIuNTU5LDAtMy41MzVsMCwwYzAuOTc2LTAuOTc2LDIuNTU5LTAuOTc2LDMuNTM1LDBsMTkuMDAxLDE5LjAwMUM0NC4yNDQsMzkuNzA5LDQ0LjI0NCw0MS4yOTIsNDMuMjY4LDQyLjI2OHoiLz48L3N2Zz4='; -export const DEFAULT_SVG_STRING = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><radialGradient id="IkUh6ey5BhnCh~hrMs1fda" cx="32.5" cy="31.5" r="30.516" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#afeeff"/><stop offset=".193" stop-color="#bbf1ff"/><stop offset=".703" stop-color="#d7f8ff"/><stop offset="1" stop-color="#e1faff"/></radialGradient><path fill="url(#IkUh6ey5BhnCh~hrMs1fda)" d="M59,20h1.5c2.168,0,3.892-1.998,3.422-4.243C63.58,14.122,62.056,13,60.385,13L53,13 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h3.385c1.67,0,3.195-1.122,3.537-2.757C60.392,3.998,58.668,2,56.5,2H34.006H32.5h-24 C6.575,2,5,3.575,5,5.5S6.575,9,8.5,9H10c1.105,0,2,0.895,2,2c0,1.105-0.895,2-2,2l-5.385,0c-1.67,0-3.195,1.122-3.537,2.757 C0.608,18.002,2.332,20,4.5,20H18v12L4.615,32c-1.67,0-3.195,1.122-3.537,2.757C0.608,37.002,2.332,39,4.5,39H5c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2H4.5c-2.168,0-3.892,1.998-3.422,4.243C1.42,48.878,2.945,50,4.615,50H10c1.105,0,2,0.895,2,2 c0,1.105-0.895,2-2,2l-1.385,0c-1.67,0-3.195,1.122-3.537,2.757C4.608,59.002,6.332,61,8.5,61h22.494H32.5h23 c1.925,0,3.5-1.575,3.5-3.5S57.425,54,55.5,54H55c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2h4.385c1.67,0,3.195-1.122,3.537-2.757 C63.392,44.998,61.668,43,59.5,43H47V31h12.385c1.67,0,3.195-1.122,3.537-2.757C63.392,25.998,61.668,24,59.5,24H59 c-1.105,0-2-0.895-2-2C57,20.895,57.895,20,59,20z"/><linearGradient id="IkUh6ey5BhnCh~hrMs1fdb" x1="32" x2="32" y1="56" y2="6" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#ff634d"/><stop offset=".204" stop-color="#fe6464"/><stop offset=".521" stop-color="#fc6581"/><stop offset=".794" stop-color="#fa6694"/><stop offset=".989" stop-color="#fa669a"/><stop offset="1" stop-color="#fa669a"/></linearGradient><path fill="url(#IkUh6ey5BhnCh~hrMs1fdb)" d="M57,31c0,13.805-11.195,25-25,25S7,44.805,7,31S18.195,6,32,6S57,17.195,57,31z"/><path fill="#fff" d="M43.268,19.732L43.268,19.732c0.976,0.976,0.976,2.559,0,3.535L24.267,42.268 c-0.976,0.976-2.559,0.976-3.535,0l0,0c-0.976-0.976-0.976-2.559,0-3.535l19.001-19.001C40.709,18.756,42.292,18.756,43.268,19.732 z"/><path fill="#fff" d="M43.268,42.268L43.268,42.268c-0.976,0.976-2.559,0.976-3.535,0L20.732,23.267 c-0.976-0.976-0.976-2.559,0-3.535l0,0c0.976-0.976,2.559-0.976,3.535,0l19.001,19.001C44.244,39.709,44.244,41.292,43.268,42.268z"/></svg>' export const SVG_TAG_NAMES= [ "rect", "path", From 218274726d6efa9e6a27cf8ff1a56ad00e0023e0 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 12 Nov 2019 09:30:03 +0200 Subject: [PATCH 61/71] removed unused classname --- src/components/displaySvg/displaySvg.js | 1 - src/components/functions.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/displaySvg/displaySvg.js b/src/components/displaySvg/displaySvg.js index 5a10027..d1fe8d0 100644 --- a/src/components/displaySvg/displaySvg.js +++ b/src/components/displaySvg/displaySvg.js @@ -41,7 +41,6 @@ class DisplaySvg extends Component { <li> <figure> <img - className={this.props.svgType} src={this.props.dataUrl} width={this.props.width ? this.props.width : "auto"} height={this.props.height? this.props.height : "auto"} diff --git a/src/components/functions.js b/src/components/functions.js index 0be93b9..b5d22e5 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -152,7 +152,6 @@ export const updateSvgElements = ( <div className="original-svg-div" key={key}> <DisplaySvg key={key} - svgType="originalSvg" dataUrl={optimisedArray[key].originalSvg} width="100px" height="300px" From ff5b6bb06b35528b71c373f7df540392efd904ef Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 12 Nov 2019 09:47:54 +0200 Subject: [PATCH 62/71] ()=> --- src/components/checkBoxSelection/checkBoxSelection.js | 2 +- src/components/chooseFolder/chooseFolder.js | 2 +- src/components/displayAllComponent.js | 2 +- src/components/svgSetting/svgSetting.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 24851c7..16b72de 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -51,7 +51,7 @@ class CheckBoxSelection extends Component { ? "checkbox-container-clicked" : "checkbox-container-unclicked" } - onClick={this.changeColourAndTick} + onClick={()=>this.changeColourAndTick()} > <input className="checkbox-input" diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index ba823e7..b02b3e9 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -42,7 +42,7 @@ class ChooseFolder extends Component { <div className='main'> <div className='file'> <label> - <input type='file' webkitdirectory='' onChange={this.onChangeHandler} /> + <input type='file' webkitdirectory='' onChange={(e)=>this.onChangeHandler(e)} /> </label> </div> diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index c1e2ccb..e19900c 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -54,7 +54,7 @@ class DisplayAllComponent extends Component { <div className="choose"> <SvgSettingOptions /> <div className="optimise-button-div"> - <button className="optimize-button" onClick={this.getOptimizeSvg}> + <button className="optimize-button" onClick={()=>this.getOptimizeSvg()}> Optimize </button> </div> diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 75f29db..f4b92d4 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -36,7 +36,7 @@ class SvgSetting extends Component { render() { return ( - <div onClick={this.handleSettingsClick}> + <div onClick={()=>this.handleSettingsClick()}> <input type="checkbox" checked={this.state.isClicked} /> <label className="checkbox-label-svg">{this.props.option}</label> </div> From b46bf327d3230ef1c373a4e6ea443dae447451eb Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Tue, 12 Nov 2019 13:55:17 +0200 Subject: [PATCH 63/71] used immutable functions to update props and reducers --- src/components/ReduxDemo/ReduxDemo.js | 2 +- .../checkBoxSelection/checkBoxSelection.js | 10 +++++++--- src/components/displayAllComponent.js | 19 ++++++++++++++++--- src/components/functions.js | 4 ++++ src/components/svgSetting/svgSetting.js | 2 +- 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/src/components/ReduxDemo/ReduxDemo.js b/src/components/ReduxDemo/ReduxDemo.js index 8e24800..5d965e6 100644 --- a/src/components/ReduxDemo/ReduxDemo.js +++ b/src/components/ReduxDemo/ReduxDemo.js @@ -50,4 +50,4 @@ const mapDispatchToProps = dispatch => { }; }; -export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo); \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(ReduxDemo); diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index 16b72de..b0a02f4 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -18,11 +18,15 @@ class CheckBoxSelection extends Component { convertSvgToDataUrl = file => { let reader = new FileReader(); + const svgSettings = this.props.svgSettingList ?this.props.svgSettingList : []; reader.onload = result => { - this.props.svgSettingList.push({ + + svgSettings.push({ name: file.name, dataurl: result.target.result }); + this.props.updateStore("svgSettingList",svgSettings); + }; if (file) { reader.readAsDataURL(file); @@ -30,9 +34,9 @@ class CheckBoxSelection extends Component { }; changeColourAndTick = () => { - let index = 0; + this.setState({ isClicked: !this.state.isClicked }); - index = this.props.svgSettingList.findIndex( + let index = this.props.svgSettingList.findIndex( setting => setting.name == this.props.file.name ); diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index e19900c..717e98f 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -6,16 +6,18 @@ import "../components/checkBoxSelection/checkBoxSelection.scss"; import { changeObj, optimizeSvg } from "../../src/components/functions"; import { connect } from "react-redux"; import PropTypes from "prop-types"; +import { UPDATE_VARIABLE} from "../../src/store/actionTypes"; class DisplayAllComponent extends Component { constructor(props) { super(props); this.state = { redirect: false - }; + }; } getOptimizeSvg = async () => { let originalAndOptimised = {}; + let tempOptimisationArr = []; for (var option of this.props.svgOptions) { changeObj(option, this.props.svgObject.plugins); } @@ -39,9 +41,12 @@ class DisplayAllComponent extends Component { ) }; } - this.props.displayOptimize.push(originalAndOptimised); + tempOptimisationArr.push(originalAndOptimised); + } + this.props.updateStore("displayOptimize",tempOptimisationArr); this.setState({ redirect: true }); + }; render() { @@ -65,6 +70,8 @@ class DisplayAllComponent extends Component { } DisplayAllComponent.propTypes = { + addToStore: PropTypes.func, + updateStore: PropTypes.func, svgSettingList: PropTypes.object, svgOptions: PropTypes.object, svgObject: PropTypes.object, @@ -79,4 +86,10 @@ const mapStateToProps = state => { return { svgSettingList, svgOptions, svgObject, displayOptimize }; }; -export default connect(mapStateToProps)(DisplayAllComponent); +const mapDispatchToProps = dispatch => { + return { + updateStore: (variableName, variableValue) => dispatch({ type: UPDATE_VARIABLE, variableName: variableName, variableValue: variableValue }) + }; +}; + +export default connect(mapStateToProps,mapDispatchToProps)(DisplayAllComponent); diff --git a/src/components/functions.js b/src/components/functions.js index b5d22e5..3bccfd8 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -14,6 +14,10 @@ export const optimizeSvg = (dataUrl, svgo) => { .catch(err => console.log(err)); }; +export const immutablePush=(arr, newEntry)=>{ + return [].concat(arr, newEntry) +} + export const changeObj = (value, svgoObjectPlugins) => { let newSvgoObject = svgoObjectPlugins.filter(option => { if (option[value] !== null && option[value] !== undefined) { diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index f4b92d4..de34543 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -28,7 +28,7 @@ class SvgSetting extends Component { let indexOf = this.props.svgOptions.findIndex(this.props.value); if (indexOf < 0) { - this.props.svgOptions.push(this.props.value); + this.props.svgOptions = this.props.svgOptions.concat(this.props.value); } else { this.props.svgOptions = this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)) } From bf4c709b3ec1d492ddc1749ad28dcccf33bcab12 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 13 Nov 2019 09:40:02 +0200 Subject: [PATCH 64/71] fixed downloadNaming, if-else that were the same,asigning to a prop --- src/components/displayAllComponent.js | 2 +- src/components/displaySvg/finalSvgDisplay.js | 4 ++-- src/components/svgSetting/svgSetting.js | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 717e98f..cc26b04 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -37,7 +37,7 @@ class DisplayAllComponent extends Component { name: setting.name, optimisedSvg: await optimizeSvg( setting.dataurl, - this.props.svgObject.plugins + null ) }; } diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index d36fa82..ea8a7fc 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -21,7 +21,7 @@ class FinalSvgDisplay extends Component { }; } - downloadNewSvgFiles = () => { + downloadOptimizedSvgs = () => { let svgElementList = document.getElementsByTagName("svg"); @@ -103,7 +103,7 @@ class FinalSvgDisplay extends Component { <div align="center"> <button className="download-button" - onClick={this.downloadNewSvgFiles} + onClick={this.downloadOptimizedSvgs} > Download edited svg </button> diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index de34543..64a649b 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -30,7 +30,8 @@ class SvgSetting extends Component { if (indexOf < 0) { this.props.svgOptions = this.props.svgOptions.concat(this.props.value); } else { - this.props.svgOptions = this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)) + this.props.updateStore("svgOptions",this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)); + ) } }; From 385df7b193b464f71ee1bcea4b7752c52ad16609 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 13 Nov 2019 10:18:19 +0200 Subject: [PATCH 65/71] spread have been used, no more overriding --- src/components/checkBoxSelection/checkBoxSelection.js | 4 ++-- src/components/svgSetting/svgSetting.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index b0a02f4..f020c78 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -18,14 +18,14 @@ class CheckBoxSelection extends Component { convertSvgToDataUrl = file => { let reader = new FileReader(); - const svgSettings = this.props.svgSettingList ?this.props.svgSettingList : []; + const svgSettings = [...this.props.svgSettingList]; reader.onload = result => { svgSettings.push({ name: file.name, dataurl: result.target.result }); - this.props.updateStore("svgSettingList",svgSettings); + this.props.updateStore("svgSettingList",svgSettings) }; if (file) { diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 64a649b..1e07ad1 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -28,9 +28,9 @@ class SvgSetting extends Component { let indexOf = this.props.svgOptions.findIndex(this.props.value); if (indexOf < 0) { - this.props.svgOptions = this.props.svgOptions.concat(this.props.value); + this.props.updateStore("svgOptions",this.props.svgOptions.concat(this.props.value)) } else { - this.props.updateStore("svgOptions",this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)); + this.props.updateStore("svgOptions",this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)) ) } }; From 68030bcf1695a6b881af76cc2372f2767328e80e Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 13 Nov 2019 10:30:16 +0200 Subject: [PATCH 66/71] replaced filter with map --- src/components/functions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/functions.js b/src/components/functions.js index 3bccfd8..e621886 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -19,7 +19,7 @@ export const immutablePush=(arr, newEntry)=>{ } export const changeObj = (value, svgoObjectPlugins) => { - let newSvgoObject = svgoObjectPlugins.filter(option => { + let newSvgoObject = svgoObjectPlugins.map(option => { if (option[value] !== null && option[value] !== undefined) { option[value] = true; } From 0f7547858572de3147964cf0c8f6827465c786fb Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Wed, 13 Nov 2019 11:51:47 +0200 Subject: [PATCH 67/71] shortened the optimisation function --- src/components/displayAllComponent.js | 24 ++++++++++-------------- src/components/functions.js | 1 - 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index cc26b04..5816d30 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -22,31 +22,27 @@ class DisplayAllComponent extends Component { changeObj(option, this.props.svgObject.plugins); } for (var setting of this.props.svgSettingList) { - if (this.props.svgOptions.length > 0) { - originalAndOptimised = { - originalSvg: setting.dataurl, - name: setting.name, - optimisedSvg: await optimizeSvg( - setting.dataurl, - this.props.svgObject.plugins - ) - }; - } else { + originalAndOptimised = { + originalSvg: setting.dataurl, + name: setting.name, + optimisedSvg: await optimizeSvg( + setting.dataurl, + this.props.svgObject.plugins + ) + }; + let SvgPlugins = this.props.svgOptions.length > 0 ? this.props.svgObject.plugins : null originalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, optimisedSvg: await optimizeSvg( setting.dataurl, - null + SvgPlugins ) }; - } tempOptimisationArr.push(originalAndOptimised); - } this.props.updateStore("displayOptimize",tempOptimisationArr); this.setState({ redirect: true }); - }; render() { diff --git a/src/components/functions.js b/src/components/functions.js index e621886..6aba296 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -23,7 +23,6 @@ export const changeObj = (value, svgoObjectPlugins) => { if (option[value] !== null && option[value] !== undefined) { option[value] = true; } - return true; }); return newSvgoObject; }; From e391b4142b517f07a4df011e344651f00bcef213 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 14 Nov 2019 13:53:32 +0200 Subject: [PATCH 68/71] cleared console warnings --- .../checkBoxSelection/checkBoxSelection.js | 2 +- src/components/chooseFolder/chooseFolder.js | 100 +++++++++-------- src/components/displayAllComponent.js | 10 +- src/components/displaySvg/finalSvgDisplay.js | 104 +++++++++--------- src/components/functions.js | 49 ++++++--- src/components/svgSetting/svgSetting.js | 2 +- .../svgSetting/svgSettingOptions.js | 35 +++--- 7 files changed, 164 insertions(+), 138 deletions(-) diff --git a/src/components/checkBoxSelection/checkBoxSelection.js b/src/components/checkBoxSelection/checkBoxSelection.js index f020c78..97ace28 100644 --- a/src/components/checkBoxSelection/checkBoxSelection.js +++ b/src/components/checkBoxSelection/checkBoxSelection.js @@ -69,7 +69,7 @@ class CheckBoxSelection extends Component { } CheckBoxSelection.propTypes = { - svgSettingList: PropTypes.object, + svgSettingList: PropTypes.array, filename: PropTypes.string }; diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index b02b3e9..d4c2c63 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -1,56 +1,62 @@ -import React, { Component } from 'react'; -import './../checkBoxSelection/checkBoxSelection.scss'; -import {optimizeSvg} from '../functions'; -import CheckBoxSelection from '../checkBoxSelection/checkBoxSelection'; +import React, { Component } from "react"; +import "./../checkBoxSelection/checkBoxSelection.scss"; +import { optimizeSvg } from "../functions"; +import CheckBoxSelection from "../checkBoxSelection/checkBoxSelection"; class ChooseFolder extends Component { - constructor(props) { - super(props); - this.state = { - path: [], - displayMenu: false, - originalSvgDataUrl:'', - optimizedDataUrl:'' - }; - } + constructor(props) { + super(props); + this.state = { + path: [], + value: "", + displayMenu: false, + originalSvgDataUrl: "", + optimizedDataUrl: "" + }; + } onChangeHandler = event => { - this.setState({path:event.target.files}); - } + this.setState({ path: event.target.files, value: event.target.value }); + }; + + convertSvgToDataUrl = file => { + let reader = new FileReader(); + reader.onload = result => { + this.setState({ originalSvgDataUrl: result.target.result }); + }; + if (file) { + reader.readAsDataURL(file); + } + }; - convertSvgToDataUrl=(file)=>{ - let reader = new FileReader(); - reader.onload = (result)=>{ - this.setState({originalSvgDataUrl:result.target.result}); - }; - if (file) { - reader.readAsDataURL(file); - } - } + optimizeSvgDataUrl = async dataUrl => { + this.setState({ optimizedDataUrl: await optimizeSvg(dataUrl) }); + }; - optimizeSvgDataUrl= async (dataUrl) =>{ - this.setState({optimizedDataUrl:await optimizeSvg(dataUrl)}); - } + render() { + const listOfFileNames = []; + for (let key of this.state.path) { + listOfFileNames.push( + <CheckBoxSelection key={key.name} filename={key.name} file={key} /> + ); + } - render() { - const listOfFileNames = []; - for(let key of this.state.path) { - listOfFileNames.push(<CheckBoxSelection key={key.name} filename={key.name} file={key} />); - } + return ( + <div className="main"> + <div className="file"> + <label> + <input + type="file" + webkitdirectory="" + value={this.state.value} + onChange={e => this.onChangeHandler(e)} + /> + </label> + </div> - return ( - <div className='main'> - <div className='file'> - <label> - <input type='file' webkitdirectory='' onChange={(e)=>this.onChangeHandler(e)} /> - </label> - </div> - - <div > - {listOfFileNames} - </div> - </div> - ); - } + <div>{listOfFileNames}</div> + </div> + ); + } } -export default ChooseFolder; \ No newline at end of file +export default ChooseFolder; diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 5816d30..73e51e3 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -30,7 +30,8 @@ class DisplayAllComponent extends Component { this.props.svgObject.plugins ) }; - let SvgPlugins = this.props.svgOptions.length > 0 ? this.props.svgObject.plugins : null + let SvgPlugins = this.props.svgOptions.length > 0 ? this.props.svgObject.plugins : null; + originalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, @@ -40,6 +41,7 @@ class DisplayAllComponent extends Component { ) }; tempOptimisationArr.push(originalAndOptimised); + } this.props.updateStore("displayOptimize",tempOptimisationArr); this.setState({ redirect: true }); @@ -68,10 +70,10 @@ class DisplayAllComponent extends Component { DisplayAllComponent.propTypes = { addToStore: PropTypes.func, updateStore: PropTypes.func, - svgSettingList: PropTypes.object, - svgOptions: PropTypes.object, + svgSettingList: PropTypes.array, + svgOptions: PropTypes.array, svgObject: PropTypes.object, - displayOptimize: PropTypes.object + displayOptimize: PropTypes.array }; const mapStateToProps = state => { diff --git a/src/components/displaySvg/finalSvgDisplay.js b/src/components/displaySvg/finalSvgDisplay.js index ea8a7fc..04f47c0 100644 --- a/src/components/displaySvg/finalSvgDisplay.js +++ b/src/components/displaySvg/finalSvgDisplay.js @@ -8,7 +8,11 @@ import { UPDATE_VARIABLE, DELETE_VARIABLE } from "../../store/actionTypes"; -import { wrapElements, updateSvgElements } from "../functions"; +import { + wrapElements, + updateSvgElements, + changeSvgColourById +} from "../functions"; class FinalSvgDisplay extends Component { constructor(props) { @@ -22,48 +26,51 @@ class FinalSvgDisplay extends Component { } downloadOptimizedSvgs = () => { - let svgElementList = document.getElementsByTagName("svg"); //get svg source. let serializer = new XMLSerializer(); - for(let svgDataIndex in svgElementList){ - //get svg source. - let source = serializer.serializeToString(svgElementList[svgDataIndex]); - source = source.replace("<a class=\"svg-elem-wrapper\" id=\"id-1\">","").replace("</a>","").replace("onclick=\"changeSvgColourById(this.id);\"",""); - - //add name spaces. - if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) { - source = source.replace( - /^<svg/, - '<svg xmlns="http://www.w3.org/2000/svg"' - ); - - } - if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { - source = source.replace( - /^<svg/, - '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' - ); - } + for (let svgDataIndex in svgElementList) { + //get svg source. + let source = serializer.serializeToString(svgElementList[svgDataIndex]); + source = source + .replace('<a class="svg-elem-wrapper" id="id-1">', "") + .replace("</a>", "") + .replace('onclick="changeSvgColourById(this.id);"', ""); + + //add name spaces. + if ( + !source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/) + ) { + source = source.replace( + /^<svg/, + '<svg xmlns="http://www.w3.org/2000/svg"' + ); + } + if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) { + source = source.replace( + /^<svg/, + '<svg xmlns:xlink="http://www.w3.org/1999/xlink"' + ); + } - //add xml declaration - source = '<?xml version="1.0" standalone="no"?>\r\n' + source; + //add xml declaration + source = '<?xml version="1.0" standalone="no"?>\r\n' + source; - //convert svg source to URI data scheme. - let url = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); - //set url value to a element's href attribute. - let dl = document.createElement("a"); - document.body.appendChild(dl); // This line makes it work in Firefox. - dl.setAttribute("href", url); - dl.setAttribute("download", "test.svg"); - dl.click(); + //convert svg source to URI data scheme. + let url = + "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); + //set url value to a element's href attribute. + let linkToWrapSvgElements = document.createElement("a"); + document.body.appendChild(linkToWrapSvgElements); // This line makes it work in Firefox. + linkToWrapSvgElements.setAttribute("href", url); + linkToWrapSvgElements.setAttribute("download", "test.svg"); + linkToWrapSvgElements.click(); - if(svgElementList.length-1 == svgDataIndex){ + if (svgElementList.length - 1 == svgDataIndex) { break; } } - }; componentDidMount = () => { @@ -73,7 +80,6 @@ class FinalSvgDisplay extends Component { wrapElements(SVG_TAG_NAMES, array, pathArrayLocal, 7, elementIds); let functionStr = 'function changeSvgColourById(elemId,white){ let arrayOfClickedIds = [];if(!arrayOfClickedIds.includes(elemId) || arrayOfClickedIds.length == 0 ){ arrayOfClickedIds.push(elemId);document.getElementById(elemId).style.fill = "brown";}else{arrayOfClickedIds.push(elemId);document.getElementById(elemId).removeAttribute("style");document.getElementById(elemId).style.fill = prevColour;}}'; - const script = document.createElement("script"); let textNodeToChangeAvgColour = document.createTextNode(functionStr); script.setAttribute("class", "fucntionality-script"); @@ -85,7 +91,7 @@ class FinalSvgDisplay extends Component { pathArrayState: pathArrayLocal, storePathsIds: elementIds }); - } + }; render() { const listOfFileNames = []; @@ -95,24 +101,25 @@ class FinalSvgDisplay extends Component { this.state.wrappedPathsElement, this.state.pathArrayState ); + return ( <div> - {listOfFileNames.length > 0? ( + {listOfFileNames.length > 0 ? ( <div> <div className="display-original-optimised">{listOfFileNames}</div> <div align="center"> - <button - className="download-button" - onClick={this.downloadOptimizedSvgs} - > - Download edited svg - </button> + <button + className="download-button" + onClick={this.downloadOptimizedSvgs} + > + Download edited svg + </button> </div> </div> ) : ( <div className="position-loader" align="center"> - <div className="loader-text">loading svg .....</div> - <div className="loader"></div> + <div className="loader-text">loading svg .....</div> + <div className="loader"></div> </div> )} </div> @@ -121,12 +128,12 @@ class FinalSvgDisplay extends Component { } FinalSvgDisplay.propTypes = { - displayOptimize : PropTypes.object, + displayOptimize: PropTypes.array }; const mapStateToProps = state => { const displayOptimize = state.displayOptimize; - return {displayOptimize}; + return { displayOptimize }; }; const mapDispatchToProps = dispatch => { @@ -148,7 +155,4 @@ const mapDispatchToProps = dispatch => { }; }; -export default connect( - mapStateToProps, - mapDispatchToProps -)(FinalSvgDisplay); \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(FinalSvgDisplay); diff --git a/src/components/functions.js b/src/components/functions.js index 6aba296..2419e54 100644 --- a/src/components/functions.js +++ b/src/components/functions.js @@ -14,10 +14,6 @@ export const optimizeSvg = (dataUrl, svgo) => { .catch(err => console.log(err)); }; -export const immutablePush=(arr, newEntry)=>{ - return [].concat(arr, newEntry) -} - export const changeObj = (value, svgoObjectPlugins) => { let newSvgoObject = svgoObjectPlugins.map(option => { if (option[value] !== null && option[value] !== undefined) { @@ -79,8 +75,8 @@ export const wrapElements = ( ); elementWrapper.firstChild.setAttribute( "onclick", - "changeSvgColourById(this.id);" - ); // for FF + "changeSvgColourById(this.id)" + ); array.push(elementWrapper); } @@ -94,7 +90,9 @@ export const updateSvgElements = ( drawingComponetState ) => { for (let key in optimisedArray) { - let finalStringElementWrappedWithLink = base64.decode(optimisedArray[key].optimisedSvg); + let finalStringElementWrappedWithLink = base64.decode( + optimisedArray[key].optimisedSvg + ); if (wrappedPathsElement.length > 0) { for (let index = 0; index < wrappedPathsElement.length; index++) { let stringToWithLinkToWrap = new XMLSerializer() @@ -112,37 +110,58 @@ export const updateSvgElements = ( StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 5) + " " + - StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 6, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<elli") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 8) + " " + - StringToBeWrappedByLink.substring(8, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 8, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<rect") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 5) + " " + - StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 6, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<circ") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 7) + " " + - StringToBeWrappedByLink.substring(8, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 8, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<poly") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 8) + " " + - StringToBeWrappedByLink.substring(9, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 9, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<line") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 8) + " " + - StringToBeWrappedByLink.substring(9, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 9, + StringToBeWrappedByLink.length + ).trim(); } else if (StringToBeWrappedByLink.substring(0, 5) == "<text") { StringToBeWrappedByLink = StringToBeWrappedByLink.substring(0, 5) + " " + - StringToBeWrappedByLink.substring(6, StringToBeWrappedByLink.length).trim(); + StringToBeWrappedByLink.substring( + 6, + StringToBeWrappedByLink.length + ).trim(); } finalStringElementWrappedWithLink = finalStringElementWrappedWithLink @@ -163,4 +182,4 @@ export const updateSvgElements = ( </div> ); } -}; \ No newline at end of file +}; diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index 1e07ad1..c1779a4 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -46,7 +46,7 @@ class SvgSetting extends Component { } SvgSetting.propTypes = { - svgOptions: PropTypes.object, + svgOptions: PropTypes.array, svgObject: PropTypes.object, option: PropTypes.string, isSelected: PropTypes.bool diff --git a/src/components/svgSetting/svgSettingOptions.js b/src/components/svgSetting/svgSettingOptions.js index f34766c..e318e81 100644 --- a/src/components/svgSetting/svgSettingOptions.js +++ b/src/components/svgSetting/svgSettingOptions.js @@ -12,30 +12,25 @@ class SvgSettingOptions extends Component { } render() { - for (var key in CardLayout) { - if (CardLayout[key].type === "checkbox") { - this.state.settingOptionList.push( - <SvgSetting - key={key} - value={CardLayout[key].value} - option={CardLayout[key].text} - /> - ); - } else if (CardLayout[key].type === "slider") { - this.state.settingOptionList.push( - <div className="slider"> - <Slider key={key} option={CardLayout[key].text} /> - </div> - ); - } - } - + return ( <div className="card-settings"> <div> - <label> {"SVG settings"} </label> + <label>{"SVG settings"}</label> </div> - <div>{this.state.settingOptionList}</div> + {CardLayout.map(function(option,key){ + if(option.type === "checkbox"){ + return (<SvgSetting + key={key} + value={option.value} + option={option.text} + />) + } else if (option.type === "slider"){ + return (<div className="slider"> + <Slider key={key} option={option.text} /> + </div>) + } + })} </div> ); } From dcd2cca4a16799d93c61f7c82be7f6d742e36149 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 14 Nov 2019 14:26:45 +0200 Subject: [PATCH 69/71] made the code more readable - by using spread --- src/components/svgSetting/svgSetting.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/svgSetting/svgSetting.js b/src/components/svgSetting/svgSetting.js index c1779a4..6d81ea9 100644 --- a/src/components/svgSetting/svgSetting.js +++ b/src/components/svgSetting/svgSetting.js @@ -16,7 +16,7 @@ class SvgSetting extends Component { isClicked: this.props.isSelected, arr: [], svgoObject: { ...Svgo } - }; + }; } handleSettingsClick = () => { @@ -24,20 +24,19 @@ class SvgSetting extends Component { isClicked: !this.state.isClicked }); - let indexOf = this.props.svgOptions.findIndex(this.props.value); - if (indexOf < 0) { - this.props.updateStore("svgOptions",this.props.svgOptions.concat(this.props.value)) - } else { - this.props.updateStore("svgOptions",this.props.svgOptions.slice(0,indexOf).concat(this.props.svgOptions.slice(indexOf + 1)) - ) - } + let { svgOptions = [] } = this.props; + let updatedArr = + indexOf < 0 + ? [...svgOptions, this.props.value] + : [...svgOptions.slice(0, indexOf), ...svgOptions.slice(indexOf + 1)]; + this.props.updateStore("svgOptions", updatedArr); }; render() { return ( - <div onClick={()=>this.handleSettingsClick()}> + <div onClick={() => this.handleSettingsClick()}> <input type="checkbox" checked={this.state.isClicked} /> <label className="checkbox-label-svg">{this.props.option}</label> </div> @@ -76,7 +75,4 @@ const mapDispatchToProps = dispatch => { }; }; -export default connect( - mapStateToProps, - mapDispatchToProps -)(SvgSetting); +export default connect(mapStateToProps, mapDispatchToProps)(SvgSetting); From 62ea40c51c2f61772836005e1f485ae7f04dc294 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 14 Nov 2019 14:40:09 +0200 Subject: [PATCH 70/71] shortened the code for readabilty by spread --- src/components/displayAllComponent.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index 73e51e3..f135332 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -22,16 +22,7 @@ class DisplayAllComponent extends Component { changeObj(option, this.props.svgObject.plugins); } for (var setting of this.props.svgSettingList) { - originalAndOptimised = { - originalSvg: setting.dataurl, - name: setting.name, - optimisedSvg: await optimizeSvg( - setting.dataurl, - this.props.svgObject.plugins - ) - }; let SvgPlugins = this.props.svgOptions.length > 0 ? this.props.svgObject.plugins : null; - originalAndOptimised = { originalSvg: setting.dataurl, name: setting.name, From 62d54857f9feddb9a0c9dea80febf23f4331bcc0 Mon Sep 17 00:00:00 2001 From: "sjumba@retrorabbit.co.za" <sjumba@retrorabbit.co.za> Date: Thu, 14 Nov 2019 15:32:13 +0200 Subject: [PATCH 71/71] fixed display optimised that was an unkown value --- src/components/chooseFolder/chooseFolder.js | 4 +--- src/components/displayAllComponent.js | 6 ++---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/chooseFolder/chooseFolder.js b/src/components/chooseFolder/chooseFolder.js index d4c2c63..0956524 100644 --- a/src/components/chooseFolder/chooseFolder.js +++ b/src/components/chooseFolder/chooseFolder.js @@ -8,7 +8,6 @@ class ChooseFolder extends Component { super(props); this.state = { path: [], - value: "", displayMenu: false, originalSvgDataUrl: "", optimizedDataUrl: "" @@ -16,7 +15,7 @@ class ChooseFolder extends Component { } onChangeHandler = event => { - this.setState({ path: event.target.files, value: event.target.value }); + this.setState({ path: event.target.files}); }; convertSvgToDataUrl = file => { @@ -48,7 +47,6 @@ class ChooseFolder extends Component { <input type="file" webkitdirectory="" - value={this.state.value} onChange={e => this.onChangeHandler(e)} /> </label> diff --git a/src/components/displayAllComponent.js b/src/components/displayAllComponent.js index f135332..df66c00 100644 --- a/src/components/displayAllComponent.js +++ b/src/components/displayAllComponent.js @@ -17,11 +17,11 @@ class DisplayAllComponent extends Component { } getOptimizeSvg = async () => { let originalAndOptimised = {}; - let tempOptimisationArr = []; for (var option of this.props.svgOptions) { changeObj(option, this.props.svgObject.plugins); } for (var setting of this.props.svgSettingList) { + let { displayOptimize=[] } = this.props; let SvgPlugins = this.props.svgOptions.length > 0 ? this.props.svgObject.plugins : null; originalAndOptimised = { originalSvg: setting.dataurl, @@ -31,10 +31,8 @@ class DisplayAllComponent extends Component { SvgPlugins ) }; - tempOptimisationArr.push(originalAndOptimised); - + this.props.updateStore("displayOptimize",[...displayOptimize,originalAndOptimised]); } - this.props.updateStore("displayOptimize",tempOptimisationArr); this.setState({ redirect: true }); };