├── .eslintignore
├── .eslintrc.cjs
├── .github
    └── workflows
    │   └── build-and-publish-npm-package.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── clean-dependencies.js
├── gh-pages.cjs
├── package-lock.json
├── package.json
├── src
    ├── app.d.ts
    ├── app.html
    ├── custom_events.d.ts
    ├── lib
    │   ├── crop_window
    │   │   ├── CropMediaView.svelte
    │   │   ├── CropWindow.svelte
    │   │   ├── GestureMediaView.svelte
    │   │   ├── TransformMediaView.svelte
    │   │   ├── animate_position.ts
    │   │   └── geometry.ts
    │   ├── gestures
    │   │   ├── mouse_events.ts
    │   │   └── touch_scale_pan_rotate.ts
    │   ├── index.ts
    │   ├── overlay
    │   │   ├── Overlay.svelte
    │   │   └── overlay.ts
    │   ├── types.ts
    │   └── utils
    │   │   └── throttle.ts
    └── routes
    │   ├── +layout.ts
    │   └── +page.svelte
├── static
    ├── .nojekyll
    ├── Mountain - 8837.mp4
    ├── favicon.png
    ├── hintersee-3601004.jpg
    ├── logo.svg
    └── videocrop.gif
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts


/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     parser: '@typescript-eslint/parser',
 4 |     extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 |     plugins: ['svelte3', '@typescript-eslint'],
 6 |     ignorePatterns: ['*.cjs'],
 7 |     overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 |     settings: {
 9 |         'svelte3/typescript': () => require('typescript')
10 |     },
11 |     parserOptions: {
12 |         sourceType: 'module',
13 |         ecmaVersion: 2020
14 |     },
15 |     env: {
16 |         browser: true,
17 |         es2017: true,
18 |         node: true
19 |     }
20 | };
21 | 


--------------------------------------------------------------------------------
/.github/workflows/build-and-publish-npm-package.yml:
--------------------------------------------------------------------------------
 1 | name: build_and_publish
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - '*'
 7 |     tags:
 8 |       - 'v*'
 9 | 
10 | jobs:
11 |   build-check-and-dry-run-publish-npm:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 16
18 |           registry-url: https://registry.npmjs.org/
19 |       - run: npm ci
20 |       - run: npm run build
21 |       - run: npm run check
22 |       - run: npm publish --dry-run
23 |         working-directory: package
24 |         env:
25 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
26 | 
27 | 
28 |   publish-npm:
29 |     needs: build-check-and-dry-run-publish-npm
30 |     if: startsWith(github.ref, 'refs/tags/v')
31 |     runs-on: ubuntu-latest
32 |     steps:
33 |       - uses: actions/checkout@v3
34 |       - uses: actions/setup-node@v3
35 |         with:
36 |           node-version: 16
37 |           registry-url: https://registry.npmjs.org/
38 |       - run: npm ci
39 |       - run: npm run build
40 |       - run: npm publish
41 |         working-directory: package
42 |         env:
43 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
44 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | /static
10 | gh-pages.js
11 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "useTabs": false,
 3 |     "tabWidth": 4,
 4 |     "singleQuote": true,
 5 |     "trailingComma": "none",
 6 |     "printWidth": 100,
 7 |     "plugins": ["prettier-plugin-svelte"],
 8 |     "pluginSearchDirs": ["."],
 9 |     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Sabine Schmaltz
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # svelte-crop-window
  2 | 
  3 | A crop window component for images and videos that supports touch gestures (pinch zoom, rotate, pan), as well as mousewheel zoom, mouse-dragging the image, and rotating on right mouse button.
  4 | 
  5 | Currently looking for contributors / feature requests / feedback to help improve this component.
  6 | 
  7 | ![video cropper](/static/videocrop.gif)
  8 | 
  9 | If you can do code-review, that's very welcome.
 10 | 
 11 | Here's a [demo page](https://sabine.github.io/svelte-crop-window/).
 12 | 
 13 | And here's a [minimal REPL where you can play with the code](https://svelte.dev/repl/2db644efd08841958f2dd3209f00bf51?version=3.52.0) and a [fancier REPL](https://svelte.dev/repl/c246300e4ffd42a0b01ff318f7abd91d?version=3.52.0).
 14 | 
 15 | ## Installation
 16 | 
 17 | ```bash
 18 | npm install svelte-crop-window
 19 | ```
 20 | 
 21 | ## Basic use
 22 | 
 23 | You must wrap the `CropWindow` component with an Element that determines the height.
 24 | ```html
 25 | <script>
 26 |     import { CropWindow, defaultValue } from 'svelte-crop-window';
 27 | 
 28 |     let media = {
 29 |         content_type: 'image',
 30 |         url: '/svelte-crop-window/hintersee-3601004.jpg'
 31 |     };
 32 | 
 33 |     let value = { ...defaultValue };
 34 | </script>
 35 | 
 36 | <div style="height:20em">
 37 |     <CropWindow bind:value {media} />
 38 | </div>
 39 | ```
 40 | 
 41 | ## `CropWindow.svelte` Component
 42 | 
 43 | ### Props
 44 | 
 45 | | name      | type                                                                    | required | purpose                                                                                      |
 46 | | --------- | ----------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- |
 47 | | `media`   | `Media`                     | ✓        | image or video to be cropped                                                                 |
 48 | | `value`   | `CropValue` |          | value that describes [how to crop](#how-to-crop) - will be initialized if undefined |
 49 | | `options` | [`Options`](#options)                                                               |          | options for the crop window and overlay, see below                                           |
 50 | 
 51 | ```typescript
 52 | type Media = {
 53 |     content_type: 'image' | 'video';
 54 |     url: string;
 55 | }
 56 | 
 57 | type CropValue = {
 58 |     position: { x: number; y: number };
 59 |     aspect: number;
 60 |     rotation: number;
 61 |     scale: number; }
 62 | }
 63 | 
 64 | const defaultValue: CropValue = {
 65 |     position: { x: 0, y: 0 },
 66 |     aspect: 1.0,
 67 |     rotation: 0,
 68 |     scale: 0
 69 | };
 70 | ```
 71 | 
 72 | ### Options
 73 | 
 74 | | name                 | type                | purpose                                                                                                                                                                                                                                                            |
 75 | | -------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 76 | | `shape`              | `'rect' \| 'round'` | shape of the crop area (yes, an ellipse will work)                                                                                                                                                                                                                                             |
 77 | | `crop_window_margin` | `number`            | Margin of the crop window, in pixels. The crop window will always scale to the maximum possible size in its containing element.                                                                                                                                    |
 78 | | `overlay`            | a Svelte component  | The overlay component which visually highlights the crop area. You can pass your own Svelte component with props `options: T, gesture_in_progress: boolean, shape: 'rect' \| 'round'` here, or use the included [Overlay.svelte](/src/lib/overlay/Overlay.svelte). |
 79 | | `overlay_options`    | `T`                 | Options for your overlay component. See below for the options of the included overlay component.                                                                                                                                                                   |
 80 | 
 81 | ```typescript
 82 | const defaultOptions: Options<OverlayOptions> = {
 83 |     shape: 'rect',
 84 |     crop_window_margin: 10,
 85 |     overlay: Overlay,
 86 |     overlay_options: defaultOverlayOptions
 87 | };
 88 | ```
 89 | 
 90 | ## `Overlay.svelte` Component
 91 | 
 92 | ### Options
 93 | 
 94 | | name               | type      | purpose                                                              |
 95 | | ------------------ | --------- | -------------------------------------------------------------------- |
 96 | | `overlay_color`    | `string`  | the color of the overlay that covers everything except the crop area |
 97 | | `line_color`       | `string`  | the color of the lines                                               |
 98 | | `show_third_lines` | `boolean` | whether to show third lines or not when a gesture is in progress     |
 99 | 
100 | ```typescript
101 | const defaultOverlayOptions: OverlayOptions = {
102 |     overlay_color: 'rgb(11, 11, 11, 0.7)',
103 |     line_color: 'rgba(167, 167, 167, 0.5)',
104 |     show_third_lines: true
105 | };
106 | ```
107 | 
108 | ## How to Crop
109 | 
110 | ### Display in HTML Without Actually Cropping:
111 | 
112 | ```html
113 | <div
114 |     style="
115 |         position:relative; overflow:hidden;
116 |         height:{HEIGHT}px; width:{value.aspect * HEIGHT}px;
117 |         border-radius: {options.shape == 'round' ? '50%' : '0'}"
118 | >
119 |     <video
120 |         style="
121 |     transform: translateX(-50%) translateY(-50%) rotate({value.rotation}deg);
122 |     height: {value.scale * HEIGHT}px;
123 |     margin-left: {HEIGHT * value.aspect / 2 + value.position.x * HEIGHT}px;
124 |     margin-top: {HEIGHT / 2 + value.position.y * HEIGHT}px;
125 |     max-width:none"
126 |         src="{url}"
127 |     />
128 | </div>
129 | ```
130 | 
131 | Note: You must choose a `HEIGHT`, because the crop value is normalized against the target height.
132 | 
133 | ### Pseudo Code to Crop
134 | 
135 | 1. Choose a `target_height` and calculate the `target_width` for the cropped image:
136 | 
137 | ```javascript
138 | let target_width = value.aspect * target_height;
139 | ```
140 | 
141 | 2. Calculate factor `s` by which to scale:
142 | 
143 | ```javascript
144 | let s = (value.scale * target_height) / media.height;
145 | ```
146 | 
147 | 3. Scale media by `s`:
148 | 
149 | ```javascript
150 | let resized_media = scale(media, s);
151 | ```
152 | 
153 | 4. Rotate media by `value.rotation`:
154 | 
155 | ```javascript
156 | let resized_and_rotated_media = rotate(resized_media, value.rotation);
157 | ```
158 | 
159 | 5. Calculate top left position of the area to extract:
160 | 
161 | ```javascript
162 | let left = (resized_and_rotated_media.width - target_width) / 2.0 
163 |             - value.x * target_height;
164 | let top = (resized_and_rotated_media.height - target_height) / 2.0
165 |            - value.y * target_height;
166 | ```
167 | 
168 | 6. Extract area:
169 | 
170 | ```javascript
171 | let cropped_media =
172 |     extract_area(resized_and_rotated_media,
173 |                  left, top, target_width, target_height);
174 | ```
175 | 
176 | ## What this component doesn't do
177 | 
178 | 1. Does not modify/crop the image, you have to do that by whatever means make sense for your application. Doesn't (yet) provide usable controls. Currently, you need to implement your own.
179 | 2. Similar to the overlay, it would be nice to include some controls to make this more usable out of the box. Contributions are very welcome.
180 | 
181 | ## Developing
182 | 
183 | Once you've cloned the project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
184 | 
185 | ```bash
186 | npm run dev
187 | 
188 | # or start the server and open the app in a new browser tab
189 | npm run dev -- --open
190 | ```
191 | 
192 | ## Acknowledgements
193 | 
194 | One big inspiration for this component was the Android library
195 | [uCrop by Yalantis](https://github.com/Yalantis/uCrop). What is particularly
196 | valuable is that the developers shared their thought process in
197 | [this blog post](https://yalantis.com/blog/how-we-created-ucrop-our-own-image-cropping-library-for-android/).
198 | 
199 | Another very helpful resource was [svelte-easy-crop](https://www.npmjs.com/package/svelte-easy-crop)
200 | which gave me a basic understanding of how to implement a crop window component in Svelte
201 | (and HTML/JS in general).
202 | 
203 | There's no code reuse between either of these components and this one. All
204 | calculations had to be recreated from textbook math.
205 | 


--------------------------------------------------------------------------------
/clean-dependencies.js:
--------------------------------------------------------------------------------
 1 | import * as fs from 'fs';
 2 | 
 3 | let r = JSON.parse(fs.readFileSync("package.json"));
 4 | let p = JSON.parse(fs.readFileSync("package/package.json"));
 5 | 
 6 | delete p["devDependencies"];
 7 | p["devDependencies"] = {
 8 |     "svelte": r["devDependencies"]["svelte"],
 9 | };
10 | 
11 | fs.writeFileSync("package/package.json", JSON.stringify(p, null, 2));
12 | 
13 | console.log("Pruned devDependencies");
14 | 


--------------------------------------------------------------------------------
/gh-pages.cjs:
--------------------------------------------------------------------------------
 1 | var ghpages = require('gh-pages');
 2 | 
 3 | ghpages.publish(
 4 |     'build',
 5 |     {
 6 |         dotfiles: true,
 7 |         branch: 'gh-pages',
 8 |         user: {
 9 |             name: 'sabine',
10 |             email: 'sabineschmaltz@gmail.com'
11 |         }
12 |     },
13 |     () => {
14 |         console.log('Deploy Complete!');
15 |     }
16 | );
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-crop-window",
 3 |     "version": "0.2.0",
 4 |     "description": "A Svelte component to crop images and videos with touch and mouse gestures",
 5 |     "homepage": "https://sabine.github.io/svelte-crop-window",
 6 |     "repository": {
 7 |         "type": "git",
 8 |         "url": "https://github.com/sabine/svelte-crop-window"
 9 |     },
10 |     "author": "Sabine Schmaltz <info@sabineschmaltz.de>",
11 |     "license": "MIT",
12 |     "keywords": [
13 |         "cropper",
14 |         "crop window",
15 |         "image crop",
16 |         "video crop",
17 |         "svelte",
18 |         "svelte component"
19 |     ],
20 |     "scripts": {
21 |         "dev": "vite dev --port 3000 --host",
22 |         "gh-pages": "vite build && node gh-pages.cjs",
23 |         "build": "svelte-kit sync && svelte-package && node clean-dependencies.js",
24 |         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
25 |         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
26 |         "lint": "prettier --plugin-search-dir . --check . && eslint .",
27 |         "format": "prettier --plugin-search-dir . --write ."
28 |     },
29 |     "devDependencies": {
30 |         "@sveltejs/kit": "1.0.0-next.511",
31 |         "@sveltejs/package": "1.0.0-next.1",
32 |         "@sveltejs/adapter-static": "1.0.0-next.44",
33 |         "@typescript-eslint/eslint-plugin": "^5.27.0",
34 |         "@typescript-eslint/parser": "^5.27.0",
35 |         "eslint": "^8.16.0",
36 |         "eslint-config-prettier": "^8.3.0",
37 |         "eslint-plugin-svelte3": "^4.0.0",
38 |         "prettier": "^2.6.2",
39 |         "prettier-plugin-svelte": "^2.7.0",
40 |         "svelte": "^3.44.0",
41 |         "svelte-check": "^2.7.1",
42 |         "svelte-highlight": "^6.2.1",
43 |         "svelte-preprocess": "^4.10.6",
44 |         "tslib": "^2.3.1",
45 |         "typescript": "^4.7.4",
46 |         "vite": "^3.1.0",
47 |         "gh-pages": "^4.0.0"
48 |     },
49 |     "type": "module",
50 |     "dependencies": {}
51 | }
52 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@sveltejs/kit" />
 2 | 
 3 | // See https://kit.svelte.dev/docs/types#app
 4 | // for information about these interfaces
 5 | // and what to do when importing types
 6 | declare namespace App {
 7 |     // interface Locals {}
 8 |     // interface PageData {}
 9 |     // interface Error {}
10 |     // interface Platform {}
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="utf-8" />
 5 |         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |         %sveltekit.head%
 8 |         <style>
 9 |             html,
10 |             body,
11 |             p,
12 |             ol,
13 |             ul,
14 |             li,
15 |             dl,
16 |             dt,
17 |             dd,
18 |             blockquote,
19 |             figure,
20 |             fieldset,
21 |             legend,
22 |             textarea,
23 |             pre,
24 |             iframe,
25 |             hr,
26 |             h1,
27 |             h2,
28 |             h3,
29 |             h4,
30 |             h5,
31 |             h6 {
32 |                 margin: 0;
33 |                 padding: 0;
34 |             }
35 | 
36 |             ul {
37 |                 list-style: none;
38 |             }
39 | 
40 |             button,
41 |             input,
42 |             select {
43 |                 margin: 0;
44 |             }
45 | 
46 |             html {
47 |                 box-sizing: border-box;
48 |                 font-family: sans-serif;
49 |                 background-color: #167676;
50 |                 color: #f3f5e8;
51 |             }
52 | 
53 |             a {
54 |                 color: #f3f5e8;
55 |                 font-weight: bold;
56 |                 text-decoration: none;
57 |             }
58 |             a:hover {
59 |                 text-decoration: underline;
60 |             }
61 | 
62 |             *,
63 |             *::before,
64 |             *::after {
65 |                 box-sizing: inherit;
66 |             }
67 | 
68 |             img,
69 |             video {
70 |                 height: auto;
71 |                 max-width: 100%;
72 |             }
73 | 
74 |             iframe {
75 |                 border: 0;
76 |             }
77 | 
78 |             table {
79 |                 border-collapse: collapse;
80 |                 border-spacing: 0;
81 |             }
82 | 
83 |             td,
84 |             th {
85 |                 padding: 0;
86 |             }
87 |         </style>
88 |     </head>
89 | 
90 |     <body>
91 |         <div>%sveltekit.body%</div>
92 |     </body>
93 | </html>
94 | 


--------------------------------------------------------------------------------
/src/custom_events.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '@composi/gestures';
 2 | 
 3 | declare namespace svelte.JSX {
 4 |     import type {
 5 |         DragEndEvent,
 6 |         DragMoveEvent,
 7 |         DragStartEvent
 8 |     } from '@utils/use_directives/draggable';
 9 |     import type {
10 |         MouseDragEndEvent,
11 |         MouseDragMoveEvent,
12 |         MouseDragStartEvent
13 |     } from '@utils/use_directives/mouse_draggable';
14 |     import type { TouchScalePanRotateEvent } from '@components/by_entity/media/inputs/new_cropper/touch_scale_pan_rotate';
15 |     interface HTMLAttributes<T> {
16 |         // use:mouse_draggable
17 |         onmouse_draggable_start?: (e: MouseDragStartEvent) => void;
18 |         onmouse_draggable_move?: (e: MouseDragMoveEvent) => void;
19 |         onmouse_draggable_end?: (e: MouseDragEndEvent) => void;
20 | 
21 |         // use:touch_zoom_pan_rotate
22 |         ontouch_scale_pan_rotate?: (e: TouchScalePanRotateEvent) => void;
23 |         onnumber_of_touch_points_changed?: (e: CustomEvent<null>) => void;
24 |         ontouchend_scale_pan_rotate?: (e: CustomEvent<null>) => void;
25 | 
26 |         ongesturestart?: (e: Event) => void;
27 |         ongesturechange?: (e: Event) => void;
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/CropMediaView.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     /* This component implements the transformations and animations
  3 |        to zoom, rotate and pan.
  4 |        */
  5 |     import TransformMediaView from './TransformMediaView.svelte';
  6 |     import {
  7 |         rotate_point_around_center,
  8 |         add_point,
  9 |         type Size,
 10 |         sub_point,
 11 |         rotate_point,
 12 |         mul_point,
 13 |         get_center
 14 |     } from './geometry';
 15 |     import type { Point } from './geometry';
 16 |     import type { Media, CropValue, CropShape } from '../types';
 17 |     import { AnimatePosition } from './animate_position';
 18 | 
 19 |     export let media: Media;
 20 | 
 21 |     export let shape: CropShape;
 22 | 
 23 |     export let outer_size: Size;
 24 |     export let crop_window_size: Size;
 25 | 
 26 |     export function set_zoom(scale: number, zoom_target: Point) {
 27 |         // MAYBE: zoom(scale/value.scale, zoom_target);
 28 |         let t = sub_point(
 29 |             zoom_target,
 30 |             add_point(
 31 |                 center_point,
 32 |                 mul_point(
 33 |                     add_point(
 34 |                         value.position,
 35 |                         pending_pan,
 36 |                         pending_rotate_offset,
 37 |                         pending_scale_offset
 38 |                     ),
 39 |                     crop_window_size.height
 40 |                 )
 41 |             )
 42 |         );
 43 | 
 44 |         let new_scale = scale / value.scale;
 45 | 
 46 |         let offset = {
 47 |             x: (-t.x * (new_scale - pending_scale)) / pending_scale / crop_window_size.height,
 48 |             y: (-t.y * (new_scale - pending_scale)) / pending_scale / crop_window_size.height
 49 |         };
 50 | 
 51 |         pending_scale_offset = add_point(pending_scale_offset, offset);
 52 | 
 53 |         pending_scale = new_scale;
 54 |         animation.abort();
 55 |     }
 56 | 
 57 |     export function set_rotation(target: Point, degrees: number) {
 58 |         //NOT: rotate(target, degrees - value.rotation);
 59 |         if (!image_points) throw 'image points not defined';
 60 |         pending_rotation = degrees - value.rotation;
 61 | 
 62 |         let t = rotate_point_around_center(target, image_points.center, pending_rotation);
 63 |         pending_rotate_offset = mul_point(sub_point(target, t), 1.0 / crop_window_size.height);
 64 |         animation.abort();
 65 |     }
 66 | 
 67 |     export function set_pan(vector: Point) {
 68 |         pending_pan = sub_point(vector, value.position);
 69 |         animation.abort();
 70 |     }
 71 | 
 72 |     export function zoom(scale: number, zoom_target: Point) {
 73 |         let t = sub_point(
 74 |             zoom_target,
 75 |             add_point(
 76 |                 center_point,
 77 |                 mul_point(
 78 |                     add_point(
 79 |                         value.position,
 80 |                         pending_pan,
 81 |                         pending_rotate_offset,
 82 |                         pending_scale_offset
 83 |                     ),
 84 |                     crop_window_size.height
 85 |                 )
 86 |             )
 87 |         );
 88 |         let new_scale = scale * pending_scale;
 89 | 
 90 |         let offset = {
 91 |             x: (-t.x * (new_scale - pending_scale)) / pending_scale / crop_window_size.height,
 92 |             y: (-t.y * (new_scale - pending_scale)) / pending_scale / crop_window_size.height
 93 |         };
 94 | 
 95 |         pending_scale_offset = add_point(pending_scale_offset, offset);
 96 |         pending_scale = new_scale;
 97 |         animation.abort();
 98 |     }
 99 | 
100 |     export function rotate(target: Point, degrees: number) {
101 |         if (!image_points) throw 'image points not defined';
102 |         pending_rotation = pending_rotation + degrees;
103 | 
104 |         let t = rotate_point_around_center(target, image_points.center, pending_rotation);
105 |         pending_rotate_offset = mul_point(sub_point(target, t), 1.0 / crop_window_size.height);
106 |         animation.abort();
107 |     }
108 | 
109 |     export function pan(vector: Point) {
110 |         pending_pan = add_point(pending_pan, vector);
111 |         animation.abort();
112 |     }
113 | 
114 |     export function commit(without_animation?: boolean) {
115 |         value.rotation = value.rotation + pending_rotation;
116 |         pending_rotation = 0;
117 | 
118 |         value.scale = value.scale * pending_scale;
119 |         pending_scale = 1;
120 | 
121 |         value.position = add_point(
122 |             value.position,
123 |             pending_pan,
124 |             pending_rotate_offset,
125 |             pending_scale_offset
126 |         );
127 |         pending_pan = { x: 0, y: 0 };
128 |         pending_rotate_offset = { x: 0, y: 0 };
129 |         pending_scale_offset = { x: 0, y: 0 };
130 | 
131 |         make_image_cover_crop_area(without_animation);
132 |     }
133 | 
134 |     function image_point(p: Point): Point {
135 |         let offset = mul_point(value.position, crop_window_size.height);
136 | 
137 |         return add_point(rotate_point(p, value.rotation), offset, center_point);
138 |     }
139 | 
140 |     function set_media_size(e: CustomEvent<Size>) {
141 |         media_size = { ...e.detail, aspect: e.detail.width / e.detail.height };
142 |         commit(true);
143 |     }
144 | 
145 |     let animation = new AnimatePosition(
146 |         (p, s) => {
147 |             animation_offset = p;
148 |             animation_scale = s;
149 |         },
150 |         () => {
151 |             pending_pan = add_point(pending_pan, animation_offset);
152 |             pending_scale *= animation_scale;
153 |             animation_scale = 1;
154 |             animation_offset = { x: 0, y: 0 };
155 |         }
156 |     );
157 | 
158 |     let media_size: {
159 |         width: number;
160 |         height: number;
161 |         aspect: number;
162 |     };
163 | 
164 |     export let value: CropValue;
165 |     let pending_pan: Point = {
166 |         x: 0,
167 |         y: 0
168 |     };
169 |     let pending_scale_offset: Point = {
170 |         x: 0,
171 |         y: 0
172 |     };
173 |     let pending_rotate_offset: Point = {
174 |         x: 0,
175 |         y: 0
176 |     };
177 |     let animation_offset: Point = {
178 |         x: 0,
179 |         y: 0
180 |     };
181 |     let pending_rotation: number = 0;
182 |     let pending_scale: number = 1;
183 |     let animation_scale: number = 1;
184 | 
185 |     export let center_point: Point;
186 | 
187 |     let image_points:
188 |         | {
189 |               top_left: Point;
190 |               top_right: Point;
191 |               bottom_right: Point;
192 |               bottom_left: Point;
193 |               center: Point;
194 |           }
195 |         | undefined = undefined;
196 |     let image_top_left_rotated: Point;
197 |     let top_left_croparea_rotated: Point;
198 |     let top_right_croparea_rotated: Point;
199 |     let bottom_left_croparea_rotated: Point;
200 |     let bottom_right_croparea_rotated: Point;
201 | 
202 |     function calculate_rotated_croparea_points() {
203 |         if (shape == 'rect') {
204 |             let left_croparea = (outer_size.width - crop_window_size.width) / 2;
205 |             let right_croparea =
206 |                 (outer_size.width - crop_window_size.width) / 2 + crop_window_size.width;
207 |             let top_croparea = (outer_size.height - crop_window_size.height) / 2;
208 |             let bottom_croparea =
209 |                 (outer_size.height - crop_window_size.height) / 2 + crop_window_size.height;
210 | 
211 |             top_left_croparea_rotated = rotate_point_around_center(
212 |                 {
213 |                     x: left_croparea,
214 |                     y: top_croparea
215 |                 },
216 |                 center_point,
217 |                 -value.rotation
218 |             );
219 |             top_right_croparea_rotated = rotate_point_around_center(
220 |                 {
221 |                     x: right_croparea,
222 |                     y: top_croparea
223 |                 },
224 |                 center_point,
225 |                 -value.rotation
226 |             );
227 |             bottom_left_croparea_rotated = rotate_point_around_center(
228 |                 {
229 |                     x: left_croparea,
230 |                     y: bottom_croparea
231 |                 },
232 |                 center_point,
233 |                 -value.rotation
234 |             );
235 |             bottom_right_croparea_rotated = rotate_point_around_center(
236 |                 {
237 |                     x: right_croparea,
238 |                     y: bottom_croparea
239 |                 },
240 |                 center_point,
241 |                 -value.rotation
242 |             );
243 |         } else {
244 |             /* To support round crop on aspect ration != 1,
245 |                we need to find the tangent points where the
246 |                slope of the tangent is equal to the slope of the
247 |                corresponding side of the rotated image.
248 | 
249 |                https://www.anirdesh.com/math/algebra/ellipse-tangents.php
250 |             */
251 | 
252 |             let slope1 = Math.tan((-value.rotation / 180) * Math.PI);
253 |             let slope2 = Math.tan(((-value.rotation + 90) / 180) * Math.PI);
254 | 
255 |             function tangent_point_on_ellipse(a: number, b: number, m: number): Point {
256 |                 return {
257 |                     x: (a * a * m) / Math.sqrt(a * a * m * m + b * b),
258 |                     y: (b * b) / Math.sqrt(a * a * m * m + b * b)
259 |                 };
260 |             }
261 | 
262 |             let p1 = tangent_point_on_ellipse(
263 |                 crop_window_size.width / 2,
264 |                 crop_window_size.height / 2,
265 |                 slope1
266 |             );
267 |             let p2 = { x: -p1.x, y: -p1.y };
268 |             let p3 = tangent_point_on_ellipse(
269 |                 crop_window_size.width / 2,
270 |                 crop_window_size.height / 2,
271 |                 slope2
272 |             );
273 |             let p4 = { x: -p3.x, y: -p3.y };
274 | 
275 |             top_left_croparea_rotated = add_point(center_point, rotate_point(p1, -value.rotation));
276 |             top_right_croparea_rotated = add_point(center_point, rotate_point(p2, -value.rotation));
277 |             bottom_right_croparea_rotated = add_point(
278 |                 center_point,
279 |                 rotate_point(p3, -value.rotation)
280 |             );
281 |             bottom_left_croparea_rotated = add_point(
282 |                 center_point,
283 |                 rotate_point(p4, -value.rotation)
284 |             );
285 |         }
286 |     }
287 | 
288 |     function make_image_cover_crop_area(without_animation?: boolean) {
289 |         if (!media_size) return;
290 |         if (!outer_size) return;
291 |         if (!crop_window_size) return;
292 | 
293 |         calculate_rotated_croparea_points();
294 | 
295 |         let crop_area_max_x = Math.max(
296 |             top_left_croparea_rotated.x,
297 |             top_right_croparea_rotated.x,
298 |             bottom_left_croparea_rotated.x,
299 |             bottom_right_croparea_rotated.x
300 |         );
301 |         let crop_area_min_x = Math.min(
302 |             top_left_croparea_rotated.x,
303 |             top_right_croparea_rotated.x,
304 |             bottom_left_croparea_rotated.x,
305 |             bottom_right_croparea_rotated.x
306 |         );
307 | 
308 |         let crop_area_max_y = Math.max(
309 |             top_left_croparea_rotated.y,
310 |             top_right_croparea_rotated.y,
311 |             bottom_left_croparea_rotated.y,
312 |             bottom_right_croparea_rotated.y
313 |         );
314 |         let crop_area_min_y = Math.min(
315 |             top_left_croparea_rotated.y,
316 |             top_right_croparea_rotated.y,
317 |             bottom_left_croparea_rotated.y,
318 |             bottom_right_croparea_rotated.y
319 |         );
320 | 
321 |         if (value.scale) {
322 |             let width = crop_window_size.height * media_size.aspect * value.scale;
323 |             let height = crop_window_size.height * value.scale;
324 | 
325 |             let top_left = image_point({
326 |                 x: -width / 2,
327 |                 y: -height / 2
328 |             });
329 | 
330 |             let bottom_right = image_point({
331 |                 x: width / 2,
332 |                 y: height / 2
333 |             });
334 | 
335 |             image_points = {
336 |                 top_left,
337 |                 top_right: image_point({
338 |                     x: width / 2,
339 |                     y: -height / 2
340 |                 }),
341 |                 bottom_right,
342 |                 bottom_left: image_point({
343 |                     x: -width / 2,
344 |                     y: height / 2
345 |                 }),
346 |                 center: add_point(get_center(top_left, bottom_right))
347 |             };
348 | 
349 |             image_top_left_rotated = rotate_point_around_center(
350 |                 image_points.top_left,
351 |                 center_point,
352 |                 -value.rotation
353 |             );
354 | 
355 |             if (
356 |                 crop_area_min_x >= image_top_left_rotated.x &&
357 |                 crop_area_max_x <=
358 |                     image_top_left_rotated.x +
359 |                         crop_window_size.height * media_size.aspect * value.scale &&
360 |                 crop_area_min_y >= image_top_left_rotated.y &&
361 |                 crop_area_max_y <= image_top_left_rotated.y + crop_window_size.height * value.scale
362 |             ) {
363 |                 return;
364 |             }
365 |         }
366 | 
367 |         let rotated_crop_area_width = crop_area_max_x - crop_area_min_x;
368 |         let rotated_crop_area_height = crop_area_max_y - crop_area_min_y;
369 | 
370 |         let required_scale = Math.max(
371 |             rotated_crop_area_width / crop_window_size.height / media_size.aspect,
372 |             rotated_crop_area_height / crop_window_size.height
373 |         );
374 |         let new_scale = required_scale > value.scale ? required_scale : value.scale;
375 | 
376 |         let new_image_top_left_rotated = rotate_point_around_center(
377 |             image_point({
378 |                 x: (-crop_window_size.height * media_size.aspect * new_scale) / 2,
379 |                 y: (-crop_window_size.height * new_scale) / 2
380 |             }),
381 |             center_point,
382 |             -value.rotation
383 |         );
384 | 
385 |         let scaled_image_size = {
386 |             width: crop_window_size.height * media_size.aspect * new_scale,
387 |             height: crop_window_size.height * new_scale
388 |         };
389 | 
390 |         let correction = {
391 |             x:
392 |                 Math.min(crop_area_min_x - new_image_top_left_rotated.x, 0) -
393 |                 Math.min(
394 |                     new_image_top_left_rotated.x + scaled_image_size.width + -crop_area_max_x,
395 |                     0
396 |                 ),
397 | 
398 |             y:
399 |                 Math.min(crop_area_min_y - new_image_top_left_rotated.y, 0) -
400 |                 Math.min(
401 |                     new_image_top_left_rotated.y + scaled_image_size.height - crop_area_max_y,
402 |                     0
403 |                 )
404 |         };
405 | 
406 |         let offset = mul_point(
407 |             rotate_point(correction, value.rotation),
408 |             1 / crop_window_size.height
409 |         );
410 | 
411 |         if (without_animation === undefined || without_animation === false) {
412 |             animation.start(mul_point(offset, -1), value.scale / new_scale);
413 |         }
414 | 
415 |         value.position = add_point(value.position, offset);
416 |         value.scale = new_scale;
417 |     }
418 | 
419 |     $: {
420 |         value.aspect && make_image_cover_crop_area(true);
421 |     }
422 | </script>
423 | 
424 | {#if crop_window_size && outer_size}
425 |     <TransformMediaView
426 |         {media}
427 |         height={value.scale * pending_scale * animation_scale * crop_window_size.height}
428 |         position={add_point(
429 |             center_point,
430 |             mul_point(
431 |                 add_point(
432 |                     value.position,
433 |                     pending_pan,
434 |                     pending_rotate_offset,
435 |                     pending_scale_offset,
436 |                     animation_offset
437 |                 ),
438 |                 crop_window_size.height
439 |             )
440 |         )}
441 |         rotation={value.rotation + pending_rotation}
442 |         on:media_size={set_media_size}
443 |     />
444 |     <!--
445 |     {#if image_points}
446 |         <div
447 |             class="p"
448 |             style="position:absolute;left:{image_points.top_left.x - 2}px;top: {image_points
449 |                 .top_left.y - 2}px"
450 |         />
451 |         <div
452 |             class="p"
453 |             style="position:absolute;left:{image_points.top_right.x - 2}px;top: {image_points
454 |                 .top_right.y - 2}px"
455 |         />
456 |         <div
457 |             class="p"
458 |             style="position:absolute;left:{image_points.bottom_right.x - 2}px;top: {image_points
459 |                 .bottom_right.y - 2}px"
460 |         />
461 |         <div
462 |             class="p"
463 |             style="position:absolute;left:{image_points.bottom_left.x - 2}px;top: {image_points
464 |                 .bottom_left.y - 2}px"
465 |         />
466 | 
467 |         <div
468 |             class="p"
469 |             style="position:absolute;left:{image_points.center.x - 2}px;top: {image_points.center
470 |                 .y - 2}px"
471 |         />
472 |     {/if}
473 |     {#if image_top_left_rotated}
474 |         <div
475 |             style="position:absolute;left:{image_top_left_rotated.x -
476 |                 2}px;top: {image_top_left_rotated.y - 2}px; width: 5px; height:5px; background:lime"
477 |         />
478 |         <div
479 |             style="position:absolute;left:{image_top_left_rotated.x}px;top: {image_top_left_rotated.y}px; width: {crop_window_size.height *
480 |                 media_size.aspect *
481 |                 value.scale}px; height:{crop_window_size.height *
482 |                 value.scale}px; border:1px solid lime"
483 |         />
484 |     {/if}
485 |     {#if top_left_croparea_rotated}
486 |         <div
487 |             style="position:absolute;left:{top_left_croparea_rotated.x -
488 |                 2}px;top: {top_left_croparea_rotated.y -
489 |                 2}px; width: 5px; height:5px; background:cyan"
490 |         />
491 |     {/if}
492 |     {#if top_right_croparea_rotated}
493 |         <div
494 |             style="position:absolute;left:{top_right_croparea_rotated.x -
495 |                 2}px;top: {top_right_croparea_rotated.y -
496 |                 2}px; width: 5px; height:5px; background:cyan"
497 |         />
498 |     {/if}
499 |     {#if bottom_right_croparea_rotated}
500 |         <div
501 |             style="position:absolute;left:{bottom_right_croparea_rotated.x -
502 |                 2}px;top: {bottom_right_croparea_rotated.y -
503 |                 2}px; width: 5px; height:5px; background:cyan"
504 |         />
505 |     {/if}
506 |     {#if bottom_left_croparea_rotated}
507 |         <div
508 |             style="position:absolute;left:{bottom_left_croparea_rotated.x -
509 |                 2}px;top: {bottom_left_croparea_rotated.y -
510 |                 2}px; width: 5px; height:5px; background:cyan"
511 |         />
512 |     {/if}
513 |     -->
514 | {/if}
515 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/CropWindow.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { Point, Size } from './geometry';
 3 |     import GestureMediaView from './GestureMediaView.svelte';
 4 |     import { onMount } from 'svelte';
 5 |     import { defaultOptions, defaultValue, type CropValue, type Media } from '../types';
 6 | 
 7 |     export let media: Media;
 8 |     export let value: CropValue = defaultValue;
 9 | 
10 |     type OverlayOptions = $$Generic;
11 | 
12 |     //@ts-ignore
13 |     export let options: Options<OverlayOptions> = defaultOptions;
14 | 
15 |     let outer_size: Size;
16 |     let crop_window_size: Size;
17 |     let center_point: Point;
18 | 
19 |     export function commit() {
20 |         gesture_el.commit();
21 |     }
22 | 
23 |     export function set_zoom(zoom: number) {
24 |         gesture_el.set_zoom(zoom);
25 |     }
26 | 
27 |     export function set_rotation(degrees: number) {
28 |         gesture_el.set_rotation(degrees);
29 |     }
30 | 
31 |     export function set_pan(vector: Point) {
32 |         gesture_el.set_pan(vector);
33 |     }
34 | 
35 |     onMount(() => {
36 |         compute_window_sizes();
37 |     });
38 | 
39 |     function compute_window_sizes() {
40 |         let rect = outer_el.getBoundingClientRect();
41 |         outer_size = {
42 |             width: rect.width,
43 |             height: rect.height
44 |         };
45 | 
46 |         center_point = { x: rect.width / 2, y: rect.height / 2 };
47 | 
48 |         crop_window_size =
49 |             outer_size.width / outer_size.height > value.aspect
50 |                 ? {
51 |                       height: outer_size.height - 2 * options.crop_window_margin,
52 |                       width: (outer_size.height - 2 * options.crop_window_margin) * value.aspect
53 |                   }
54 |                 : {
55 |                       height: (outer_size.width - 2 * options.crop_window_margin) / value.aspect,
56 |                       width: outer_size.width - 2 * options.crop_window_margin
57 |                   };
58 |     }
59 | 
60 |     let outer_el: HTMLDivElement;
61 |     let gesture_el: GestureMediaView<OverlayOptions>;
62 | 
63 |     $: {
64 |         if (outer_el && value.aspect) compute_window_sizes();
65 |     }
66 | </script>
67 | 
68 | <svelte:window on:resize={compute_window_sizes} />
69 | 
70 | <div
71 |     bind:this={outer_el}
72 |     class="outer"
73 |     style={`--crop-window-height:${crop_window_size?.height || 0}px;
74 | --crop-window-width:${crop_window_size?.width || 0}px;
75 | --outer-height:${outer_size?.height || 0}px;
76 | --outer-width:${outer_size?.width || 0}px;`}
77 | >
78 |     {#if crop_window_size && outer_size && center_point}
79 |         <GestureMediaView
80 |             bind:this={gesture_el}
81 |             shape={options.shape}
82 |             overlay={options.overlay}
83 |             overlay_options={options.overlay_options}
84 |             bind:value
85 |             {media}
86 |             {crop_window_size}
87 |             {outer_size}
88 |             {center_point}
89 |         />
90 |     {/if}
91 | </div>
92 | 
93 | <style>
94 |     .outer {
95 |         height: 100%;
96 |         width: 100%;
97 |     }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/GestureMediaView.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     /* This component is responsible for handling all touch gestures
  3 |        and mouse gestures on the crop window.
  4 |        */
  5 |     import CropMediaView from './CropMediaView.svelte';
  6 |     import { onMount } from 'svelte';
  7 |     import {
  8 |         get_angle_between_points,
  9 |         mul_point,
 10 |         sub_point,
 11 |         type Point,
 12 |         type Size
 13 |     } from './geometry';
 14 |     import { keep_delaying_while_triggered } from '../utils/throttle';
 15 |     import {
 16 |         touch_scale_pan_rotate,
 17 |         type TouchScalePanRotateEvent
 18 |     } from '../gestures/touch_scale_pan_rotate';
 19 |     import {
 20 |         pos_from_mouse_or_touch_event,
 21 |         mouse_draggable,
 22 |         type MouseDragMoveEvent
 23 |     } from '../gestures/mouse_events';
 24 |     import type { Media, CropValue, OverlayComponent, CropShape } from '../types';
 25 | 
 26 |     export let media: Media;
 27 |     export let value: CropValue;
 28 | 
 29 |     type OverlayOptions = $$Generic;
 30 |     export let shape: CropShape;
 31 |     export let overlay: OverlayComponent<OverlayOptions>;
 32 |     export let overlay_options: OverlayOptions;
 33 | 
 34 |     let outer_el: HTMLDivElement;
 35 |     let crop_media_el: CropMediaView;
 36 | 
 37 |     export let center_point: Point;
 38 |     export let outer_size: Size;
 39 |     export let crop_window_size: Size;
 40 | 
 41 |     let gesture_in_progress: boolean = false;
 42 | 
 43 |     export function commit() {
 44 |         crop_media_el.commit();
 45 |     }
 46 | 
 47 |     export function set_zoom(zoom: number) {
 48 |         crop_media_el.set_zoom(zoom, center_point);
 49 |     }
 50 | 
 51 |     export function set_rotation(degrees: number) {
 52 |         crop_media_el.set_rotation(center_point, degrees);
 53 |     }
 54 | 
 55 |     export function set_pan(vector: Point) {
 56 |         crop_media_el.set_pan(vector);
 57 |     }
 58 | 
 59 |     /* handle mouse gestures */
 60 | 
 61 |     let mouse_dragstart: Point | undefined;
 62 |     function mouse_dragmove(e: MouseDragMoveEvent) {
 63 |         if (e.detail.mouse_button == 0) {
 64 |             let mouse_pan = {
 65 |                 x: e.detail.dx || 0,
 66 |                 y: e.detail.dy || 0
 67 |             };
 68 | 
 69 |             crop_media_el.pan(mul_point(mouse_pan, 1.0 / crop_window_size.height));
 70 |         } else {
 71 |             let rect = outer_el.getBoundingClientRect();
 72 | 
 73 |             const p = sub_point(e.detail, rect);
 74 | 
 75 |             let mouse_rotate = mouse_dragstart
 76 |                 ? get_angle_between_points(p, center_point) -
 77 |                   get_angle_between_points(mouse_dragstart, center_point)
 78 |                 : 0;
 79 | 
 80 |             mouse_dragstart = p;
 81 | 
 82 |             crop_media_el.rotate(center_point, mouse_rotate);
 83 |         }
 84 |         gesture_in_progress = true;
 85 |     }
 86 | 
 87 |     function mouse_dragend() {
 88 |         mouse_dragstart = undefined;
 89 |         finish_gesture();
 90 |     }
 91 | 
 92 |     function on_wheel(e: WheelEvent) {
 93 |         const scale_speed = 1;
 94 | 
 95 |         e.preventDefault();
 96 |         var direction = e.detail < 0 || e.deltaY > 0 ? 1 : -1;
 97 |         const zoom_step = 1 + scale_speed / 10;
 98 |         const zoom = direction === 1 ? zoom_step : 1 / zoom_step;
 99 | 
100 |         let rect = outer_el.getBoundingClientRect();
101 | 
102 |         const zoom_point = sub_point(pos_from_mouse_or_touch_event(e), rect);
103 | 
104 |         gesture_in_progress = true;
105 | 
106 |         crop_media_el.zoom(zoom, zoom_point);
107 |         finish_gesture();
108 |     }
109 | 
110 |     /* handle touch gestures */
111 | 
112 |     let focal_point: Point | undefined = undefined;
113 | 
114 |     function touch_scale_pan_rotate_handler(e: TouchScalePanRotateEvent) {
115 |         if (!focal_point) {
116 |             focal_point = e.detail.focal_point;
117 |         }
118 | 
119 |         gesture_in_progress = true;
120 | 
121 |         crop_media_el.zoom(e.detail.scale, focal_point);
122 |         crop_media_el.rotate(focal_point, e.detail.rotation);
123 |         crop_media_el.pan(mul_point(e.detail.pan, 1.0 / crop_window_size.height));
124 |     }
125 | 
126 |     function number_of_touch_points_changed() {
127 |         focal_point = undefined;
128 |         crop_media_el.commit();
129 |     }
130 | 
131 |     function touchend_handler() {
132 |         focal_point = undefined;
133 |         finish_gesture();
134 |     }
135 | 
136 |     /* */
137 | 
138 |     let finish_gesture: () => void;
139 |     let end_gesture: () => void;
140 | 
141 |     onMount(() => {
142 |         finish_gesture = keep_delaying_while_triggered(() => {
143 |             end_gesture();
144 |             crop_media_el.commit();
145 |         }, 200);
146 | 
147 |         end_gesture = keep_delaying_while_triggered(() => {
148 |             gesture_in_progress = false;
149 |         }, 1600);
150 |     });
151 | 
152 |     // prevent Safari on iOS >= 10 to zoom the page
153 |     function prevent_safari_zoom(e: Event) {
154 |         e.preventDefault();
155 |     }
156 | </script>
157 | 
158 | <div
159 |     bind:this={outer_el}
160 |     class="outer"
161 |     on:gesturestart={prevent_safari_zoom}
162 |     on:gesturechange={prevent_safari_zoom}
163 |     use:mouse_draggable
164 |     on:wheel|nonpassive={on_wheel}
165 |     on:mouse_draggable_move={mouse_dragmove}
166 |     on:mouse_draggable_end={mouse_dragend}
167 |     use:touch_scale_pan_rotate
168 |     on:touch_scale_pan_rotate={touch_scale_pan_rotate_handler}
169 |     on:number_of_touch_points_changed={number_of_touch_points_changed}
170 |     on:touchend_scale_pan_rotate={touchend_handler}
171 | >
172 |     <CropMediaView
173 |         bind:this={crop_media_el}
174 |         bind:outer_size
175 |         {shape}
176 |         bind:crop_window_size
177 |         bind:media
178 |         bind:value
179 |         {center_point}
180 |     />
181 |     <div class="inner">
182 |         <svelte:component this={overlay} options={overlay_options} {gesture_in_progress} {shape} />
183 |     </div>
184 | </div>
185 | 
186 | <style>
187 |     .outer {
188 |         height: 100%;
189 |         width: 100%;
190 |         overflow: hidden;
191 |         position: relative;
192 |         cursor: crosshair;
193 |     }
194 | 
195 |     .inner {
196 |         overflow: hidden;
197 |         position: absolute;
198 |         margin: auto;
199 |         top: 0;
200 |         left: 0;
201 |         right: 0;
202 |         bottom: 0;
203 |     }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/TransformMediaView.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     /* This component only renders the transformed image or video */
 3 |     import { createEventDispatcher, onMount } from 'svelte';
 4 |     import type { Media } from '../types';
 5 | 
 6 |     export let media: Media;
 7 | 
 8 |     export let position: {
 9 |         x: number;
10 |         y: number;
11 |     } = { x: 0, y: 0 };
12 |     export let height: number = 1.0;
13 |     export let rotation: number = 0;
14 | 
15 |     let image_el: HTMLImageElement;
16 |     let video_el: HTMLVideoElement;
17 | 
18 |     let dispatch = createEventDispatcher();
19 | 
20 |     function media_loaded() {
21 |         const media_el = image_el || video_el;
22 | 
23 |         if (media_el) {
24 |             const naturalWidth = image_el?.naturalWidth || video_el?.videoWidth || 0;
25 |             const naturalHeight = image_el?.naturalHeight || video_el?.videoHeight || 0;
26 | 
27 |             let media_size = {
28 |                 width: naturalWidth,
29 |                 height: naturalHeight
30 |             };
31 |             dispatch('media_size', media_size);
32 |         }
33 |     }
34 | 
35 |     onMount(() => {
36 |         if (image_el && image_el.complete) {
37 |             media_loaded();
38 |         }
39 |     });
40 | </script>
41 | 
42 | {#if media && media.content_type == 'image'}
43 |     <img
44 |         on:load={media_loaded}
45 |         bind:this={image_el}
46 |         src={media.url}
47 |         alt={'image to be cropped'}
48 |         style={`transform: translateX(-50%) translateY(-50%) rotate(${rotation}deg);` +
49 |             `height: ${height}px;` +
50 |             `margin-left: ${position.x}px;` +
51 |             `margin-top: ${position.y}px;`}
52 |     />
53 | {:else if media && media.content_type == 'video'}
54 |     <video
55 |         autoPlay
56 |         loop
57 |         muted={true}
58 |         style={`transform: translateX(-50%) translateY(-50%) rotate(${rotation}deg);` +
59 |             `height: ${height}px;` +
60 |             `margin-left: ${position.x}px;` +
61 |             `margin-top: ${position.y}px;`}
62 |         on:loadedmetadata={media_loaded}
63 |         bind:this={video_el}
64 |         controls={false}
65 |     >
66 |         {#each Array.isArray(media.url) ? media.url : [{ src: media.url }] as item}
67 |             <source src={item.src} />
68 |         {/each}
69 |     </video>
70 | {/if}
71 | 
72 | <style>
73 |     img,
74 |     video {
75 |         display: block;
76 |         max-width: none;
77 |         max-height: none;
78 |         width: auto;
79 |     }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/animate_position.ts:
--------------------------------------------------------------------------------
 1 | import type { Point } from './geometry';
 2 | 
 3 | function easeInOutCubic(x: number): number {
 4 |     return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
 5 | }
 6 | 
 7 | export type AnimationState = {
 8 |     start: DOMHighResTimeStamp | null;
 9 |     offset: Point | undefined;
10 |     scale: number | undefined;
11 | };
12 | 
13 | function animate(animation: AnimatePosition) {
14 |     if (animation.rafTimeout) window.cancelAnimationFrame(animation.rafTimeout);
15 |     animation.rafTimeout = window.requestAnimationFrame((timestamp: DOMHighResTimeStamp) => {
16 |         if (!animation.start_time) animation.start_time = timestamp;
17 | 
18 |         const elapsed = Math.min((timestamp - animation.start_time) / animation.duration, 1.0);
19 |         let z = easeInOutCubic(elapsed);
20 | 
21 |         if (animation.offset === undefined || animation.scale === undefined)
22 |             throw 'animation lacks start or end position/scale';
23 | 
24 |         animation.on_progress(
25 |             {
26 |                 x: (1 - z) * animation.offset.x,
27 |                 y: (1 - z) * animation.offset.y
28 |             },
29 |             (1 - z) * animation.scale + z * 1.0
30 |         );
31 | 
32 |         if (elapsed < 1.0) {
33 |             animate(animation);
34 |         } else {
35 |             animation.abort();
36 |         }
37 |     });
38 | }
39 | 
40 | export class AnimatePosition {
41 |     duration: number = 500;
42 |     start_time: DOMHighResTimeStamp | null = null;
43 |     offset: Point | undefined;
44 |     scale: number | undefined;
45 | 
46 |     rafTimeout: number | null = null;
47 | 
48 |     start = (offset: Point, scale: number) => {
49 |         this.start_time = null;
50 |         this.offset = offset;
51 |         this.scale = scale;
52 | 
53 |         animate(this);
54 |     };
55 |     abort = () => {
56 |         if (this.rafTimeout) window.cancelAnimationFrame(this.rafTimeout);
57 |         this.on_end();
58 | 
59 |         this.start_time = null;
60 |         this.offset = undefined;
61 |         this.scale = undefined;
62 |     };
63 | 
64 |     on_progress: (position: Point, scale: number) => void;
65 |     on_end: () => void;
66 | 
67 |     constructor(on_progress: (position: Point, scale: number) => void, on_end: () => void) {
68 |         this.on_progress = on_progress;
69 |         this.on_end = on_end;
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/lib/crop_window/geometry.ts:
--------------------------------------------------------------------------------
 1 | export type Size = {
 2 |     width: number;
 3 |     height: number;
 4 | };
 5 | 
 6 | export type Point = {
 7 |     x: number;
 8 |     y: number;
 9 | };
10 | 
11 | export function rotate_point(p: Point, rotation: number): Point {
12 |     let rot = (rotation / 180) * Math.PI;
13 |     return {
14 |         x: p.x * Math.cos(rot) - p.y * Math.sin(rot),
15 |         y: p.y * Math.cos(rot) + p.x * Math.sin(rot)
16 |     };
17 | }
18 | export function add_point(...args: Point[]): Point {
19 |     let r: Point = {
20 |         x: 0,
21 |         y: 0
22 |     };
23 |     for (var i = 0; i < args.length; i++) {
24 |         r.x += args[i].x;
25 |         r.y += args[i].y;
26 |     }
27 |     return r;
28 | }
29 | 
30 | export function sub_point(p: Point, offset: Point): Point {
31 |     return {
32 |         x: p.x - offset.x,
33 |         y: p.y - offset.y
34 |     };
35 | }
36 | 
37 | export function mul_point(p: Point, v: number): Point {
38 |     return {
39 |         x: p.x * v,
40 |         y: p.y * v
41 |     };
42 | }
43 | 
44 | export function rotate_point_around_center(p: Point, center: Point, rotation: number): Point {
45 |     let { x, y } = rotate_point(
46 |         {
47 |             x: p.x - center.x,
48 |             y: p.y - center.y
49 |         },
50 |         rotation
51 |     );
52 |     return {
53 |         x: x + center.x,
54 |         y: y + center.y
55 |     };
56 | }
57 | 
58 | export function get_center(a: Point, b: Point): Point {
59 |     return {
60 |         x: (b.x + a.x) / 2,
61 |         y: (b.y + a.y) / 2
62 |     };
63 | }
64 | 
65 | export function get_angle_between_points(a: Point, b: Point): number {
66 |     let angle = -Math.atan2(a.y - b.y, b.x - a.x) * (180 / Math.PI);
67 |     return angle < 0 ? angle + 360 : angle;
68 | }
69 | 
70 | export function get_distance_between_points(a: Point, b: Point): number {
71 |     return Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y));
72 | }
73 | 


--------------------------------------------------------------------------------
/src/lib/gestures/mouse_events.ts:
--------------------------------------------------------------------------------
  1 | export function pos_from_mouse_or_touch_event(event: MouseEvent | TouchEvent): {
  2 |     x: number;
  3 |     y: number;
  4 | } {
  5 |     let pos: MouseEvent | Touch;
  6 |     if (event.type === 'touchstart') {
  7 |         pos = (event as TouchEvent).touches[0];
  8 |     } else {
  9 |         if (event.type === 'touchmove') {
 10 |             pos = (event as TouchEvent).changedTouches[0];
 11 |         } else {
 12 |             pos = event as MouseEvent;
 13 |         }
 14 |     }
 15 |     return {
 16 |         x: pos.clientX,
 17 |         y: pos.clientY
 18 |     };
 19 | }
 20 | 
 21 | export type MouseDragMove = {
 22 |     x: number;
 23 |     y: number;
 24 |     dx: number;
 25 |     dy: number;
 26 |     mouse_button: number;
 27 | };
 28 | export type MouseDragStartEnd = {
 29 |     x: number;
 30 |     y: number;
 31 |     mouse_button: number;
 32 | };
 33 | 
 34 | export type MouseDragMoveEvent = {
 35 |     detail: MouseDragMove;
 36 | };
 37 | 
 38 | export type MouseDragStartEvent = {
 39 |     detail: MouseDragStartEnd;
 40 | };
 41 | 
 42 | export type MouseDragEndEvent = {
 43 |     detail: MouseDragStartEnd;
 44 | };
 45 | 
 46 | function prevent_context_menu(event: Event) {
 47 |     event.preventDefault();
 48 |     return false;
 49 | }
 50 | 
 51 | export function mouse_draggable(node: HTMLElement) {
 52 |     let x: number | undefined;
 53 |     let y: number | undefined;
 54 |     let mouse_button: number | undefined;
 55 | 
 56 |     function handle_dragstart(event: MouseEvent) {
 57 |         // https://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag
 58 |         event.preventDefault();
 59 | 
 60 |         if (mouse_button === undefined) {
 61 |             mouse_button = event.button;
 62 |             let p = pos_from_mouse_or_touch_event(event);
 63 |             let detail: MouseDragStartEnd = {
 64 |                 x: p.x,
 65 |                 y: p.y,
 66 |                 mouse_button
 67 |             };
 68 | 
 69 |             node.dispatchEvent(
 70 |                 new CustomEvent('mouse_draggable_start', {
 71 |                     detail
 72 |                 })
 73 |             );
 74 |             window.addEventListener('mousemove', handle_dragmove);
 75 |             window.addEventListener('mouseup', handle_dragend);
 76 |         }
 77 |     }
 78 |     function handle_dragmove(event: MouseEvent) {
 79 |         event.preventDefault();
 80 | 
 81 |         let p = pos_from_mouse_or_touch_event(event);
 82 | 
 83 |         const dx = p.x - (x || p.x);
 84 |         const dy = p.y - (y || p.y);
 85 |         x = p.x;
 86 |         y = p.y;
 87 |         let detail: MouseDragMove = {
 88 |             x,
 89 |             y,
 90 |             dx,
 91 |             dy,
 92 |             mouse_button: mouse_button || 0
 93 |         };
 94 |         node.dispatchEvent(
 95 |             new CustomEvent('mouse_draggable_move', {
 96 |                 detail
 97 |             })
 98 |         );
 99 |     }
100 |     function handle_dragend(event: MouseEvent) {
101 |         event.preventDefault();
102 |         x = undefined;
103 |         y = undefined;
104 |         mouse_button = undefined;
105 | 
106 |         let p = pos_from_mouse_or_touch_event(event);
107 |         let detail: MouseDragStartEnd = {
108 |             x: p.x,
109 |             y: p.y,
110 |             mouse_button: mouse_button || 0
111 |         };
112 |         node.dispatchEvent(
113 |             new CustomEvent('mouse_draggable_end', {
114 |                 detail
115 |             })
116 |         );
117 |         window.removeEventListener('mousemove', handle_dragmove);
118 |         window.removeEventListener('mouseup', handle_dragend);
119 |     }
120 |     node.addEventListener('mousedown', handle_dragstart);
121 |     node.addEventListener('contextmenu', prevent_context_menu);
122 |     return {
123 |         destroy() {
124 |             node.removeEventListener('mousedown', handle_dragstart);
125 |             node.removeEventListener('contextmenu', prevent_context_menu);
126 |         }
127 |     };
128 | }
129 | 
130 | /*
131 | export function clamp(x: number, min: number, max: number) {
132 |     if (x < min) return min;
133 |     if (x > max) return max;
134 |     return x;
135 | }
136 | */
137 | 


--------------------------------------------------------------------------------
/src/lib/gestures/touch_scale_pan_rotate.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     add_point,
  3 |     get_angle_between_points,
  4 |     get_center,
  5 |     get_distance_between_points,
  6 |     sub_point,
  7 |     type Point
  8 | } from '../crop_window/geometry';
  9 | 
 10 | export type TouchScalePanRotateEvent = {
 11 |     detail: TouchScalePanRotate;
 12 | };
 13 | export type TouchScalePanRotate = {
 14 |     focal_point: Point;
 15 |     pan: Point;
 16 |     rotation: number;
 17 |     scale: number;
 18 | };
 19 | 
 20 | const MIN_ROTATION: number = 25;
 21 | const MIN_PAN: number = 35;
 22 | const MIN_SCALE: number = 1.25;
 23 | 
 24 | function scale_unlocked(s: number): boolean {
 25 |     return s > MIN_SCALE || s < 1 / MIN_SCALE;
 26 | }
 27 | 
 28 | function rotation_unlocked(r: number): boolean {
 29 |     return r < -MIN_ROTATION || r > MIN_ROTATION;
 30 | }
 31 | 
 32 | function pan_unlocked(p: Point): boolean {
 33 |     return get_distance_between_points(p, { x: 0, y: 0 }) > MIN_PAN;
 34 | }
 35 | 
 36 | export function touch_scale_pan_rotate(node: HTMLElement) {
 37 |     let touches: { p: Point; identifier: number }[] = [];
 38 |     let rafTimeout: number | undefined;
 39 |     let rotation_accumulated: number = 0;
 40 |     let pan_accumulated: Point = { x: 0, y: 0 };
 41 |     let scale_accumulated: number = 1;
 42 | 
 43 |     function point_from_touch(t: Touch): Point {
 44 |         let rect = node.getBoundingClientRect();
 45 |         return sub_point(
 46 |             {
 47 |                 x: t.clientX,
 48 |                 y: t.clientY
 49 |             },
 50 |             rect
 51 |         );
 52 |     }
 53 | 
 54 |     function update_touch(t: Touch) {
 55 |         let existing_touch_index = touches.findIndex((tt) => tt.identifier == t.identifier);
 56 |         if (existing_touch_index != -1) {
 57 |             touches[existing_touch_index].p = point_from_touch(t);
 58 |         } else {
 59 |             touches.push({ p: point_from_touch(t), identifier: t.identifier });
 60 |         }
 61 |     }
 62 | 
 63 |     function touch_by_identifier(identifier: number): Point | undefined {
 64 |         let existing_touch_index = touches.findIndex((tt) => tt.identifier == identifier);
 65 |         if (existing_touch_index != -1) {
 66 |             return touches[existing_touch_index].p;
 67 |         }
 68 |     }
 69 | 
 70 |     function handle_touchstart(event: TouchEvent) {
 71 |         // https://stackoverflow.com/questions/5429827/how-can-i-prevent-text-element-selection-with-cursor-drag
 72 |         event.preventDefault();
 73 | 
 74 |         for (let t of event.changedTouches) {
 75 |             update_touch(t);
 76 |         }
 77 | 
 78 |         rotation_accumulated = 0;
 79 |         pan_accumulated = { x: 0, y: 0 };
 80 |         scale_accumulated = 1;
 81 | 
 82 |         if (touches.length > 1) {
 83 |             node.dispatchEvent(
 84 |                 new CustomEvent('number_of_touch_points_changed', {
 85 |                     detail: null
 86 |                 })
 87 |             );
 88 |         }
 89 | 
 90 |         window.addEventListener('touchmove', handle_touchmove);
 91 |         window.addEventListener('touchend', handle_touchend);
 92 |     }
 93 | 
 94 |     function handle_touchmove(event: TouchEvent) {
 95 |         if (event.touches.length == 1) {
 96 |             const old_focal_point = touch_by_identifier(event.touches[0].identifier);
 97 |             const focal_point = point_from_touch(event.touches[0]);
 98 | 
 99 |             if (!focal_point) throw 'no focal_point';
100 |             let pan = { x: 0, y: 0 };
101 |             if (old_focal_point) {
102 |                 pan = sub_point(focal_point, old_focal_point);
103 |             }
104 | 
105 |             let e: TouchScalePanRotate = {
106 |                 focal_point,
107 |                 pan,
108 |                 rotation: 0,
109 |                 scale: 1
110 |             };
111 | 
112 |             dispatch_touch_scale_pan_rotate(e, event.touches);
113 |         }
114 | 
115 |         if (event.touches.length >= 2) {
116 |             let old1 = touch_by_identifier(event.touches[0].identifier);
117 |             let old2 = touch_by_identifier(event.touches[1].identifier);
118 | 
119 |             let new1 = point_from_touch(event.touches[0]);
120 |             let new2 = point_from_touch(event.touches[1]);
121 | 
122 |             const old_focal_point = old1 && old2 ? get_center(old1, old2) : undefined;
123 |             const focal_point = get_center(new1, new2);
124 | 
125 |             let rotation: number = 0;
126 |             if (old1 && old2) {
127 |                 rotation =
128 |                     get_angle_between_points(new1, new2) - get_angle_between_points(old1, old2);
129 |                 if (!rotation_unlocked(rotation_accumulated)) {
130 |                     rotation_accumulated += rotation;
131 |                 }
132 |             }
133 | 
134 |             let pan: Point = { x: 0, y: 0 };
135 |             if (old_focal_point) {
136 |                 pan = sub_point(focal_point, old_focal_point);
137 |                 if (!pan_unlocked(pan_accumulated)) {
138 |                     pan_accumulated = add_point(pan_accumulated, pan);
139 |                 }
140 |             }
141 | 
142 |             let scale: number = 1;
143 |             if (old1 && old2) {
144 |                 scale =
145 |                     get_distance_between_points(new1, new2) /
146 |                     get_distance_between_points(old1, old2);
147 |                 if (!scale_unlocked(scale_accumulated)) {
148 |                     scale_accumulated *= scale;
149 |                 }
150 |             }
151 | 
152 |             let e: TouchScalePanRotate = {
153 |                 focal_point,
154 |                 pan: pan_unlocked(pan_accumulated) ? pan : { x: 0, y: 0 },
155 |                 rotation: rotation_unlocked(rotation_accumulated) ? rotation : 0,
156 |                 scale: scale_unlocked(scale_accumulated) ? scale : 1
157 |             };
158 | 
159 |             dispatch_touch_scale_pan_rotate(e, event.touches);
160 |         }
161 |     }
162 | 
163 |     function dispatch_touch_scale_pan_rotate(e: TouchScalePanRotate, touches: TouchList) {
164 |         if (rafTimeout) window.cancelAnimationFrame(rafTimeout);
165 |         rafTimeout = window.requestAnimationFrame(() => {
166 |             node.dispatchEvent(new CustomEvent('touch_scale_pan_rotate', { detail: e }));
167 | 
168 |             for (let t of touches) {
169 |                 update_touch(t);
170 |             }
171 |         });
172 |     }
173 | 
174 |     function handle_touchend(event: TouchEvent) {
175 |         touches = [];
176 |         rotation_accumulated = 0;
177 |         scale_accumulated = 1;
178 |         pan_accumulated = { x: 0, y: 0 };
179 |         for (let t of event.touches) {
180 |             update_touch(t);
181 |         }
182 | 
183 |         node.dispatchEvent(
184 |             new CustomEvent('touchend_scale_pan_rotate', {
185 |                 detail: null
186 |             })
187 |         );
188 |         window.removeEventListener('touchmove', handle_touchmove);
189 |         window.removeEventListener('touchend', handle_touchend);
190 |     }
191 | 
192 |     node.addEventListener('touchstart', handle_touchstart);
193 |     return {
194 |         destroy() {
195 |             node.removeEventListener('touchstart', handle_touchstart);
196 |         }
197 |     };
198 | }
199 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { type CropValue, type Media, type Options, type Point, defaultOptions, defaultValue } from './types';
2 | export { default as CropWindow } from './crop_window/CropWindow.svelte';
3 | export { default as Overlay } from './overlay/Overlay.svelte';
4 | export { type OverlayOptions, defaultOverlayOptions } from './overlay/overlay';
5 | 


--------------------------------------------------------------------------------
/src/lib/overlay/Overlay.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     /* You can write your own custom overlay by using this one as a template. */
 3 |     import { fade } from 'svelte/transition';
 4 |     import type { OverlayOptions } from './overlay';
 5 | 
 6 |     export let shape: 'round' | 'rect';
 7 |     export let options: OverlayOptions;
 8 |     export let gesture_in_progress: boolean; // controlled by CropMediaView
 9 | </script>
10 | 
11 | <div
12 |     class="crop-window"
13 |     class:round={shape == 'round'}
14 |     style={`--outline-color:${options.line_color};
15 | --overlay-color:${options.overlay_color};`}
16 | >
17 |     {#if gesture_in_progress && options.show_third_lines}
18 |         <div class="lines-wrapper" class:round={shape == 'round'}>
19 |             <div class="vertical-lines" in:fade={{ duration: 100 }} out:fade={{ duration: 1000 }} />
20 |         </div>
21 |         <div class="lines-wrapper" class:round={shape == 'round'}>
22 |             <div
23 |                 class="horizontal-lines"
24 |                 in:fade={{ duration: 100 }}
25 |                 out:fade={{ duration: 1000 }}
26 |             />
27 |         </div>
28 |     {/if}
29 | 
30 |     <div class:round={shape == 'round'} class="outline" />
31 | </div>
32 | 
33 | <style>
34 |     .round {
35 |         border-radius: 50%;
36 |     }
37 | 
38 |     .crop-window {
39 |         position: absolute;
40 |         height: var(--crop-window-height);
41 |         width: var(--crop-window-width);
42 |         left: calc((var(--outer-width) - var(--crop-window-width)) / 2);
43 |         top: calc((var(--outer-height) - var(--crop-window-height)) / 2);
44 |         box-shadow: 0 0 0 9999em;
45 |         color: var(--overlay-color);
46 |     }
47 | 
48 |     .outline {
49 |         position: absolute;
50 |         height: var(--crop-window-height);
51 |         width: var(--crop-window-width);
52 |         left: 0;
53 |         top: 0;
54 |         box-sizing: border-box;
55 |         border: 2px solid var(--outline-color);
56 |     }
57 | 
58 |     .lines-wrapper {
59 |         position: absolute;
60 |         display: flex;
61 |         align-items: center;
62 |         justify-content: center;
63 |         height: calc(100% - 3px);
64 |         width: calc(100% - 3px);
65 |         overflow: hidden;
66 |         top: 2px;
67 |         left: 2px;
68 |     }
69 | 
70 |     .horizontal-lines {
71 |         border-top: 1px solid var(--outline-color);
72 |         border-bottom: 1px solid var(--outline-color);
73 |         box-sizing: border-box;
74 |         height: 33%;
75 |         width: 100%;
76 |     }
77 | 
78 |     .vertical-lines {
79 |         border-left: 1px solid var(--outline-color);
80 |         border-right: 1px solid var(--outline-color);
81 |         height: 100%;
82 |         width: 33%;
83 |     }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/lib/overlay/overlay.ts:
--------------------------------------------------------------------------------
 1 | export type OverlayOptions = {
 2 |     overlay_color: string;
 3 |     line_color: string;
 4 |     show_third_lines: boolean;
 5 | };
 6 | 
 7 | export const defaultOverlayOptions: OverlayOptions = {
 8 |     overlay_color: 'rgb(11, 11, 11, 0.7)',
 9 |     line_color: 'rgba(167, 167, 167, 0.5)',
10 |     show_third_lines: true
11 | };
12 | 


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | import type { SvelteComponentTyped } from 'svelte';
 2 | import type { Point } from './crop_window/geometry';
 3 | import { defaultOverlayOptions, type OverlayOptions } from './overlay/overlay';
 4 | import Overlay from './overlay/Overlay.svelte';
 5 | export { type Point } from './crop_window/geometry';
 6 | 
 7 | type IWantToAcceptAComponent<T extends Record<string, any>> = new (
 8 |     ...args: any
 9 | ) => SvelteComponentTyped<T>;
10 | 
11 | export type OverlayComponent<T> = IWantToAcceptAComponent<{
12 |     options: T;
13 |     shape: 'rect' | 'round';
14 |     gesture_in_progress: boolean;
15 | }>;
16 | 
17 | export type CropShape = 'rect' | 'round';
18 | 
19 | export type Options<T> = {
20 |     /* shape of the crop area */
21 |     shape: CropShape;
22 | 
23 |     /* margin of the crop window wrt to its containing HTMLElement, in pixels */
24 |     crop_window_margin: number;
25 | 
26 |     /* The overlay which visually highlights the crop area.
27 |     You can pass your own Svelte component here, for a custom overlay.
28 |     Look at the included Overlay.svelte to see how to create your own. */
29 |     overlay: OverlayComponent<T>;
30 | 
31 |     /* The options for the overlay component. */
32 |     overlay_options: T;
33 | };
34 | 
35 | export const defaultOptions: Options<OverlayOptions> = {
36 |     shape: 'rect',
37 |     crop_window_margin: 10,
38 | 
39 |     overlay: Overlay,
40 |     overlay_options: defaultOverlayOptions
41 | };
42 | 
43 | export type CropValue = {
44 |     position: Point;
45 |     aspect: number;
46 |     rotation: number;
47 |     scale: number;
48 | };
49 | 
50 | export type Media = {
51 |     content_type: 'image' | 'video';
52 |     url: string;
53 | };
54 | 
55 | export const defaultValue: CropValue = {
56 |     position: { x: 0, y: 0 },
57 |     aspect: 1.0,
58 |     rotation: 0,
59 |     scale: 0
60 | };
61 | 


--------------------------------------------------------------------------------
/src/lib/utils/throttle.ts:
--------------------------------------------------------------------------------
 1 | export function keep_delaying_while_triggered(callback: { (): void }, delay: number) {
 2 |     var timer: number | null = null;
 3 |     return function () {
 4 |         if (timer) window.clearTimeout(timer);
 5 |         timer = window.setTimeout(async function () {
 6 |             callback();
 7 |             timer = null;
 8 |         }, delay);
 9 |     };
10 | }
11 | 


--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import { base } from '$app/paths';
  3 |     import { Highlight, HighlightSvelte } from 'svelte-highlight';
  4 |     import { atomOneDark } from 'svelte-highlight/styles';
  5 |     import typescript from 'svelte-highlight/languages/typescript';
  6 |     import {
  7 |         CropWindow,
  8 |         defaultValue,
  9 |         defaultOptions,
 10 |         type Point,
 11 |         type CropValue,
 12 |         type Media,
 13 |         type Options,
 14 |         type OverlayOptions
 15 |     } from '../lib';
 16 | 
 17 |     const VIDEO: Media = {
 18 |         content_type: 'video',
 19 |         url: `${base}/Mountain%20-%208837.mp4`
 20 |     };
 21 | 
 22 |     const IMAGE: Media = {
 23 |         content_type: 'image',
 24 |         url: `${base}/hintersee-3601004.jpg`
 25 |     };
 26 | 
 27 |     let video: boolean = false;
 28 |     let media = IMAGE;
 29 | 
 30 |     let options: Options<OverlayOptions> = {
 31 |         ...defaultOptions,
 32 |         shape: 'round',
 33 |         crop_window_margin: 30,
 34 |         overlay_options: {
 35 |             overlay_color: '#167676AA',
 36 |             line_color: '#f3f5e866',
 37 |             show_third_lines: true
 38 |         }
 39 |     };
 40 | 
 41 |     let background_color = '#164646';
 42 | 
 43 |     let value: CropValue = { ...defaultValue };
 44 |     let value2: CropValue = { ...defaultValue };
 45 | 
 46 |     let position: Point = { x: 0, y: 0 };
 47 | 
 48 |     let crop_window_el: CropWindow<OverlayOptions>;
 49 | 
 50 |     $: {
 51 |         position = value.position;
 52 |         video = video;
 53 |         media = video ? VIDEO : IMAGE;
 54 |     }
 55 | </script>
 56 | 
 57 | <svelte:head>
 58 |     {@html atomOneDark}
 59 | </svelte:head>
 60 | 
 61 | <div class="container">
 62 |     <div class="box">
 63 |         <h1>
 64 |             <a
 65 |                 href="https://github.com/sabine/svelte-crop-window"
 66 |                 style="display:flex;align-items:center"
 67 |             >
 68 |                 <img
 69 |                     src="{base}/logo.svg"
 70 |                     alt="svelte media crop"
 71 |                     style="height:5rem;margin-right:1rem"
 72 |                 />
 73 |                 svelte-crop-window</a
 74 |             >
 75 |         </h1>
 76 | 
 77 |         <p class="subtitle">
 78 |             A crop window with touch and mouse gestures to zoom, pan and rotate an image or video.
 79 |         </p>
 80 |         <p>Media snaps back to cover the crop area.</p>
 81 |     </div>
 82 | 
 83 |     <div class="box">
 84 |         <p>
 85 |             Looking for contributions, code review and feedback! Feel free to open an issue on <a
 86 |                 href="https://github.com/sabine/svelte-crop-window">the GitHub repository</a
 87 |             > or connect with me via the Svelte discord (sabine#8815).
 88 |         </p>
 89 | 
 90 |         <p>
 91 |             This is still in an experimental stage. Changes to the API are to be expected. After
 92 |             v1.0.0, this package will strictly follow semantic versioning.
 93 |         </p>
 94 | 
 95 |         <p>
 96 |             The code of this demo page is <a
 97 |                 href="https://github.com/sabine/svelte-crop-window/blob/main/src/routes/%2Bpage.svelte"
 98 |                 >here</a
 99 |             >.
100 |         </p>
101 |     </div>
102 | 
103 |     <div class="box">
104 |         <h2 id="with-controls"><a href="#with-controls">Example with controls</a></h2>
105 | 
106 |         <div style="height:20em; background: {background_color}">
107 |             <CropWindow bind:this={crop_window_el} bind:value {media} {options} />
108 |         </div>
109 | 
110 |         <button on:click={() => (video = !video)}>{video ? 'video' : 'image'}</button>
111 | 
112 |         <h3>Result</h3>
113 |         <div
114 |             style="position:relative;height:100px;width:{value.aspect *
115 |                 100}px; overflow:hidden; border-radius: {options.shape == 'round' ? '50%' : '0'}"
116 |         >
117 |             {#if video}
118 |                 <video
119 |                     style={`transform: translateX(-50%) translateY(-50%) rotate(${
120 |                         value.rotation || 0
121 |                     }deg);` +
122 |                         `height: ${(value.scale || 0.0) * 100}px;` +
123 |                         `margin-left: ${
124 |                             (100 * value.aspect) / 2 + (value.position.x || 0) * 100
125 |                         }px;` +
126 |                         `margin-top: ${100 / 2 + (value.position.y || 0) * 100}px;
127 |                 max-width:none;`}
128 |                     src={media.url}
129 |                     autoPlay
130 |                     loop
131 |                     muted={true}
132 |                 />
133 |             {:else}
134 |                 <img
135 |                     style={`transform: translateX(-50%) translateY(-50%) rotate(${
136 |                         value.rotation || 0
137 |                     }deg);` +
138 |                         `height: ${(value.scale || 0.0) * 100}px;` +
139 |                         `margin-left: ${
140 |                             (100 * value.aspect) / 2 + (value.position.x || 0) * 100
141 |                         }px;` +
142 |                         `margin-top: ${100 / 2 + (value.position.y || 0) * 100}px;
143 |                 max-width:none;`}
144 |                     src={media.url}
145 |                     alt="result"
146 |                 />
147 |             {/if}
148 |         </div>
149 | 
150 |         <h3>Aspect ratio</h3>
151 |         <div>
152 |             <button
153 |                 on:click={() => {
154 |                     value.aspect = 8;
155 |                 }}>8:1</button
156 |             >
157 |             <button
158 |                 on:click={() => {
159 |                     value.aspect = 16 / 9;
160 |                 }}>16:9</button
161 |             >
162 |             <button
163 |                 on:click={() => {
164 |                     value.aspect = 4 / 3;
165 |                 }}>4:3</button
166 |             >
167 |             <button
168 |                 on:click={() => {
169 |                     value.aspect = 1;
170 |                 }}>1:1</button
171 |             >
172 |             <button
173 |                 on:click={() => {
174 |                     value.aspect = 3 / 4;
175 |                 }}>3:4</button
176 |             >
177 |         </div>
178 | 
179 |         <h3>Scale / Rotation / Position</h3>
180 | 
181 |         <div style="display:grid; grid-template-columns: auto 1fr;column-gap:2rem">
182 |             <div>scale</div>
183 |             <div>
184 |                 <input
185 |                     type="range"
186 |                     min={0.001}
187 |                     max="6"
188 |                     step={0.01}
189 |                     on:input={(e) => crop_window_el.set_zoom(parseFloat(e.currentTarget.value))}
190 |                     on:change={(e) => {
191 |                         crop_window_el.commit();
192 |                         e.currentTarget.value = value.scale.toString();
193 |                     }}
194 |                     value={value.scale}
195 |                 />
196 |                 <!-- Note: For scale, it is necessary to update the value after the component scales
197 |             the image to fit. Otherwise, the value of the input element can get out of sync. -->
198 |                 {Math.round(value.scale * 100) / 100}
199 |             </div>
200 |             <div>rotation</div>
201 |             <div>
202 |                 <input
203 |                     type="range"
204 |                     min={-180}
205 |                     max="180"
206 |                     step={1}
207 |                     on:input={(e) => crop_window_el.set_rotation(parseFloat(e.currentTarget.value))}
208 |                     on:change={crop_window_el.commit}
209 |                     value={value.rotation}
210 |                 />
211 |                 {Math.round(value.rotation * 100) / 100}
212 |             </div>
213 |             <div>x</div>
214 |             <input
215 |                 type="number"
216 |                 step={0.01}
217 |                 on:input={() => crop_window_el.set_pan(position)}
218 |                 on:change={() => {
219 |                     crop_window_el.commit();
220 |                     position.x = value.position.x;
221 |                 }}
222 |                 bind:value={position.x}
223 |             />
224 | 
225 |             <div>y</div>
226 |             <input
227 |                 type="number"
228 |                 step={0.01}
229 |                 on:input={() => crop_window_el.set_pan(position)}
230 |                 on:change={() => {
231 |                     crop_window_el.commit();
232 |                     position.y = value.position.y;
233 |                 }}
234 |                 bind:value={position.y}
235 |             />
236 |         </div>
237 | 
238 |         <h3>Colors</h3>
239 |         <div
240 |             style="display:grid; grid-template-columns: auto 1fr; column-gap:2rem; align-items:center;"
241 |         >
242 |             <div>overlay color</div>
243 |             <input type="color" bind:value={options.overlay_options.overlay_color} />
244 |             <div>line color</div>
245 |             <input type="color" bind:value={options.overlay_options.line_color} />
246 |             <div>background color</div>
247 |             <input type="color" bind:value={background_color} />
248 |         </div>
249 |         <h3>Shape</h3>
250 |         <div>
251 |             <select bind:value={options.shape}>
252 |                 <option value="rect">rectangle</option>
253 |                 <option value="round">round</option>
254 |             </select>
255 |             <select bind:value={options.overlay_options.show_third_lines}>
256 |                 <option value={true}>show third lines</option>
257 |                 <option value={false}>don't show third lines</option>
258 |             </select>
259 |         </div>
260 |     </div>
261 |     <div class="box">
262 |         <h2 id="minimal-code-example"><a href="#minimal-code-example">Minimal code example</a></h2>
263 |         <div style="height:20em; background: #222">
264 |             <CropWindow bind:value={value2} {media} />
265 |         </div>
266 |         Note: You must wrap the component with an element that has a determined height (and width), as
267 |         the component will always take up 100% of the available width and height.
268 |         <div>
269 |             <Highlight
270 |                 language={typescript}
271 |                 code={`// in script tag
272 | import { CropWindow, defaultValue } from 'svelte-crop-window';
273 | 
274 | let media = {
275 |     content_type: '${video ? 'video' : 'image'}',
276 |     url: '${video ? VIDEO.url : IMAGE.url}'
277 | };
278 | 
279 | let value = { ...defaultValue };
280 | 
281 | // in the template
282 | <div style="height:20em; background: #222">
283 |     <CropWindow bind:value {media} />
284 | </div>
285 | `}
286 |             />
287 |         </div>
288 |     </div>
289 | 
290 |     <div class="box">
291 |         <h2>Props and defaults</h2>
292 |         <a href="https://github.com/sabine/svelte-crop-window#props">See here</a>.
293 | 
294 |         <HighlightSvelte
295 |             code={`<div style="height:20em">
296 |     <CropWindow
297 |         bind:value
298 |         {media}
299 |         {options}
300 |     />
301 | </div>
302 | `}
303 |         />
304 | 
305 |         <Highlight
306 |             language={typescript}
307 |             code={`const defaultOverlayOptions: OverlayOptions = {
308 |     overlay_color: 'rgb(11, 11, 11, 0.7)',
309 |     line_color: 'rgba(167, 167, 167, 0.5)',
310 |     show_third_lines: true
311 | };
312 | 
313 | };
314 | 
315 | const defaultOptions: Options<OverlayOptions> = {
316 |     shape: 'rect',
317 |     crop_window_margin: 10,
318 | 
319 |     overlay: Overlay,
320 |     overlay_options: defaultOverlayOptions,
321 | }
322 | 
323 | const defaultValue: CropValue = {
324 |     position: { x: 0, y: 0 },
325 |     aspect: 1.0,
326 |     rotation: 0,
327 |     scale: 0
328 | };
329 | `}
330 |         />
331 |     </div>
332 | 
333 |     <div class="box">
334 |         <h2 id="how-to-crop"><a href="#how-to-crop">How to Crop</a></h2>
335 | 
336 |         <div
337 |             style="position:relative;height:100px;width:{value.aspect *
338 |                 100}px; overflow:hidden; border-radius: {options.shape == 'round' ? '50%' : '0'}"
339 |         >
340 |             {#if video}
341 |                 <video
342 |                     style={`transform: translateX(-50%) translateY(-50%) rotate(${
343 |                         value.rotation || 0
344 |                     }deg);` +
345 |                         `height: ${(value.scale || 0.0) * 100}px;` +
346 |                         `margin-left: ${
347 |                             (100 * value.aspect) / 2 + (value.position.x || 0) * 100
348 |                         }px;` +
349 |                         `margin-top: ${100 / 2 + (value.position.y || 0) * 100}px;
350 |                 max-width:none;`}
351 |                     src={media.url}
352 |                     autoPlay
353 |                     loop
354 |                     muted={true}
355 |                 />
356 |             {:else}
357 |                 <img
358 |                     style={`transform: translateX(-50%) translateY(-50%) rotate(${
359 |                         value.rotation || 0
360 |                     }deg);` +
361 |                         `height: ${(value.scale || 0.0) * 100}px;` +
362 |                         `margin-left: ${
363 |                             (100 * value.aspect) / 2 + (value.position.x || 0) * 100
364 |                         }px;` +
365 |                         `margin-top: ${100 / 2 + (value.position.y || 0) * 100}px;
366 |                 max-width:none;`}
367 |                     src={media.url}
368 |                     alt="result"
369 |                 />
370 |             {/if}
371 |         </div>
372 | 
373 |         <h3>Display in HTML without actually cropping:</h3>
374 | 
375 |         <HighlightSvelte
376 |             code={`<div style={\`position:relative; overflow:hidden;
377 |         height:{HEIGHT}px; width:{value.aspect * HEIGHT}px;
378 |         border-radius: { options.shape == 'round' ? '50%' : '0' }\`}>
379 |     <video
380 |         style={\`transform: translateX(-50%) translateY(-50%) rotate({value.rotation || 0}deg);
381 |     height: {(value.scale || 0.0) * HEIGHT}px;
382 |     margin-left: {HEIGHT * value.aspect / 2 + (value.position.x || 0) * HEIGHT}px;
383 |     margin-top: {HEIGHT / 2 + (value.position.y || 0) * HEIGHT}px;
384 |     max-width:none\`}
385 |         src={url}
386 |     />
387 | </div>`}
388 |         />
389 | 
390 |         <h3 id="pseudo-code"><a href="#pseudo-code">Pseudo code to crop</a></h3>
391 | 
392 |         <ol>
393 |             <li>
394 |                 Choose a <code>target_height</code> and calculate the width for the cropped image:
395 |                 <Highlight
396 |                     language={typescript}
397 |                     code={`let target_width = target_height * value.aspect;`}
398 |                 />
399 |             </li>
400 |             <li>
401 |                 Calculate factor by which to scale:
402 |                 <Highlight
403 |                     language={typescript}
404 |                     code={`let s = value.scale * target_height / media.height;`}
405 |                 />
406 |             </li>
407 |             <li>
408 |                 Scale media by <code>s</code>:
409 |                 <Highlight language={typescript} code={`let resized_media = scale(media, s);`} />
410 |             </li>
411 |             <li>
412 |                 Rotate media by <code>value.rotation</code>:
413 |                 <Highlight
414 |                     language={typescript}
415 |                     code={`let resized_and_rotated_media =
416 |     rotate(resized_media, value.rotation);`}
417 |                 />
418 |             </li>
419 |             <li>
420 |                 Calculate top left position of area to extract: <Highlight
421 |                     language={typescript}
422 |                     code={`let left =
423 |     (resized_and_rotated_media.width - target_width) / 2.0
424 |     - value.x * target_height;
425 | let top =
426 |     (resized_and_rotated_media.height - target_height) / 2.0
427 |     - value.y * target_height;`}
428 |                 />
429 |             </li>
430 |             <li>
431 |                 Extract area:
432 |                 <Highlight
433 |                     language={typescript}
434 |                     code={`let cropped_media =
435 |     extract_area(resized_and_rotated_media, left, top,
436 |                  target_width, target_height);`}
437 |                 />
438 |             </li>
439 |         </ol>
440 |     </div>
441 | 
442 |     <div class="box">
443 |         <h2 id="what-it-doesnt-do">
444 |             <a href="#what-it-doesnt-do">What this component doesn't do</a>
445 |         </h2>
446 |         <ol>
447 |             <li>
448 |                 Does not modify/crop the image, you have to do that by whatever means make sense for
449 |                 your application.
450 |             </li>
451 |             <li>
452 |                 Doesn't (yet) provide usable controls. Currently, you need to implement your own.
453 |                 <p>
454 |                     Similar to the overlay, it would be nice to include some controls to make this
455 |                     more usable out of the box. Contributions are very welcome.
456 |                 </p>
457 |             </li>
458 |         </ol>
459 |     </div>
460 | 
461 |     <div class="box">
462 |         <h2>Inspiration and Acknowledgements</h2>
463 | 
464 |         <p>
465 |             One big inspiration for this component was the Android library
466 |             <a href="https://github.com/Yalantis/uCrop">uCrop by Yalantis</a>. What is particularly
467 |             valuable is that the developers shared their thought process in
468 |             <a
469 |                 href="https://yalantis.com/blog/how-we-created-ucrop-our-own-image-cropping-library-for-android/"
470 |                 >this blog post</a
471 |             >.
472 |         </p>
473 |         <p>
474 |             Another very helpful resource was <a
475 |                 href="https://github.com/ValentinH/svelte-easy-crop">svelte-easy-crop</a
476 |             > which gave me a basic understanding of how to implement a crop window component in Svelte
477 |             (and HTML/JS in general).
478 |         </p>
479 |         <p>
480 |             There's no code being reused between either of these components and this one (all
481 |             calculations had to be recreated from textbook math).
482 |         </p>
483 | 
484 |         <small>
485 |             <p>
486 |                 Video from shantararam at pixabay: <a
487 |                     href="https://pixabay.com/videos/mountain-nature-snow-old-mountain-8837/"
488 |                     >mountain-nature-snow-old-mountain-8837</a
489 |                 >
490 |             </p>
491 |         </small>
492 |     </div>
493 | </div>
494 | 
495 | <style>
496 |     .container {
497 |         max-width: 50em;
498 |         margin: 0 auto;
499 |         padding: 4rem 1rem;
500 |     }
501 | 
502 |     .box {
503 |         padding: 1.5rem 0;
504 |     }
505 | 
506 |     :global(pre),
507 |     p {
508 |         padding: 0.5rem 0;
509 |     }
510 |     ol {
511 |         padding-left: 1.5rem;
512 |     }
513 |     li {
514 |         margin: 1rem 0;
515 |     }
516 | 
517 |     h1 {
518 |         padding: 2rem 0;
519 |     }
520 | 
521 |     h2 {
522 |         margin-top: 1rem;
523 |         font-size: 1.4rem;
524 |         padding: 1rem 0;
525 |     }
526 | 
527 |     h3 {
528 |         padding: 1rem 0;
529 |     }
530 | 
531 |     h1 a:hover,
532 |     h2 a:hover,
533 |     h3 a:hover {
534 |         text-decoration: none;
535 |     }
536 | 
537 |     *:target * {
538 |         background: #37b5b5;
539 |         color: black;
540 |     }
541 | </style>
542 | 


--------------------------------------------------------------------------------
/static/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sabine/svelte-crop-window/e1a94fff0bd67c3082b0c2adde3662511f0d89a5/static/.nojekyll


--------------------------------------------------------------------------------
/static/Mountain - 8837.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sabine/svelte-crop-window/e1a94fff0bd67c3082b0c2adde3662511f0d89a5/static/Mountain - 8837.mp4


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sabine/svelte-crop-window/e1a94fff0bd67c3082b0c2adde3662511f0d89a5/static/favicon.png


--------------------------------------------------------------------------------
/static/hintersee-3601004.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sabine/svelte-crop-window/e1a94fff0bd67c3082b0c2adde3662511f0d89a5/static/hintersee-3601004.jpg


--------------------------------------------------------------------------------
/static/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    width="55.555035mm"
 6 |    height="55.555035mm"
 7 |    viewBox="0 0 55.555035 55.555035"
 8 |    version="1.1"
 9 |    id="svg5"
10 |    xml:space="preserve"
11 |    inkscape:version="1.2.1 (0f2f062aeb, 2022-09-21, custom)"
12 |    sodipodi:docname="logo.svg"
13 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
14 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
15 |    xmlns="http://www.w3.org/2000/svg"
16 |    xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
17 |      id="namedview7"
18 |      pagecolor="#ffffff"
19 |      bordercolor="#666666"
20 |      borderopacity="1.0"
21 |      inkscape:showpageshadow="2"
22 |      inkscape:pageopacity="0.0"
23 |      inkscape:pagecheckerboard="0"
24 |      inkscape:deskcolor="#d1d1d1"
25 |      inkscape:document-units="mm"
26 |      showgrid="false"
27 |      inkscape:zoom="1.9426985"
28 |      inkscape:cx="247.33637"
29 |      inkscape:cy="46.584686"
30 |      inkscape:window-width="1830"
31 |      inkscape:window-height="1009"
32 |      inkscape:window-x="0"
33 |      inkscape:window-y="0"
34 |      inkscape:window-maximized="1"
35 |      inkscape:current-layer="layer1" /><defs
36 |      id="defs2" /><g
37 |      inkscape:label="Layer 1"
38 |      inkscape:groupmode="layer"
39 |      id="layer1"
40 |      transform="translate(-62.740246,-97.134139)"><rect
41 |        style="fill:#ff3e00;fill-opacity:1;stroke:#333333;stroke-width:1;stroke-dasharray:none"
42 |        id="rect294-3"
43 |        width="43.050674"
44 |        height="43.050674"
45 |        x="25.713049"
46 |        y="125.32466"
47 |        transform="rotate(-18.097294)" /><rect
48 |        style="fill:#f9f9f9;fill-opacity:1;stroke:#333333;stroke-width:0.912537;stroke-dasharray:5.47522, 1.82507;stroke-dashoffset:0"
49 |        id="rect294"
50 |        width="28.830118"
51 |        height="30.163328"
52 |        x="76.102707"
53 |        y="109.82999" /></g><style
54 |      type="text/css"
55 |      id="style447">
56 | 	.st0{fill:#FF3E00;}
57 | 	.st1{fill:#FFFFFF;}
58 | </style></svg>
59 | 


--------------------------------------------------------------------------------
/static/videocrop.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sabine/svelte-crop-window/e1a94fff0bd67c3082b0c2adde3662511f0d89a5/static/videocrop.gif


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-static';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 |     // Consult https://github.com/sveltejs/svelte-preprocess
 7 |     // for more information about preprocessors
 8 |     preprocess: preprocess(),
 9 | 
10 |     kit: {
11 |         adapter: adapter(),
12 |         paths: {
13 |             base: '/svelte-crop-window'
14 |         }
15 |     }
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./.svelte-kit/tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "allowJs": true,
 5 |         "checkJs": true,
 6 |         "esModuleInterop": true,
 7 |         "forceConsistentCasingInFileNames": true,
 8 |         "resolveJsonModule": true,
 9 |         "skipLibCheck": true,
10 |         "sourceMap": true,
11 |         "strict": true,
12 |         "declaration": true
13 |     }
14 |     // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15 |     //
16 |     // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
17 |     // from the referenced tsconfig.json - TypeScript does not merge them in
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from '@sveltejs/kit/vite';
 2 | import type { UserConfig } from 'vite';
 3 | 
 4 | const config: UserConfig = {
 5 |     plugins: [sveltekit()],
 6 |     optimizeDeps: {
 7 |         include: ['highlight.js', 'highlight.js/lib/core']
 8 |     }
 9 | };
10 | 
11 | export default config;
12 | 


--------------------------------------------------------------------------------