tokimeki-image-editor 0.1.8 → 0.1.10

package/dist/components/ImageEditor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import '../i18n';
 import { _ } from 'svelte-i18n';
 import { Redo2, RotateCcw, Undo2 } from 'lucide-svelte';
-import { loadImage, calculateFitScale, exportCanvas, downloadImage, applyTransform } from '../utils/canvas';
+import { loadImage, calculateFitScale, exportCanvas, downloadImage, applyTransform, applyTransformWithWebGPU } from '../utils/canvas';
 import { createEmptyHistory, createSnapshot, addToHistory, undo, redo, canUndo, canRedo } from '../utils/history';
 import { createDefaultAdjustments } from '../utils/adjustments';
 import Toolbar from './Toolbar.svelte';
@@ -200,10 +200,11 @@ function handleStampAreasChange(stampAreas) {
     state.stampAreas = stampAreas;
     saveToHistory();
 }
-function handleExport() {
+async function handleExport() {
     if (!state.imageData.original)
         return;
-    const exportCanvas = applyTransform(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
+    // Use WebGPU for export when available
+    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
     const dataUrl = exportCanvas.toDataURL(state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png', state.exportOptions.quality);
     const filename = `edited-image-${Date.now()}.${state.exportOptions.format}`;
     downloadImage(dataUrl, filename);
@@ -211,10 +212,11 @@ function handleExport() {
         onExport(dataUrl);
     }
 }
-function handleComplete() {
+async function handleComplete() {
     if (!state.imageData.original || !onComplete)
         return;
-    const exportCanvas = applyTransform(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
+    // Use WebGPU for export when available
+    const exportCanvas = await applyTransformWithWebGPU(state.imageData.original, state.transform, state.adjustments, state.cropArea, state.blurAreas, state.stampAreas);
     const format = state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png';
     const dataUrl = exportCanvas.toDataURL(state.exportOptions.format === 'jpeg' ? 'image/jpeg' : 'image/png', state.exportOptions.quality);
     // Convert to blob
@@ -324,421 +326,422 @@ function handleKeyDown(event) {
         handleRedo();
     }
 }
-</script>
-
-<svelte:window onkeydown={handleKeyDown} />
-
-<div class="image-editor" style="width: {width}px;">
-  {#if !isStandalone && state.imageData.original}
-    <div class="embedded-controls">
-      <button class="embedded-btn embedded-btn-cancel" onclick={handleCancel}>
-        {$_('editor.cancel')}
-      </button>
-      <button class="embedded-btn embedded-btn-apply" onclick={handleComplete}>
-        {$_('editor.apply')}
-      </button>
-
-      <div class="editor-history-controls">
-        <button
-                class="editor-history-btn"
-                disabled={!canUndo(state.history)}
-                onclick={handleUndo}
-                title={$_('toolbar.undo')}
-        >
-          <Undo2 size={20} />
-        </button>
-
-        <button
-                class="editor-history-btn"
-                disabled={!canRedo(state.history)}
-                onclick={handleRedo}
-                title={$_('toolbar.redo')}
-        >
-          <Redo2 size={20} />
-        </button>
-
-        <button
-                class="editor-history-btn"
-                disabled={!!state.imageData.original}
-                onclick={handleReset}
-                title={$_('editor.reset')}
-        >
-          <RotateCcw size={20} />
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  <div class="editor-body">
-    {#if !state.imageData.original && isStandalone}
-      <div
-        class="upload-area"
-        role="button"
-        tabindex="0"
-        ondrop={handleDrop}
-        ondragover={handleDragOver}
-        onclick={openFileDialog}
-        onkeydown={(e) => e.key === 'Enter' && openFileDialog()}
-      >
-        <p>{$_('editor.dropImageHere')}</p>
-        <input
-          bind:this={fileInput}
-          type="file"
-          accept="image/png,image/jpeg,image/jpg"
-          onchange={handleFileInputChange}
-          style="display: none;"
-        />
-      </div>
-    {:else if !state.imageData.original && !isStandalone}
-      <div class="no-image-message">
-        <p>{$_('editor.noImage')}</p>
-      </div>
-    {:else}
-      <div
-        class="canvas-container"
-        onwheel={(e) => {
-          e.preventDefault();
-          const delta = -e.deltaY * 0.001;
-          handleZoom(delta, e.clientX, e.clientY);
-        }}
-        bind:clientWidth
-        bind:clientHeight
-      >
-        <Canvas
-          bind:canvas={canvasElement}
-          width={clientWidth || width}
-          height={clientHeight || height}
-          image={state.imageData.original}
-          viewport={state.viewport}
-          transform={state.transform}
-          adjustments={state.adjustments}
-          cropArea={state.cropArea}
-          blurAreas={state.blurAreas}
-          stampAreas={state.stampAreas}
-          onZoom={handleZoom}
-        />
-
-        {#if state.mode === 'crop'}
-          <CropTool
-            canvas={canvasElement}
-            image={state.imageData.original}
-            viewport={state.viewport}
-            transform={state.transform}
-            onApply={handleCropApply}
-            onCancel={() => state.mode = null}
-            onViewportChange={handleViewportChange}
-            onTransformChange={handleTransformChange}
-          />
-        {:else if state.mode === 'blur'}
-          <BlurTool
-            canvas={canvasElement}
-            image={state.imageData.original}
-            viewport={state.viewport}
-            transform={state.transform}
-            blurAreas={state.blurAreas}
-            cropArea={state.cropArea}
-            onUpdate={handleBlurAreasChange}
-            onClose={() => state.mode = null}
-            onViewportChange={handleViewportChange}
-          />
-        {:else if state.mode === 'stamp'}
-          <StampTool
-            canvas={canvasElement}
-            image={state.imageData.original}
-            viewport={state.viewport}
-            transform={state.transform}
-            stampAreas={state.stampAreas}
-            cropArea={state.cropArea}
-            onUpdate={handleStampAreasChange}
-            onClose={() => state.mode = null}
-            onViewportChange={handleViewportChange}
-          />
-        {/if}
-
-        {#if state.mode === 'adjust'}
-          <div class="tools-panel">
-            <AdjustTool
-              adjustments={state.adjustments}
-              onChange={handleAdjustmentsChange}
-              onClose={() => state.mode = null}
-            />
-          </div>
-        {:else if state.mode === 'filter'}
-          <div class="tools-panel">
-            <FilterTool
-              image={state.imageData.original}
-              adjustments={state.adjustments}
-              transform={state.transform}
-              cropArea={state.cropArea}
-              onChange={handleFilterApply}
-              onClose={() => state.mode = null}
-            />
-          </div>
-        {:else if state.mode === 'export' && isStandalone}
-          <div class="tools-panel">
-            <ExportTool
-              options={state.exportOptions}
-              onChange={(options) => state.exportOptions = { ...state.exportOptions, ...options }}
-              onExport={handleExport}
-              onClose={() => state.mode = null}
-            />
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-
-  <div class="editor-header">
-    <Toolbar
-      mode={state.mode}
-      hasImage={!!state.imageData.original}
-      canUndo={canUndo(state.history)}
-      canRedo={canRedo(state.history)}
-      isStandalone={isStandalone}
-      onModeChange={handleModeChange}
-      onReset={handleReset}
-      onUndo={handleUndo}
-      onRedo={handleRedo}
-    />
-  </div>
-</div>
-
-<style>
-  :global(input[type='range']) {
-      appearance: none;
-    }
-
-  .image-editor {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-    background: #1a1a1a;
-    border-radius: 8px;
-    color: #fff;
-  }
-
-  @media (max-width: 767px) {
-
-  .image-editor {
-      width: 100% !important;
-      height: 90vh
-  }
-    }
-
-  .editor-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .editor-body {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  @media (max-width: 767px) {
-
-  .editor-body {
-      flex: 1;
-      justify-content: center
-  }
-    }
-
-  .upload-area {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    border: 2px dashed #666;
-    border-radius: 8px;
-    background: #2a2a2a;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .upload-area:hover {
-    border-color: #888;
-    background: #333;
-  }
-
-  .upload-area p {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #999;
-  }
-
-  @media (max-width: 767px) {
-
-  .upload-area p {
-      font-size: .75rem
-  }
-    }
-
-  .canvas-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #2a2a2a;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  @media (max-width: 767px) {
-
-  .canvas-container {
-      flex: 1;
-      min-height: 0
-  }
-    }
-
-  .tools-panel {
-    padding: 1rem;
-    background: #2a2a2a;
-    border-radius: 8px;
-    position: absolute;
-    width: min-content;
-    right: 1rem;
-    top: 1rem;
-    bottom: 1rem;
-    overflow-y: auto;
-    scrollbar-width: thin;
-  }
-
-  @media (max-width: 767px) {
-
-  .tools-panel {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: auto;
-      bottom: 0;
-      width: auto;
-      max-height: 50vh;
-      border-radius: 16px 16px 0 0;
-      z-index: 1001
-  }
-    }
-
-  .no-image-message {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    background: #2a2a2a;
-    border-radius: 8px;
-  }
-
-  .no-image-message p {
-    margin: 0;
-    font-size: 1.1rem;
-    color: #999;
-  }
-
-  .embedded-controls {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    gap: 1rem;
-    z-index: 1000;
-  }
-
-  @media (max-width: 767px) {
-
-    }
-
-  .embedded-btn {
-    padding: 0 1rem;
-    border: none;
-    font-size: .9rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s;
-    border-radius: 4px;
-    height: 36px;
-  }
-
-  .embedded-btn:hover {
-      opacity: .8;
-    }
-
-  @media (max-width: 767px) {
-
-  .embedded-btn {
-      padding: 0;
-      font-size: .75rem;
-      min-width: 80px
-  }
-    }
-
-  .embedded-btn-cancel {
-    background: #666;
-    color: #fff;
-  }
-
-  .embedded-btn-apply {
-    background: var(--primary-color, #63b97b);
-    color: #fff;
-  }
-
-  .experimental {
-    padding: 0 1rem;
-    background: var(--primary-color, #63b97b);
-    opacity: .7;
-    color: #fff;
-    height: 40px;
-    border-radius: 20px;
-    letter-spacing: .05em;
-    font-size: 16px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    margin: 0 auto 0 0;
-  }
-
-  .editor-history-controls {
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    margin: auto;
-    width: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: 8px;
-    border: 1px solid #444;
-    box-sizing: border-box;
-  }
-
-  .editor-history-btn {
-    appearance: none;
-    box-shadow: none;
-    border: none;
-    background: #333;
-    width: 36px;
-    height: 36px;
-    display: grid;
-    place-content: center;
-    color: #fff;
-    cursor: pointer;
-    transition: all .3s ease-in-out;
-    border-right: 1px solid #444;
-  }
-
-  .editor-history-btn:last-child {
-      border-right: none;
-    }
-
-  .editor-history-btn:hover {
-      opacity: .7;
-    }
-
-  .editor-history-btn:disabled {
-      background: #222;
-      color: #333;
-      cursor: not-allowed;
-    }</style>
+</script>
+
+<svelte:window onkeydown={handleKeyDown} />
+
+<div class="image-editor" style="width: {width}px;">
+  {#if !isStandalone && state.imageData.original}
+    <div class="embedded-controls">
+      <button class="embedded-btn embedded-btn-cancel" onclick={handleCancel}>
+        {$_('editor.cancel')}
+      </button>
+      <button class="embedded-btn embedded-btn-apply" onclick={handleComplete}>
+        {$_('editor.apply')}
+      </button>
+
+      <div class="editor-history-controls">
+        <button
+                class="editor-history-btn"
+                disabled={!canUndo(state.history)}
+                onclick={handleUndo}
+                title={$_('toolbar.undo')}
+        >
+          <Undo2 size={20} />
+        </button>
+
+        <button
+                class="editor-history-btn"
+                disabled={!canRedo(state.history)}
+                onclick={handleRedo}
+                title={$_('toolbar.redo')}
+        >
+          <Redo2 size={20} />
+        </button>
+
+        <button
+                class="editor-history-btn"
+                disabled={!!state.imageData.original}
+                onclick={handleReset}
+                title={$_('editor.reset')}
+        >
+          <RotateCcw size={20} />
+        </button>
+      </div>
+    </div>
+  {/if}
+
+  <div class="editor-body">
+    {#if !state.imageData.original && isStandalone}
+      <div
+        class="upload-area"
+        role="button"
+        tabindex="0"
+        ondrop={handleDrop}
+        ondragover={handleDragOver}
+        onclick={openFileDialog}
+        onkeydown={(e) => e.key === 'Enter' && openFileDialog()}
+      >
+        <p>{$_('editor.dropImageHere')}</p>
+        <input
+          bind:this={fileInput}
+          type="file"
+          accept="image/png,image/jpeg,image/jpg"
+          onchange={handleFileInputChange}
+          style="display: none;"
+        />
+      </div>
+    {:else if !state.imageData.original && !isStandalone}
+      <div class="no-image-message">
+        <p>{$_('editor.noImage')}</p>
+      </div>
+    {:else}
+      <div
+        class="canvas-container"
+        onwheel={(e) => {
+          e.preventDefault();
+          const delta = -e.deltaY * 0.001;
+          handleZoom(delta, e.clientX, e.clientY);
+        }}
+        bind:clientWidth
+        bind:clientHeight
+      >
+        <Canvas
+          bind:canvas={canvasElement}
+          width={clientWidth || width}
+          height={clientHeight || height}
+          image={state.imageData.original}
+          viewport={state.viewport}
+          transform={state.transform}
+          adjustments={state.adjustments}
+          cropArea={state.cropArea}
+          blurAreas={state.blurAreas}
+          stampAreas={state.stampAreas}
+          onZoom={handleZoom}
+          onViewportChange={handleViewportChange}
+        />
+
+        {#if state.mode === 'crop'}
+          <CropTool
+            canvas={canvasElement}
+            image={state.imageData.original}
+            viewport={state.viewport}
+            transform={state.transform}
+            onApply={handleCropApply}
+            onCancel={() => state.mode = null}
+            onViewportChange={handleViewportChange}
+            onTransformChange={handleTransformChange}
+          />
+        {:else if state.mode === 'blur'}
+          <BlurTool
+            canvas={canvasElement}
+            image={state.imageData.original}
+            viewport={state.viewport}
+            transform={state.transform}
+            blurAreas={state.blurAreas}
+            cropArea={state.cropArea}
+            onUpdate={handleBlurAreasChange}
+            onClose={() => state.mode = null}
+            onViewportChange={handleViewportChange}
+          />
+        {:else if state.mode === 'stamp'}
+          <StampTool
+            canvas={canvasElement}
+            image={state.imageData.original}
+            viewport={state.viewport}
+            transform={state.transform}
+            stampAreas={state.stampAreas}
+            cropArea={state.cropArea}
+            onUpdate={handleStampAreasChange}
+            onClose={() => state.mode = null}
+            onViewportChange={handleViewportChange}
+          />
+        {/if}
+
+        {#if state.mode === 'adjust'}
+          <div class="tools-panel">
+            <AdjustTool
+              adjustments={state.adjustments}
+              onChange={handleAdjustmentsChange}
+              onClose={() => state.mode = null}
+            />
+          </div>
+        {:else if state.mode === 'filter'}
+          <div class="tools-panel">
+            <FilterTool
+              image={state.imageData.original}
+              adjustments={state.adjustments}
+              transform={state.transform}
+              cropArea={state.cropArea}
+              onChange={handleFilterApply}
+              onClose={() => state.mode = null}
+            />
+          </div>
+        {:else if state.mode === 'export' && isStandalone}
+          <div class="tools-panel">
+            <ExportTool
+              options={state.exportOptions}
+              onChange={(options) => state.exportOptions = { ...state.exportOptions, ...options }}
+              onExport={handleExport}
+              onClose={() => state.mode = null}
+            />
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <div class="editor-header">
+    <Toolbar
+      mode={state.mode}
+      hasImage={!!state.imageData.original}
+      canUndo={canUndo(state.history)}
+      canRedo={canRedo(state.history)}
+      isStandalone={isStandalone}
+      onModeChange={handleModeChange}
+      onReset={handleReset}
+      onUndo={handleUndo}
+      onRedo={handleRedo}
+    />
+  </div>
+</div>
+
+<style>
+  :global(input[type='range']) {
+      appearance: none;
+    }
+
+  .image-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    background: #1a1a1a;
+    border-radius: 8px;
+    color: #fff;
+  }
+
+  @media (max-width: 767px) {
+
+  .image-editor {
+      width: 100% !important;
+      height: 90vh
+  }
+    }
+
+  .editor-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .editor-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  @media (max-width: 767px) {
+
+  .editor-body {
+      flex: 1;
+      justify-content: center
+  }
+    }
+
+  .upload-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    border: 2px dashed #666;
+    border-radius: 8px;
+    background: #2a2a2a;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .upload-area:hover {
+    border-color: #888;
+    background: #333;
+  }
+
+  .upload-area p {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #999;
+  }
+
+  @media (max-width: 767px) {
+
+  .upload-area p {
+      font-size: .75rem
+  }
+    }
+
+  .canvas-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #2a2a2a;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  @media (max-width: 767px) {
+
+  .canvas-container {
+      flex: 1;
+      min-height: 0
+  }
+    }
+
+  .tools-panel {
+    padding: 1rem;
+    background: #2a2a2a;
+    border-radius: 8px;
+    position: absolute;
+    width: min-content;
+    right: 1rem;
+    top: 1rem;
+    bottom: 1rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  @media (max-width: 767px) {
+
+  .tools-panel {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: auto;
+      bottom: 0;
+      width: auto;
+      max-height: 50vh;
+      border-radius: 16px 16px 0 0;
+      z-index: 1001
+  }
+    }
+
+  .no-image-message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    background: #2a2a2a;
+    border-radius: 8px;
+  }
+
+  .no-image-message p {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #999;
+  }
+
+  .embedded-controls {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    z-index: 1000;
+  }
+
+  @media (max-width: 767px) {
+
+    }
+
+  .embedded-btn {
+    padding: 0 1rem;
+    border: none;
+    font-size: .9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    border-radius: 4px;
+    height: 36px;
+  }
+
+  .embedded-btn:hover {
+      opacity: .8;
+    }
+
+  @media (max-width: 767px) {
+
+  .embedded-btn {
+      padding: 0;
+      font-size: .75rem;
+      min-width: 80px
+  }
+    }
+
+  .embedded-btn-cancel {
+    background: #666;
+    color: #fff;
+  }
+
+  .embedded-btn-apply {
+    background: var(--primary-color, #63b97b);
+    color: #fff;
+  }
+
+  .experimental {
+    padding: 0 1rem;
+    background: var(--primary-color, #63b97b);
+    opacity: .7;
+    color: #fff;
+    height: 40px;
+    border-radius: 20px;
+    letter-spacing: .05em;
+    font-size: 16px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    margin: 0 auto 0 0;
+  }
+
+  .editor-history-controls {
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    margin: auto;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 8px;
+    border: 1px solid #444;
+    box-sizing: border-box;
+  }
+
+  .editor-history-btn {
+    appearance: none;
+    box-shadow: none;
+    border: none;
+    background: #333;
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-content: center;
+    color: #fff;
+    cursor: pointer;
+    transition: all .3s ease-in-out;
+    border-right: 1px solid #444;
+  }
+
+  .editor-history-btn:last-child {
+      border-right: none;
+    }
+
+  .editor-history-btn:hover {
+      opacity: .7;
+    }
+
+  .editor-history-btn:disabled {
+      background: #222;
+      color: #333;
+      cursor: not-allowed;
+    }</style>