phlex-reactive 0.16.3 → 0.16.5

data/app/javascript/phlex/reactive/runtime.js

@@ -1751,9 +1751,28 @@ function keyFilterMatches(filter, event, keyMappings) {
 // its bare keydown hears every key, and this check alone picks the chord.
 // (Stimulus typecasts a digit shortcut, "1", to a number: hence String().)
 const shortcutKeys = (spec) => (spec && typeof spec === "object" ? spec.keys : String(spec))
+// Issue #429: the keydowns a shortcut prevented itself. A key another handler
+// already claimed (the drag feature's Escape cancelling a drag, an
+// element-bound keydown binding) is not the shortcut's — unless it says so,
+// `handled: true` — but a shortcut's OWN preventDefault does not count: two
+// shortcuts on one chord both run. Nor does early.js's, made for a shortcut
+// whose root had not connected: it adds the event to this same set (shared
+// through the early state), and its replay reads as not prevented. (So while
+// such a root is on the page, early.js's capture-phase preventDefault lands
+// before a drag's, and that Escape still runs the shortcuts on its chord — as
+// before #429: a preventDefault cannot tell who came second.)
+const shortcutPrevented = () => (earlyState().prevented ??= new WeakSet())
+// A trigger's preventDefault, a shortcut's remembered as its own (only when
+// nothing prevented the key first: handled: true on a handled key does not
+// make it the next shortcut's).
+function preventTrigger(event, shortcut) {
+  if (shortcut != null && !event.defaultPrevented) shortcutPrevented().add(event)
+  event.preventDefault()
+}
 // A shortcut record keeps a bare `on: "keydown"`, so bindingMatches lets every
 // keydown through and this check, per record, picks the chord that fired.
 function shortcutApplies(spec, event, keyMappings) {
+  if (event.defaultPrevented && spec?.handled !== true && !shortcutPrevented().has(event)) return false
   const target = event.target
   if (spec?.inEditable !== true && (target?.isContentEditable || /^(input|textarea|select)$/.test(target?.localName)))
     return false
@@ -2474,7 +2493,9 @@ function earlyReplayEvent(event, el, win) {
     submitter: event.submitter,
     bubbles: event.bubbles,
     timeStamp: event.timeStamp,
-    defaultPrevented: event.defaultPrevented,
+    // Not when early.js prevented it for a shortcut (issue #429): a shortcut
+    // skips only a key some OTHER handler prevented first.
+    defaultPrevented: event.defaultPrevented && !shortcutPrevented().has(event),
     preventDefault() {},
     stopPropagation() {},
     stopImmediatePropagation() {},
@@ -3255,7 +3276,8 @@ export default class extends Controller {
     // A shortcut (issue #357) IS prevented: its key filter has already narrowed
     // the window binding to one chord the page claims (mod+s must not also open
     // the browser's save dialog).
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+      preventTrigger(event, shortcut)
 
     // A reactive_lazy(on:) shell's trigger (issue #276) goes through the one
     // materialize entry point, which dedupes it against the observer, the
@@ -3374,8 +3396,12 @@ export default class extends Controller {
     // Held past this event's dispatch: cancel its native default NOW, by
     // dispatch()'s own rule, or a submit/link would act before the request.
     const { shortcut, window: windowBound, optimistic } = event.params
+    // A shortcut that does not apply (the other twin, a field, a key handled
+    // first) is neither prevented nor held, as dispatch() would leave it.
+    if (shortcut != null && !shortcutApplies(shortcut, event, this.application?.schema?.keyMappings)) return
     const target = event.currentTarget ?? event.target
-    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target)) event.preventDefault()
+    if ((shortcut != null || !windowBound) && !this.#keepsNativeToggle(optimistic, target))
+      preventTrigger(event, shortcut)
     heldForwards.set(root, [...(heldForwards.get(root) ?? []), [event, target]])
     const data = root.dataset
     if (data.reactiveDormant) {
@@ -3463,7 +3489,7 @@ export default class extends Controller {
     // (possibly async) confirm gate below — a native default can't wait for a
     // pending dialog (same ordering as dispatch()).
     // A shortcut (issue #357) is prevented: it is one chord the page claims.
-    if (shortcut != null || !windowBound) event.preventDefault()
+    if (shortcut != null || !windowBound) preventTrigger(event, shortcut)
 
     // Resolve the effective confirm message — static string, or the conditional
     // Hash form (issue #179) evaluated over collected fields (a promise of it

data/lib/phlex/reactive/component/drag.rb

@@ -9,7 +9,8 @@ module Phlex
       # Draggable regions (issue #416): a box that moves and resizes inside a
       # frame, or a point that moves inside it, with the result in fields as
       # fractions of the frame — 0..1 on each axis, so a resize, a responsive
-      # layout or a morph changes nothing about them.
+      # layout or a morph changes nothing about them. With scale: 100 the
+      # fields hold percentages instead (issue #428).
       #
       #   div(**mix(reactive_frame, class: "relative")) do
       #     img(src: @photo.url, alt: "", class: "block w-full")
@@ -67,14 +68,17 @@ module Phlex
         #   aspect:    a Numeric ratio (16/9r), or the name of a field holding one
         #              ("16:9", "1.5", or "" for free), read at drag start
         #   min:       the smallest width/height, a fraction of the frame
+        #   scale:     what the fields hold: the fraction times this (100: percent,
+        #              2 decimals); value:, the style and the action's params stay fractions
         #   action:    sent once on release, with x/y/width/height params
         #   busy:      on(busy:)'s vocabulary, applied while that action is pending
         #   messages:  the live-region words, merged over DRAG_MESSAGES
-        def reactive_box(fields:, value:, aspect: nil, min: 0.05, action: nil, busy: nil, messages: nil)
+        def reactive_box(fields:, value:, aspect: nil, min: 0.05, scale: 1, action: nil, busy: nil, messages: nil)
           fields = drag_fields!(:reactive_box, fields, BOX_KEYS)
           value = drag_value!(:reactive_box, value, BOX_KEYS)
           drag_inside_frame!(value)
           data = { reactive_box: fields.to_json, reactive_box_min: drag_min!(min) }
+          drag_scale!(:reactive_box, scale, data)
           drag_aspect!(aspect, data) unless aspect.nil?
           drag_action!(:reactive_box, action, busy, data)
           data[:reactive_box_messages] = drag_messages!(:reactive_box, messages)
@@ -99,12 +103,14 @@ module Phlex
 
         # A point (its centre) that moves inside the frame — or, with within:,
         # inside the element it sits in that matches the selector (a box): its
-        # fractions are then of that element, and it moves with it.
-        def reactive_point(fields:, value:, within: nil, action: nil, busy: nil, messages: nil)
+        # fractions are then of that element, and it moves with it. scale: is
+        # reactive_box's.
+        def reactive_point(fields:, value:, within: nil, scale: 1, action: nil, busy: nil, messages: nil)
           fields = drag_fields!(:reactive_point, fields, POINT_KEYS)
           value = drag_value!(:reactive_point, value, POINT_KEYS)
           data = { reactive_point: fields.to_json }
           data[:reactive_point_within] = drag_within!(within) unless within.nil?
+          drag_scale!(:reactive_point, scale, data)
           drag_action!(:reactive_point, action, busy, data)
           data[:reactive_point_messages] = drag_messages!(:reactive_point, messages)
           style = "position: absolute; left: #{drag_percent(value[:x])}; top: #{drag_percent(value[:y])}; " \
@@ -180,6 +186,22 @@ module Phlex
             "reactive_box min: must be a fraction of the frame above 0 and at most 1 (e.g. 0.05), got #{min.inspect}"
         end
 
+        # Issue #428: the fields' scale, written only when it is not 1, so a
+        # region without scale: renders as it always did. The browser reads it
+        # as a Float, so one that is Infinity (10**400) or 0 (1/10**400) as a
+        # Float is refused, like a Float that is.
+        def drag_scale!(helper, scale, data)
+          float = scale.to_f if scale.is_a?(Numeric) && scale.real?
+          unless float&.finite? && float.positive?
+            raise ArgumentError,
+              "#{helper} scale: must be a positive finite Numeric (100: percent), got #{scale.inspect}"
+          end
+          return if scale == 1
+
+          # (A Rational would render as "1000/3", which the browser cannot read.)
+          data[:"#{helper}_scale"] = scale.is_a?(Integer) || scale.is_a?(Float) ? scale : float
+        end
+
         def drag_aspect!(aspect, data)
           if aspect.is_a?(Numeric) && aspect.real? && aspect.positive? && aspect.finite?
             data[:reactive_box_ratio] = aspect.to_f

data/lib/phlex/reactive/component/helpers.rb

@@ -313,10 +313,13 @@ module Phlex
         # runs the one for its platform). Unlike a plain window binding, the
         # client prevents the chord's native default, and it skips the chord
         # while focus is in an input, textarea, select or contenteditable
-        # (native text undo keeps working) unless the Hash form opts in. It
-        # decides event:, window: and outside:, so passing one raises.
+        # (native text undo keeps working) unless the Hash form opts in. A
+        # keydown another handler already prevented (the drag's Escape
+        # cancelling a drag) is skipped too, unless `handled: true` (issue
+        # #429). It decides event:, window: and outside:, so passing one raises.
         #   span(**on(:undo, shortcut: "mod+z"))
         #   span(**on(:close, shortcut: { keys: "esc", in_editable: true }))
+        #   span(**on(:leave, shortcut: { keys: "esc", handled: true }))
         #
         # `optimistic:` (issue #98) — a small, ALWAYS-REVERSIBLE vocabulary of
         # COSMETIC hints the client applies the instant the trigger fires and

data/lib/phlex/reactive/presence/transport.rb

@@ -29,6 +29,10 @@ module Phlex
         # is absent or does not expose the setting.
         DEFAULT_HEARTBEAT = 15
 
+        # The Store key of the lock register_ttl holds across its read, merge
+        # and write.
+        TTL_LOCK_KEY = :phlex_reactive_presence_ttl_lock
+
         # The change hook install! sets: the app's own hook (if any) first, then
         # presence's. Its class is how a second install! knows it is in place.
         ChainedHook = Data.define(:previous, :on_change) do
@@ -126,10 +130,12 @@ module Phlex
 
           # At boot: auto-join presence streams, and hear their changes. An
           # app's own change hook keeps running (chained, first).
+          # Settings change through their setters only: pgbus >= 0.19 freezes
+          # its Arrays and Hashes at boot (Configuration#finalize!).
           def install!(on_change)
             config = ::Pgbus.configuration
             patterns = config.streams_presence_patterns
-            patterns << PATTERN unless patterns.include?(PATTERN)
+            config.streams_presence_patterns = [*patterns, PATTERN] unless patterns.include?(PATTERN)
             previous = config.streams_presence_on_change
             return if previous.is_a?(ChainedHook)
 
@@ -141,11 +147,16 @@ module Phlex
           # pgbus takes an Integer (every stream) or a Hash of stream name /
           # pattern => seconds with a :default; an Integer becomes the Hash's
           # default so the app's own setting still covers every other stream.
+          # A new Hash every time: a component can load after pgbus froze the
+          # setting at boot (eager_load off). Under a lock: two classes that
+          # load at once on two threads must each see the other's write.
           def register_ttl(name, seconds)
-            config = ::Pgbus.configuration
-            ttl = config.streams_presence_ttl
-            config.streams_presence_ttl = ttl = { default: ttl } unless ttl.is_a?(Hash)
-            ttl.store(/:presence:#{Regexp.escape(name.to_s)}\z/, seconds)
+            Phlex::Reactive::Store.fetch(TTL_LOCK_KEY) { Mutex.new }.synchronize do
+              config = ::Pgbus.configuration
+              ttl = config.streams_presence_ttl
+              ttl = { default: ttl } unless ttl.is_a?(Hash)
+              config.streams_presence_ttl = ttl.merge(/:presence:#{Regexp.escape(name.to_s)}\z/ => seconds)
+            end
           end
         end
       end

data/lib/phlex/reactive/shortcut.rb

@@ -7,13 +7,16 @@ module Phlex
     #
     #   Shortcut.parse("mod+z")                          # String form
     #   Shortcut.parse({ keys: "esc", in_editable: true }) # Hash form
+    #   Shortcut.parse({ keys: "esc", handled: true })     # runs on a handled key
     #
     # `mod` is meta on Apple platforms and ctrl elsewhere. Stimulus has no
     # "either" modifier (its key filter compares all four modifier flags
     # exactly), so a `mod` chord renders TWO descriptors, a meta twin and a ctrl
     # twin, and the client runs only the twin for its platform. Stimulus keeps
     # the key filtering; the client adds the platform check, the editable-target
-    # guard and preventDefault. The exception is a key Stimulus's default map
+    # guard, the handled-key skip (issue #429: a keydown another handler already
+    # prevented is not the shortcut's, unless `handled: true`) and
+    # preventDefault. The exception is a key Stimulus's default map
     # lacks (delete, backspace — issue #366): it binds a bare window keydown,
     # no twins, and the client matches the whole chord.
     #
@@ -28,7 +31,7 @@ module Phlex
       # `keydown@window` and the client alone matches it.
       LIBRARY_KEYS = %w[delete backspace].freeze
       NAMED_KEYS = (STIMULUS_KEYS + LIBRARY_KEYS).freeze
-      HASH_KEYS = %i[keys in_editable].freeze
+      HASH_KEYS = %i[keys in_editable handled].freeze
 
       private_constant :MODIFIERS, :STIMULUS_KEYS, :LIBRARY_KEYS, :NAMED_KEYS, :HASH_KEYS
 
@@ -36,34 +39,38 @@ module Phlex
 
       def self.parse(spec)
         case spec
-        when String then new(spec, in_editable: false)
+        when String then new(spec, in_editable: false, handled: false)
         when Hash then from_hash(spec)
         else
           raise ArgumentError,
-            "shortcut: takes a String (\"mod+z\") or a Hash ({ keys: \"esc\", in_editable: true }), " \
-            "got #{spec.inspect}"
+            "shortcut: takes a String (\"mod+z\") or a Hash ({ keys: \"esc\", in_editable: true, " \
+            "handled: true }), got #{spec.inspect}"
         end
       end
 
       def self.from_hash(spec)
         keys = spec[:keys]
         in_editable = spec.fetch(:in_editable, false)
+        handled = spec.fetch(:handled, false)
         unless (spec.keys - HASH_KEYS).empty? && keys.is_a?(String)
           raise ArgumentError,
-            "shortcut: as a Hash takes keys: (a String, e.g. \"esc\") and an optional " \
-            "in_editable: (true/false), got #{spec.inspect}"
+            "shortcut: as a Hash takes keys: (a String, e.g. \"esc\") and optional " \
+            "in_editable: and handled: (true/false), got #{spec.inspect}"
         end
-        unless [true, false].include?(in_editable)
-          raise ArgumentError, "shortcut: in_editable: is true or false, got #{in_editable.inspect}"
+        { in_editable:, handled: }.each do |name, value|
+          next if [true, false].include?(value)
+
+          raise ArgumentError, "shortcut: #{name}: is true or false, got #{value.inspect}"
         end
 
-        new(keys, in_editable:)
+        new(keys, in_editable:, handled:)
       end
       private_class_method :from_hash
 
-      def initialize(keys, in_editable:)
+      def initialize(keys, in_editable:, handled:)
         tokens = keys.downcase.split("+").map(&:strip)
         @in_editable = in_editable
+        @handled = handled
         @keys = canonical(keys, tokens).freeze
         freeze
       end
@@ -83,8 +90,13 @@ module Phlex
 
       # The wire form the client reads (data-reactive-shortcut-param, or the
       # on_client record's "shortcut"): the canonical String, or the Hash form
-      # when the shortcut also fires inside editable targets.
-      def param = @in_editable ? { "keys" => @keys, "inEditable" => true } : @keys
+      # when the shortcut also fires inside editable targets and/or on a key
+      # another handler already prevented (issue #429).
+      def param
+        return @keys unless @in_editable || @handled
+
+        { "keys" => @keys, "inEditable" => (true if @in_editable), "handled" => (true if @handled) }.compact
+      end
 
       private
 

data/lib/phlex/reactive/version.rb

@@ -2,6 +2,6 @@
 
 module Phlex
   module Reactive
-    VERSION = "0.16.3"
+    VERSION = "0.16.5"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-reactive
 version: !ruby/object:Gem::Version
-  version: 0.16.3
+  version: 0.16.5
 platform: ruby
 authors:
 - Mikael Henriksson