import panel as pn
import param
from panel.custom import JSComponent
pn.extension(sizing_mode="stretch_width")
class JSXGraphComponent(JSComponent):
# Source: https://jsxgraph.org/share/example/elliptic-curves-group-law
_esm = """
import JXG from 'https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.mjs';
export function render({ model, el }) {
// Create a div element to hold the JSXGraph board
let boardDiv = document.createElement("div");
boardDiv.style.width = "100%";
boardDiv.style.height = "100%";
el.appendChild(boardDiv);
JXG.Options.label.autoposition = true;
const board = JXG.JSXGraph.initBoard(boardDiv, {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var curve = board.create('implicitcurve', ['-(y**2) + x**3 - 2 * x + 1'], {strokeWidth: 2});
var A = board.create('glider', [-1.5, 0, curve]);
var B = board.create('glider', [0, 1, curve]);
var line = board.create('line', [A, B], {color: 'black', strokeWidth: 1});
var C = board.create('otherintersection', [line, curve, [A, B]], {color: 'blue'});
var D = board.create('point', [() => C.X(), () => -C.Y()], {name: '-C = A + B', color: 'blue'})
}
"""
jsx = JSXGraphComponent(height=500)
logo = pn.pane.PNG("https://jsxgraph.org/wp/img/jsxgraph_1_0.png")
description = """\
[JSXGraph](https://jsxgraph.org/wp/index.html) is a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.
This example was created in response to [Discourse #8469](https://discourse.holoviz.org/t/jscomponent-add-a-div/8469).
"""
pn.template.FastListTemplate(
title="Panel + JSXGraph",
sidebar=[logo, description],
main=[jsx],
main_layout=None,
theme_toggle=False,
).servable()