moveable
moveable copied to clipboard
Error "Cannot read properties of null (reading `removeChild`)" on moveable resize
Environments
- Framework name: Vue
- Framework version: 2.6
- Moveable Component version: 0.30.0
- Testable Address(optional):
Description
Hello!
I am trying to debug an error that has been triggered quite a lot from our user whenever the user is trying to resize the moveable handler. Based on the sentry log, it came from moveable. Here's the log:
The weird thing here is, I cannot reproduce it simply on my own. I am not sure what went wrong, but from the debugging, it seems like the error possibly comes from the _unmount
function triggered on removing the custom able element.
I have a custom able element setup which is basically similar to dimensionLabel
setup. The only thing I missed to do was to name the element with class starting with prefix moveable-
. I am wondering why the prefix is required, wish to know more about it 🙏
As I mentioned that I can't reproduce this on my own, so the sentry screenshot above is what I can only provide, no code sample available 🙏 Hope to hear back from you. Thanks!
@chenxeed
May I know how to use it? There seems to be a process of creating an instance of moveable and dragging it. Can i check the code?
Sure, here's the piece of the code. Note that this is not the exact code, but the gist of it to toggle the dimension-label. The main idea is, to only show the dimension-label when user is resizing the item.
// dimension-label.ts
import { MoveableManagerInterface, Renderer } from 'react-moveable/declaration/types'
export default {
// name is encourage to be written as camel case
// as it will be used as moveable option property
name: 'dimensionLabel',
props: {},
events: {},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
render (moveable: MoveableManagerInterface<any, any>, React: Renderer) {
const rect = moveable.getRect()
const label = `${Math.round(rect.offsetWidth)} \u00D7 ${Math.round(rect.offsetHeight)}`
return React.createElement('div', {
className: 'handler-dimension-label',
key: 'handler-dimension-label',
style: {
position: 'absolute',
left: `${rect.width / 2}px`,
top: `${rect.height + 12}px`,
background: 'var(--secondary)',
borderRadius: '4px',
padding: '4px',
color: 'white',
fontSize: '11px',
whiteSpace: 'nowrap',
fontWeight: 'bold',
transform: 'translate(-50%, 0px)'
}
}, [label])
}
}
// file to initiate the moveable
const moveableConfig = {
// Config
edge: false,
target: [],
rootContainer,
keepRatio: true,
origin: true,
className: `my-moveable`,
throttleRotate: 1,
passDragArea: true,
props: {
dimensionLabel: false
},
// Ables
draggable: true,
resizable: true,
rotatable: true,
scrollable: true,
snappable: true,
ables: [DimensionLabel],
// Scrolling
scrollContainer: rootContainer || undefined,
// Snapping
// Ref: https://github.com/daybrush/moveable/releases/tag/0.27.0
snapDirections: { center: true, middle: true },
elementSnapDirections: { center: true, middle: true },
snapGap: true,
snapDistFormat: () => '',
snapThreshold: 2
}
const moveable = new Moveable(container, moveableConfig)
moveable.on('resizeStart', (event) => {
const { inputEvent: userEvent, setMin, setMax } = event
// show size label
event.currentTarget.setState({
props: {
dimensionLabel: true
}
})
})
.on('resizeEnd', (event) => {
// hide size label
event.currentTarget.setState({
props: {
dimensionLabel: false
}
})
})
@chenxeed
-
lit-moveable
0.12.1 -
moveable
0.35.1 -
preact-moveable
0.37.1 -
react-compat-moveable
0.23.1 -
react-moveable
0.38.1 -
svelte-moveable
0.27.1 -
vue-moveable
2.0.0-beta.33 -
vue3-moveable
0.10.1 -
ngx-moveable
0.32.1
moveable's new version is released.
I'm not sure, but try updating the version? I recently modified react-simple-compat
.