How to use the pointerDown to import strokes?

[HuDemo]

When I use the importPointEvents to inject the strokes, it works fine, but when I use editor.pointerDown, it is undefined. Can you explain how to use it specifically?
`

播放

<script setup> import { onMounted, nextTick } from "vue"; import { Editor } from "iink-ts";

var editor;

async function loadEditor() {
const options = {
configuration: {
server: {
protocol: "REST",
// scheme: "https",
// host: "cloud.myscript.com",
applicationKey: "...",
hmacKey: "...",
},
recognition: {
type: "TEXT",
},
},
};

const editorElement = document.getElementById("editor");
editor = new Editor(editorElement, options);

await editor.initialize();

window.addEventListener("resize", () => {
editor.resize();
});
}
function play() {
const strokes = [
{
pointerType: "pen",
pointerId: 0,
pointers: [
{ a: "PEN", e: "DOWN", t: 1735485141222, x: 93.5, y: 292.75 },
{ a: "PEN", e: "MOVE", t: 1735485141243, x: 93.5, y: 292.75 },
{ a: "PEN", e: "MOVE", t: 1735485141248, x: 93.5, y: 293.5 },
{ a: "PEN", e: "MOVE", t: 1735485141251, x: 93.5, y: 294.375 },
{ a: "PEN", e: "MOVE", t: 1735485141255, x: 93.5, y: 295.75 },
{ a: "PEN", e: "MOVE", t: 1735485141259, x: 93.5, y: 297.625 },
{ a: "PEN", e: "MOVE", t: 1735485141264, x: 93.5, y: 299.5 },
{ a: "PEN", e: "MOVE", t: 1735485141268, x: 93.5, y: 302.5 },
{ a: "PEN", e: "MOVE", t: 1735485141272, x: 93.75, y: 306.25 },
{ a: "PEN", e: "MOVE", t: 1735485141276, x: 94.125, y: 310.125 },
{ a: "PEN", e: "MOVE", t: 1735485141281, x: 94.25, y: 313.875 },
{ a: "PEN", e: "MOVE", t: 1735485141285, x: 94.375, y: 318.5 },
{ a: "PEN", e: "MOVE", t: 1735485141289, x: 94.75, y: 322.75 },
{ a: "PEN", e: "MOVE", t: 1735485141293, x: 95.125, y: 327.5 },
{ a: "PEN", e: "MOVE", t: 1735485141298, x: 95.25, y: 332.5 },
{ a: "PEN", e: "MOVE", t: 1735485141301, x: 95.5, y: 338.0 },
{ a: "PEN", e: "MOVE", t: 1735485141305, x: 95.625, y: 344.875 },
{ a: "PEN", e: "MOVE", t: 1735485141310, x: 95.625, y: 350.625 },
{ a: "PEN", e: "MOVE", t: 1735485141314, x: 95.625, y: 355.875 },
{ a: "PEN", e: "MOVE", t: 1735485141318, x: 95.5, y: 361.75 },
{ a: "PEN", e: "MOVE", t: 1735485141322, x: 95.375, y: 367.875 },
{ a: "PEN", e: "MOVE", t: 1735485141326, x: 95.125, y: 375.25 },
{ a: "PEN", e: "MOVE", t: 1735485141331, x: 94.625, y: 381.875 },
{ a: "PEN", e: "MOVE", t: 1735485141334, x: 94.25, y: 389.25 },
{ a: "PEN", e: "MOVE", t: 1735485141339, x: 93.875, y: 395.875 },
{ a: "PEN", e: "MOVE", t: 1735485141343, x: 93.375, y: 402.375 },
{ a: "PEN", e: "MOVE", t: 1735485141348, x: 92.875, y: 408.25 },
{ a: "PEN", e: "MOVE", t: 1735485141351, x: 92.25, y: 413.625 },
{ a: "PEN", e: "MOVE", t: 1735485141355, x: 91.5, y: 419.625 },
{ a: "PEN", e: "MOVE", t: 1735485141359, x: 91.0, y: 424.875 },
{ a: "PEN", e: "MOVE", t: 1735485141364, x: 90.5, y: 430.875 },
{ a: "PEN", e: "MOVE", t: 1735485141368, x: 90.0, y: 436.875 },
{ a: "PEN", e: "MOVE", t: 1735485141372, x: 89.5, y: 441.625 },
{ a: "PEN", e: "MOVE", t: 1735485141376, x: 88.875, y: 446.375 },
{ a: "PEN", e: "MOVE", t: 1735485141381, x: 88.625, y: 450.0 },
{ a: "PEN", e: "MOVE", t: 1735485141384, x: 88.5, y: 453.625 },
{ a: "PEN", e: "MOVE", t: 1735485141389, x: 88.375, y: 456.75 },
{ a: "PEN", e: "MOVE", t: 1735485141393, x: 88.375, y: 459.875 },
{ a: "PEN", e: "MOVE", t: 1735485141398, x: 88.25, y: 462.5 },
{ a: "PEN", e: "MOVE", t: 1735485141401, x: 88.375, y: 465.125 },
{ a: "PEN", e: "MOVE", t: 1735485141405, x: 88.75, y: 467.125 },
{ a: "PEN", e: "MOVE", t: 1735485141409, x: 89.25, y: 469.0 },
{ a: "PEN", e: "MOVE", t: 1735485141415, x: 89.875, y: 470.5 },
{ a: "PEN", e: "UP", t: 1735485141418, x: 89.875, y: 470.5 },
],
},
];
console.log(editor.pointerDown); // this is undefined
editor.importPointEvents(strokes);
}
onMounted(() => {
nextTick(() => {
loadEditor().catch((error) => console.error(error));
});
});
</script>

<style lang="less"> html, body, div, p { margin: 0; padding: 0; border: none; box-sizing: border-box; } #editor { width: 100vw; height: calc(100dvh - 166px); } @media only screen and (max-width: 478px) { #editor { height: calc(100dvh - 215px); } } </style> <style lang="less" scoped> .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 1000; } </style>

`

[leJsboureau]

Hi,

Thanks for your feedback, I'm not sure I understand your problem.

In text mode, there are 2 possibilities to import data into iink-ts:

• import strokes using editor.importPointEvents as you do
• import text using editor.import("text", "text/plain")

You can't use pointerDown to import strokes.
The pointerDown, pointerMove and pointerUp methods are only used internally in the lib to capture your writing.

Is it clearer like this?