Metadata-Version: 2.4
Name: violit-drawable-konva
Version: 0.2.0
Summary: Violit drawable Konva canvas + before/after image comparison
Author-email: George Siogkas <gsiogkas@cvrlab.com>
License-Expression: MIT
Project-URL: Homepage, https://github.com/gsiogkas/violit-drawable-konva
Project-URL: Documentation, https://github.com/gsiogkas/violit-drawable-konva#readme
Project-URL: Repository, https://github.com/gsiogkas/violit-drawable-konva
Project-URL: Issues, https://github.com/gsiogkas/violit-drawable-konva/issues
Project-URL: Related, https://github.com/gsiogkas/streamlit-drawable-konva
Requires-Python: >=3.10
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: violit>=0.8.29
Requires-Dist: numpy
Requires-Dist: pillow
Provides-Extra: dev
Requires-Dist: pytest; extra == "dev"
Requires-Dist: wheel; extra == "dev"
Dynamic: license-file

# Violit Drawable Konva

![Usage demo — draw, spline, background, crop, and json_data coordinates](docs/assets/usage.gif)

Violit widget wrapping the same Konva canvas used by
[`streamlit-drawable-konva`](https://github.com/gsiogkas/streamlit-drawable-konva)
(**0.2.0** tracks Streamlit **0.5.x** standalone).

Requires **Violit ≥ 0.8.29** (`app.register_js_widget`).

## Features

- `vl_canvas` — drawable Konva canvas (same tools as `st_canvas`)
- `vl_image_comparison` — before/after slider companion (same as `st_image_comparison`)
- Background color / image (upload or sample)
- Scene `json_data` with coordinates (`x`/`y`/`width`/`height`/`points`)
- Spline helpers: `splines_from_json`, `sample_spline`, …

Demo uses **dark** theme. Pass Violit `State` / callables into `vl_canvas`
(not `.value`) so drawing mode and stroke update live.

## Install (editable)

```bash
cd /devel/dev/cvrlab/violit-drawable-konva
uv venv .venv
source .venv/bin/activate
uv pip install -e ".[dev]"
```

Sync the browser IIFE from the Streamlit sibling build (required before demo / packaging):

```bash
# ensure standalone.js exists in streamlit-drawable-konva first
bash scripts/sync_standalone.sh
```

Until you sync, the package falls back to:

`../streamlit-drawable-konva/streamlit_drawable_konva/frontend/build/standalone.js`

## Demo

```bash
source .venv/bin/activate
.venv/bin/violit run demo/app.py --reload --localhost --port 8031
# → http://localhost:8031
```

`demo/app.py` must end with `app.run()` (Violit does not auto-start the server).

## Tests

```bash
pytest -q
```

## Usage

```python
import violit as vl
from violit_drawable_konva import ensure_registered, vl_canvas, vl_image_comparison

app = vl.App(title="Canvas", theme="dark")
ensure_registered(app)  # optional; also called by vl_canvas / vl_image_comparison

drawing_mode = app.state("polygon", key="drawing_mode")
stroke_width = app.state(3, key="stroke_width")
stroke_color = app.state("#111", key="stroke_color")
bg_file = app.state(None, key="bg_file")
payload = app.state({"image_data_url": None, "json_data": None}, key="c1")

app.file_uploader("Background", type=[".png", ".jpg"], bind=bg_file)

result = vl_canvas(
    app,
    drawing_mode=drawing_mode,  # State, not .value
    stroke_width=stroke_width,
    stroke_color=stroke_color,
    background_image=bg_file,   # UploadedFile / PIL / State / callable
    height=400,
    width=600,
    key="c1",
    bind=payload,
)
# result.json_data / result.image_data

vl_image_comparison(app, img_before, img_after, width=600, key="cmp")
```

Helpers mirror the Streamlit package: `crop_box_from_json`, `objects_by_group`,
`splines_from_json`, `spline_control_points`, `sample_spline`, `sample_catmull_rom`.

## Layout

```
violit_drawable_konva/
  api.py                # ensure_registered, vl_canvas, vl_image_comparison
  payload.py / spline.py / helpers.py
  static/standalone.js  # synced IIFE (mount + mountImageComparison)
demo/app.py
tests/
scripts/sync_standalone.sh
```

## Publish (PyPI)

```bash
cd /devel/dev/cvrlab/violit-drawable-konva

# 1) Sync JS from Streamlit build (after streamlit 0.5.x is built)
bash scripts/sync_standalone.sh

# 2) Tests
.venv/bin/python -m pytest -q

# 3) Commit & push
git add -A
git status
git commit -m "Release 0.2.0: image comparison companion and dark demo."
git push -u origin main
git tag v0.2.0 && git push origin v0.2.0

# 4) Build & publish
uv build
uv publish   # needs UV_PUBLISH_TOKEN or interactive PyPI token
```

Verify: https://pypi.org/project/violit-drawable-konva/

Bump `version` in `pyproject.toml` before each new upload.

## Manual port checklist

1. Build Streamlit frontend (`npm run build`) so `standalone.js` exists.
2. `bash scripts/sync_standalone.sh`
3. `uv pip install -e ".[dev]"` (`violit>=0.8.29`)
4. `pytest -q`
5. `violit run demo/app.py --reload --localhost --port 8031`
6. Commit / tag / `uv publish` (see above)
