feat: Add fChildrenArea directive to constrain children to designated area

[Copilot]

Adds fChildrenArea directive to define a specific region within a Node/Group where child nodes are constrained. This enables nodes to have fixed headers, footers, sidebars, or interactive controls that won't be covered by children—addressing the limitation where fIncludePadding only works for simple corner offsets.

Changes

• FChildrenAreaDirective - New directive that marks a descendant element as the children containment area
• FNodeBase - Added childrenArea property and setChildrenArea() method
• GetNodePadding - When fChildrenArea is present, calculates offset from node bounds to children area bounds instead of CSS padding

Usage

<div fNode fDragHandle [fNodeId]="node.id" [fIncludePadding]="true"
     [fAutoSizeToFitChildren]="true" [fAutoExpandOnChildHit]="true">
  
  <h4>Title always visible</h4>
  
  <div fChildrenArea class="children-area">
    <!-- Child nodes constrained here -->
  </div>
  
  <small>Footer always visible</small>
</div>

Works with existing fAutoSizeToFitChildren and fAutoExpandOnChildHit directives.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• accounts.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• clients2.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• clientservices.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• download.cypress.io
  • Triggering command: /usr/local/bin/node node index.js --exec install (dns block)
• redirector.gvt1.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• safebrowsingohttpgateway.googleapis.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
• www.google.com
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3656 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-14157384 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,1727763364629877935,14491348290515241323,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)
  • Triggering command: /opt/google/chrome/chrome /usr/bin/google-chrome --user-data-dir=/tmp/karma-14157384 --enable-automation --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-REDACTED-timer-throttling --disable-renderer-REDACTEDing --disable-device-discovery-notifications http://localhost:9876/?id=14157384 --headless --disable-gpu --disable-dev-shm-usage --remote-debugging-port=9222 (dns block)
  • Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --disable-dev-shm-usage --use-angle=swiftshader-webgl --crashpad-handler-pid=3979 --enable-crash-reporter=, --noerrdialogs --user-data-dir=/tmp/karma-65500622 --change-stack-guard-on-fork=enable --shared-files=v8_context_snapshot_data:100 --field-trial-handle=3,i,7989965752262694406,5261217883314097823,262144 --disable-features=PaintHolding --variations-seed-version --trace-process-track-uuid=3190708989122997041 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: fChildren directive to constrain children to designated area</issue_title>
<issue_description>### Describe the Feature

Great project so far!
I would like to propose a new directive named fChildren which can be set to any Node's or Group's descenant block element.
Currently the only offset possible is the includePadding directive, which is fine if you need simple title in the corner, but if you need to add some (interactive) content that needs to be visible, inputs, outputs etc. that is not enough:

With this feature you would be able to achive something like this - notice that the title is inside the Node but outside of the area containing children

The "Drag to group" title always visible, but basically the content could be placed anywhere

Sample of fChildren usage:

<div fNode fDragHandle [fNodeId]="node.id" [fNodeParentId]="node.parentId" [fIncludePadding]="includePaddings()"  [fAutoSizeToFitChildren]="autoSizeToFitChildren()" fAutoExpandOnChildHit]="autoExpandOnChildHit()"
      [fNodePosition]="node.position" [ngClass]="getNodeClasses(node)">

      <h4>Title that needs to be visible</h4>

      <div class="content-area" style="display: flex;">
        <div fChildren class="children-area">
          <!-- This is the designated children area -->
        </div>
        <ul>
          <!-- Outputs on the side -->
          <li>Output 1</li>
          <li>Output 2</li>
          <li>Output 3</li>
        </ul>
      </div>
      <small>
        Node footer that needs to be visible and maybe some outputs
      </small>
    </div>

Since there is flat structure in f-flow, the calculation would be a difference between parent's node outer sides and fChildren element sides coordinates. As there could be layout shift inside the parent node as it changes size, the offset and fChildren size would need to be recalculated in every loop.

The behavior of fChildren could be affected by the same directives fAutoSizeToFitChildren and fAutoExpandOnChildHit (pushing a node on the side of fChildren would expand parent and consequently fChildren in that direction) directives on the parent. If this is implemented fIncludePadding might be obsolete for the use-case with fChildren as it would be part of the offset between the boxes calculated already.

What problem does it solve?

Parent groups and nodes are not strictly just containers. They can practically be both - a Node with all the Node functionality and controls combined with being a container at the same time.

Have you considered any alternatives?

Alternatively the fChildren could also be placed outside the fNode body itself if needed and paired by parentId - in case you would need a detached designated area, but functionality still connected to a Node for example.</issue_description>

Comments on the Issue (you are @copilot in this section)

@siarheihuzarevich Thanks for the suggestion! Yes, this kind of `fChildren` functionality is something we are considering, but it won’t appear soon. Still, we appreciate the idea — it helps us shape the long-term direction of the library.

• Fixes [Feature]: fChildren directive to constrain children to designated area #253

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.