.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "auto_examples/Interactive/plot_point_widget.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_auto_examples_Interactive_plot_point_widget.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_auto_examples_Interactive_plot_point_widget.py:


Draggable Point Widget
======================

Demonstrates the :class:`~anyplotlib.widgets.PointWidget` on a 1-D panel.

A smooth curve ``f(x) = sin(x) · e^(−x/6)`` is shown together with a
cyan control point that the user can drag freely inside the plot area.

**Interaction**

* **Drag the point** anywhere inside the plot — the widget reports its
  data-space ``(x, y)`` position on every frame via the
  :meth:`~anyplotlib.widgets.Widget.on_changed` callback.
* **Release** — the :meth:`~anyplotlib.widgets.Widget.on_release` callback
  snaps the point's y-coordinate to the curve value at the dragged x
  and draws the **tangent line** through that point.

**What is computed on release**

Given the dragged x position *xq*, the code evaluates:

* **Curve value**: ``yq = f(xq)``
* **Derivative** (central finite difference): ``dy/dx ≈ [f(xq+h) − f(xq−h)] / 2h``
* **Tangent line**: ``y_tan(x) = yq + slope · (x − xq)``

The tangent line is added with :meth:`~anyplotlib.figure_plots.Plot1D.add_line`
and the previous one is removed, so only one tangent is shown at a time.

.. note::
   Move the point to an interesting part of the curve (e.g. a local maximum)
   and release — the tangent will be horizontal there.

.. GENERATED FROM PYTHON SOURCE LINES 34-110




.. raw:: html

    <div style="display:block;text-align:center;line-height:0;margin:12px 0;"><div id="f0fccedef" style="display:inline-block;overflow:hidden;position:relative;width:684px;height:350px;"><iframe src="../../_static/viewer_widgets/sphx_glr_plot_point_widget_001.html" frameborder="0" scrolling="no" style="width:696px;height:356px;border:none;overflow:hidden;display:block;transform-origin:top left;transform:scale(0.982759);position:absolute;top:0;left:0;"></iframe></div><script>(function(){var wrap=document.getElementById('f0fccedef'),ifr=wrap.querySelector('iframe'),nw=696,nh=356;function r(){var avail=wrap.parentElement?wrap.parentElement.offsetWidth:0;if(!avail)return;var s=Math.min(1,avail/nw);wrap.style.width=Math.round(nw*s)+'px';wrap.style.height=Math.round(nh*s)+'px';ifr.style.transform='scale('+s+')';}requestAnimationFrame(r);window.addEventListener('resize',r);})()</script></div>






.. code-block:: Python


    import numpy as np
    import anyplotlib as vw

    # ── Curve ──────────────────────────────────────────────────────────────────
    x = np.linspace(0.0, 4.0 * np.pi, 512)

    def f(t):
        return np.sin(t) * np.exp(-t / 6.0)

    def df(t, h=1e-5):
        """Central finite-difference derivative of f."""
        return (f(t + h) - f(t - h)) / (2.0 * h)

    y = f(x)

    # ── Figure ─────────────────────────────────────────────────────────────────
    fig, ax = vw.subplots(figsize=(680, 340))
    plot = ax.plot(y, axes=[x], units="rad",
                   color="#4fc3f7", linewidth=2.0, label="f(x)")

    # ── Initial point widget — placed at the first local maximum ───────────────
    x0_init = float(x[np.argmax(y)])
    y0_init = float(np.max(y))
    pt = plot.add_point_widget(x0_init, y0_init, color="#00e5ff")

    # Track the current tangent line handle so we can replace it
    _tangent_line: "vw.Line1D | None" = None  # type: ignore[name-defined]

    def _draw_tangent(xq: float) -> None:
        """Snap point to curve, compute slope, draw tangent overlay."""
        global _tangent_line

        # Evaluate curve and slope at xq
        yq    = float(f(xq))
        slope = float(df(xq))

        # Snap the widget y to the curve (visual feedback)
        pt._data["y"] = yq
        pt._push_fn()

        # Tangent line spans the full visible x range
        x_tan = np.array([float(x[0]), float(x[-1])])
        y_tan = yq + slope * (x_tan - xq)

        # Replace previous tangent
        if _tangent_line is not None:
            _tangent_line.remove()
        _tangent_line = plot.add_line(
            y_tan, x_axis=x_tan,
            color="#ff7043", linewidth=1.5,
            linestyle="dashed",
            label=f"slope = {slope:+.3f}",
        )

    # Draw the tangent at the initial position
    _draw_tangent(x0_init)


    # ── Callbacks ──────────────────────────────────────────────────────────────

    @pt.on_changed
    def _live(event):
        """Every drag frame — print the current widget position."""
        print(f"  dragging  x={event.x:.4f}  y={event.y:.4f}", end="\r")


    @pt.on_release
    def _settled(event):
        """On mouse-up — snap y to the curve and refresh the tangent line."""
        print(f"  released  x={event.x:.4f}                    ")
        _draw_tangent(event.x)


    fig



.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.573 seconds)


.. _sphx_glr_download_auto_examples_Interactive_plot_point_widget.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: plot_point_widget.ipynb <plot_point_widget.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: plot_point_widget.py <plot_point_widget.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: plot_point_widget.zip <plot_point_widget.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_