From 77f08952132c1b1503039fceb68c445e6131a9bb Mon Sep 17 00:00:00 2001
From: Amphiluke <amphiluke@gmail.com>
Date: Sat, 2 Dec 2023 16:12:10 +0700
Subject: [PATCH] Use Web Share API

---
 package-lock.json               |  4 ++--
 package.json                    |  2 +-
 src/components/PanelSharing.vue | 28 ++++++++++++++++++++++++++--
 src/stores/bank.mjs             | 14 +++++++-------
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3f773d..472c719 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lindsvg-pwa",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lindsvg-pwa",
-      "version": "2.1.0",
+      "version": "2.2.0",
       "dependencies": {
         "@vueuse/core": "^10.6.1",
         "lindsvg": "^1.3.2",
diff --git a/package.json b/package.json
index b0f2e62..2950c72 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",
diff --git a/src/components/PanelSharing.vue b/src/components/PanelSharing.vue
index 6f4b56a..75686c5 100644
--- a/src/components/PanelSharing.vue
+++ b/src/components/PanelSharing.vue
@@ -3,7 +3,7 @@ import {computed, useCssModule} from "vue";
 import {useCollectionsStore, isUserDefined} from "../stores/collections.mjs";
 import {useLSystemStore} from "../stores/lSystem.mjs";
 import {useInterfaceStore} from "../stores/interface.mjs";
-import {useObjectUrl, useFileDialog} from "@vueuse/core";
+import {useObjectUrl, useFileDialog, useShare} from "@vueuse/core";
 import interfaceStyles from "../styles/interface.module.css";
 import panelStyles from "../styles/panel.module.css";
 
@@ -42,6 +42,15 @@ let lsvgBlob = computed(() => {
 });
 let lsvgURL = useObjectUrl(lsvgBlob);
 
+let {share, isSupported: isShareSupported} = useShare();
+function launchShare() {
+  share({
+    title: "L-system",
+    text: "Image of an L-system from the lindsvg app",
+    files: [new File([svgBlob.value], "l-system.svg", {type: svgBlob.value.type})],
+  });
+}
+
 let permalink = computed(() => {
   if (!collectionsStore.selectedCID || !collectionsStore.selectedLID || isUserDefined(collectionsStore.selectedCID)) {
     return "";
@@ -95,6 +104,17 @@ async function copyPermalink({target}) {
         >
           SVG
         </a>
+
+        <template v-if="isShareSupported">
+          <h3>Share file…</h3>
+          <button
+            type="button"
+            :class="[interfaceStyles.button, $style.fileButton, $style.shareButton]"
+            @click="launchShare"
+          >
+            SVG
+          </button>
+        </template>
       </div>
 
       <hr>
@@ -127,7 +147,7 @@ async function copyPermalink({target}) {
   .fileControls {
     align-items: center;
     display: grid;
-    gap: 20px 10px;
+    gap: 15px 10px;
     grid-template-columns: 1fr 25% 25%;
 
     & h3 {
@@ -148,6 +168,10 @@ async function copyPermalink({target}) {
         background: none;
       }
     }
+
+    & .shareButton {
+      grid-column: 3 / 4;
+    }
   }
 
   .permalinkField {
diff --git a/src/stores/bank.mjs b/src/stores/bank.mjs
index 5998d19..10a4d2d 100644
--- a/src/stores/bank.mjs
+++ b/src/stores/bank.mjs
@@ -503,7 +503,7 @@ export default [
         iterations: 5,
         step: 7,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["4", "3", "2", "1"],
           "stroke-linecap": "round",
         },
@@ -618,7 +618,7 @@ export default [
         iterations: 4,
         step: 0.8,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["4", "3", "2", "1"],
         },
       },
@@ -635,7 +635,7 @@ export default [
         iterations: 4,
         step: 2,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": ["3", "2", "1"],
         },
       },
@@ -866,7 +866,7 @@ export default [
         iterations: 4,
         step: 5,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
         },
       },
@@ -974,7 +974,7 @@ export default [
         iterations: 6,
         step: 14,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
           "stroke-linejoin": "round",
         },
@@ -993,7 +993,7 @@ export default [
         iterations: 5,
         step: 20,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
           "stroke-linejoin": "round",
         },
@@ -1070,7 +1070,7 @@ export default [
         iterations: 4,
         step: 5,
         attributes: {
-          stroke: "#080",
+          stroke: "forestgreen",
           "stroke-width": "1.5",
         },
       },