Initial commit

Author: alesgenova

.codespellrc

@@ -0,0 +1,2 @@
+[codespell]
+skip = **/package-lock.json,**/*.umd.js,**/*.umd.js.map

.github/workflows/test_and_release.yml

@@ -0,0 +1,123 @@
+name: Test and Release
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  pre-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+
+      # Install and run pre-commit
+      - run: |
+          pip install pre-commit
+          pre-commit install
+          pre-commit run --all-files
+
+  pytest:
+    name: Pytest ${{ matrix.config.name }}
+    runs-on: ${{ matrix.config.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ["3.9"]
+        config:
+        - {
+            name: "Linux",
+            os: ubuntu-latest
+          }
+        # - {
+        #     name: "MacOSX",
+        #     os: macos-latest
+        #   }
+        # - {
+        #     name: "Windows",
+        #     os: windows-latest
+        #   }
+
+    defaults:
+      run:
+        shell: bash
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v5
+      with:
+        python-version: ${{ matrix.python-version }}
+
+    - name: Install and Run Tests
+      run: |
+        pip install .
+        pip install -r tests/requirements.txt
+        pytest -s ./tests
+
+  test-npm-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set Up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Build Vue Components
+        run: |
+          cd vue-components
+          npm ci
+          npm run build
+
+  release:
+    needs: [
+      pre-commit,
+      pytest,
+      test-npm-build,
+    ]
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push'
+    environment: release
+    permissions:
+      id-token: write # IMPORTANT: mandatory for trusted publishing
+      contents: write # IMPORTANT: mandatory for making GitHub Releases
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set Up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Build Vue Components
+        working-directory: vue-components
+        run: |
+          npm ci
+          npm run build
+
+      - name: Python Semantic Release
+        id: release
+        uses: python-semantic-release/python-semantic-release@master
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+      # https://docs.pypi.org/trusted-publishers/using-a-publisher/
+      - name: Publish package distributions to PyPI
+        if: steps.release.outputs.released == 'true'
+        uses: pypa/gh-action-pypi-publish@release/v1
+

.gitignore

@@ -0,0 +1,30 @@
+.DS_Store
+node_modules
+.venv
+.ruff_cache
+.pytest_cache
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+__pycache__
+build
+dist
+*egg-info
+*pyc

.pre-commit-config.yaml

@@ -0,0 +1,11 @@
+repos:
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.1.0
+    hooks:
+      - id: codespell
+
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.8.4
+    hooks:
+      - id: ruff
+      - id: ruff-format

MANIFEST.in

@@ -0,0 +1,5 @@
+graft trame_image_tools/module/serve
+prune examples
+prune tests
+prune vue-components
+prune .github

README.md

@@ -0,0 +1,46 @@
+# `trame-image-tools`
+
+A set of [`trame`](https://github.com/kitware/trame) widgets to create a zoom and pan 2D image environment, with interactive area selection widgets.
+
+![demo_image](demo.png)
+
+## Install
+```bash
+pip install trame-image-tools
+```
+
+## Usage
+```python
+from trame_image_tools.widgets import (
+    TrameImage,
+    TrameImageRoi,
+    TrameImageLine,
+    TrameImageCircle,
+    TrameImagePolygon,
+    TrameImageGrid,
+)
+
+with TrameImage(
+    src="https://www.kitware.com/main/wp-content/uploads/2023/10/logo-trame.png",
+    size=("size", [800, 210]),
+):
+    TrameImageGrid(
+        spacing=("grid_spacing", [50, 25]), # [x_tick_spacing, y_tick_spacing]
+    )
+
+    TrameImageLine(
+        v_model=("line", [200, 50, 300, 150]), # [x0, y0, x1, y1, ...]
+    )
+
+    TrameImageRoi(
+        v_model=("roi", [350, 50, 100, 100]), # [x, y, width, height]
+    )
+
+    TrameImageCircle(
+        v_model=("circle", [550, 100, 50]), # [x, y, radius]
+    )
+
+    TrameImagePolygon(
+        v_model=("polygon", [650, 90, 670, 150, 730, 150, 750, 90, 700, 50]),  # [x0, y0, x1, y1, ...]
+    )
+```

demo.png

@@ -0,0 +1,96 @@
+from trame.app import get_server
+from trame.widgets import html, client
+from trame.ui.html import DivLayout
+from trame_image_tools.widgets import (
+    TrameImage,
+    TrameImageRoi,
+    TrameImageLine,
+    TrameImageCircle,
+    TrameImagePolygon,
+    TrameImageGrid,
+)
+
+
+class ExampleApp:
+    def __init__(self, server=None):
+        self._server = get_server(server, client_type="vue3")
+        self.ui = None
+        self._build_ui()
+
+    @property
+    def server(self):
+        return self._server
+
+    @property
+    def state(self):
+        return self.server.state
+
+    @property
+    def ctrl(self):
+        return self.server.controller
+
+    def _build_ui(self):
+        with DivLayout(self.server) as layout:
+            self._ui = layout
+
+            layout.root.style = "height: 100%;"
+
+            client.Style("""
+                            html { height: 100%; overflow: hidden;}
+                            body { height: 100%; margin: 0;}
+                            #app { height: 100%; }
+                         """)
+
+            with html.Div(style="width: 100%; height: 100%; background-color: black;"):
+                with TrameImage(
+                    src="https://www.kitware.com/main/wp-content/uploads/2023/10/logo-trame.png",
+                    size=("[800, 210]",),
+                    v_model_scale=("scale", 0.9),
+                    v_model_center=("center", [0.5, 0.5]),
+                ):
+                    TrameImageGrid(
+                        spacing=("grid_spacing", [50, 25]),
+                    )
+
+                    TrameImageLine(
+                        v_model=("line", [200, 50, 300, 150]),
+                        color="lime",
+                        thickness=3,
+                        handle_size=12,
+                    )
+
+                    TrameImageRoi(
+                        v_model=("roi", [350, 50, 100, 100]),
+                        border_color="yellow",
+                        border_size=3,
+                        handle_size=12,
+                    )
+
+                    TrameImageCircle(
+                        v_model=("circle", [550, 100, 50]),
+                        border_color="cyan",
+                        border_size=3,
+                        handle_size=12,
+                    )
+
+                    TrameImagePolygon(
+                        v_model=("polygon", [650, 90, 670, 150, 730, 150, 750, 90, 700, 50]),
+                        border_color="fuchsia",
+                        border_size=3,
+                        handle_size=12,
+                    )
+
+                html.Button(
+                    "Reset Camera",
+                    style="position: absolute; left: 1rem; top: 1rem;",
+                    click="scale = 0.9; center = [0.5, 0.5];",
+                )
+
+
+def main(server=None, **kwargs):
+    app = ExampleApp(server)
+    app.server.start(**kwargs)
+
+
+if __name__ == "__main__":
+    main()