xbintsc 0.5.45 → 0.5.52

package/runtime/ext_gui/document.cpp

@@ -4,7 +4,14 @@
 
 #include "document.h"
 
+#include <cmath>
+#include <string>
+#include <utility>
+#include <vector>
+
 #include "perf.h"
+#include "style_internal.h"
+#include "text_fonts.h"
 
 namespace xtgui {
 
@@ -30,15 +37,37 @@ void XtDocument::load(const std::string &html, float viewportWidth, float viewpo
   dirty_ = false;
   hover_ = nullptr;
   focus_ = nullptr;
+  active_ = nullptr;
   styles_.clear();
   display_.clear();
   transitions_.clear();
+  animations_.clear();
   mediaSizes_.clear();
   canvasInfo_.clear();
   clock_ms_ = 0.0;
   std::string css;
   collectStyleText(root_.get(), &css);
   sheet_ = xt_css_parse_stylesheet(css);
+
+  /* Author `@font-face` families are global to the process's text stack, so a
+   * new document replaces the previous set before its first layout. */
+  std::vector<UserFontFace> user_faces;
+  user_faces.reserve(sheet_.font_faces.size());
+  for (const FontFaceRule &rule : sheet_.font_faces) {
+    UserFontFace face;
+    face.family = rule.family;
+    face.sources.reserve(rule.sources.size());
+    for (const FontFaceSource &source : rule.sources) {
+      face.sources.push_back(UserFontSource{source.url, source.format});
+    }
+    face.has_weight = rule.has_weight;
+    face.weight_min = rule.weight_min;
+    face.weight_max = rule.weight_max;
+    face.has_italic = rule.has_italic;
+    face.italic = rule.italic;
+    user_faces.push_back(std::move(face));
+  }
+  xt_font_set_user_faces(user_faces);
   restyle(viewportWidth, viewportHeight);
 }
 
@@ -50,206 +79,19 @@ void XtDocument::restyle(float viewportWidth, float viewportHeight) {
     MatchState state;
     state.hover = hover_;
     state.focus = focus_;
+    state.active = active_;
     bool hasTransitions = sheet_.has_transitions;
+    bool hasAnimations = sheet_.has_animations;
     xt_style_compute(root_.get(), sheet_, styles_, viewportWidth, viewportHeight, state, &pseudos_,
-                     &hasTransitions);
+                     &hasTransitions, &hasAnimations);
     has_transitions_ = hasTransitions;
+    has_animations_ = hasAnimations;
     startTransitions();
+    startAnimations();
     updateDisplay();
   }
 }
 
-namespace {
-
-float easeProgress(float t, TimingFunction timing) {
-  if (t <= 0.0f) return 0.0f;
-  if (t >= 1.0f) return 1.0f;
-  switch (timing) {
-    case TimingFunction::Linear:
-      return t;
-    case TimingFunction::EaseIn:
-      return t * t * t;
-    case TimingFunction::EaseOut: {
-      float u = 1.0f - t;
-      return 1.0f - u * u * u;
-    }
-    case TimingFunction::EaseInOut:
-      return t < 0.5f ? 4.0f * t * t * t : 1.0f - 4.0f * (1.0f - t) * (1.0f - t) * (1.0f - t);
-    case TimingFunction::Ease:
-    default:
-      return t * t * (3.0f - 2.0f * t);  // smoothstep approximation of `ease`
-  }
-}
-
-float mix(float a, float b, float t) { return a + (b - a) * t; }
-
-const float *colorOf(const XtStyle &style, const std::string &property) {
-  static const float transparent[4] = {0, 0, 0, 0};
-  if (property == "background-color") {
-    return style.has_background ? &style.background.r : transparent;
-  }
-  if (property == "border-color") {
-    return style.has_border_color ? &style.border_color.r : transparent;
-  }
-  return &style.color.r;
-}
-
-float numberOf(const XtStyle &style, const std::string &property) {
-  if (property == "border-radius") return style.border_radius;
-  return 0.0f;
-}
-
-bool isNumberProperty(const std::string &property) { return property == "border-radius"; }
-
-bool specMatches(const std::string &spec, const std::string &property) {
-  return spec == "all" || spec == property;
-}
-
-void applyColor(XtStyle *style, const std::string &property, const float *rgba) {
-  if (property == "background-color") {
-    style->background = Color{rgba[0], rgba[1], rgba[2], rgba[3], true};
-    style->has_background = rgba[3] > 0.0f;
-  } else if (property == "border-color") {
-    style->border_color = Color{rgba[0], rgba[1], rgba[2], rgba[3], true};
-    style->has_border_color = rgba[3] > 0.0f;
-  } else {
-    style->color = Color{rgba[0], rgba[1], rgba[2], rgba[3], true};
-  }
-}
-
-void applyNumber(XtStyle *style, const std::string &property, float value) {
-  if (property == "border-radius") style->border_radius = value;
-}
-
-}  // namespace
-
-void XtDocument::startTransitions() {
-  if (display_.empty()) return;  // first style computation: nothing to animate from
-  /* Without a `transition` declaration anywhere in the sheet (or in an inline
-   * style) no transition can start, so skip the O(nodes) scan `restyle` would
-   * otherwise do every time. */
-  if (!has_transitions_) return;
-  static const char *const kProperties[] = {"background-color", "color", "border-color",
-                                           "border-radius", "transform"};
-  for (auto &entry : styles_) {
-    const Node *node = entry.first;
-    const XtStyle &target = entry.second;
-    /* Generated boxes are rebuilt on every restyle; a transition keyed by one
-     * would address a node that no longer exists. */
-    if (node->is_pseudo) continue;
-    if (target.transitions.empty()) continue;
-    auto prev_it = display_.find(node);
-    if (prev_it == display_.end()) continue;
-    const XtStyle &current = prev_it->second;
-    for (const TransitionSpec &spec : target.transitions) {
-      if (spec.duration <= 0.0f) continue;
-      for (const char *property : kProperties) {
-        if (!specMatches(spec.property, property)) continue;
-        ActiveTransition running;
-        running.node = node;
-        running.property = property;
-        running.timing = spec.timing;
-        running.duration_ms = spec.duration * 1000.0f;
-        running.delay_ms = spec.delay * 1000.0f;
-        running.start_ms = (float)clock_ms_ + running.delay_ms;
-        if (std::string(property) == "transform") {
-          if (xt_transform_equal(current.transform, target.transform)) continue;
-          std::vector<TransformOp> probe;
-          /* Lists of a different shape (or with clashing units) cannot be
-           * mixed; such a change snaps instead of animating. */
-          if (!xt_transform_interpolate(current.transform, target.transform, 0.5f, &probe)) {
-            continue;
-          }
-          running.is_transform = true;
-          running.from_transform = current.transform;
-          running.to_transform = target.transform;
-        } else if (isNumberProperty(property)) {
-          float from = numberOf(current, property);
-          float to = numberOf(target, property);
-          if (from == to) continue;
-          running.is_color = false;
-          running.from_number = from;
-          running.to_number = to;
-        } else {
-          const float *from = colorOf(current, property);
-          const float *to = colorOf(target, property);
-          if (from[0] == to[0] && from[1] == to[1] && from[2] == to[2] && from[3] == to[3]) continue;
-          running.is_color = true;
-          for (int i = 0; i < 4; i++) {
-            running.from_color[i] = from[i];
-            running.to_color[i] = to[i];
-          }
-        }
-        /* Retarget an existing transition (mid-flight) instead of stacking. */
-        bool replaced = false;
-        for (ActiveTransition &existing : transitions_) {
-          if (existing.node == node && existing.property == property) {
-            existing = running;
-            replaced = true;
-            break;
-          }
-        }
-        if (!replaced) transitions_.push_back(running);
-      }
-    }
-  }
-}
-
-void XtDocument::updateDisplay() {
-  /* Without a `transition` declaration in the sheet (or an inline style) no
-   * transition can ever start, so the displayed style *is* the cascade result:
-   * skip the per-node deep copy of the whole style map (and keep `display_`
-   * empty, which `styleOf` already falls back from). */
-  if (!has_transitions_) {
-    if (!transitions_.empty()) transitions_.clear();
-    if (!display_.empty()) display_.clear();
-    layout_.compute(root_.get(), styles_, viewportWidth_, viewportHeight_, &mediaSizes_,
-                    &canvasInfo_);
-    return;
-  }
-  display_ = styles_;
-  for (size_t i = 0; i < transitions_.size();) {
-    ActiveTransition &transition = transitions_[i];
-    auto node_it = display_.find(transition.node);
-    if (node_it == display_.end()) {
-      transitions_.erase(transitions_.begin() + (long)i);
-      continue;
-    }
-    float elapsed = (float)clock_ms_ - transition.start_ms;
-    float progress = transition.duration_ms > 0.0f ? elapsed / transition.duration_ms : 1.0f;
-    if (progress > 1.0f) progress = 1.0f;
-    float eased = easeProgress(progress, transition.timing);
-    XtStyle &style = node_it->second;
-    if (transition.is_transform) {
-      std::vector<TransformOp> mixed;
-      if (xt_transform_interpolate(transition.from_transform, transition.to_transform, eased,
-                                   &mixed)) {
-        style.transform = mixed;
-      }
-    } else if (transition.is_color) {
-      float rgba[4];
-      for (int c = 0; c < 4; c++) rgba[c] = mix(transition.from_color[c], transition.to_color[c], eased);
-      applyColor(&style, transition.property, rgba);
-    } else {
-      applyNumber(&style, transition.property, mix(transition.from_number, transition.to_number, eased));
-    }
-    if (progress >= 1.0f) {
-      transitions_.erase(transitions_.begin() + (long)i);
-    } else {
-      i++;
-    }
-  }
-  layout_.compute(root_.get(), display_, viewportWidth_, viewportHeight_, &mediaSizes_,
-                  &canvasInfo_);
-}
-
-bool XtDocument::advance(double delta_ms) {
-  clock_ms_ += delta_ms;
-  if (transitions_.empty()) return false;
-  updateDisplay();
-  return true;
-}
-
 bool XtDocument::setHover(const Node *node) {
   if (hover_ == node) return false;
   hover_ = node;
@@ -267,6 +109,14 @@ bool XtDocument::setFocus(const Node *node) {
   return true;
 }
 
+bool XtDocument::setActive(const Node *node) {
+  if (active_ == node) return false;
+  active_ = node;
+  if (!sheet_.has_active) return false;
+  restyle(viewportWidth_, viewportHeight_);
+  return true;
+}
+
 const XtStyle *XtDocument::styleOf(const Node *node) const {
   auto it = display_.find(node);
   if (it != display_.end()) return &it->second;

package/runtime/ext_gui/document.h

@@ -13,6 +13,7 @@
 #include <unordered_map>
 #include <vector>
 
+#include "animation_values.h"
 #include "css.h"
 #include "dom.h"
 #include "layout.h"
@@ -20,22 +21,24 @@
 
 namespace xtgui {
 
-/** A running CSS transition (paint-affecting properties, plus `transform`). */
+/** A running CSS transition. */
 struct ActiveTransition {
   const Node *node = nullptr;
   std::string property;
-  bool is_color = false;
-  bool is_transform = false;
-  float from_color[4] = {0, 0, 0, 0};
-  float to_color[4] = {0, 0, 0, 0};
-  float from_number = 0;
-  float to_number = 0;
-  std::vector<TransformOp> from_transform;
-  std::vector<TransformOp> to_transform;
+  AnimatableValue from;
+  AnimatableValue to;
   float start_ms = 0;     // when interpolation begins (after `delay`)
   float duration_ms = 0;
   float delay_ms = 0;
-  TimingFunction timing = TimingFunction::Ease;
+  TimingFunction timing;
+};
+
+/** A running `@keyframes` animation on one element. */
+struct ActiveAnimation {
+  const Node *node = nullptr;
+  std::string name;
+  AnimationSpec spec;
+  float start_ms = 0;
 };
 
 class XtDocument {
@@ -48,17 +51,21 @@ class XtDocument {
    * and layout when a transition is running. Returns true when anything
    * transitioned (the caller should repaint). */
   bool advance(double delta_ms);
-  /** True while at least one transition is running. */
-  bool animating() const { return !transitions_.empty(); }
+  /** True while at least one transition or animation is running. */
+  bool animating() const { return !transitions_.empty() || !animations_.empty(); }
   /** Set the hovered/focused element; restyles when it changed. Returns true
    * when the dynamic state (and therefore the styles) changed. */
   bool setHover(const Node *node);
   bool setFocus(const Node *node);
+  /** Element held down by the primary pointer (`:active`). */
+  bool setActive(const Node *node);
   const Node *hover() const { return hover_; }
   const Node *focus() const { return focus_; }
+  const Node *active() const { return active_; }
 
   const Node *root() const { return root_.get(); }
   const StyleSheet &sheet() const { return sheet_; }
+  const std::unordered_map<const Node *, XtStyle> &styles() const { return styles_; }
   const XtStyle *styleOf(const Node *node) const;
   const LayoutBox *boxOf(const Node *node) const;
   const LayoutTree &layout() const { return layout_; }
@@ -117,7 +124,9 @@ class XtDocument {
  private:
   void collectStyleText(const Node *node, std::string *out) const;
   void startTransitions();
+  void startAnimations();
   void updateDisplay();
+  void applyAnimations(std::unordered_map<const Node *, XtStyle> *out);
 
   std::unique_ptr<Node> root_;
   /** Detached nodes (created or removed) stay alive here so handles remain valid. */
@@ -131,14 +140,18 @@ class XtDocument {
   MediaSizeMap mediaSizes_;                            // `<video>` intrinsic sizes
   CanvasInfoMap canvasInfo_;                           // `<canvas>` sizes + ids
   std::vector<ActiveTransition> transitions_;
+  std::vector<ActiveAnimation> animations_;
   /** Whether any computed style declares a `transition` (from the sheet or an
    * inline `style="…"`): when false the document skips the transition snapshot
    * and `display_` stays empty. */
   bool has_transitions_ = false;
+  /** Whether any computed style declares an `animation`. */
+  bool has_animations_ = false;
   double clock_ms_ = 0.0;
   LayoutTree layout_;
   const Node *hover_ = nullptr;
   const Node *focus_ = nullptr;
+  const Node *active_ = nullptr;
   float viewportWidth_ = 0.0f;
   float viewportHeight_ = 0.0f;
 };