Uncaught TypeError: Cannot read property 'style' of null
lauriliivamagi opened this issue · comments
[Enter steps to reproduce:]
- Ctrl + o (open file) with the existing sequence diagram (test.sequence).
- Error is shown
Atom: 1.19.0-beta3 x64
Electron: 1.6.9
OS: Ubuntu 17.04
Thrown From: diagrams package 0.26.4
Stack Trace
Uncaught TypeError: Cannot read property 'style' of null
At /home/larr/.atom/packages/diagrams/lib/diagrams.js:95
TypeError: Cannot read property 'style' of null
at checkForResize (/packages/diagrams/lib/diagrams.js:95:76)
Commands
-7:26.9.0 editor:consolidate-selections (input.hidden-input)
-7:26.9.0 core:cancel (input.hidden-input)
-7:25.3.0 intentions:highlight (input.hidden-input)
-7:24.9.0 project-find:show (input.hidden-input)
-7:24.1.0 core:confirm (input.hidden-input)
-0:45.7.0 editor:consolidate-selections (input.hidden-input)
-0:45.7.0 core:cancel (input.hidden-input)
-0:41.9.0 intentions:highlight (input.hidden-input)
-0:41.7.0 fuzzy-finder:toggle-file-finder (input.hidden-input)
-0:40.8.0 editor:consolidate-selections (input.hidden-input)
-0:40.8.0 core:cancel (input.hidden-input)
-0:40.2.0 intentions:highlight (input.hidden-input)
-0:40 application:new-file (input.hidden-input)
-0:37.4.0 core:save-as (input.hidden-input)
-0:12.9.0 intentions:highlight (input.hidden-input)
-0:12.6.0 application:open-file (input.hidden-input)
Non-Core Packages
atom-beautify 0.30.3
atom-easy-jsdoc 4.12.1
atom-ternjs 0.18.3
atom-typescript 11.0.6
autoclose-html 0.23.0
autocomplete-java 1.2.7
autocomplete-xml 0.9.4
autoprefixer 3.7.1
blame 0.12.0
build 0.68.0
build-gradle 0.6.0
build-grunt 0.4.0
build-gulp 0.11.0
build-make 0.13.0
build-rake 0.1.1
busy 0.7.0
busy-signal 1.4.3
color-picker 2.2.5
css-comb 2.5.0
diagrams 0.26.4
disable-keybindings 0.6.0
double-tag 0.9.0
editorconfig 2.2.2
emmet 2.4.3
file-icons 2.1.8
filesize 3.0.0
flow-ide 1.6.0
git-diff-details 1.4.0
git-history 3.3.0
git-plus 7.9.3
git-time-machine 1.5.9
highlight-selected 0.13.1
html-to-css 0.2.2
Hydrogen 1.19.0
hyperclick 0.1.2
intentions 1.1.2
js-hyperclick 1.11.0
js-refactor-atom 0.10.1
json-generator 0.1.15
jumpy 3.1.3
language-babel 2.66.1
language-freemarker 0.2.0
language-gradle 0.0.3
language-haml 0.25.0
language-postcss 1.3.1
language-svg 0.9.2
linter 2.2.0
linter-doiuse 0.2.3
linter-eslint 8.2.1
linter-markdown 4.0.1
linter-rubocop 2.1.1
linter-stylelint 3.11.0
linter-ui-default 1.6.2
linter-write-good 0.9.0
local-history 4.3.0
minimap 4.28.2
minimap-cursorline 0.2.0
minimap-split-diff 0.3.7
open-on-bitbucket 0.5.0
pandoc 0.2.2
pandoc-convert 1.1.1
pigments 0.39.1
prettier-atom 0.36.1
project-plus 1.0.0
rails-i18n-autocomplete 0.4.0
random 1.3.0
snippet-generator-plus 0.1.2
sort-lines 0.14.0
split-diff 1.4.3
svgo 2.8.5
terminal-fusion 2.4.4
tester 1.4.0
tester-jest 1.1.6
to-base64 0.5.2
todo-show 1.11.0
tree-view-git-status 1.4.0
typescript-modules-helper 0.8.0
vim-mode-plus 0.93.0
vim-mode-plus-ex-mode 0.9.1
w3c-validation 0.4.0
Zen 0.18.0
I edited /packages/diagrams/lib/diagrams.js:95:76 to:
if(editor.element.shadowRoot.querySelector('.editor--private') !== null){
editor.element.shadowRoot.querySelector('.editor--private').style.width = `${remainingWidth}px`;
}and at least it loads it & live-previews my diagram now. I suspect something is still supposed to happen about that remainingWidth, but preview panel is sized OK so far (fwiw, I am also using a custom diagram width, set from package settings).
I believe this error also occurs when adding the package to a brand new Atom install. No need to even open a file.
[Enter steps to reproduce:]
- Install latest Atom (v1.19.4) on macOS
- Install latest diagrams (0.26.4) from Atom settings
Atom: 1.19.4 x64
Electron: 1.6.9
OS: Mac OS X 10.12.6
Thrown From: diagrams package 0.26.4
Stack Trace
Failed to activate the diagrams package
At Cannot read property 'style' of null
TypeError: Cannot read property 'style' of null
at checkForResize (/packages/diagrams/lib/diagrams.js:95:76)
at setupPreviewer (/packages/diagrams/lib/diagrams.js:102:9)
at textEditorObserverDisposable.atom.workspace.observeTextEditors (/packages/diagrams/lib/diagrams.js:36:13)
at Workspace.observeTextEditors (/Applications/Atom.app/Contents/Resources/app/src/workspace.js:717:15)
at Object.activate (/packages/diagrams/lib/diagrams.js:35:60)
at Package.module.exports.Package.activateNow (/Applications/Atom.app/Contents/Resources/app/src/package.js:253:25)
at /Applications/Atom.app/Contents/Resources/app/src/package.js:225:38
at Package.module.exports.Package.measure (/Applications/Atom.app/Contents/Resources/app/src/package.js:99:21)
at /Applications/Atom.app/Contents/Resources/app/src/package.js:218:32
at Package.module.exports.Package.activate (/Applications/Atom.app/Contents/Resources/app/src/package.js:215:40)
at PackageManager.module.exports.PackageManager.activatePackage (/Applications/Atom.app/Contents/Resources/app/src/package-manager.js:645:40)
at /Applications/Atom.app/Contents/Resources/app/node_modules/settings-view/lib/package-manager.js:535:35
at exit (/Applications/Atom.app/Contents/Resources/app/node_modules/settings-view/lib/package-manager.js:128:22)
at triggerExitCallback (/Applications/Atom.app/Contents/Resources/app/src/buffered-process.js:338:17)
at /Applications/Atom.app/Contents/Resources/app/src/buffered-process.js:359:17
at Socket.<anonymous> (/Applications/Atom.app/Contents/Resources/app/src/buffered-process.js:220:15)
at emitOne (events.js:101:20)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:501:12)
Commands
-7:54.3.0 pane:move-item-left (input.hidden-input)
-7:53.4.0 editor:select-to-first-character-of-line (input.hidden-input)
14x -7:51.3.0 core:backspace (input.hidden-input)
-7:41 editor:consolidate-selections (input.hidden-input)
-7:41 core:cancel (input.hidden-input)
-7:10.1.0 pane:move-item-left (input.hidden-input)
-7:09.8.0 core:backspace (input.hidden-input)
-7:09.1.0 editor:select-to-first-character-of-line (input.hidden-input)
-7:08.8.0 core:backspace (input.hidden-input)
-6:56.2.0 pane:move-item-left (input.hidden-input)
-6:55.7.0 editor:select-to-first-character-of-line (input.hidden-input)
-6:55.2.0 core:backspace (input.hidden-input)
-5:32.4.0 editor:select-to-beginning-of-word (input.hidden-input)
2x -5:31.5.0 core:backspace (input.hidden-input)
-5:31 core:confirm (input.hidden-input)
-1:25.1.0 core:copy (atom-notification.fatal.icon.icon-bug.native-key-bindings.has-detail.has-close.has-stack)
Non-Core Packages
diagrams 0.26.4
@sebn Does it then work on relaunching?
@francoislaberge I restarted Atom multiple time, I even reinstalled everything, but it still doesn't work.
I wonder why Atom installs version 0.26.4 while I can see a 0.27.0 version on npmjs.org?
Also the suggested fix allows me to run the package, but the shown preview is far too small to be useful while it was looking good on the screenshots, not sure whether it has something to do with the original issue or the fix above...
@francoislaberge Do you have any hint on how to debug this?
I could try to do it myself at some point, although I'm a bit busy right now.
Good catch on the versions, I guess I didn't publish the package correctly. I just publish 0.27.1 and am testing it now.
It worked for me after publishing this. Can you try again?
Re: Preview pane, I want to make it interactively resizable, just haven't gotten to it. You can actually set it in the preferences of the package though, which isn't easily discoverable.
Never mind, I could have sworn I had added a property to the diagrams settings.
The new version just works, thanks!
Regarding the preview size, wouldn't it be simpler to set both the preview and the editor width to 50%?
// lib/diagrams.js:71
function checkForResize() {
// ...
if( editor.element.parentElement !== null &&
lastWidth !== editor.element.parentElement.clientWidth) {
previewElement.style.width = '50%'; // <= HERE...
const editorPrivateElement = editor.element.shadowRoot.querySelector('.editor--private')
if(editorPrivateElement !== null){
editorPrivateElement.style.width = '50%'; // <= ...AND HERE :)
}
lastWidth = editor.element.parentElement.clientWidth;
}
requestAnimationFrameId = requestAnimationFrame(checkForResize);
}This would allow users to make use of their screen size as a workaround until the preview is resizable. I just gave it a try and it seems to work well (at least for me)... WDYT?
I rolled up my sleeves and am now working on making it drag and droppable and will add a preference for manually inputting it and serializing it between runs
Wow! That's good news :)
@sebn All right, update diagrams and you should now be able to resize the previewer by dragging the left edge. It may have some issues, if the width of the previewer gets messed up, go to the preferences of the diagrams package and set the previewWidth back to something that works.