如何在JSXGraph中动态识别线条与固定多边形围成的可点击填充区域

我使用JSXGraph开发了交互式绘图功能：用户可在画布中创建点、绘制线条，且所有用户绘制的线条支持拖拽调整位置。我已在线条外围添加了固定多边形EFGH，现在需要实现用户点击线条与EFGH围成的任意区域时，将选中区域填充上色的需求。
我最初的思路是为每个围成的独立区域单独生成多边形，点击时修改对应多边形的填充色，但由于线条可移动，区域对应的多边形需要动态生成，我不清楚如何识别区域端点来生成对应多边形。如果有不需要生成多边形即可实现点击区域选中填充的方案也可以接受，即使没有完整示例代码，能给出可行的实现方向也非常感谢。

上图为2条线段将固定多边形分成4个区域的示例，实际场景中线条数量可能更多。

基础示例代码 #

let board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-13, 10, 10, -10], 
axis:true, keepAspectRatio:true});
var p1 = board.create('point', [0, 0]);
var p2 = board.create('point',  [1.0, 1.0]);
var p3 = board.create('point', [3, 0]);
var p4= board.create('point',  [3, 5],);

let l1 = board.create('line', [p1,p2],{dash:4});
let l2 = board.create('line', [p3,p4],{dash:4});


var p1x = board.create('point', [-5, 5],{fixed:true});
var p2x = board.create('point', [5, 5],{fixed:true});
var p3x = board.create('point', [5,-5],{fixed:true});
var p4x = board.create('point', [-5,-5],{fixed:true});

var pol = board.create('polygon', [p1x, p2x, p3x, p4x],{
    borders:{strokecolor:"green"},
    fillcolor:"white",
    highlightfillcolor:"white",
    fixed:true,
});

已尝试的失败方案 #

我尝试过在JSXGraph画布上使用泛洪填充（flood fill）方案，但无法正确选中图形上的对应点，同时网格线和坐标轴的颜色差异也会导致填充中断，该方案最终没有实现成功。

内容的提问来源于stack exchange，提问作者Pratheesh Russell