diff --git a/README.md b/README.md index 7b2a710..4f951b9 100644 --- a/README.md +++ b/README.md @@ -10,3 +10,10 @@ remote renderers, notebooks, etc. This repository contains the specification and a reference implementation in JavaScript. Read the spec at https://pygfx.org/renderview/ + + +## Contributing + +The JS code is formatted and linted with `standardjs`, which can be installed using `npm install --global standard`. + +To lint/format, run `standard src --fix` in the root of the repo before committing. diff --git a/src/renderview.css b/src/renderview.css index d2f5443..de27d62 100644 --- a/src/renderview.css +++ b/src/renderview.css @@ -15,21 +15,21 @@ div.renderview-wrapper { min-height: 32px; } -div.renderview-wrapper img, -div.renderview-wrapper canvas { +div.renderview-wrapper .renderview-view { display: block; box-sizing: border-box; width: 100%; height: 100%; + background: none; border-radius: 6px; - background: #777; + border: 1px solid rgba(127, 127, 127, 0.2); } -div.renderview-wrapper div.renderview-hidden { +div.renderview-wrapper .renderview-hidden { display: none; } -div.renderview-wrapper div.renderview-top { +div.renderview-wrapper .renderview-top { display: none; position: absolute; box-sizing: border-box; @@ -38,10 +38,11 @@ div.renderview-wrapper div.renderview-top { height: 1.5em; width: 100%; border-radius: 6px 6px 0 0; - box-shadow: 0px -2px 0px 0px rgba(128, 128, 128, 0.5); + border: 1px solid rgba(127, 127, 127, 0.2); + border-bottom: 0; } -div.renderview-wrapper div.renderview-top span { +div.renderview-wrapper .renderview-top span { display: inline-block; box-sizing: border-box; overflow: hidden; @@ -51,7 +52,7 @@ div.renderview-wrapper div.renderview-top span { width: 100%; } -div.renderview-wrapper div.renderview-resizer { +div.renderview-wrapper .renderview-resizer { display: none; position: absolute; box-sizing: border-box; @@ -67,16 +68,15 @@ div.renderview-wrapper.has-titlebar { margin-top: 2em !important; } -div.renderview-wrapper.has-titlebar div.renderview-top { +div.renderview-wrapper.has-titlebar .renderview-top { display: block; } -div.renderview-wrapper.has-titlebar img, -div.renderview-wrapper.has-titlebar canvas { +div.renderview-wrapper.has-titlebar .renderview-view { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } -div.renderview-wrapper.is-resizable div.renderview-resizer { +div.renderview-wrapper.is-resizable .renderview-resizer { display: block; } \ No newline at end of file diff --git a/src/renderview.js b/src/renderview.js index ee21f26..598c594 100644 --- a/src/renderview.js +++ b/src/renderview.js @@ -328,6 +328,8 @@ class BaseRenderView { const wrapperElement = this.wrapperElement if (wrapperElement !== null) { + this.viewElement.classList.add('renderview-view') + // Wrap it wrapperElement.classList.add('renderview-wrapper') wrapperElement.appendChild(this.viewElement) diff --git a/src/tester.html b/src/tester.html index 4feaa22..8950607 100644 --- a/src/tester.html +++ b/src/tester.html @@ -41,6 +41,7 @@ if (event.type == 'resize') { this.viewElement.width = event.pwidth this.viewElement.height = event.pheight + this.draw() } if (!this._drawRequested) { this._drawRequested = true