From 93c65abfa18c90f6eabc4b3a6c2a6951af950f54 Mon Sep 17 00:00:00 2001
From: Tucsky <tucsky@pm.me>
Date: Wed, 30 Oct 2024 23:44:08 +0100
Subject: [PATCH] feat: indicator scaleWith dropdown

---
 CHANGELOG.md                                  |   9 +
 src/assets/sass/dialog.scss                   |  16 +-
 src/components/chart/IndicatorsOverlay.vue    | 110 ++---------
 src/components/chart/options.ts               |   2 +-
 src/components/framework/BlobImage.vue        |  45 +++++
 src/components/framework/Dialog.vue           |   1 +
 src/components/framework/Dropdown.vue         |  28 +++
 src/components/framework/PromptDialog.vue     |  33 ++--
 src/components/framework/editor/Editor.vue    |   8 +-
 .../framework/editor/EditorContextMenu.vue    |  46 ++++-
 .../framework/editor/references/README.md     |  29 ---
 .../framework/editor/references/brokenarea.md | 171 ++++++++++++++++++
 .../framework/editor/references/cloudarea.md  |  36 ++++
 .../framework/editor/references/option.md     |  22 +--
 src/components/indicators/IndicatorDetail.vue |   2 +-
 src/components/indicators/IndicatorDialog.vue | 144 ++++++++-------
 .../indicators/IndicatorDropdown.vue          | 158 ++++++++++++++++
 .../indicators/IndicatorPreview.vue           |  21 +--
 .../indicators/PriceScaleButton.vue           |  79 ++++++++
 .../indicators/PriceScaleDropdown.vue         |  71 ++++++++
 .../library/PublishResourceDialog.vue         |   2 +-
 src/store/panesSettings/chart.ts              |   9 +-
 src/utils/helpers.ts                          |   4 +-
 23 files changed, 790 insertions(+), 256 deletions(-)
 create mode 100644 src/components/framework/BlobImage.vue
 delete mode 100644 src/components/framework/editor/references/README.md
 create mode 100644 src/components/framework/editor/references/brokenarea.md
 create mode 100644 src/components/framework/editor/references/cloudarea.md
 create mode 100644 src/components/indicators/IndicatorDropdown.vue
 create mode 100644 src/components/indicators/PriceScaleButton.vue
 create mode 100644 src/components/indicators/PriceScaleDropdown.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 985da5c9..8db8faac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented here.
 
+## [3.6.3] - 2024-10-30
+
+- Reconnect closed apis when tab made visible again (& ios pwa)
+- Fetch range based on indicator length
+- Autocomplete local variable in script
+- Zoomable indicator preview
+- Markdown editor for indicators description
+- Indicator scaleWith dropdown
+
 ## [3.6.2] - 2024-09-29
 
 - Fix Dockerfile and startup instructions
diff --git a/src/assets/sass/dialog.scss b/src/assets/sass/dialog.scss
index 90fde653..848d72b7 100644
--- a/src/assets/sass/dialog.scss
+++ b/src/assets/sass/dialog.scss
@@ -124,9 +124,12 @@
     border-radius: 0.75rem 0.75rem 0 0;
     cursor: grab;
 
+    &-wrapper {
+      position: relative;
+    }
+
     #{$self}--contrasted & {
       border-bottom: 0 !important;
-      padding-bottom: 0;
       background-color: var(--theme-base-o25);
     }
 
@@ -153,10 +156,11 @@
   }
 
   &__subheader {
+    position: relative;
+    z-index: 1;
 
     #{$self}--contrasted & {
       background-color: var(--theme-base-o25);
-      padding-top: 0.5rem;
     }
   }
 
@@ -239,13 +243,7 @@
 
   .dialog__close {
     text-align: center;
-    padding: 0.75rem;
-    margin: -0.75rem -0.75rem -0.75rem 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-self: stretch;
-    border-radius: 0 $border-radius-base 0 0;
+    margin: 0 -0.5rem 0 0.5rem;
     color: var(--theme-color-100);
 
     &:hover {
diff --git a/src/components/chart/IndicatorsOverlay.vue b/src/components/chart/IndicatorsOverlay.vue
index 8d6c571a..ceb2bca7 100644
--- a/src/components/chart/IndicatorsOverlay.vue
+++ b/src/components/chart/IndicatorsOverlay.vue
@@ -1,69 +1,11 @@
 <template>
   <div class="chart-overlay__panel indicators-overlay">
     <div class="chart-overlay__content" v-if="value">
-      <dropdown v-model="dropdownTrigger">
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="editIndicator(selectedIndicator)"
-        >
-          <i class="icon-edit"></i>
-          <span>Edit</span>
-        </button>
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="resizeIndicator(selectedIndicator)"
-        >
-          <i class="icon-resize-height"></i>
-          <span>Resize</span>
-        </button>
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="duplicateIndicator(selectedIndicator)"
-        >
-          <i class="icon-copy-paste"></i>
-          <span>Duplicate</span>
-        </button>
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="downloadIndicator(selectedIndicator)"
-        >
-          <i class="icon-download"></i>
-          <span>Download</span>
-        </button>
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="setIndicatorOrder(selectedIndicator, 0)"
-          v-if="selectedIndicatorIsFront"
-        >
-          <i class="icon-up"></i>
-          <span>Send to back</span>
-        </button>
-        <button
-          v-else
-          type="button"
-          class="dropdown-item"
-          @click="
-            setIndicatorOrder(selectedIndicator, indicatorOrder.length - 1)
-          "
-        >
-          <i class="icon-down -lower"></i>
-          <span>Bring to front</span>
-        </button>
-        <div class="dropdown-divider"></div>
-        <button
-          type="button"
-          class="dropdown-item"
-          @click="removeIndicator(selectedIndicator)"
-        >
-          <i class="icon-trash"></i>
-          <span>Remove</span>
-        </button>
-      </dropdown>
+      <IndicatorDropdown
+        v-model="dropdownTrigger"
+        :indicator-id="indicatorId"
+        :pane-id="paneId"
+      />
       <IndicatorControl
         v-for="id in indicatorOrder"
         :key="id"
@@ -93,11 +35,13 @@ import { ChartPaneState } from '../../store/panesSettings/chart'
 import dialogService from '../../services/dialogService'
 
 import IndicatorControl from '@/components/chart/IndicatorControl.vue'
+import IndicatorDropdown from '@/components/indicators/IndicatorDropdown.vue'
 
 @Component({
   name: 'IndicatorsOverlay',
   components: {
-    IndicatorControl
+    IndicatorControl,
+    IndicatorDropdown
   },
   props: {
     paneId: {
@@ -114,8 +58,7 @@ export default class IndicatorsOverlay extends Vue {
   private value: boolean
 
   dropdownTrigger: HTMLElement = null
-  selectedIndicator: string = null
-  selectedIndicatorIsFront: boolean = null
+  indicatorId: string = null
   sorting: {
     id: string
     height: number
@@ -151,18 +94,14 @@ export default class IndicatorsOverlay extends Vue {
   toggleDropdown(event?: Event, id?: string) {
     if (
       event &&
-      (!this.dropdownTrigger ||
-        !this.selectedIndicator ||
-        this.selectedIndicator !== id)
+      (!this.dropdownTrigger || !this.indicatorId || this.indicatorId !== id)
     ) {
       const triggerElement = event.currentTarget as HTMLElement
+      this.indicatorId = id
       this.dropdownTrigger = triggerElement
-      this.selectedIndicator = id
-      this.selectedIndicatorIsFront =
-        this.indicatorOrder.indexOf(id) === this.indicatorOrder.length - 1
     } else {
       this.dropdownTrigger = null
-      this.selectedIndicator = null
+      this.indicatorId = null
     }
   }
 
@@ -175,22 +114,6 @@ export default class IndicatorsOverlay extends Vue {
     this.dropdownTrigger = null
   }
 
-  removeIndicator(indicatorId: string) {
-    this.$store.dispatch(this.paneId + '/removeIndicator', { id: indicatorId })
-  }
-
-  resizeIndicator(indicatorId: string) {
-    this.$store.commit(this.paneId + '/TOGGLE_LAYOUTING', indicatorId)
-  }
-
-  duplicateIndicator(indicatorId: string) {
-    this.$store.dispatch(this.paneId + '/duplicateIndicator', indicatorId)
-  }
-
-  downloadIndicator(indicatorId: string) {
-    this.$store.dispatch(this.paneId + '/downloadIndicator', indicatorId)
-  }
-
   async addIndicator() {
     dialogService.open(
       (await import('@/components/indicators/IndicatorLibraryDialog.vue'))
@@ -217,9 +140,14 @@ export default class IndicatorsOverlay extends Vue {
       case 'menu':
         return this.toggleDropdown(event, indicatorId)
       case 'remove':
-        return this.removeIndicator(indicatorId)
+        return this.$store.dispatch(this.paneId + '/removeIndicator', {
+          id: indicatorId
+        })
       case 'resize':
-        return this.resizeIndicator(indicatorId)
+        return this.$store.commit(
+          this.paneId + '/TOGGLE_LAYOUTING',
+          indicatorId
+        )
     }
 
     return this.editIndicator(indicatorId)
diff --git a/src/components/chart/options.ts b/src/components/chart/options.ts
index 58737039..fb1b3beb 100644
--- a/src/components/chart/options.ts
+++ b/src/components/chart/options.ts
@@ -344,7 +344,7 @@ export function getChartScales(
       return scales
     },
     {
-      ...{ [indicatorId]: `Own scale 📍` },
+      ...{ [indicatorId]: `Own scale` },
       left: 'Left ←',
       right: 'Right →'
     }
diff --git a/src/components/framework/BlobImage.vue b/src/components/framework/BlobImage.vue
new file mode 100644
index 00000000..d854ce4d
--- /dev/null
+++ b/src/components/framework/BlobImage.vue
@@ -0,0 +1,45 @@
+<template>
+  <img v-if="imageObjectUrl" :src="imageObjectUrl" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator'
+
+@Component({
+  name: 'BlobImage',
+  props: {
+    value: {
+      type: [Blob, File],
+      default: null
+    }
+  }
+})
+export default class BlobImage extends Vue {
+  value: Blob | File
+  imageObjectUrl: string = null
+
+  @Watch('value', { immediate: true })
+  onBlobChange() {
+    this.loadBlob()
+  }
+
+  beforeDestroy() {
+    this.clearBlob()
+  }
+
+  loadBlob() {
+    this.clearBlob()
+
+    if (this.value instanceof Blob || (this.value as any) instanceof File) {
+      this.imageObjectUrl = URL.createObjectURL(this.value)
+    }
+  }
+
+  clearBlob() {
+    if (this.imageObjectUrl) {
+      URL.revokeObjectURL(this.imageObjectUrl)
+      this.imageObjectUrl = null
+    }
+  }
+}
+</script>
diff --git a/src/components/framework/Dialog.vue b/src/components/framework/Dialog.vue
index 13b4b2ac..5d4dd982 100644
--- a/src/components/framework/Dialog.vue
+++ b/src/components/framework/Dialog.vue
@@ -30,6 +30,7 @@
         @mousedown="handleDrag"
         @touchstart="handleDrag"
       >
+        <slot name="cover"></slot>
         <div class="dialog__header">
           <slot name="header"></slot>
           <button
diff --git a/src/components/framework/Dropdown.vue b/src/components/framework/Dropdown.vue
index beb1ff24..189cf389 100644
--- a/src/components/framework/Dropdown.vue
+++ b/src/components/framework/Dropdown.vue
@@ -421,6 +421,10 @@ export default {
     margin: 0.5em 0;
     position: relative;
 
+    &:first-child {
+      margin-top: 0.75rem;
+    }
+
     &[data-label]:before {
       content: attr(data-label);
       position: absolute;
@@ -452,11 +456,21 @@ export default {
     box-shadow: none;
     line-height: 1;
     cursor: pointer;
+    text-decoration: none;
 
     &:hover {
       background-color: var(--theme-color-o10);
     }
 
+    &--active {
+      font-weight: 600;
+      background-color: var(--theme-background-100);
+
+      &:hover {
+        background-color: var(--theme-background-100);
+      }
+    }
+
     &--group {
       padding: 0;
 
@@ -465,12 +479,26 @@ export default {
       }
     }
 
+    &--narrow {
+      padding-block: 0.375rem;
+    }
+
     &__subtitle {
       opacity: 0.5;
       font-size: 0.875em;
       margin-top: 0.25em;
     }
 
+    &__emoji {
+      width: 1em;
+      padding-right: 1em;
+      font-size: 0.75em;
+    }
+
+    &__icon {
+      padding: 0 0.375rem;
+    }
+
     &--space-between {
       justify-content: space-between;
     }
diff --git a/src/components/framework/PromptDialog.vue b/src/components/framework/PromptDialog.vue
index 515c0b28..58edbf0d 100644
--- a/src/components/framework/PromptDialog.vue
+++ b/src/components/framework/PromptDialog.vue
@@ -2,7 +2,7 @@
   <Dialog
     @clickOutside="close"
     size="small"
-    :resizable="tag === 'editor'"
+    :resizable="markdown"
     @resize="resizeEditor"
   >
     <template v-slot:header>
@@ -15,28 +15,16 @@
       @submit.prevent="submit"
     >
       <div class="form-group flex-grow-1 d-flex -column">
-        <div class="d-flex mb8">
+        <div v-if="label || markdown" class="d-flex mb8">
           <label class="mr8 mt4 mb4">{{ label }}</label>
 
-          <label
-            v-if="tag === 'editor'"
-            class="checkbox-control -small mlauto mr0"
-          >
+          <label v-if="markdown" class="checkbox-control -small mlauto mr0">
             <input type="checkbox" class="form-control" v-model="showPreview" />
             <div v-tippy title="Show preview"></div>
           </label>
         </div>
-        <input
-          v-if="tag === 'input'"
-          type="text"
-          class="form-control w-100"
-          :placeholder="placeholder"
-          v-model="value"
-          v-autofocus
-          v-on:keyup.enter="submit"
-        />
         <MarkdownEditor
-          v-else-if="tag === 'editor'"
+          v-if="markdown"
           class="w-100 flex-grow-1"
           ref="editor"
           v-model="value"
@@ -44,13 +32,14 @@
           minimal
           autofocus
         />
-        <textarea
+        <input
           v-else
           type="text"
           class="form-control w-100"
           :placeholder="placeholder"
           v-model="value"
           v-autofocus
+          v-on:keyup.enter="submit"
         />
       </div>
     </form>
@@ -75,9 +64,13 @@ export default {
       import('@/components/framework/editor/MarkdownEditor.vue')
   },
   props: {
-    tag: {
-      type: String,
-      default: 'input'
+    markdown: {
+      type: Boolean,
+      default: false
+    },
+    textarea: {
+      type: Boolean,
+      default: false
     },
     question: {
       type: String
diff --git a/src/components/framework/editor/Editor.vue b/src/components/framework/editor/Editor.vue
index 3a61b6b6..5f3784b7 100644
--- a/src/components/framework/editor/Editor.vue
+++ b/src/components/framework/editor/Editor.vue
@@ -193,8 +193,12 @@ export default class Editor extends Vue {
     })
   }
 
-  zoom(value) {
-    this.currentEditorOptions.fontSize += value
+  zoom(value, override?: boolean) {
+    if (override) {
+      this.currentEditorOptions.fontSize = value
+    } else {
+      this.currentEditorOptions.fontSize += value
+    }
     this.$emit('options', this.currentEditorOptions)
   }
 
diff --git a/src/components/framework/editor/EditorContextMenu.vue b/src/components/framework/editor/EditorContextMenu.vue
index ced05b11..a96e8f60 100644
--- a/src/components/framework/editor/EditorContextMenu.vue
+++ b/src/components/framework/editor/EditorContextMenu.vue
@@ -1,13 +1,30 @@
 <template>
   <dropdown v-model="dropdownTrigger">
-    <button @click.stop="$emit('cmd', ['zoom', 1])" class="dropdown-item">
-      <i class="icon-plus"></i>
-      <span>Zoom in</span>
-    </button>
-    <button @click.stop="$emit('cmd', ['zoom', -1])" class="dropdown-item">
-      <i class="icon-minus"></i>
-      <span>Zoom out</span>
-    </button>
+    <div class="d-flex btn-group" style="width: 135px">
+      <button
+        type="button"
+        class="btn -green"
+        @click.stop="$emit('cmd', ['zoom', -1])"
+      >
+        <i class="icon-minus"></i>
+      </button>
+      <button
+        type="button"
+        class="btn -green text-monospace flex-grow-1 text-center -cases"
+        @click.stop="$emit('cmd', ['zoom', 14, true])"
+      >
+        <div class="text-center w-100">
+          {{ currentEditorOptions.fontSize.toFixed(0) }}px
+        </div>
+      </button>
+      <button
+        type="button"
+        class="btn -green"
+        @click.stop="$emit('cmd', ['zoom', 1])"
+      >
+        <i class="icon-plus"></i>
+      </button>
+    </div>
     <div class="dropdown-item" @click.stop>
       <label class="checkbox-control -small" @mousedown.prevent>
         <input
@@ -20,6 +37,19 @@
         <span>Word Wrap</span>
       </label>
     </div>
+    <a
+      class="dropdown-item mb8"
+      href="https://github.com/Tucsky/aggr/wiki/introduction-to-scripting"
+      target="_blank"
+      title="Scripting documentation"
+      v-tippy
+      @click.stop
+    >
+      <label class="checkbox-control -small" @mousedown.prevent>
+        <i class="dropdown-item__icon icon-external-link-square-alt mr8"></i>
+        <span>Wiki</span>
+      </label>
+    </a>
   </dropdown>
 </template>
 
diff --git a/src/components/framework/editor/references/README.md b/src/components/framework/editor/references/README.md
deleted file mode 100644
index 8344d6b5..00000000
--- a/src/components/framework/editor/references/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-```ts
-area(
-  value: number | { 
-    value: number, 
-    time: number 
-  },
-  [options]
-)
-```
-
-Renders an area series for the current bar using the specified value and optional styling parameters. This function adapts the `addAreaSeries` method from Lightweight Charts for individual bar rendering.
-
-## Parameters
-
-- `value`: The value for the current bar, either a number or an object with `value` and `time` properties.
-- `options` (optional): A set of styling options for the area series. Options include:
-  - `lineColor`: The color of the line in the area series (e.g., `lineColor=yellow`).
-  - `topColor`: The color at the top of the area series (e.g., `topColor='#2962FF'`).
-  - `bottomColor`: The color at the bottom of the area series (e.g., `bottomColor='rgba(41, 98, 255, 0.28)'`).
-
-## Returns
-
-- This function does not return a value. It renders the area series on the chart for the current bar.
-
-## Summary
-
-The `area` function is designed for real-time, bar-by-bar rendering of area series in charts. It accepts a value for the current bar and a series of optional styling parameters, allowing for customization of the series appearance. The parameters follow a key=value format, making it flexible and intuitive to specify various options. This function is ideal for applications requiring dynamic and visually distinct data visualization, particularly in financial or data-intensive contexts.
-
-*Note: All options are optional. The function can be used with just the `value` parameter (e.g., `area(1)`), in which case default styles will be applied. The styling parameters must be valid CSS color values for the function to render the series correctly.*
diff --git a/src/components/framework/editor/references/brokenarea.md b/src/components/framework/editor/references/brokenarea.md
new file mode 100644
index 00000000..5303d882
--- /dev/null
+++ b/src/components/framework/editor/references/brokenarea.md
@@ -0,0 +1,171 @@
+
+
+```ts
+brokenarea(cell: BrokenAreaCell, [options])
+```
+
+Draws a "broken cloud," or a shape with both a top and bottom value, capable of stopping and reappearing elsewhere without continuity. The `brokenarea` function is flexible enough to create rectangles, background fills, and even horizontal lines, enabling advanced plotting capabilities. When applied correctly, it can generate complex visualizations like heatmaps.
+
+## Parameters
+
+- **`cell`** — Defines the primary characteristics of the broken area.
+- **`options`** *(optional)* — Allows additional customization, such as color and stroke properties.
+
+## `BrokenAreaCell` Type
+
+```ts
+export interface BrokenAreaCell {
+  time: number;             // Unix timestamp
+  lowerValue: number;
+  higherValue: number;
+  extendRight?: boolean;
+  infinite?: boolean;       // Draw beyond viewport if set to true
+  color?: string;
+  label?: string;
+  id?: string;
+}
+```
+
+## `BrokenAreaOptions` Type
+
+```ts
+export interface BrokenAreaOptions {
+  color?: string;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+```
+
+## Example Usage
+
+### Basic Example (Suboptimal Usage)
+
+```
+brokenarea({
+  time: time,
+  lowerValue: 10,
+  higherValue: 20,
+  extendRight: true,
+  color: 'yellow'
+})
+```
+
+This example draws a rectangle extending infinitely to the right, which can function as a test but lacks practical application.
+
+### Advanced Example (Dynamic Slot-Based Drawing)
+
+The `brokenarea` function is most effective when used to dynamically allocate slots for drawing lines or rectangles on the chart. By defining multiple `brokenarea` slots programmatically, you gain greater control over redrawing and updating visual elements based on script logic.
+
+```ts
+// top of the script
+if (!boundaries) {
+  // check if boundaries isn't defined = initial run of the script
+
+  // define some persistent script variables
+  pendingRedraws = [] // number[]
+  slots = [] // {index: number, redrawAt: number}[]
+
+  // indicator related, but usefull to underestand the point
+  cells = [] // {[normalizedCellPrice: number]: {strength: number, index: number, top: number, bottom: number, count: number}
+
+  // here we make use of the series global variable
+  for (var i = 0; i < series.length; i++) {
+    if (series[i].seriesType() !== 'BrokenArea') {
+      continue
+    }
+
+    // register each available series as a slot 
+    slots.push({
+      index: i,
+      redrawAt: 0
+    })
+
+    // boundaries: { [cellId: string]: *bar index* }
+    series[i].setExtensionsBoundaries(boundaries)
+  }
+}
+
+// define the slots at whatever part of the script
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+brokenarea()
+```
+
+This binds the `boundaries` object to each series slot, allowing control over where each cell extension halts.
+
+```ts
+// at the bottom of the script, you would have something like this
+// pendingRedraws here is an array of the cells that needs to be redrawn, each redraw use another object `cells`, a store for all the cells
+if (pendingRedraws.length) {
+  for (var i = 0; i < pendingRedraws.length; i++) {
+    var cell = cells[pendingRedraws[i]]
+
+    if (!cell) {
+      // maybe cell doesn't exist anymore
+      pendingRedraws.splice(i--, 1)
+      continue
+    }
+    
+    var slot = slots.find(slot => slot.redrawAt < bar.length)
+
+    if (slot) {
+      // lock that slot to NOT be used until next bar
+      slot.redrawAt = bar.length + 1
+
+      if (cell.id) {
+        // this is the interesting part. it tells the cell previously drawn by that slot (with extendRight: true) to stop extending at the bar index `bar.length - 2`
+        boundaries[cell.id] = bar.length - 2
+      }
+      
+      // register a new cell id
+      cell.id = Math.random().toString()
+
+      // indicator related stuff based on our cell
+      var ratio = Math.max(0.01, Math.min(1, cell.strength * cell.count * (options.strength / 100)))
+      var color = interpolate(ratio, color0, color1, color2, color3)
+
+      // this is the second interesting part. it just tells the selected brokenarea() slot (bar.series[series[slot.index].id]) to draw the rectangle
+      bar.series[series[slot.index].id] ={
+        id: cell.id,
+        time: time - bar.timeframe,
+        lowerValue: cell.top,
+        higherValue: cell.bottom,
+        extendRight: true,
+        color: color
+      }
+
+      pendingRedraws.splice(i--, 1)
+    } else {
+      break;
+    }
+  }
+}
+```
+
+This setup provides efficient control over drawing, only updating cells that have changed. With proper configuration, this approach forms the basis for heatmap visualizations by selectively redrawing areas as needed.
+
+### Horizontal lines
+
+The `brokenarea` function can also create horizontal lines, offering programmable and efficient rendering. Setting `lowerValue` and `higherValue` to the same value draws a line instead of a rectangle.
+
+Example: Drawing a horizontal threshold line above a histogram series.
+
+```ts
+threshold = option(default=1000000,type=range,step=10000,min=1000,max=10000000)
+brokenarea(infinite=true,strokeWidth=0.5,strokeColor=options.upColor,id=threshold)
+
+if (bar.length === 1) {
+  // draw once
+  bar.series.threshold = { time: time, lowerValue: options.threshold, higherValue: options.threshold, extendRight: true }
+}
+```
+
+With `brokenarea`, precise control over plot boundaries and appearance is possible, enabling a high degree of customization across various charting applications.
diff --git a/src/components/framework/editor/references/cloudarea.md b/src/components/framework/editor/references/cloudarea.md
new file mode 100644
index 00000000..33d17ec8
--- /dev/null
+++ b/src/components/framework/editor/references/cloudarea.md
@@ -0,0 +1,36 @@
+```ts
+cloudarea(
+  lowerValue: number,
+  higherValue: number,
+  [options]
+)
+```
+
+Exemple:
+
+```ts
+cloudarea($price.low, $price.high, positiveColor=green, negativeColor=red)
+```
+
+Draw continuous cloud (shape with a top and a bottom value) 
+
+```ts
+export interface CloudAreaStyleOptions {
+	positiveColor: string;
+	negativeColor: string;
+	higherLineColor: string;
+	higherLineStyle: LineStyle;
+	higherLineWidth: LineWidth;
+	higherLineType: LineType;
+	lowerLineColor: string;
+	lowerLineStyle: LineStyle;
+	lowerLineWidth: LineWidth;
+	lowerLineType: LineType;
+	crosshairMarkerVisible: boolean;
+	crosshairMarkerRadius: number;
+	crosshairMarkerBorderColor: string;
+	crosshairMarkerBackgroundColor: string;
+}
+```
+
+***Note: all of these options are static, aka remains the same for the whole series***
\ No newline at end of file
diff --git a/src/components/framework/editor/references/option.md b/src/components/framework/editor/references/option.md
index 600b20b8..41ffe7d7 100644
--- a/src/components/framework/editor/references/option.md
+++ b/src/components/framework/editor/references/option.md
@@ -30,7 +30,7 @@ export enum ALLOWED_OPTION_TYPES {
 
 ```ts
 // number input with `min`, `max` and `step` attribute
-threshold = option((type = number), (min = 0), (max = 10), (step = 0.1))
+threshold = option(type = number, min = 0, max = 10, step = 0.1)
 ```
 
 ```ts
@@ -58,19 +58,19 @@ console.log(MyText) // ""
 
 ```ts
 smallrange = option(
-  (type = range),
-  (label = 'Small range'),
-  (min = 0),
-  (max = 1)
+type = range,
+label = 'Small range',
+min = 0,
+max = 1
 )
 
 bigrange = option(
-  (type = range),
-  (label = 'Big range'),
-  (gradient = ['red', 'limegreen']), // colorize slider
-  (min = 0),
-  (max = 1000000),
-  (log = true) // slider will ajust displayed value logarithmic scale
+type = range,
+label = 'Big range',
+gradient = ['red', 'limegreen'], // colorize slider
+min = 0,
+max = 1000000,
+log = true // slider will ajust displayed value logarithmic scale
 )
 ```
 
diff --git a/src/components/indicators/IndicatorDetail.vue b/src/components/indicators/IndicatorDetail.vue
index 1275b628..a0f01ca2 100644
--- a/src/components/indicators/IndicatorDetail.vue
+++ b/src/components/indicators/IndicatorDetail.vue
@@ -366,7 +366,7 @@ export default {
           action: 'Edit',
           placeholder: this.indicator.description,
           input: this.indicator.description,
-          tag: 'editor'
+          markdown: true
         },
         'edit-description'
       )
diff --git a/src/components/indicators/IndicatorDialog.vue b/src/components/indicators/IndicatorDialog.vue
index 916d576e..041ff5ae 100644
--- a/src/components/indicators/IndicatorDialog.vue
+++ b/src/components/indicators/IndicatorDialog.vue
@@ -8,12 +8,17 @@
     size="wide"
     :mask="false"
     :close-on-escape="false"
+    :cover="savedPreview"
     @clickOutside="close"
     @resize="onResize"
     contrasted
   >
+    <template #cover>
+      <BlobImage :value="savedPreview" class="indicator-dialog__preview" />
+    </template>
+
     <template #header>
-      <div class="dialog__title indicator-dialog__title -center">
+      <div class="dialog__title indicator-dialog__title -center mrauto">
         <div @dblclick="renameIndicator">{{ name }}</div>
         <code
           class="indicator-dialog__id -filled"
@@ -25,15 +30,6 @@
         </code>
       </div>
 
-      <a
-        href="https://github.com/Tucsky/aggr/wiki/introduction-to-scripting"
-        target="_blank"
-        title="Scripting documentation"
-        v-tippy
-        class="btn -text -white mlauto -center -no-grab indicator-dialog__action"
-        ><i class="icon-info"></i><span class="ml8">Wiki</span></a
-      >
-
       <button
         v-if="unsavedChanges"
         title="Rollback changes"
@@ -59,6 +55,34 @@
         <tab name="script">Script</tab>
         <tab name="options">Options</tab>
       </tabs>
+
+      <IndicatorDropdown
+        v-model="dropdownIndicatorTrigger"
+        :indicator-id="indicatorId"
+        :pane-id="paneId"
+      >
+        <DropdownButton
+          @click.native.stop
+          button-class="dropdown-item"
+          :options="{
+            revert: 'Revert changes',
+            reset: 'Reset to default'
+          }"
+          class="-cases"
+          @input="revertChanges"
+        >
+          <template #selection>
+            <i class="icon-eraser"></i> <span>Reset</span>
+          </template>
+        </DropdownButton>
+      </IndicatorDropdown>
+
+      <button
+        class="btn -text -arrow indicator-dialog__settings"
+        @click="toggleIndicatorDropdown"
+      >
+        Settings
+      </button>
     </template>
     <div
       v-if="loadedEditor"
@@ -300,38 +324,6 @@
         :show-reset="false"
         @apply="applyIndicatorPreset($event)"
       />
-      <button class="btn -text -arrow" @click="toggleIndicatorDropdown">
-        Options
-      </button>
-      <dropdown v-model="dropdownIndicatorTrigger">
-        <button type="button" class="dropdown-item" @click="resizeIndicator">
-          <i class="icon-resize-height"></i> <span>Resize</span>
-        </button>
-        <button type="button" class="dropdown-item" @click="downloadIndicator">
-          <i class="icon-download"></i> <span>Download</span>
-        </button>
-        <button type="button" class="dropdown-item" @click="duplicateIndicator">
-          <i class="icon-copy-paste"></i> <span>Duplicate</span>
-        </button>
-        <div class="dropdown-divider"></div>
-        <dropdown-button
-          @click.native.stop
-          button-class="dropdown-item"
-          :options="{
-            revert: 'Revert changes',
-            reset: 'Reset to default'
-          }"
-          class="-cases"
-          @input="revertChanges"
-        >
-          <template #selection>
-            <i class="icon-eraser"></i> <span>Reset</span>
-          </template>
-        </dropdown-button>
-        <button type="button" class="dropdown-item" @click="removeIndicator">
-          <i class="icon-cross"></i> <span>Unload</span>
-        </button>
-      </dropdown>
     </template>
   </Dialog>
 </template>
@@ -342,6 +334,7 @@
 import DialogMixin from '../../mixins/dialogMixin'
 import Tabs from '@/components/framework/Tabs.vue'
 import Tab from '@/components/framework/Tab.vue'
+import IndicatorDropdown from '@/components/indicators/IndicatorDropdown.vue'
 
 import {
   defaultPlotsOptions,
@@ -368,13 +361,18 @@ import ToggableSection from '@/components/framework/ToggableSection.vue'
 import IndicatorOption from '@/components/chart/IndicatorOption.vue'
 import DropdownButton from '@/components/framework/DropdownButton.vue'
 import { Preset } from '@/types/types'
+import workspacesService from '@/services/workspacesService'
+import BlobImage from '../framework/BlobImage.vue'
+
 export default {
   components: {
-    IndicatorOption,
     Tabs,
     Tab,
+    IndicatorOption,
     DropdownButton,
     ToggableSection,
+    BlobImage,
+    IndicatorDropdown,
     Editor: () => import('@/components/framework/editor/Editor.vue')
   },
   props: ['paneId', 'indicatorId'],
@@ -390,6 +388,7 @@ export default {
       },
       resizingColumn: false,
       loadedEditor: false,
+      savedPreview: null,
       plotTypes: [],
       defaultOptionsKeys: [],
       scriptOptionsKeys: [],
@@ -509,6 +508,7 @@ export default {
   },
   created() {
     this.restoreNavigation()
+    this.getSavedPreview()
 
     this.$nextTick(() => {
       this.getPlotTypes()
@@ -521,6 +521,10 @@ export default {
     this.saveNavigation()
   },
   methods: {
+    async getSavedPreview() {
+      const indicator = await workspacesService.getIndicator(this.libraryId)
+      this.savedPreview = indicator?.preview
+    },
     toggleCollapseColum() {
       if (this.navigation.columnWidth > 50) {
         this.navigation.columnWidth = 0
@@ -649,18 +653,6 @@ export default {
             self.indexOf(t) === index && defaultPlotsOptions[t]
         )
     },
-    async removeIndicator() {
-      await this.close()
-
-      this.$store.dispatch(this.paneId + '/removeIndicator', {
-        id: this.indicatorId
-      })
-    },
-    async resizeIndicator() {
-      await this.close()
-
-      this.$store.commit(this.paneId + '/TOGGLE_LAYOUTING', this.indicatorId)
-    },
     async renameIndicator() {
       const name = await dialogService.prompt({
         action: 'Rename',
@@ -674,21 +666,14 @@ export default {
         })
       }
     },
-    async downloadIndicator() {
-      this.$store.dispatch(this.paneId + '/downloadIndicator', this.indicatorId)
-    },
-    async duplicateIndicator() {
-      this.$store.dispatch(
-        this.paneId + '/duplicateIndicator',
+    async saveIndicator() {
+      await this.$store.dispatch(
+        this.paneId + '/saveIndicator',
         this.indicatorId
       )
-
-      await this.close()
-
-      dialogService.openIndicator(this.paneId, this.indicatorId)
-    },
-    async saveIndicator() {
-      this.$store.dispatch(this.paneId + '/saveIndicator', this.indicatorId)
+      setTimeout(() => {
+        this.getSavedPreview()
+      }, 500)
     },
     async undoIndicator() {
       if (!(await dialogService.confirm('Undo changes ?'))) {
@@ -961,6 +946,29 @@ export default {
     }
   }
 
+  &__settings {
+    position: absolute;
+    right: 0.25rem;
+    top: 0.25rem;
+    bottom: 0.5rem;
+    padding: 0.5rem;
+  }
+
+  &__preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 1rem 1rem 0 0;
+    filter: blur(0.25rem);
+    object-fit: cover;
+  }
+
   ::v-deep .dialog__content {
     width: 755px;
     overflow: visible;
diff --git a/src/components/indicators/IndicatorDropdown.vue b/src/components/indicators/IndicatorDropdown.vue
new file mode 100644
index 00000000..0068b1fb
--- /dev/null
+++ b/src/components/indicators/IndicatorDropdown.vue
@@ -0,0 +1,158 @@
+<template>
+  <dropdown :value="value" @input="$emit('input', $event)">
+    <div class="dropdown-divider" :data-label="indicatorName"></div>
+    <button type="button" class="dropdown-item" @click="editIndicator">
+      <i class="icon-edit"></i>
+      <span>Edit</span>
+    </button>
+    <button type="button" class="dropdown-item" @click="renameIndicator">
+      <i class="icon-stamp"></i> <span>Rename</span>
+    </button>
+    <button type="button" class="dropdown-item" @click="downloadIndicator">
+      <i class="icon-download"></i> <span>Download</span>
+    </button>
+    <button type="button" class="dropdown-item" @click="duplicateIndicator">
+      <i class="icon-copy-paste"></i> <span>Duplicate</span>
+    </button>
+    <div class="dropdown-divider"></div>
+    <button
+      type="button"
+      class="dropdown-item"
+      @click="setIndicatorOrder(0)"
+      v-if="isInFront"
+    >
+      <i class="icon-up"></i>
+      <span>Send behind</span>
+    </button>
+    <button
+      v-else
+      type="button"
+      class="dropdown-item"
+      @click="setIndicatorOrder()"
+    >
+      <i class="icon-down -lower"></i>
+      <span>Bring ahead</span>
+    </button>
+    <button type="button" class="dropdown-item" @click="resizeIndicator">
+      <i class="icon-resize-height"></i> <span>Resize</span>
+    </button>
+    <PriceScaleButton :indicator-id="indicatorId" :pane-id="paneId" />
+    <div class="dropdown-divider"></div>
+    <slot />
+    <button type="button" class="dropdown-item" @click="removeIndicator">
+      <i class="icon-cross"></i> <span>Remove</span>
+    </button>
+  </dropdown>
+</template>
+
+<script lang="ts">
+import { ChartPaneState } from '@/store/panesSettings/chart'
+import dialogService from '@/services/dialogService'
+import PriceScaleButton from '@/components/indicators/PriceScaleButton.vue'
+
+export default {
+  name: 'IndicatorDropdown',
+  components: {
+    PriceScaleButton
+  },
+  props: {
+    value: {
+      type: HTMLButtonElement,
+      default: null
+    },
+    paneId: {
+      type: String,
+      required: true
+    },
+    indicatorId: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isInFront: null
+    }
+  },
+  computed: {
+    indicatorName() {
+      return (this.$store.state[this.paneId] as ChartPaneState).indicators[
+        this.indicatorId
+      ]?.name
+    },
+    indicatorOrder() {
+      return (this.$store.state[this.paneId] as ChartPaneState).indicatorOrder
+    }
+  },
+  watch: {
+    value(value) {
+      if (value) {
+        this.updateLabels()
+      }
+    }
+  },
+  mounted() {
+    this.updateLabels()
+  },
+  methods: {
+    updateLabels() {
+      this.isInFront =
+        this.indicatorOrder.indexOf(this.indicatorId) ===
+        this.indicatorOrder.length - 1
+    },
+    setIndicatorOrder(position?: number) {
+      this.$store.commit(`${this.paneId}/UPDATE_INDICATOR_ORDER`, {
+        id: this.indicatorId,
+        position:
+          typeof position === 'undefined'
+            ? this.indicatorOrder.length - 1
+            : position
+      })
+    },
+
+    removeIndicator() {
+      this.$store.dispatch(this.paneId + '/removeIndicator', {
+        id: this.indicatorId
+      })
+    },
+
+    resizeIndicator() {
+      this.$store.commit(this.paneId + '/TOGGLE_LAYOUTING', this.indicatorId)
+    },
+
+    duplicateIndicator() {
+      this.$store.dispatch(
+        this.paneId + '/duplicateIndicator',
+        this.indicatorId
+      )
+    },
+
+    downloadIndicator() {
+      this.$store.dispatch(this.paneId + '/downloadIndicator', this.indicatorId)
+    },
+
+    async editIndicator() {
+      dialogService.open(
+        (await import('@/components/indicators/IndicatorDialog.vue')).default,
+        { paneId: this.paneId, indicatorId: this.indicatorId },
+        'indicator'
+      )
+    },
+
+    async renameIndicator() {
+      const name = await dialogService.prompt({
+        action: 'Rename',
+        input: this.$store.state[this.paneId].indicators[this.indicatorId].name
+      })
+
+      if (typeof name === 'string' && name !== this.name) {
+        this.$store.dispatch(this.paneId + '/renameIndicator', {
+          id: this.indicatorId,
+          name
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/indicators/IndicatorPreview.vue b/src/components/indicators/IndicatorPreview.vue
index 141dde98..994631cc 100644
--- a/src/components/indicators/IndicatorPreview.vue
+++ b/src/components/indicators/IndicatorPreview.vue
@@ -7,12 +7,14 @@
     :class="[isImageZoomed && 'indicator-preview--zoomed']"
     :style="{ '--image-height': imageDimensions.height + 'px' }"
   >
-    <Btn class="indicator-preview__close -text" @click="$emit('close')">
-      <i class="icon-cross"></i>
-    </Btn>
-    <code class="indicator-preview__id -filled">
-      <small>#{{ id }}</small>
-    </code>
+    <template v-if="id">
+      <Btn class="indicator-preview__close -text" @click="$emit('close')">
+        <i class="icon-cross"></i>
+      </Btn>
+      <code class="indicator-preview__id -filled">
+        <small>#{{ id }}</small>
+      </code>
+    </template>
     <img v-if="image" :src="image" ref="image" @load="onImageLoad" />
   </div>
 </template>
@@ -24,7 +26,7 @@ export default {
   props: {
     id: {
       type: String,
-      required: true
+      default: null
     },
     path: {
       default: null
@@ -84,10 +86,7 @@ export default {
 
       const preview = this.preview
 
-      if (
-        this.isInstalled &&
-        (preview instanceof Blob || preview instanceof File)
-      ) {
+      if (preview instanceof Blob || preview instanceof File) {
         this.imageObjectUrl = URL.createObjectURL(preview)
       }
     },
diff --git a/src/components/indicators/PriceScaleButton.vue b/src/components/indicators/PriceScaleButton.vue
new file mode 100644
index 00000000..74adfd13
--- /dev/null
+++ b/src/components/indicators/PriceScaleButton.vue
@@ -0,0 +1,79 @@
+<template>
+  <button
+    type="button"
+    class="dropdown-item dropdown-item--narrow"
+    @click.stop="togglePriceScaleDropdown(indicatorId, $event.currentTarget)"
+  >
+    <span class="dropdown-item__emoji"> 📊 </span>
+    <span class="d-flex -column">
+      <small class="block text-muted">Scale with:</small>
+      {{ priceScaleLabel }}
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+import { ChartPaneState } from '../../store/panesSettings/chart'
+import { createComponent, mountComponent } from '@/utils/helpers'
+
+@Component({
+  name: 'IndicatorsOverlay',
+  props: {
+    paneId: {
+      type: String
+    },
+    indicatorId: {
+      type: String
+    }
+  }
+})
+export default class IndicatorsOverlay extends Vue {
+  private paneId: string
+  private indicatorId: string
+
+  priceScaleLabel = null
+  priceScaleDropdown: any
+
+  mounted() {
+    this.updateLabel()
+  }
+
+  updateLabel() {
+    const { options, name } = (this.$store.state[this.paneId] as ChartPaneState)
+      .indicators[this.indicatorId]
+
+    const { priceScaleId } = options
+
+    this.priceScaleLabel =
+      priceScaleId === this.indicatorId ? name : priceScaleId
+  }
+
+  async togglePriceScaleDropdown(indicatorId, anchor) {
+    this.updateLabel()
+    if (!this.priceScaleDropdown) {
+      const module = await import(
+        `@/components/indicators/PriceScaleDropdown.vue`
+      )
+      this.priceScaleDropdown = createComponent(module.default, {
+        paneId: this.paneId,
+        indicatorId: indicatorId,
+        value: anchor
+      })
+      this.priceScaleDropdown.$on('input', async v => {
+        this.priceScaleDropdown.value = v
+        await this.$nextTick()
+        this.updateLabel()
+      })
+      mountComponent(this.priceScaleDropdown)
+    } else if (this.priceScaleDropdown.value) {
+      this.priceScaleDropdown.value = null
+    } else {
+      this.priceScaleDropdown.indicatorId = indicatorId
+      this.priceScaleDropdown.value = anchor
+    }
+  }
+}
+</script>
diff --git a/src/components/indicators/PriceScaleDropdown.vue b/src/components/indicators/PriceScaleDropdown.vue
new file mode 100644
index 00000000..76f270e5
--- /dev/null
+++ b/src/components/indicators/PriceScaleDropdown.vue
@@ -0,0 +1,71 @@
+<template>
+  <dropdown :value="value" @input="$emit('input', $event)">
+    <div class="dropdown-divider" data-label="Scales"></div>
+
+    <button
+      v-for="(label, id) in priceScales"
+      :key="id"
+      type="button"
+      class="dropdown-item"
+      :class="[priceScaleId === id && 'dropdown-item--active']"
+      @click="setPriceScale(id)"
+    >
+      <span v-if="id === indicatorId">
+        <i class="icon-star-filled -lower"></i>
+        {{ indicatorName }}
+      </span>
+      <span v-else>{{ label }}</span>
+    </button>
+  </dropdown>
+</template>
+
+<script lang="ts">
+import { ChartPaneState } from '@/store/panesSettings/chart'
+import { getChartScales } from '../chart/options'
+
+export default {
+  name: 'PriceScaleDropdown',
+  props: {
+    value: {
+      type: HTMLButtonElement,
+      default: null
+    },
+    paneId: {
+      type: String,
+      required: true
+    },
+    indicatorId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    priceScales() {
+      return getChartScales(
+        (this.$store.state[this.paneId] as ChartPaneState).indicators,
+        this.indicatorId
+      )
+    },
+    priceScaleId() {
+      return (this.$store.state[this.paneId] as ChartPaneState).indicators[
+        this.indicatorId
+      ].options.priceScaleId
+    },
+    indicatorName() {
+      return (this.$store.state[this.paneId] as ChartPaneState).indicators[
+        this.indicatorId
+      ].name
+    }
+  },
+  methods: {
+    setPriceScale(id) {
+      this.$store.dispatch(this.paneId + '/setIndicatorOption', {
+        id: this.indicatorId,
+        key: 'priceScaleId',
+        value: id
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/components/library/PublishResourceDialog.vue b/src/components/library/PublishResourceDialog.vue
index 4132e1fa..969926c5 100644
--- a/src/components/library/PublishResourceDialog.vue
+++ b/src/components/library/PublishResourceDialog.vue
@@ -65,7 +65,7 @@
             <Btn
               type="submit"
               class="-large -green -cases"
-              title="Automatic contribuation"
+              title="Automatic contribution"
               v-tippy
             >
               <i class="icon-upload mr8"></i> Upload now
diff --git a/src/store/panesSettings/chart.ts b/src/store/panesSettings/chart.ts
index 189c9a66..22adc17c 100644
--- a/src/store/panesSettings/chart.ts
+++ b/src/store/panesSettings/chart.ts
@@ -118,7 +118,7 @@ const state = {
   showVerticalGridlines: false,
   verticalGridlinesColor: 'rgba(255,255,255,.1)',
   showWatermark: true,
-  watermarkColor: 'rgba(255,255,255,.1)',
+  watermarkColor: 'rgba(255,255,255,.033)',
   showBorder: true,
   borderColor: null,
   textColor: null,
@@ -190,7 +190,7 @@ const actions = {
     return indicator.id
   },
 
-  duplicateIndicator({ state, dispatch }, id) {
+  async duplicateIndicator({ state, dispatch }, id) {
     const indicator = merge({}, state.indicators[id])
 
     const indicators = Object.values(state.indicators)
@@ -198,6 +198,7 @@ const actions = {
       indicator.name,
       indicators.map(indicator => indicator.name)
     )
+    delete indicator.id
     delete indicator.libraryId
     delete indicator.updatedAt
     delete indicator.createdAt
@@ -206,7 +207,9 @@ const actions = {
     delete indicator.optionsDefinitions
     delete (indicator as any).model // past releases might have included this, force remove
 
-    dispatch('addIndicator', indicator)
+    const duplicatedIndicatorId = await dispatch('addIndicator', indicator)
+
+    dialogService.openIndicator(state._id, duplicatedIndicatorId)
   },
 
   async downloadIndicator({ state }, indicatorId) {
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index d92f1138..f3e3cb16 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -612,7 +612,9 @@ export function displayCanvasInPopup(canvas) {
     const dataURL = canvas.toDataURL()
 
     // Create an image element in the popup window
-    const img = popupWindow.document.createElement('img')
+    const img =
+      popupWindow.document.body.children[0] ||
+      popupWindow.document.createElement('img')
 
     // Set the src attribute of the image to the canvas data URL
     img.src = dataURL