Move JS events into .js file

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
 
   # Tests for code integrity and code formatting
   lint:
-    name: Linting
+    name: Py Linting
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
@@ -39,6 +39,19 @@ jobs:
       run: |
           ruff format --check .
 
+  jslint:
+    name: JS Linting
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v6
+    - name: Install JS dependencies
+      run: npm install -g standard
+    - name: Lint JS files
+      run: standard rendercanvas
+
   # Test that make sure the docs build without errors or warnings
   docs:
     name: Docs

CONTRIBUTING.md

@@ -50,6 +50,11 @@ We love it when rendercanvas is used in a derived project, blog posts, article,
 We love it even more if rendercanvas is referenced to help increase the visibility of the project.
 Also feel free to reach out to let us know!
 
+### Adding a backend
+
+If you want to add a backend, please first create an issue to discuss the idea.
+Also have a look at https://rendercanvas.readthedocs.io/stable/backendapi.html to see what a backend looks like.
+
 ### Active contributions
 
 If you just want to help move the project forward, we welcome you to:
@@ -100,7 +105,15 @@ The use of an AI agent that writes code and then submits a pull request
 autonomously is not permitted.
 
 
-## Coding Style
+## Tips for working with this repo
+
+### Project structure
+
+All backends are represented as modules in the library root. Core functionality is in `rendercanvas.core`.
+Public utilities are in `rendercanvas.utils`. We try to avoid dependencies where possible, although we do allow
+optional dependencies for specific backends.
+
+### Coding Style
 
 The rendercanvas project uses `ruff` to format and lint the code:
 
@@ -110,3 +123,14 @@ ruff format
 # Check for linting errors.
 ruff check
 ```
+
+### JavaScript code
+
+This project includes some JavaScript code. It is formatted and linted using
+`standardjs`, which is similar to `ruff` in Python. CI runs a lint-job
+that uses `standardjs`. To format and lint your code locally:
+
+* Install npm if you don't have it already.
+* `npm install --global standard`
+* `standard rendercanvas`  (run this before committing changes to the JavaScript code)
+

rendercanvas/core/__init__.py

@@ -0,0 +1 @@
+"""The core logic for rendercanvas. Typically not public."""

rendercanvas/core/renderview.css

@@ -0,0 +1,69 @@
+div.renderview-canvas-wrapper {
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    overflow: visible;
+    min-width: 32px;
+    min-height: 32px;
+}
+
+div.renderview-canvas-wrapper img,
+div.renderview-canvas-wrapper canvas {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+}
+
+div.renderview-canvas-wrapper div.renderview-top {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    z-index: 2;
+    top: -1.5em;
+    height: 1.5em;
+    width: 100%;
+    border-top: 1px solid rgba(128, 128, 128, 0.5);
+    border-radius: 6px 6px 0 0;
+}
+
+div.renderview-canvas-wrapper div.renderview-top span {
+    display: inline-block;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 0.5em 0 0.5em;
+    width: 100%;
+}
+
+div.renderview-canvas-wrapper div.renderview-resizer {
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    z-index: 3;
+    bottom: 0;
+    right: 0;
+    width: 16px;
+    height: 16px;
+    cursor: nwse-resize;
+}
+
+div.renderview-canvas-wrapper.has-titlebar {
+    margin-top: 2em;
+}
+
+div.renderview-canvas-wrapper.has-titlebar div.renderview-top {
+    display: block;
+}
+
+div.renderview-canvas-wrapper.has-titlebar img,
+div.renderview-canvas-wrapper.has-titlebar canvas {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+div.renderview-canvas-wrapper.is-resizable div.renderview-resizer {
+    display: block;
+}