xbintsc 0.3.14 → 0.3.16

package/runtime/ext_gui/css.h

@@ -0,0 +1,98 @@
+/*
+ * xbintsc GUI engine — CSS parsing, selector matching and value parsing.
+ *
+ * The CSS subset is the practical slice a UI needs: type/class/id/attribute and
+ * a few structural pseudo-class selectors, descendant and child combinators,
+ * and the value types used by the cascade (lengths, percentages, colors,
+ * keywords). At-rules are skipped.
+ */
+#ifndef XT_GUI_CSS_H
+#define XT_GUI_CSS_H
+
+#include <string>
+#include <utility>
+#include <vector>
+
+#include "dom.h"
+
+namespace xtgui {
+
+enum class Unit { Auto, None, Px, Percent, Em, Rem, Vw, Vh, Number, Invalid };
+
+struct Length {
+  float value = 0.0f;
+  Unit unit = Unit::Auto;
+};
+
+struct Color {
+  float r = 0.0f;
+  float g = 0.0f;
+  float b = 0.0f;
+  float a = 1.0f;
+  bool valid = false;
+};
+
+struct Declaration {
+  std::string property;
+  std::string value;
+  bool important = false;
+};
+
+/** One `[name op value]` attribute selector. `op` empty = existence test. */
+struct AttrSelector {
+  std::string name;
+  std::string value;
+  std::string op;
+};
+
+/** One compound selector: `div.card#main[data-x="1"]:first-child`. */
+struct CompoundSelector {
+  std::string tag;       // empty = universal (`*`)
+  std::string id;        // empty = none
+  std::vector<std::string> classes;
+  std::vector<AttrSelector> attrs;
+  std::vector<std::string> pseudoClasses;
+};
+
+enum class Combinator { Descendant, Child, Adjacent, Sibling };
+
+struct ComplexSelector {
+  std::vector<CompoundSelector> compounds;  // left -> right
+  std::vector<Combinator> combinators;      // compounds.size() - 1 entries
+  int specificity = 0;                      // packed (a<<20)|(b<<10)|c
+};
+
+struct Rule {
+  std::vector<ComplexSelector> selectors;
+  std::vector<Declaration> declarations;
+  int order = 0;
+};
+
+struct StyleSheet {
+  std::vector<Rule> rules;
+};
+
+/** Dynamic element state consulted by `:hover` / `:focus` while matching. */
+struct MatchState {
+  const Node *hover = nullptr;
+  const Node *focus = nullptr;
+};
+
+StyleSheet xt_css_parse_stylesheet(const std::string &text);
+std::vector<ComplexSelector> xt_css_parse_selector_list(const std::string &text);
+std::vector<Declaration> xt_css_parse_declarations(const std::string &text);
+
+bool xt_css_match(const Node *node, const ComplexSelector &selector);
+bool xt_css_match(const Node *node, const ComplexSelector &selector, const MatchState &state);
+
+Length xt_css_parse_length(const std::string &value);
+Color xt_css_parse_color(const std::string &value);
+bool xt_css_parse_number(const std::string &value, float *out);
+
+std::string xt_css_trim(const std::string &text);
+std::vector<std::string> xt_css_split_whitespace(const std::string &text);
+std::string xt_css_lower(const std::string &text);
+
+}  // namespace xtgui
+
+#endif /* XT_GUI_CSS_H */

package/runtime/ext_gui/document.cpp

@@ -0,0 +1,264 @@
+/*
+ * xbintsc GUI engine — document model implementation.
+ */
+
+#include "document.h"
+
+namespace xtgui {
+
+void XtDocument::collectStyleText(const Node *node, std::string *out) const {
+  if (node->isElement() && node->isTag("style")) {
+    for (const std::unique_ptr<Node> &child : node->children) {
+      if (child->isText()) {
+        *out += child->text;
+        *out += "\n";
+      }
+    }
+    return;
+  }
+  /* A <link rel="stylesheet"> would need I/O; skip it (and everything else). */
+  for (const std::unique_ptr<Node> &child : node->children) {
+    collectStyleText(child.get(), out);
+  }
+}
+
+void XtDocument::load(const std::string &html, float viewportWidth, float viewportHeight) {
+  root_ = xt_html_parse(html);
+  hover_ = nullptr;
+  focus_ = nullptr;
+  styles_.clear();
+  display_.clear();
+  transitions_.clear();
+  clock_ms_ = 0.0;
+  std::string css;
+  collectStyleText(root_.get(), &css);
+  sheet_ = xt_css_parse_stylesheet(css);
+  restyle(viewportWidth, viewportHeight);
+}
+
+void XtDocument::restyle(float viewportWidth, float viewportHeight) {
+  viewportWidth_ = viewportWidth;
+  viewportHeight_ = viewportHeight;
+  if (root_ != nullptr) {
+    MatchState state;
+    state.hover = hover_;
+    state.focus = focus_;
+    xt_style_compute(root_.get(), sheet_, styles_, viewportWidth, viewportHeight, state);
+    startTransitions();
+    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
+  static const char *const kProperties[] = {"background-color", "color", "border-color", "border-radius"};
+  for (auto &entry : styles_) {
+    const Node *node = entry.first;
+    const XtStyle &target = entry.second;
+    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 (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() {
+  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_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_);
+}
+
+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;
+  restyle(viewportWidth_, viewportHeight_);
+  return true;
+}
+
+bool XtDocument::setFocus(const Node *node) {
+  if (focus_ == node) return false;
+  focus_ = node;
+  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;
+  it = styles_.find(node);
+  return (it == styles_.end()) ? nullptr : &it->second;
+}
+
+const LayoutBox *XtDocument::boxOf(const Node *node) const { return layout_.find(node); }
+
+std::vector<const Node *> XtDocument::querySelectorAll(const std::string &selectorText) const {
+  std::vector<const Node *> matches;
+  if (root_ == nullptr) return matches;
+  std::vector<ComplexSelector> selectors = xt_css_parse_selector_list(selectorText);
+  if (selectors.empty()) return matches;
+  std::vector<const Node *> stack;
+  stack.push_back(root_.get());
+  while (!stack.empty()) {
+    const Node *node = stack.back();
+    stack.pop_back();
+    if (node->isElement()) {
+      for (const ComplexSelector &selector : selectors) {
+        if (xt_css_match(node, selector)) {
+          matches.push_back(node);
+          break;
+        }
+      }
+    }
+    /* Push children in reverse so the traversal stays in document order. */
+    for (size_t i = node->children.size(); i-- > 0;) {
+      stack.push_back(node->children[i].get());
+    }
+  }
+  return matches;
+}
+
+const Node *XtDocument::querySelector(const std::string &selectorText) const {
+  std::vector<const Node *> matches = querySelectorAll(selectorText);
+  return matches.empty() ? nullptr : matches.front();
+}
+
+std::string XtDocument::toDebugString() const {
+  return root_ == nullptr ? std::string() : xt_dom_to_string(root_.get());
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/document.h

@@ -0,0 +1,89 @@
+/*
+ * xbintsc GUI engine — the document model.
+ *
+ * An `XtDocument` owns the DOM tree, the author stylesheet gathered from the
+ * document's `<style>` elements, and the computed style of every element. It is
+ * the hand-off point from parsing to layout.
+ */
+#ifndef XT_GUI_DOCUMENT_H
+#define XT_GUI_DOCUMENT_H
+
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <vector>
+
+#include "css.h"
+#include "dom.h"
+#include "layout.h"
+#include "style.h"
+
+namespace xtgui {
+
+/** A running CSS transition (only paint-affecting properties are supported). */
+struct ActiveTransition {
+  const Node *node = nullptr;
+  std::string property;
+  bool is_color = 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;
+  float start_ms = 0;     // when interpolation begins (after `delay`)
+  float duration_ms = 0;
+  float delay_ms = 0;
+  TimingFunction timing = TimingFunction::Ease;
+};
+
+class XtDocument {
+ public:
+  /** Parse `html`, gather `<style>` rules and compute styles for the viewport. */
+  void load(const std::string &html, float viewportWidth, float viewportHeight);
+  /** Recompute styles (e.g. after the viewport size changed). */
+  void restyle(float viewportWidth, float viewportHeight);
+  /** Advance the animation clock by `delta_ms`; recomputes the displayed styles
+   * 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(); }
+  /** 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);
+  const Node *hover() const { return hover_; }
+  const Node *focus() const { return focus_; }
+
+  const Node *root() const { return root_.get(); }
+  const StyleSheet &sheet() const { return sheet_; }
+  const XtStyle *styleOf(const Node *node) const;
+  const LayoutBox *boxOf(const Node *node) const;
+  const LayoutTree &layout() const { return layout_; }
+  /** First element matching a CSS selector (a small querySelector). */
+  const Node *querySelector(const std::string &selectorText) const;
+  /** Elements matching a CSS selector, in document order. */
+  std::vector<const Node *> querySelectorAll(const std::string &selectorText) const;
+  /** Serialized DOM, for diagnostics. */
+  std::string toDebugString() const;
+
+ private:
+  void collectStyleText(const Node *node, std::string *out) const;
+  void startTransitions();
+  void updateDisplay();
+
+  std::unique_ptr<Node> root_;
+  StyleSheet sheet_;
+  std::unordered_map<const Node *, XtStyle> styles_;   // target (cascade)
+  std::unordered_map<const Node *, XtStyle> display_;  // after transitions
+  std::vector<ActiveTransition> transitions_;
+  double clock_ms_ = 0.0;
+  LayoutTree layout_;
+  const Node *hover_ = nullptr;
+  const Node *focus_ = nullptr;
+  float viewportWidth_ = 0.0f;
+  float viewportHeight_ = 0.0f;
+};
+
+}  // namespace xtgui
+
+#endif /* XT_GUI_DOCUMENT_H */