What are the ways to lock and unlock by clicking the button outside the canvas

[17839359913]

What are the ways to lock and unlock by clicking the button outside the canvas？ This is very important for me. Thank you very much

[17839359913]

like this lock and unlock by clicking the lock button

[17839359913]

Is there any way to make axes render outside of canvas？ because when I move the mouse into the canvas, I want to add a transparency gradient to the canvas.But this will affect axes

[leeoniya]

lock and unlock by clicking the lock button

you can add css pointer-events: none to the uplot wrapper u.root (see below)

when I move the mouse into the canvas, I want to add a transparency gradient to the canvas.But this will affect axes

you can use u.over or u.under div elements which only cover the plotting area (see below)

https://jsfiddle.net/0ax8sdpq/

---

<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/src/uPlot.css">
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>

<button id="lock">Lock/Unlock</button>

let data = [
  [0, 1, 2, 3],
  [10, 50, 25, 100],
];

const opts = {
  width: 800,
  height: 400,
  scales: {
    x: {
      time: false,
    },
  },
  series: [
    {},
    {
      stroke: "red",
    },
  ],
};

let u = new uPlot(opts, data, document.body);

// chart locking for mouse events
let locked = false;

document.getElementById("lock").addEventListener("click", (e) => {
  u.root.style.pointerEvents = !locked ? "none" : "auto";
  locked = !locked;
});

// background hover
u.over.addEventListener("mouseenter", (e) => {
  u.under.style.background = "linear-gradient(#e66465, #9198e5)";
});

u.over.addEventListener("mouseleave", (e) => {
  u.under.style.background = "none";
});

[17839359913]

I know what you mean But I want to add transparency to the drawing area instead of u.under Because I want to add a transition effect to cursor. alpha But I didn't find the corresponding API

[leeoniya]

do you have a demo that visually shows the effect you're trying to achieve?

[17839359913]

do you have a demo that visually shows the effect you're trying to achieve?

https://user-images.githubusercontent.com/22956606/227852648-7a1d76c2-c052-44e9-9c7b-a47b4339e457.mov

[17839359913]

The transparency changes are delayed and gradual

[17839359913]

I achieved this by completely covering a layer of div on canvas. I don't think this is a good way, and it will bring additional rendering pressure

[leeoniya]

I achieved this by completely covering a layer of div on canvas

what does this code look like? 🤔

The transparency changes are delayed and gradual I don't think this is a good way, and it will bring additional rendering pressure

as stated in the readme, uPlot will never support transitions or animations in the core (for performance reasons).

[17839359913]

I achieved this by completely covering a layer of div on canvas

what does this code look like? 🤔

The transparency changes are delayed and gradual I don't think this is a good way, and it will bring additional rendering pressure

as stated in the readme, uPlot will never support transitions or animations in the core (for performance reasons).

Cover canvas with my own div，What you see is not a canvas, but a div in the same location as the canvas，Can you understand what I mean？

[17839359913]

I achieved this by completely covering a layer of div on canvas

what does this code look like? 🤔

The transparency changes are delayed and gradual I don't think this is a good way, and it will bring additional rendering pressure

as stated in the readme, uPlot will never support transitions or animations in the core (for performance reasons).

Cover canvas with my own div，What you see is not a canvas, but a div in the same location as the canvas，Can you understand what I mean？

lock and unlock by clicking the lock button

you can add css pointer-events: none to the uplot wrapper u.root (see below)

when I move the mouse into the canvas, I want to add a transparency gradient to the canvas.But this will affect axes

you can use u.over or u.under div elements which only cover the plotting area (see below)

https://jsfiddle.net/0ax8sdpq/

<link rel="stylesheet" href="https://leeoniya.github.io/uPlot/src/uPlot.css">
<script src="https://leeoniya.github.io/uPlot/dist/uPlot.iife.js"></script>

<button id="lock">Lock/Unlock</button>

let data = [
  [0, 1, 2, 3],
  [10, 50, 25, 100],
];

const opts = {
  width: 800,
  height: 400,
  scales: {
    x: {
      time: false,
    },
  },
  series: [
    {},
    {
      stroke: "red",
    },
  ],
};

let u = new uPlot(opts, data, document.body);

// chart locking for mouse events
let locked = false;

document.getElementById("lock").addEventListener("click", (e) => {
  u.root.style.pointerEvents = !locked ? "none" : "auto";
  locked = !locked;
});

// background hover
u.over.addEventListener("mouseenter", (e) => {
  u.under.style.background = "linear-gradient(#e66465, #9198e5)";
});

u.over.addEventListener("mouseleave", (e) => {
  u.under.style.background = "none";
});

What I want is to be able to lock or unlock by clicking a button outside or by clicking on the plotting area. If I do this, there's a problem Unable to unlock or lock by clicking on the plotting area. Can you understand what I mean

[leeoniya]

Cover canvas with my own div，What you see is not a canvas, but a div in the same location as the canvas

a big reason to use uPlot is for performance. if you need animations/transitions and are going to make performance much worse to achieve this, you should probably use another library that has these features and will simplify your code.

Unable to unlock or lock by clicking on the plotting area.

something like this then:

let data = [
  [0, 1, 2, 3],
  [10, 50, 25, 100],
];

const opts = {
  width: 800,
  height: 400,
  focus: {
    alpha: 0.5,
  },
  scales: {
    x: {
      time: false,
    },
  },
  series: [
    {},
    {
      stroke: "red",
      fill: "rgba(255,0,0,0.1)",
    },
  ],
};

let u = new uPlot(opts, data, document.body);

let locked = false;

const maybeCancel = (e) => {
  locked && e.stopPropagation();
};

u.root.addEventListener("click", (e) => { locked = false; }, true);
u.root.addEventListener("mousedown", maybeCancel, true);
u.root.addEventListener("mouseenter", maybeCancel, true);
u.root.addEventListener("mousemove", maybeCancel, true);

document.getElementById("lock").addEventListener("click", (e) => {
  locked = !locked;
});

[17839359913]

a big reason to use uPlot is for performance. if you need animations/transitions and are going to make performance much worse to achieve this, you should probably use another library that has these features and will simplify your code.

Thank you very much