satis 2.1.53 → 2.1.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 358cd4b72fd41d7611be2d1c2ddae7d64ee55ad9b9d68cd10169d30b9d241697
-  data.tar.gz: 538a47d63390c4c94c7497d73d5c95b9aaaa9e1dc22a22ace1d071f8a1350a24
+  metadata.gz: 8e4087c76633f9b2a02fc083fd95c60a4a28d9677dbe44ee11735e4fa0e29810
+  data.tar.gz: 2ab23a72ad341b331ef4c8ea1fc1780d46e32d1657194a4a8d1fb7ca0193db37
 SHA512:
-  metadata.gz: c0c085c46aee29463647e80eb10bff6beb997aadb25e9464ee86f4758d969a574241659918342ad1b4ea06a42e36edcec171ef0209b30607bc070e4739963f17
-  data.tar.gz: 1966166a699aa72b262b909325569083365c63919bc238204a9b1c048d08b769366611e6e7a200d6ea1dfa9a507e53e1f683b7173c7df1b031520bf652e6b11b
+  metadata.gz: 609e9ac871cbfb81c23b4bad5a60822671d1b4e26132fe2ac219ac6185ef459e7a69a5ca8f28ece3eb911588e505d93fd0206bbf0f07f338d20a0783f2f6a54e
+  data.tar.gz: b572b8fcfb7ee048e40b729b3f56fa5f3b61cd97515b9ddce60c35c1a5a77f01544ca4b53f5f0fdc2a5fb335b3fc2969b02d71997f2d325b080aed3da7ca11b6

data/app/components/satis/date_time_picker/component.html.slim

@@ -6,22 +6,20 @@ div.satis-date-time-picker data-controller="satis-date-time-picker" data-satis-d
       button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none data-satis-date-time-picker-target="clearButton" data-action="click->satis-date-time-picker#clear"
         i.fas.fa-xmark
 
-  .container.z-10.shadow.bg-white.border.border-gray-300.dark:bg-gray-800.dark:border-gray-700.rounded.p-4.w-72 class="#{inline ? 'inline-block' : 'hidden'}" data-satis-date-time-picker-target="calendarView"
+  .container.z-10.shadow.bg-white.border.border-gray-300.dark:bg-gray-800.dark:border-gray-700.rounded.p-4.w-96 class="#{inline ? 'inline-block' : 'hidden'}" data-satis-date-time-picker-target="calendarView"
     .flex.justify-between.items-center.mb-2
       div
-        button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full" data-action="satis-date-time-picker#previousYear"
-          i.text-gray-500.inline-flex.py-1 class=Satis.config.icons[:previous_year]
         button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full" data-action="satis-date-time-picker#previousMonth"
           i.text-gray-500.inline-flex.px-1.py-1 class=Satis.config.icons[:previous_month]
       div.text-center
         span.text-lg.font-bold.text-gray-800.dark:text-gray-200 data-satis-date-time-picker-target="month"
-        span.ml-1.text-lg.text-gray-600.dark:text-gray-200.font-normal data-satis-date-time-picker-target="year"
+        select.appearance-none.border-none.bg-transparent.text-lg.font-normal.ml-1.text-gray-600.dark:text-gray-200.w-32.focus:outline-none.focus:ring-0  style="max-height: 50px; overflow-y:auto;" data-satis-date-time-picker-target="select" data-action="change->satis-date-time-picker#selectYear"
+          - current_year = Time.current.year
+          - (current_year - 100..current_year + 100).each do |year|
+            option value=year data-satis-date-time-picker-target="year" = year
       div
         button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full" data-action="satis-date-time-picker#nextMonth"
           i.text-gray-500.inline-flex.px-1.py-1 class=Satis.config.icons[:next_month]
-        button type="button" class="transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 rounded-full" data-action="satis-date-time-picker#nextYear"
-          i.text-gray-500.inline-flex.py-1 class=Satis.config.icons[:next_year]
-
 
     .grid.grid-cols-7 data-satis-date-time-picker-target="weekDays"
     template data-satis-date-time-picker-target="weekDayTemplate"

data/app/components/satis/date_time_picker/component_controller.js

@@ -164,21 +164,17 @@ export default class DateTimePickerComponentController extends ApplicationContro
 
   previousMonth(event) {
     this.displayValue = new Date(new Date(this.displayValue).setMonth(this.displayValue.getMonth() - 1))
+
+    this.updateYear()
+
     this.refreshCalendar(false)
   }
 
   nextMonth(event) {
     this.displayValue = new Date(new Date(this.displayValue).setMonth(this.displayValue.getMonth() + 1))
-    this.refreshCalendar(false)
-  }
 
-  previousYear(event) {
-    this.displayValue = new Date(new Date(this.displayValue).setFullYear(this.displayValue.getFullYear() - 1))
-    this.refreshCalendar(false)
-  }
+    this.updateYear()
 
-  nextYear(event) {
-    this.displayValue = new Date(new Date(this.displayValue).setFullYear(this.displayValue.getFullYear() + 1))
     this.refreshCalendar(false)
   }
 
@@ -328,13 +324,17 @@ export default class DateTimePickerComponentController extends ApplicationContro
         return false
       }
       selectedDate.setMonth(this.displayValue.getMonth() - 1)
+      this.displayValue = selectedDate
     } else if (dayType === "next") {
       if (this.rangeValue) {
         return false
       }
       selectedDate.setMonth(this.displayValue.getMonth() + 1)
+      this.displayValue = selectedDate
     }
 
+    this.updateYear()
+
     selectedDate.setDate(+event.target.innerText)
 
     if (!this.rangeValue && !this.multipleValue) {
@@ -559,7 +559,6 @@ export default class DateTimePickerComponentController extends ApplicationContro
       })
     }
   }
-
   // Format the given Date into an ISO8601 string whilst preserving the given timezone
   iso8601(date) {
     let tzo = -date.getTimezoneOffset(),
@@ -667,4 +666,25 @@ export default class DateTimePickerComponentController extends ApplicationContro
 
     return results
   }
+
+  selectYear(event) {
+    let selectedYear = Number(event.target.value)
+    this.displayValue.setFullYear(selectedYear)
+    this.refreshCalendar(false)
+
+    if (!this.rangeValue && !this.multipleValue) {
+      this.selectedValue[0] = new Date(this.displayValue)
+    } else if(this.rangeValue && this.selectedValue.length == 2){
+      return false
+    }
+
+    this.refreshInputs()
+    event.cancelBubble = true
+  }
+
+  updateYear() {
+    const yearSelect = document.querySelector('[data-satis-date-time-picker-target="select"]')
+    const newYear = this.displayValue.getFullYear()
+    yearSelect.value = newYear
+  }
 }

data/app/components/satis/signature/component.html.slim

@@ -0,0 +1,8 @@
+div data-controller="satis-signature" data-satis-signature-url-value=(form.object.send(attribute).attached? ? helpers.main_app.url_for(form.object.send(attribute)) : nil)
+  canvas.border-solid.border.rounded-md data-satis-signature-target="canvas" data-satis-signature-action="change->satis-signature#update" width="600" height="200"
+  .button 
+    i.fal.fa-trash data-action='click->satis-signature#clear' class='cursor-pointer'
+  |<
+  .button
+    i.fal.fa-undo data-action='click->satis-signature#undo' class='cursor-pointer'
+  = form.file_field :signature, data: { "satis-signature-target" => 'file' }, class: 'hidden'

data/app/components/satis/signature/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Satis
+  module Signature
+    class Component < ViewComponent::Base
+      attr_reader :url, :form, :attribute, :title, :options
+
+      def initialize(form:, attribute:, **options, &block)
+        @form = form
+        @attribute = attribute
+      end
+    end
+  end
+end

data/app/components/satis/signature/component_controller.js

@@ -0,0 +1,74 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+import SignaturePad from "signature_pad"
+
+export default class SignatureComponentController extends ApplicationController {
+  static targets = ["canvas", "file"]
+  static values = { url: String }
+
+  async connect() {
+    this.signaturePad = new SignaturePad(this.canvasTarget)
+    if (this.hasUrlValue) {
+      let blob = await fetch(this.urlValue)
+        .then(r => r.blob())
+
+
+      let dataUrl = await new Promise(resolve => {
+        let reader = new FileReader()
+        reader.onload = () => resolve(reader.result)
+        reader.readAsDataURL(blob)
+      })
+      const dpi = window.devicePixelRatio
+      window.devicePixelRatio = 1
+      this.signaturePad.fromDataURL(dataUrl)
+      const file = this.dataURLtoFile(dataUrl, "signature.svg")
+      window.devicePixelRatio = dpi
+      this.signaturePad.addEventListener("beginStroke", this.clear.bind(this), { once: true })
+      this.persistFile(file)
+    }
+    this.signaturePad.addEventListener("endStroke", this.persist.bind(this))
+  }
+
+  clear(event) {
+    this.signaturePad.clear()
+    this.fileTarget.files = new DataTransfer().files
+  }
+
+  undo(event) {
+    event.preventDefault()
+    const data = this.signaturePad.toData()
+    if (data) {
+      data.pop()
+      this.signaturePad.fromData(data)
+    }
+  }
+
+  persist(event) {
+    const dpi = window.devicePixelRatio
+    const dataUrl = this.signaturePad.toSVG()
+    window.devicePixelRatio = 1
+    const file = new File([this.signaturePad?.toSVG()], "signature.svg", { type: "image/svg+xml" })
+    window.devicePixelRatio = dpi
+    this.persistFile(file)
+  }
+
+  persistFile(file) {
+    const dt = new DataTransfer()
+    dt.items.add(file)
+    this.fileTarget.files = dt.files
+  }
+
+  // HELPER
+
+  dataURLtoFile(dataurl, filename) {
+    var arr = dataurl.split(","),
+      mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[arr.length - 1]),
+      n = bstr.length,
+      u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, { type: mime });
+  }
+}

data/app/javascript/satis/controllers/index.js

@@ -48,6 +48,9 @@ application.register("satis-dialog", DialogComponentController);
 import ColorPickerComponentController from "satis/components/color_picker/component_controller";
 application.register("satis-color-picker", ColorPickerComponentController);
 
+import SignatureComponentController from "satis/components/signature/component_controller";
+application.register("satis-signature", SignatureComponentController);
+
 // Controllers
 
 import LinkController from "satis/controllers/link_controller";

data/config/importmap.rb

@@ -52,3 +52,4 @@ pin "dayjs" # @1.11.13
 pin "dayjs/plugin/customParseFormat", to: "dayjs--plugin--customParseFormat.js" # @1.11.13
 pin "dayjs/plugin/localizedFormat", to: "dayjs--plugin--localizedFormat.js" # @1.11.13
 pin "dayjs/plugin/utc", to: "dayjs--plugin--utc.js" # @1.11.13
+pin "signature_pad" # @5.0.4

data/lib/satis/configuration.rb

@@ -34,10 +34,8 @@ module Satis
     option :current_user, default: lambda {}
 
     option :icons, default: {
-      previous_year: "fa-solid fa-angle-double-left",
       previous_month: "fa-solid fa-angle-left",
-      next_month: "fa-solid fa-angle-right",
-      next_year: "fa-solid fa-angle-double-right"
+      next_month: "fa-solid fa-angle-right"
     }
 
     option(:default_help_text, default: lambda do |template, object, key, additional_scope|

data/lib/satis/forms/builder.rb

@@ -328,31 +328,15 @@ module Satis
             @template.render(Satis::Editor::Component.new(form: self, attribute: method, **options, &block))
           ]
         end
-        # form_group(method, options) do
-        #   safe_join [
-        #               (custom_label(method, options[:label], options) unless options[:label] == false),
-        #               tag.div(text_area(method,
-        #                                 merge_input_options({
-        #                                                       class: 'form-control hidden',
-        #                                                       data: {
-        #                                                         # controller: 'satis-editor',
-        #                                                         'satis-editor-target' => 'textarea',
-        #                                                         'satis-editor-read-only-value' => options.delete(:read_only) || false,
-        #                                                         'satis-editor-mode-value' => options.delete(:mode) || 'text/html',
-        #                                                         'satis-editor-height-value' => options.delete(:height) || '200px',
-        #                                                         'satis-editor-color-scheme-value' => options.delete(:color_scheme),
-        #                                                         'satis-editor-color-scheme-dark-value' => options.delete(:color_scheme_dark) || 'lucario'
-        #                                                       }
-        #
-        #                                                     }, options[:input_html])), class: "editor #{
-        #                 if has_error?(method)
-        #                   'is-invalid'
-        #                 end}", data: {
-        #                 controller: 'satis-editor'
-        #               }),
-        #               hint_text(options[:hint] || '⌘-F/⌃-f: search; ⌥-g: goto line, ⌃-space: autocomplete')
-        #             ]
-        # end
+      end
+
+      def signature(method, options = {}, &block)
+        form_group(method, options) do
+          safe_join [
+            (custom_label(method, options[:label], options) unless options[:label] == false),
+            @template.render(Satis::Signature::Component.new(form: self, attribute: method, **options, &block))
+          ]
+        end
       end
 
       def boolean_input(method, options = {})

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.53"
+  VERSION = "2.1.54"
 end

data/vendor/javascript/signature_pad.js

@@ -0,0 +1,12 @@
+/**
+ * Bundled by jsDelivr using Rollup v2.79.1 and Terser v5.19.2.
+ * Original file: /npm/signature_pad@5.0.4/dist/signature_pad.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+/*!
+ * Signature Pad v5.0.4 | https://github.com/szimek/signature_pad
+ * (c) 2024 Szymon Nowak | Released under the MIT license
+ */
+class t { constructor(t, e, i, n) { if (isNaN(t) || isNaN(e)) throw new Error(`Point is invalid: (${t}, ${e})`); this.x = +t, this.y = +e, this.pressure = i || 0, this.time = n || Date.now() } distanceTo(t) { return Math.sqrt(Math.pow(this.x - t.x, 2) + Math.pow(this.y - t.y, 2)) } equals(t) { return this.x === t.x && this.y === t.y && this.pressure === t.pressure && this.time === t.time } velocityFrom(t) { return this.time !== t.time ? this.distanceTo(t) / (this.time - t.time) : 0 } } class e { static fromPoints(t, i) { const n = this.calculateControlPoints(t[0], t[1], t[2]).c2, s = this.calculateControlPoints(t[1], t[2], t[3]).c1; return new e(t[1], n, s, t[2], i.start, i.end) } static calculateControlPoints(e, i, n) { const s = e.x - i.x, o = e.y - i.y, r = i.x - n.x, h = i.y - n.y, a = (e.x + i.x) / 2, c = (e.y + i.y) / 2, d = (i.x + n.x) / 2, l = (i.y + n.y) / 2, u = Math.sqrt(s * s + o * o), v = Math.sqrt(r * r + h * h), _ = u + v == 0 ? 0 : v / (u + v), p = d + (a - d) * _, m = l + (c - l) * _, g = i.x - p, w = i.y - m; return { c1: new t(a + g, c + w), c2: new t(d + g, l + w) } } constructor(t, e, i, n, s, o) { this.startPoint = t, this.control2 = e, this.control1 = i, this.endPoint = n, this.startWidth = s, this.endWidth = o } length() { let t, e, i = 0; for (let n = 0; n <= 10; n += 1) { const s = n / 10, o = this.point(s, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x), r = this.point(s, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); if (n > 0) { const n = o - t, s = r - e; i += Math.sqrt(n * n + s * s) } t = o, e = r } return i } point(t, e, i, n, s) { return e * (1 - t) * (1 - t) * (1 - t) + 3 * i * (1 - t) * (1 - t) * t + 3 * n * (1 - t) * t * t + s * t * t * t } } class i { constructor() { try { this._et = new EventTarget } catch (t) { this._et = document } } addEventListener(t, e, i) { this._et.addEventListener(t, e, i) } dispatchEvent(t) { return this._et.dispatchEvent(t) } removeEventListener(t, e, i) { this._et.removeEventListener(t, e, i) } } class n extends i { constructor(t, e = {}) { var i, s, o; super(), this.canvas = t, this._drawingStroke = !1, this._isEmpty = !0, this._lastPoints = [], this._data = [], this._lastVelocity = 0, this._lastWidth = 0, this._handleMouseDown = t => { this._isLeftButtonPressed(t, !0) && !this._drawingStroke && this._strokeBegin(this._pointerEventToSignatureEvent(t)) }, this._handleMouseMove = t => { this._isLeftButtonPressed(t, !0) && this._drawingStroke ? this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t)) : this._strokeEnd(this._pointerEventToSignatureEvent(t), !1) }, this._handleMouseUp = t => { this._isLeftButtonPressed(t) || this._strokeEnd(this._pointerEventToSignatureEvent(t)) }, this._handleTouchStart = t => { 1 !== t.targetTouches.length || this._drawingStroke || (t.cancelable && t.preventDefault(), this._strokeBegin(this._touchEventToSignatureEvent(t))) }, this._handleTouchMove = t => { 1 === t.targetTouches.length && (t.cancelable && t.preventDefault(), this._drawingStroke ? this._strokeMoveUpdate(this._touchEventToSignatureEvent(t)) : this._strokeEnd(this._touchEventToSignatureEvent(t), !1)) }, this._handleTouchEnd = t => { 0 === t.targetTouches.length && (t.cancelable && t.preventDefault(), this.canvas.removeEventListener("touchmove", this._handleTouchMove), this._strokeEnd(this._touchEventToSignatureEvent(t))) }, this._handlePointerDown = t => { t.isPrimary && this._isLeftButtonPressed(t) && !this._drawingStroke && (t.preventDefault(), this._strokeBegin(this._pointerEventToSignatureEvent(t))) }, this._handlePointerMove = t => { t.isPrimary && (this._isLeftButtonPressed(t, !0) && this._drawingStroke ? (t.preventDefault(), this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))) : this._strokeEnd(this._pointerEventToSignatureEvent(t), !1)) }, this._handlePointerUp = t => { t.isPrimary && !this._isLeftButtonPressed(t) && (t.preventDefault(), this._strokeEnd(this._pointerEventToSignatureEvent(t))) }, this.velocityFilterWeight = e.velocityFilterWeight || .7, this.minWidth = e.minWidth || .5, this.maxWidth = e.maxWidth || 2.5, this.throttle = null !== (i = e.throttle) && void 0 !== i ? i : 16, this.minDistance = null !== (s = e.minDistance) && void 0 !== s ? s : 5, this.dotSize = e.dotSize || 0, this.penColor = e.penColor || "black", this.backgroundColor = e.backgroundColor || "rgba(0,0,0,0)", this.compositeOperation = e.compositeOperation || "source-over", this.canvasContextOptions = null !== (o = e.canvasContextOptions) && void 0 !== o ? o : {}, this._strokeMoveUpdate = this.throttle ? function (t, e = 250) { let i, n, s, o = 0, r = null; const h = () => { o = Date.now(), r = null, i = t.apply(n, s), r || (n = null, s = []) }; return function (...a) { const c = Date.now(), d = e - (c - o); return n = this, s = a, d <= 0 || d > e ? (r && (clearTimeout(r), r = null), o = c, i = t.apply(n, s), r || (n = null, s = [])) : r || (r = window.setTimeout(h, d)), i } }(n.prototype._strokeUpdate, this.throttle) : n.prototype._strokeUpdate, this._ctx = t.getContext("2d", this.canvasContextOptions), this.clear(), this.on() } clear() { const { _ctx: t, canvas: e } = this; t.fillStyle = this.backgroundColor, t.clearRect(0, 0, e.width, e.height), t.fillRect(0, 0, e.width, e.height), this._data = [], this._reset(this._getPointGroupOptions()), this._isEmpty = !0 } fromDataURL(t, e = {}) { return new Promise(((i, n) => { const s = new Image, o = e.ratio || window.devicePixelRatio || 1, r = e.width || this.canvas.width / o, h = e.height || this.canvas.height / o, a = e.xOffset || 0, c = e.yOffset || 0; this._reset(this._getPointGroupOptions()), s.onload = () => { this._ctx.drawImage(s, a, c, r, h), i() }, s.onerror = t => { n(t) }, s.crossOrigin = "anonymous", s.src = t, this._isEmpty = !1 })) } toDataURL(t = "image/png", e) { return "image/svg+xml" === t ? ("object" != typeof e && (e = void 0), `data:image/svg+xml;base64,${btoa(this.toSVG(e))}`) : ("number" != typeof e && (e = void 0), this.canvas.toDataURL(t, e)) } on() { this.canvas.style.touchAction = "none", this.canvas.style.msTouchAction = "none", this.canvas.style.userSelect = "none"; const t = /Macintosh/.test(navigator.userAgent) && "ontouchstart" in document; window.PointerEvent && !t ? this._handlePointerEvents() : (this._handleMouseEvents(), "ontouchstart" in window && this._handleTouchEvents()) } off() { this.canvas.style.touchAction = "auto", this.canvas.style.msTouchAction = "auto", this.canvas.style.userSelect = "auto", this.canvas.removeEventListener("pointerdown", this._handlePointerDown), this.canvas.removeEventListener("mousedown", this._handleMouseDown), this.canvas.removeEventListener("touchstart", this._handleTouchStart), this._removeMoveUpEventListeners() } _getListenerFunctions() { var t; const e = window.document === this.canvas.ownerDocument ? window : null !== (t = this.canvas.ownerDocument.defaultView) && void 0 !== t ? t : this.canvas.ownerDocument; return { addEventListener: e.addEventListener.bind(e), removeEventListener: e.removeEventListener.bind(e) } } _removeMoveUpEventListeners() { const { removeEventListener: t } = this._getListenerFunctions(); t("pointermove", this._handlePointerMove), t("pointerup", this._handlePointerUp), t("mousemove", this._handleMouseMove), t("mouseup", this._handleMouseUp), t("touchmove", this._handleTouchMove), t("touchend", this._handleTouchEnd) } isEmpty() { return this._isEmpty } fromData(t, { clear: e = !0 } = {}) { e && this.clear(), this._fromData(t, this._drawCurve.bind(this), this._drawDot.bind(this)), this._data = this._data.concat(t) } toData() { return this._data } _isLeftButtonPressed(t, e) { return e ? 1 === t.buttons : 1 == (1 & t.buttons) } _pointerEventToSignatureEvent(t) { return { event: t, type: t.type, x: t.clientX, y: t.clientY, pressure: "pressure" in t ? t.pressure : 0 } } _touchEventToSignatureEvent(t) { const e = t.changedTouches[0]; return { event: t, type: t.type, x: e.clientX, y: e.clientY, pressure: e.force } } _getPointGroupOptions(t) { return { penColor: t && "penColor" in t ? t.penColor : this.penColor, dotSize: t && "dotSize" in t ? t.dotSize : this.dotSize, minWidth: t && "minWidth" in t ? t.minWidth : this.minWidth, maxWidth: t && "maxWidth" in t ? t.maxWidth : this.maxWidth, velocityFilterWeight: t && "velocityFilterWeight" in t ? t.velocityFilterWeight : this.velocityFilterWeight, compositeOperation: t && "compositeOperation" in t ? t.compositeOperation : this.compositeOperation } } _strokeBegin(t) { if (!this.dispatchEvent(new CustomEvent("beginStroke", { detail: t, cancelable: !0 }))) return; const { addEventListener: e } = this._getListenerFunctions(); switch (t.event.type) { case "mousedown": e("mousemove", this._handleMouseMove), e("mouseup", this._handleMouseUp); break; case "touchstart": e("touchmove", this._handleTouchMove), e("touchend", this._handleTouchEnd); break; case "pointerdown": e("pointermove", this._handlePointerMove), e("pointerup", this._handlePointerUp) }this._drawingStroke = !0; const i = this._getPointGroupOptions(), n = Object.assign(Object.assign({}, i), { points: [] }); this._data.push(n), this._reset(i), this._strokeUpdate(t) } _strokeUpdate(t) { if (!this._drawingStroke) return; if (0 === this._data.length) return void this._strokeBegin(t); this.dispatchEvent(new CustomEvent("beforeUpdateStroke", { detail: t })); const e = this._createPoint(t.x, t.y, t.pressure), i = this._data[this._data.length - 1], n = i.points, s = n.length > 0 && n[n.length - 1], o = !!s && e.distanceTo(s) <= this.minDistance, r = this._getPointGroupOptions(i); if (!s || !s || !o) { const t = this._addPoint(e, r); s ? t && this._drawCurve(t, r) : this._drawDot(e, r), n.push({ time: e.time, x: e.x, y: e.y, pressure: e.pressure }) } this.dispatchEvent(new CustomEvent("afterUpdateStroke", { detail: t })) } _strokeEnd(t, e = !0) { this._removeMoveUpEventListeners(), this._drawingStroke && (e && this._strokeUpdate(t), this._drawingStroke = !1, this.dispatchEvent(new CustomEvent("endStroke", { detail: t }))) } _handlePointerEvents() { this._drawingStroke = !1, this.canvas.addEventListener("pointerdown", this._handlePointerDown) } _handleMouseEvents() { this._drawingStroke = !1, this.canvas.addEventListener("mousedown", this._handleMouseDown) } _handleTouchEvents() { this.canvas.addEventListener("touchstart", this._handleTouchStart) } _reset(t) { this._lastPoints = [], this._lastVelocity = 0, this._lastWidth = (t.minWidth + t.maxWidth) / 2, this._ctx.fillStyle = t.penColor, this._ctx.globalCompositeOperation = t.compositeOperation } _createPoint(e, i, n) { const s = this.canvas.getBoundingClientRect(); return new t(e - s.left, i - s.top, n, (new Date).getTime()) } _addPoint(t, i) { const { _lastPoints: n } = this; if (n.push(t), n.length > 2) { 3 === n.length && n.unshift(n[0]); const t = this._calculateCurveWidths(n[1], n[2], i), s = e.fromPoints(n, t); return n.shift(), s } return null } _calculateCurveWidths(t, e, i) { const n = i.velocityFilterWeight * e.velocityFrom(t) + (1 - i.velocityFilterWeight) * this._lastVelocity, s = this._strokeWidth(n, i), o = { end: s, start: this._lastWidth }; return this._lastVelocity = n, this._lastWidth = s, o } _strokeWidth(t, e) { return Math.max(e.maxWidth / (t + 1), e.minWidth) } _drawCurveSegment(t, e, i) { const n = this._ctx; n.moveTo(t, e), n.arc(t, e, i, 0, 2 * Math.PI, !1), this._isEmpty = !1 } _drawCurve(t, e) { const i = this._ctx, n = t.endWidth - t.startWidth, s = 2 * Math.ceil(t.length()); i.beginPath(), i.fillStyle = e.penColor; for (let i = 0; i < s; i += 1) { const o = i / s, r = o * o, h = r * o, a = 1 - o, c = a * a, d = c * a; let l = d * t.startPoint.x; l += 3 * c * o * t.control1.x, l += 3 * a * r * t.control2.x, l += h * t.endPoint.x; let u = d * t.startPoint.y; u += 3 * c * o * t.control1.y, u += 3 * a * r * t.control2.y, u += h * t.endPoint.y; const v = Math.min(t.startWidth + h * n, e.maxWidth); this._drawCurveSegment(l, u, v) } i.closePath(), i.fill() } _drawDot(t, e) { const i = this._ctx, n = e.dotSize > 0 ? e.dotSize : (e.minWidth + e.maxWidth) / 2; i.beginPath(), this._drawCurveSegment(t.x, t.y, n), i.closePath(), i.fillStyle = e.penColor, i.fill() } _fromData(e, i, n) { for (const s of e) { const { points: e } = s, o = this._getPointGroupOptions(s); if (e.length > 1) for (let n = 0; n < e.length; n += 1) { const s = e[n], r = new t(s.x, s.y, s.pressure, s.time); 0 === n && this._reset(o); const h = this._addPoint(r, o); h && i(h, o) } else this._reset(o), n(e[0], o) } } toSVG({ includeBackgroundColor: t = !1 } = {}) { const e = this._data, i = Math.max(window.devicePixelRatio || 1, 1), n = this.canvas.width / i, s = this.canvas.height / i, o = document.createElementNS("http://www.w3.org/2000/svg", "svg"); if (o.setAttribute("xmlns", "http://www.w3.org/2000/svg"), o.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"), o.setAttribute("viewBox", `0 0 ${n} ${s}`), o.setAttribute("width", n.toString()), o.setAttribute("height", s.toString()), t && this.backgroundColor) { const t = document.createElement("rect"); t.setAttribute("width", "100%"), t.setAttribute("height", "100%"), t.setAttribute("fill", this.backgroundColor), o.appendChild(t) } return this._fromData(e, ((t, { penColor: e }) => { const i = document.createElement("path"); if (!(isNaN(t.control1.x) || isNaN(t.control1.y) || isNaN(t.control2.x) || isNaN(t.control2.y))) { const n = `M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`; i.setAttribute("d", n), i.setAttribute("stroke-width", (2.25 * t.endWidth).toFixed(3)), i.setAttribute("stroke", e), i.setAttribute("fill", "none"), i.setAttribute("stroke-linecap", "round"), o.appendChild(i) } }), ((t, { penColor: e, dotSize: i, minWidth: n, maxWidth: s }) => { const r = document.createElement("circle"), h = i > 0 ? i : (n + s) / 2; r.setAttribute("r", h.toString()), r.setAttribute("cx", t.x.toString()), r.setAttribute("cy", t.y.toString()), r.setAttribute("fill", e), o.appendChild(r) })), o.outerHTML } } export { n as default };
+//# sourceMappingURL=/sm/fcb20b2f86ed10615b8b8c6a0c684f42d4284af51d740bacacf53d4ccdbe767b.map

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.53
+  version: 2.1.54
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-24 00:00:00.000000000 Z
+date: 2025-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -847,6 +847,9 @@ files:
 - app/components/satis/sidebar_menu_item/component_controller.js
 - app/components/satis/sidebar_menu_item/mobile/component.html.slim
 - app/components/satis/sidebar_menu_item/mobile/component.rb
+- app/components/satis/signature/component.html.slim
+- app/components/satis/signature/component.rb
+- app/components/satis/signature/component_controller.js
 - app/components/satis/switch/component.html.slim
 - app/components/satis/switch/component.rb
 - app/components/satis/switch/component_controller.js
@@ -968,6 +971,7 @@ files:
 - vendor/javascript/leaflet.js
 - vendor/javascript/pickr.es5.min.js
 - vendor/javascript/popper.js.js
+- vendor/javascript/signature_pad.js
 - vendor/javascript/sortablejs.js
 - vendor/javascript/style-mod.js
 - vendor/javascript/tippy.js.js