@nextcloud/image-editor 1.0.0-beta.1 → 1.0.0-beta.2

package/README.md

@@ -10,6 +10,10 @@ unmaintained Filerobot editor.
 - 📖 [API documentation](https://nextcloud-libraries.github.io/nextcloud-image-editor/)
 - 🎨 [Live demo](https://nextcloud-libraries.github.io/nextcloud-image-editor/demo/)
 
+<!-- Absolute so it renders on npmjs too, where relative paths point
+	at a package that ships only dist/ -->
+[![The editor in crop mode](https://raw.githubusercontent.com/nextcloud-libraries/nextcloud-image-editor/main/.github/screenshot.jpg)](https://nextcloud-libraries.github.io/nextcloud-image-editor/demo/)
+
 ## Features
 
 - Crop with rule-of-thirds guides, aspect presets (free, original,
@@ -64,18 +68,40 @@ stylesheet, so any bundler that handles CSS imports from dependencies
 picks them up. Where yours does not, load them yourself from the
 `@nextcloud/image-editor/style` export.
 
+That import is also why the package has to go through a bundler. Loading
+it in a plain Node process, for server-side rendering or a script, fails
+with a syntax error as Node tries to parse the stylesheet as JavaScript.
+This matches `@nextcloud/vue`, which imports its own CSS the same way,
+and every Nextcloud app bundles with vite or webpack. See #5.
+
 ```vue
 <script setup lang="ts">
 import type { ExportResult } from '@nextcloud/image-editor'
+import { ref } from 'vue'
 import { ImageEditor } from '@nextcloud/image-editor'
 
-function onSave({ blob, mimeType }: ExportResult) {
-	// persist the blob, e.g. via @nextcloud/upload or WebDAV PUT
+const saving = ref(false)
+
+async function onSave({ blob, mimeType }: ExportResult) {
+	// The editor knows when it handed the blob over, not when the
+	// upload finished, so tell it: on a photo the upload is the larger
+	// half of the wait
+	saving.value = true
+	try {
+		// persist the blob, e.g. via @nextcloud/upload or WebDAV PUT
+	} finally {
+		saving.value = false
+	}
 }
 </script>
 
 <template>
-	<ImageEditor :src="file" @save="onSave" @cancel="close" @error="showError" />
+	<ImageEditor
+		:src="file"
+		:saving="saving"
+		@save="onSave"
+		@cancel="close"
+		@error="showError" />
 </template>
 ```
 
@@ -89,6 +115,7 @@ function onSave({ blob, mimeType }: ExportResult) {
 | `label` | `string` | Accessible label of the canvas area. |
 | `exportOptions` | `ExportOptions` | `format`, `quality` and `maxSize` for the save button. Defaults to PNG at natural resolution. |
 | `initialState` | `EditorState` | State to open with, as emitted by `change`, for resuming an unfinished edit. Read when the source loads. |
+| `saving` | `boolean` | Raise while your app stores the saved image. The editor shows the same progress it shows for its own export, so one indicator covers the whole wait. |
 
 | Event | Payload | Description |
 |-------|---------|-------------|

package/dist/assets/index.css

@@ -99,50 +99,51 @@
     padding: var(--default-grid-baseline) 2px;
     font-size: 10px;
 }
-}.adjust-panel[data-v-d7f848cf] {
+}.adjust-panel[data-v-3ad63bd8] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: calc(var(--default-grid-baseline) * 2);
   width: 100%;
 }
-.adjust-panel__tabs[data-v-d7f848cf] {
+.adjust-panel__tabs[data-v-3ad63bd8] {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
   gap: calc(var(--default-grid-baseline) * 2);
-}.annotate-panel[data-v-1bf135e4] {
+}.annotate-panel[data-v-f7e8a194] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: calc(var(--default-grid-baseline) * 2);
   width: 100%;
 }
-.annotate-panel__row[data-v-1bf135e4] {
+.annotate-panel__row[data-v-f7e8a194] {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: calc(var(--default-grid-baseline) * 2);
 }
-.annotate-panel__divider[data-v-1bf135e4] {
+.annotate-panel__divider[data-v-f7e8a194] {
   width: 1px;
   height: 24px;
   background-color: rgba(255, 255, 255, 0.12);
 }
-.annotate-panel__option[data-v-1bf135e4] {
+.annotate-panel__option[data-v-f7e8a194] {
   display: flex;
   align-items: center;
   gap: var(--default-grid-baseline);
   font-size: 12px;
   opacity: 0.9;
 }
-.annotate-panel__dot[data-v-1bf135e4] {
+.annotate-panel__dot[data-v-f7e8a194] {
   display: block;
   border-radius: 50%;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
 }
-.annotate-panel__glyph[data-v-1bf135e4] {
+.annotate-panel__glyph[data-v-f7e8a194] {
   font-family: Helvetica, Arial, sans-serif;
   line-height: 1;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
@@ -269,13 +270,13 @@
   align-items: center;
   gap: calc(var(--default-grid-baseline) * 2);
   padding: var(--default-grid-baseline);
-}.editor-topbar[data-v-9ba9bd23] {
+}.editor-topbar[data-v-50392429] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 6);
 }
-.editor-topbar__history[data-v-9ba9bd23] {
+.editor-topbar__history[data-v-50392429] {
   display: flex;
   align-items: center;
   gap: 2px;
@@ -285,12 +286,12 @@
   backdrop-filter: blur(24px) saturate(1.4);
   border: 1px solid rgba(255, 255, 255, 0.09);
 }
-.editor-topbar__separator[data-v-9ba9bd23] {
+.editor-topbar__separator[data-v-50392429] {
   width: 1px;
   height: 20px;
   background-color: var(--color-border);
 }
-.editor-topbar__zoom[data-v-9ba9bd23] {
+.editor-topbar__zoom[data-v-50392429] {
   min-width: 48px;
   border: none;
   background: transparent;
@@ -301,40 +302,40 @@
   cursor: pointer;
   padding: 0 4px;
 }
-.editor-topbar__zoom[data-v-9ba9bd23]:hover:not(:disabled) {
+.editor-topbar__zoom[data-v-50392429]:hover:not(:disabled) {
   opacity: 1;
 }
-.editor-topbar__zoom[data-v-9ba9bd23]:focus-visible {
+.editor-topbar__zoom[data-v-50392429]:focus-visible {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
-.editor-topbar__zoom[data-v-9ba9bd23]:disabled {
+.editor-topbar__zoom[data-v-50392429]:disabled {
   cursor: default;
   opacity: 0.4;
 }
-.editor-topbar__spacer[data-v-9ba9bd23], .editor-topbar__actions[data-v-9ba9bd23] {
+.editor-topbar__spacer[data-v-50392429], .editor-topbar__actions[data-v-50392429] {
   flex: 1;
   display: flex;
   align-items: center;
   gap: var(--default-grid-baseline);
 }
-.editor-topbar__actions[data-v-9ba9bd23] {
+.editor-topbar__actions[data-v-50392429] {
   justify-content: flex-end;
 }
-.editor-topbar__cancel-icon[data-v-9ba9bd23] {
+.editor-topbar__cancel-icon[data-v-50392429] {
   display: none !important;
 }
 @container editor (max-width: 600px) {
-.editor-topbar[data-v-9ba9bd23] {
+.editor-topbar[data-v-50392429] {
     padding-inline: calc(var(--default-grid-baseline) * 2);
 }
-.editor-topbar__cancel-text[data-v-9ba9bd23] {
+.editor-topbar__cancel-text[data-v-50392429] {
     display: none !important;
 }
-.editor-topbar__cancel-icon[data-v-9ba9bd23] {
+.editor-topbar__cancel-icon[data-v-50392429] {
     display: inline-flex !important;
 }
-.editor-topbar__zoom[data-v-9ba9bd23] {
+.editor-topbar__zoom[data-v-50392429] {
     min-width: 40px;
 }
 }
@@ -366,7 +367,26 @@
 	white-space: pre;
 	z-index: 1;
 }
-.image-editor[data-v-e3346ccd] {
+/**
+ * Nextcloud's own values for these arrive from the server stylesheet,
+ * and @nextcloud/vue reads them with no fallback of its own. Declaring
+ * them on the editor root would override the host, which is exactly
+ * what made every control here 10px larger than the surrounding
+ * interface. Registering them instead supplies an initial value only
+ * where nothing else defines one, and lets the host's declaration win
+ * wherever there is one.
+ */
+@property --default-clickable-area {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 34px;
+}
+@property --default-grid-baseline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 4px;
+}
+.image-editor[data-v-5225c517] {
   --color-main-text: #f2f2f7;
   --color-main-background: #141416;
   --color-background-hover: rgba(255, 255, 255, 0.08);
@@ -374,8 +394,6 @@
   --color-border: rgba(255, 255, 255, 0.09);
   --color-element-hover: rgba(255, 255, 255, 0.08);
   --editor-glass: rgba(20, 20, 26, 0.6);
-  --default-clickable-area: 44px;
-  --default-grid-baseline: 4px;
   font-size: 13px;
   position: relative;
   height: 100%;
@@ -385,15 +403,15 @@
   background-color: var(--color-main-background);
   container: editor/size;
 }
-.image-editor[data-v-e3346ccd], .image-editor[data-v-e3346ccd] *, .image-editor[data-v-e3346ccd] *::before, .image-editor[data-v-e3346ccd] *::after {
+.image-editor[data-v-5225c517], .image-editor[data-v-5225c517] *, .image-editor[data-v-5225c517] *::before, .image-editor[data-v-5225c517] *::after {
   box-sizing: border-box;
 }
-.image-editor__shell[data-v-e3346ccd] {
+.image-editor__shell[data-v-5225c517] {
   position: relative;
   height: 100%;
   width: 100%;
 }
-.image-editor[data-v-e3346ccd]::before {
+.image-editor[data-v-5225c517]::before {
   content: "";
   position: absolute;
   inset: -10%;
@@ -403,7 +421,7 @@
   filter: blur(64px) saturate(1.3) brightness(0.55);
   transform: scale(1.15);
 }
-.image-editor__frame[data-v-e3346ccd] {
+.image-editor__frame[data-v-5225c517] {
   position: relative;
   height: 100%;
   width: 100%;
@@ -411,23 +429,23 @@
   background: rgba(14, 14, 18, 0.55);
   backdrop-filter: blur(40px);
 }
-.image-editor__viewport[data-v-e3346ccd] {
+.image-editor__viewport[data-v-5225c517] {
   position: absolute;
   inset: 0;
   padding: 56px 16px 16px;
 }
 @container editor (max-width: 600px) {
-.image-editor__viewport[data-v-e3346ccd] {
+.image-editor__viewport[data-v-5225c517] {
     padding: 56px 8px 8px;
 }
-.image-editor .image-editor__controls[data-v-e3346ccd] {
+.image-editor .image-editor__controls[data-v-5225c517] {
     inset-inline: 8px;
     transform: none;
     min-width: 0;
     max-width: none;
     width: auto;
 }
-.image-editor .image-editor__strip[data-v-e3346ccd] {
+.image-editor .image-editor__strip[data-v-5225c517] {
     flex-direction: row;
     inset-inline: 8px;
     inset-block-start: auto;
@@ -437,7 +455,7 @@
     overflow-x: auto;
     overflow-y: hidden;
 }
-.image-editor .image-editor__rail[data-v-e3346ccd] {
+.image-editor .image-editor__rail[data-v-5225c517] {
     inset-inline-start: var(--default-grid-baseline);
     inset-block-start: 64px;
     transform: none;
@@ -450,49 +468,49 @@
     border-radius: var(--border-radius-large, 12px);
 }
 }
-.image-editor__canvas[data-v-e3346ccd] {
+.image-editor__canvas[data-v-5225c517] {
   height: 100%;
   width: 100%;
   touch-action: none;
 }
-.image-editor__topbar[data-v-e3346ccd] {
+.image-editor__topbar[data-v-5225c517] {
   position: absolute;
   inset-block-start: 0;
   inset-inline: 0;
   background: linear-gradient(rgba(8, 8, 12, 0.5), transparent);
 }
-.image-editor__rail[data-v-e3346ccd] {
+.image-editor__rail[data-v-5225c517] {
   position: absolute;
   inset-inline-start: calc(var(--default-grid-baseline) * 4);
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
-.image-editor__controls[data-v-e3346ccd] {
+.image-editor__controls[data-v-5225c517] {
   position: absolute;
   inset-block-end: calc(var(--default-grid-baseline) * 5);
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
-.image-editor__strip[data-v-e3346ccd] {
+.image-editor__strip[data-v-5225c517] {
   position: absolute;
   inset-inline-end: calc(var(--default-grid-baseline) * 4);
   inset-block-start: 50%;
   transform: translateY(-50%);
   max-height: calc(100% - 160px);
 }
-.image-editor .hidden-visually[data-v-e3346ccd] {
+.image-editor .hidden-visually[data-v-5225c517] {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
 }
-.image-editor__loading[data-v-e3346ccd] {
+.image-editor__loading[data-v-5225c517] {
   position: absolute;
   inset: 0;
   margin: auto;
 }
-.image-editor__error[data-v-e3346ccd] {
+.image-editor__error[data-v-5225c517] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -503,7 +521,7 @@
   text-align: center;
   padding: calc(var(--default-grid-baseline) * 4);
 }
-.image-editor__error p[data-v-e3346ccd] {
+.image-editor__error p[data-v-5225c517] {
   margin: 0;
   opacity: 0.85;
 }