diff --git a/README.md b/README.md index 41422b8..87540cb 100644 --- a/README.md +++ b/README.md @@ -128,6 +128,10 @@ The only difference is that Xiaomi supports the room cleaning. ### **WORK IN PROGRESS** --> ## Changelog +### **WORK IN PROGRESS** +* (bluefox) Corrected blinds dialog +* (bluefox) Added the invert option for blinds + ### 1.4.8 (2024-07-12) * (bluefox) Small changes for SweetHome3D diff --git a/package.json b/package.json index f4d7c10..95f1442 100644 --- a/package.json +++ b/package.json @@ -19,16 +19,16 @@ "vis-2-widgets-material" ], "devDependencies": { - "@alcalzone/release-script": "^3.7.3", + "@alcalzone/release-script": "^3.8.0", "@alcalzone/release-script-plugin-iobroker": "^3.7.2", "@alcalzone/release-script-plugin-license": "^3.7.0", - "@iobroker/vis-2-widgets-react-dev": "^3.0.3", + "@iobroker/vis-2-widgets-react-dev": "^3.0.7", "@types/gulp": "^4.0.17", "@types/mocha": "^10.0.7", - "@types/node": "^20.14.11", + "@types/node": "^22.1.0", "eslint": "^8.57.0", "gulp": "^4.0.2", - "mocha": "^10.6.0", + "mocha": "^10.7.0", "@iobroker/vis-2-widgets-testing": "^1.0.4" }, "files": [ diff --git a/src-widgets/package.json b/src-widgets/package.json index 1517dda..2a279eb 100644 --- a/src-widgets/package.json +++ b/src-widgets/package.json @@ -1,16 +1,16 @@ { "name": "iobroker.vis-2-widgets-material", "private": true, - "version": "2.0.1", + "version": "3.0.7", "dependencies": { - "@adobe/react-spectrum": "^3.35.1", + "@adobe/react-spectrum": "^3.36.1", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@craco/craco": "^7.1.0", - "@iobroker/adapter-react-v5": "^6.1.2", - "@iobroker/vis-2-widgets-react-dev": "^3.0.3", - "@mui/icons-material": "^5.16.4", - "@mui/material": "^5.16.4", - "@react-spectrum/color": "^3.0.0-beta.34", + "@iobroker/adapter-react-v5": "^6.1.6", + "@iobroker/vis-2-widgets-react-dev": "^3.0.7", + "@mui/icons-material": "^5.16.6", + "@mui/material": "^5.16.6", + "@react-spectrum/color": "^3.0.0-rc.1", "@uiw/react-color": "^2.3.0", "color": "^4.2.3", "colorthief": "^2.4.0", @@ -61,4 +61,4 @@ "not ie <= 11", "not op_mini all" ] -} +} \ No newline at end of file diff --git a/src-widgets/src/App.jsx b/src-widgets/src/App.jsx deleted file mode 100644 index be626b0..0000000 --- a/src-widgets/src/App.jsx +++ /dev/null @@ -1,449 +0,0 @@ -import React from 'react'; - -import WidgetDemoApp from '@iobroker/vis-2-widgets-react-dev/widgetDemoApp'; -import { I18n } from '@iobroker/adapter-react-v5'; - -import { Box, Checkbox } from '@mui/material'; -import Thermostat from './Thermostat'; -import Actual from './Actual'; -import Switches from './Switches'; -// import Static from './Static'; -import SimpleState from './SimpleState'; -import Clock from './Clock'; -import ViewInWidget from './ViewInWidget'; -import translations from './translations'; -import Camera from './Camera'; -import Map from './Map'; -import Player from './Player'; -import Security from './Security'; -import Html from './Html'; -import Blinds from './Blinds'; -import ThemeSwitcher from './ThemeSwitcher'; -import WasherDryer from './WasherDryer'; -import Wizard from './Wizard'; -import RGBLight from './RGBLight'; -import Lock from './Lock'; -import Vacuum from './Vacuum'; - -const styles = { - app: theme => ({ - backgroundColor: theme?.palette?.background.default, - color: theme?.palette?.text.primary, - height: '100%', - width: '100%', - overflow: 'auto', - display: 'flex', - }), -}; - -class App extends WidgetDemoApp { - constructor(props) { - super(props); - - this.state.disabled = JSON.parse(window.localStorage.getItem('disabled')) || {}; - - // init translations - I18n.extendTranslations(translations); - - this.socket.registerConnectionHandler(this.onConnectionChanged); - } - - onConnectionChanged = isConnected => { - if (isConnected) { - this.socket.getSystemConfig() - .then(systemConfig => this.setState({ systemConfig })); - } - }; - - renderWidget() { - const widgets = { - wizard: Wizard.getWidgetInfo().customPalette( - { - socket: this.socket, - project: { - test: { - widgets: {}, - }, - }, - changeProject: project => { - console.log(project); - }, - selectedView: 'test', - }, - ), - camera: , - map: , - player: , - security: , - Html: Hallo, - clock: , - themeSwitcher: , - // static: , - simpleState: , - switches: , - thermostat: , - actual: , - viewInWidget: , - blinds: , - washerDryer: , - rgblight: , - lock: , - vacuum: , - - }; - - return -
- {Object.keys(widgets).map(key =>
- { - const disabled = JSON.parse(JSON.stringify(this.state.disabled)); - disabled[key] = !e.target.checked; - window.localStorage.setItem('disabled', JSON.stringify(disabled)); - this.setState({ disabled }); - }} - /> - {key} -
)} -
- {Object.keys(widgets).map(key => (this.state.disabled[key] ? null : widgets[key]))} - ; - } -} - -export default App; diff --git a/src-widgets/src/Components/BlindsBase.js b/src-widgets/src/Components/BlindsBase.js index 1863081..fa7a0ce 100644 --- a/src-widgets/src/Components/BlindsBase.js +++ b/src-widgets/src/Components/BlindsBase.js @@ -35,8 +35,8 @@ const styles = { }, blindBlind3: { position: 'relative', - width: '100%;', - height: '100%;', + width: '100%', + height: '100%', boxSizing: 'border-box', background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 51, 135, 0.83) 100%)', }, @@ -329,6 +329,7 @@ class BlindsBase extends Generic { } divHandle =
{ e.preventDefault(); @@ -355,9 +358,10 @@ class BlindsBase extends Generic { this.setState({ showBlindsDialog: index, showBlindsDialogIndexOfButton: options.indexOfButton }); } : undefined} > -
-
+
+
1000) { + if (nextProps.startValue !== state.value && !DialogBlinds.mouseDown && Date.now() - state.lastControl > 1000) { newState = newState || {}; newState.value = nextProps.startValue; } @@ -123,6 +124,7 @@ class DialogBlinds extends Component { value = 0; } this.setState({ value }); + if (Date.now() - this.state.lastControl > 200 && this.type !== DialogBlinds.types.blinds) { this.setState({ lastControl: Date.now() }, () => this.props.onValueChange && this.props.onValueChange(value)); @@ -130,7 +132,7 @@ class DialogBlinds extends Component { } onMouseMove = e => { - if (mouseDown) { + if (DialogBlinds.mouseDown) { e.preventDefault(); e.stopPropagation(); this.eventToValue(e); @@ -141,8 +143,6 @@ class DialogBlinds extends Component { e.preventDefault(); e.stopPropagation(); - mouseDown = true; - if (!this.height) { if (this.refSlider.current) { this.height = this.refSlider.current.offsetHeight; @@ -152,25 +152,25 @@ class DialogBlinds extends Component { } } + DialogBlinds.mouseDown = true; this.eventToValue(e); - - document.getElementById('dimmerId').addEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId').addEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.addEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.getElementById('dimmerId').addEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId').addEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); + window.document.addEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); + window.document.addEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); + window.document.addEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); + window.document.addEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); }; onMouseUp = e => { e.preventDefault(); e.stopPropagation(); - mouseDown = false; console.log('Stopped'); - document.getElementById('dimmerId')?.removeEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); + if (DialogBlinds.mouseDown) { + DialogBlinds.mouseDown = false; + window.document.removeEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); + window.document.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); + window.document.removeEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); + window.document.removeEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); + } this.setState({ lastControl: Date.now() }, () => { console.log(this.state.value); @@ -180,11 +180,13 @@ class DialogBlinds extends Component { componentWillUnmount() { // document.getElementById('root').className = ``; - document.getElementById('dimmerId')?.removeEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); - document.getElementById('dimmerId')?.removeEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); + if (DialogBlinds.mouseDown) { + DialogBlinds.mouseDown = false; + window.document.removeEventListener('mousemove', this.onMouseMove, { passive: false, capture: true }); + window.document.removeEventListener('mouseup', this.onMouseUp, { passive: false, capture: true }); + window.document.removeEventListener('touchmove', this.onMouseMove, { passive: false, capture: true }); + window.document.removeEventListener('touchend', this.onMouseUp, { passive: false, capture: true }); + } } getTopButtonName() { @@ -371,21 +373,21 @@ class DialogBlinds extends Component { handlerStyle.top = '0.4em'; } - return
-
+ return
+
e.stopPropagation()} style={styles.sliderStyle} > -
-
+
+