diff --git a/packages/textchecker-element/lib/textchecker-element.d.ts b/packages/textchecker-element/lib/textchecker-element.d.ts deleted file mode 100644 index 372471f..0000000 --- a/packages/textchecker-element/lib/textchecker-element.d.ts +++ /dev/null @@ -1,42 +0,0 @@ -export declare type TextCheckerElementAttributes = { - target: string; -}; -export declare type AnnotationItem = { - start: number; - end: number; - onMouseEnter: () => void; - onMouseLeave: () => void; -}; -declare type RectItem = { - index: number; - left: number; - top: number; - height: number; - width: number; -}; -declare class TextCheckerElement extends HTMLElement implements TextCheckerElementAttributes { - target: string; - private annotationBox; - private targetElement; - private mouseStateMap; - private rectItems; - private annotationItems; - constructor(args: TextCheckerElementAttributes); - connectedCallback(): void; - updateAnnotations(annotationItems: AnnotationItem[]): void; - renderAnnotationMarkers: ({ - rectItems, - highlightAnnotationItems - }: { - rectItems: RectItem[]; - highlightAnnotationItems?: AnnotationItem[] | undefined; - }) => void; - updateAnnotationRectItems: (annotationItems: AnnotationItem[], rectItems: RectItem[]) => void; - onMouseUpdate: (event: MouseEvent) => void; -} -declare global { - interface Window { - CustomElementElement: typeof TextCheckerElement; - } -} -export { TextCheckerElement }; diff --git a/packages/textchecker-element/lib/textchecker-element.js b/packages/textchecker-element/lib/textchecker-element.js deleted file mode 100644 index 3e843dd..0000000 --- a/packages/textchecker-element/lib/textchecker-element.js +++ /dev/null @@ -1,211 +0,0 @@ -"use strict"; -var __importDefault = - (this && this.__importDefault) || - function (mod) { - return mod && mod.__esModule ? mod : { default: mod }; - }; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.TextCheckerElement = void 0; -const text_caret_pos_1 = __importDefault(require("text-caret-pos")); -const lit_html_1 = require("lit-html"); -const Marker = (rect, isHighLight = false) => { - if (isHighLight) { - return lit_html_1.html``; - } else { - return lit_html_1.html``; - } -}; -const createTextCheckerStore = () => { - return { - onChange(handler) {} - }; -}; -class TextCheckerElement extends HTMLElement { - constructor(args) { - super(); - this.mouseHoverReactIdMap = new Map(); - this.rectItems = []; - this.annotationItems = []; - this.renderAnnotationMarkers = ({ rectItems, highlightAnnotationItems = [] }) => { - const items = rectItems.map((rect) => Marker(rect, !!highlightAnnotationItems[rect.index])); - lit_html_1.render(items, this.annotationBox); - }; - this.updateAnnotationRectItems = (annotationItems, rectItems) => { - this.annotationItems = annotationItems; - this.rectItems = rectItems; - }; - this.onMouseUpdate = (event) => { - var _a, _b; - const clientRect = - (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== - null && _b !== void 0 - ? _b - : { - left: 0, - top: 0 - }; - const point = { - x: event.clientX - clientRect.left, - y: event.clientY - clientRect.top - }; - const isIncludedIndexes = this.rectItems - .filter((rect) => { - return ( - rect.left <= point.x && - point.x <= rect.left + rect.width && - rect.top <= point.y && - point.y <= rect.top + rect.height - ); - }) - .map((item) => item.index); - // call mouseover - this.rectItems.forEach((item) => { - var _a, _b; - const currentState = this.mouseStateMap.get(item.index); - const isIncludedMouse = isIncludedIndexes.includes(item.index); - if (currentState === false && isIncludedMouse) { - (_a = this.annotationItems[item.index]) === null || _a === void 0 ? void 0 : _a.onMouseEnter(); - } else if (currentState === true && !isIncludedMouse) { - (_b = this.annotationItems[item.index]) === null || _b === void 0 ? void 0 : _b.onMouseLeave(); - } - this.mouseStateMap.set(item.index, isIncludedMouse); - }); - // update highlight - const highlightAnnotationItems = this.annotationItems.filter((_, index) => { - return isIncludedIndexes.includes(index); - }); - this.renderAnnotationMarkers({ - rectItems: this.rectItems, - highlightAnnotationItems: highlightAnnotationItems - }); - }; - this.target = args.target; - } - connectedCallback() { - const targetSelector = this.target; - if (!targetSelector) { - throw new Error("target attribute should be defined"); - } - const target = document.querySelector(targetSelector); - if (!target) { - throw new Error("target element is not found"); - } - this.targetElement = target; - const shadow = this.attachShadow({ mode: "open" }); - const overlay = document.createElement("div"); - overlay.setAttribute( - "style", - "border: 1px dotted blue; position: absolute; top: 0px; left: 0px; pointer-events: none;" - ); - const annotationBox = document.createElement("div"); - overlay.append(annotationBox); - shadow.append(overlay); - this.annotationBox = annotationBox; - this.targetElement.addEventListener("mousemove", this.onMouseUpdate); - } - updateAnnotations(annotationItems) { - const target = this.targetElement; - const targetStyle = window.getComputedStyle(target); - const copyAttributes = [ - "box-sizing", - "top", - "left", - "width", - "height", - "position", - "pointer-events", - "overflow", - "border", - "border-radius", - "padding", - "margin" - ]; - const copyStyle = copyAttributes - .map((attr) => { - return `${attr}: ${targetStyle.getPropertyValue(attr)};`; - }) - .join(""); - this.annotationBox.setAttribute("style", copyStyle + "pointer-events: none;"); - // - const rectItems = annotationItems.flatMap((annotation, index) => { - var _a, _b, _c, _d, _e, _f; - const start = annotation.start; - const end = annotation.end; - // 0 start - const startCoordinate = text_caret_pos_1.default.getCoordinates(this.targetElement, start, { - reuse: true, - returnHeight: true, - returnDiv: true, - debug: true - }); - const endCoordinate = text_caret_pos_1.default.getCoordinates(this.targetElement, end, { - reuse: true, - returnHeight: true, - returnDiv: true, - debug: true - }); - const fontSize = Number(targetStyle.getPropertyValue("font-size").replace("px", "")); - const rectItems = - startCoordinate.top === endCoordinate.top - ? [ - { - index, - left: target.offsetLeft - target.scrollLeft + startCoordinate.left, - top: target.offsetTop - target.scrollTop + startCoordinate.top, - height: fontSize, - width: endCoordinate.left - startCoordinate.left - } - ] - : // two line - [ - { - index, - left: target.offsetLeft - target.scrollLeft + startCoordinate.left, - top: target.offsetTop - target.scrollTop + startCoordinate.top, - height: fontSize, - width: - ((_c = - (_b = - (_a = - startCoordinate === null || startCoordinate === void 0 - ? void 0 - : startCoordinate._div) === null || _a === void 0 - ? void 0 - : _a.getBoundingClientRect()) === null || _b === void 0 - ? void 0 - : _b.width) !== null && _c !== void 0 - ? _c - : 0) - startCoordinate.left - }, - { - index, - left: target.offsetLeft - target.scrollLeft, - top: target.offsetTop - target.scrollTop + endCoordinate.top, - height: fontSize, - width: - ((_f = - (_e = - (_d = - startCoordinate === null || startCoordinate === void 0 - ? void 0 - : startCoordinate._div) === null || _d === void 0 - ? void 0 - : _d.getBoundingClientRect()) === null || _e === void 0 - ? void 0 - : _e.left) !== null && _f !== void 0 - ? _f - : 0) + endCoordinate.left - } - ]; - return rectItems; - }); - this.renderAnnotationMarkers({ rectItems: rectItems }); - this.updateAnnotationRectItems(annotationItems, rectItems); - } -} -exports.TextCheckerElement = TextCheckerElement; -if (!window.customElements.get("textchecker-element")) { - window.CustomElementElement = TextCheckerElement; - window.customElements.define("textchecker-element", TextCheckerElement); -} -//# sourceMappingURL=textchecker-element.js.map diff --git a/packages/textchecker-element/lib/textchecker-element.js.map b/packages/textchecker-element/lib/textchecker-element.js.map deleted file mode 100644 index 7ff7ae0..0000000 --- a/packages/textchecker-element/lib/textchecker-element.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"textchecker-element.js","sourceRoot":"","sources":["../src/textchecker-element.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/packages/textchecker-element/lib/textchecker-store.d.ts b/packages/textchecker-element/lib/textchecker-store.d.ts deleted file mode 100644 index 372471f..0000000 --- a/packages/textchecker-element/lib/textchecker-store.d.ts +++ /dev/null @@ -1,42 +0,0 @@ -export declare type TextCheckerElementAttributes = { - target: string; -}; -export declare type AnnotationItem = { - start: number; - end: number; - onMouseEnter: () => void; - onMouseLeave: () => void; -}; -declare type RectItem = { - index: number; - left: number; - top: number; - height: number; - width: number; -}; -declare class TextCheckerElement extends HTMLElement implements TextCheckerElementAttributes { - target: string; - private annotationBox; - private targetElement; - private mouseStateMap; - private rectItems; - private annotationItems; - constructor(args: TextCheckerElementAttributes); - connectedCallback(): void; - updateAnnotations(annotationItems: AnnotationItem[]): void; - renderAnnotationMarkers: ({ - rectItems, - highlightAnnotationItems - }: { - rectItems: RectItem[]; - highlightAnnotationItems?: AnnotationItem[] | undefined; - }) => void; - updateAnnotationRectItems: (annotationItems: AnnotationItem[], rectItems: RectItem[]) => void; - onMouseUpdate: (event: MouseEvent) => void; -} -declare global { - interface Window { - CustomElementElement: typeof TextCheckerElement; - } -} -export { TextCheckerElement }; diff --git a/packages/textchecker-element/lib/textchecker-store.js b/packages/textchecker-element/lib/textchecker-store.js deleted file mode 100644 index db8cef2..0000000 --- a/packages/textchecker-element/lib/textchecker-store.js +++ /dev/null @@ -1,206 +0,0 @@ -"use strict"; -var __importDefault = - (this && this.__importDefault) || - function (mod) { - return mod && mod.__esModule ? mod : { default: mod }; - }; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.TextCheckerElement = void 0; -const text_caret_pos_1 = __importDefault(require("text-caret-pos")); -const lit_html_1 = require("lit-html"); -const Marker = (rect, isHighLight = false) => { - if (isHighLight) { - return lit_html_1.html``; - } else { - return lit_html_1.html``; - } -}; -class TextCheckerElement extends HTMLElement { - constructor(args) { - super(); - this.mouseHoverReactIdMap = new Map(); - this.rectItems = []; - this.annotationItems = []; - this.renderAnnotationMarkers = ({ rectItems, highlightAnnotationItems = [] }) => { - const items = rectItems.map((rect) => Marker(rect, !!highlightAnnotationItems[rect.index])); - lit_html_1.render(items, this.annotationBox); - }; - this.updateAnnotationRectItems = (annotationItems, rectItems) => { - this.annotationItems = annotationItems; - this.rectItems = rectItems; - }; - this.onMouseUpdate = (event) => { - var _a, _b; - const clientRect = - (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== - null && _b !== void 0 - ? _b - : { - left: 0, - top: 0 - }; - const point = { - x: event.clientX - clientRect.left, - y: event.clientY - clientRect.top - }; - const isIncludedIndexes = this.rectItems - .filter((rect) => { - return ( - rect.left <= point.x && - point.x <= rect.left + rect.width && - rect.top <= point.y && - point.y <= rect.top + rect.height - ); - }) - .map((item) => item.index); - // call mouseover - this.rectItems.forEach((item) => { - var _a, _b; - const currentState = this.mouseStateMap.get(item.index); - const isIncludedMouse = isIncludedIndexes.includes(item.index); - if (currentState === false && isIncludedMouse) { - (_a = this.annotationItems[item.index]) === null || _a === void 0 ? void 0 : _a.onMouseEnter(); - } else if (currentState === true && !isIncludedMouse) { - (_b = this.annotationItems[item.index]) === null || _b === void 0 ? void 0 : _b.onMouseLeave(); - } - this.mouseStateMap.set(item.index, isIncludedMouse); - }); - // update highlight - const highlightAnnotationItems = this.annotationItems.filter((_, index) => { - return isIncludedIndexes.includes(index); - }); - this.renderAnnotationMarkers({ - rectItems: this.rectItems, - highlightAnnotationItems: highlightAnnotationItems - }); - }; - this.target = args.target; - } - connectedCallback() { - const targetSelector = this.target; - if (!targetSelector) { - throw new Error("target attribute should be defined"); - } - const target = document.querySelector(targetSelector); - if (!target) { - throw new Error("target element is not found"); - } - this.targetElement = target; - const shadow = this.attachShadow({ mode: "open" }); - const overlay = document.createElement("div"); - overlay.setAttribute( - "style", - "border: 1px dotted blue; position: absolute; top: 0px; left: 0px; pointer-events: none;" - ); - const annotationBox = document.createElement("div"); - overlay.append(annotationBox); - shadow.append(overlay); - this.annotationBox = annotationBox; - this.targetElement.addEventListener("mousemove", this.onMouseUpdate); - } - updateAnnotations(annotationItems) { - const target = this.targetElement; - const targetStyle = window.getComputedStyle(target); - const copyAttributes = [ - "box-sizing", - "top", - "left", - "width", - "height", - "position", - "pointer-events", - "overflow", - "border", - "border-radius", - "padding", - "margin" - ]; - const copyStyle = copyAttributes - .map((attr) => { - return `${attr}: ${targetStyle.getPropertyValue(attr)};`; - }) - .join(""); - this.annotationBox.setAttribute("style", copyStyle + "pointer-events: none;"); - // - const rectItems = annotationItems.flatMap((annotation, index) => { - var _a, _b, _c, _d, _e, _f; - const start = annotation.start; - const end = annotation.end; - // 0 start - const startCoordinate = text_caret_pos_1.default.getCoordinates(this.targetElement, start, { - reuse: true, - returnHeight: true, - returnDiv: true, - debug: true - }); - const endCoordinate = text_caret_pos_1.default.getCoordinates(this.targetElement, end, { - reuse: true, - returnHeight: true, - returnDiv: true, - debug: true - }); - const fontSize = Number(targetStyle.getPropertyValue("font-size").replace("px", "")); - const rectItems = - startCoordinate.top === endCoordinate.top - ? [ - { - index, - left: target.offsetLeft - target.scrollLeft + startCoordinate.left, - top: target.offsetTop - target.scrollTop + startCoordinate.top, - height: fontSize, - width: endCoordinate.left - startCoordinate.left - } - ] - : // two line - [ - { - index, - left: target.offsetLeft - target.scrollLeft + startCoordinate.left, - top: target.offsetTop - target.scrollTop + startCoordinate.top, - height: fontSize, - width: - ((_c = - (_b = - (_a = - startCoordinate === null || startCoordinate === void 0 - ? void 0 - : startCoordinate._div) === null || _a === void 0 - ? void 0 - : _a.getBoundingClientRect()) === null || _b === void 0 - ? void 0 - : _b.width) !== null && _c !== void 0 - ? _c - : 0) - startCoordinate.left - }, - { - index, - left: target.offsetLeft - target.scrollLeft, - top: target.offsetTop - target.scrollTop + endCoordinate.top, - height: fontSize, - width: - ((_f = - (_e = - (_d = - startCoordinate === null || startCoordinate === void 0 - ? void 0 - : startCoordinate._div) === null || _d === void 0 - ? void 0 - : _d.getBoundingClientRect()) === null || _e === void 0 - ? void 0 - : _e.left) !== null && _f !== void 0 - ? _f - : 0) + endCoordinate.left - } - ]; - return rectItems; - }); - this.renderAnnotationMarkers({ rectItems: rectItems }); - this.updateAnnotationRectItems(annotationItems, rectItems); - } -} -exports.TextCheckerElement = TextCheckerElement; -if (!window.customElements.get("textchecker-element")) { - window.CustomElementElement = TextCheckerElement; - window.customElements.define("textchecker-element", TextCheckerElement); -} -//# sourceMappingURL=textchecker-store.js.map diff --git a/packages/textchecker-element/lib/textchecker-store.js.map b/packages/textchecker-element/lib/textchecker-store.js.map deleted file mode 100644 index 75c0f44..0000000 --- a/packages/textchecker-element/lib/textchecker-store.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"textchecker-store.js","sourceRoot":"","sources":["../src/textchecker-store.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/packages/textchecker-element/public/index.ts b/packages/textchecker-element/public/index.ts index e97fc4a..bde78f9 100644 --- a/packages/textchecker-element/public/index.ts +++ b/packages/textchecker-element/public/index.ts @@ -1,21 +1,38 @@ import { TextCheckerElement } from "../src/textchecker-element"; +import { TextCheckerPopupElement } from "../src/text-checker-popup-element"; -const target = document.querySelector("#js-target"); +const targetElement = document.querySelector("#js-target") as HTMLTextAreaElement; const textChecker = new TextCheckerElement({ - target: "#js-target" + targetElement: targetElement }); -target.before(textChecker); +const textCheckerPopup = new TextCheckerPopupElement(); +targetElement.before(textChecker); +document.body.append(textCheckerPopup); let count = 0; setInterval(() => { + const card = { + id: "card-id", + message: "Hello!" + }; + textChecker.updateAnnotations([ { start: 0, end: count++, - onMouseEnter: () => { + onMouseEnter: ({ rectItem }) => { console.log("enteR", count); + const boundingClientRect = targetElement.getBoundingClientRect(); + textCheckerPopup.updateCard(card, { + index: rectItem.index, + top: boundingClientRect.y + rectItem.top + rectItem.height, + left: boundingClientRect.x + rectItem.left, + width: rectItem.width, + height: rectItem.height + }); }, onMouseLeave() { console.log("leave", count); + textCheckerPopup.dismissCard(card); } } ]); diff --git a/packages/textchecker-element/src/text-checker-popup-element.ts b/packages/textchecker-element/src/text-checker-popup-element.ts new file mode 100644 index 0000000..f482520 --- /dev/null +++ b/packages/textchecker-element/src/text-checker-popup-element.ts @@ -0,0 +1,110 @@ +import { html, render } from "lit-html"; +import { eventmit } from "eventmit"; +import { RectItem } from "./textchecker-store"; + +export type TextCheckerElementAttributes = { + target?: HTMLElement; +}; +type TextCheckerCard = { + id: string; + message: string; +}; +type TextCheckerPopupState = { + card?: TextCheckerCard; + targetRect?: RectItem; +}; +const createTextCheckerPopupState = (state?: Partial) => { + let currentState: TextCheckerPopupState = { + ...state + }; + const changeEvent = eventmit(); + return { + get(): TextCheckerPopupState { + return currentState; + }, + onChange(handler: () => void) { + changeEvent.on(handler); + }, + dispose() { + changeEvent.offAll(); + }, + update(state: Partial) { + currentState = { + ...currentState, + ...state + }; + changeEvent.emit(); + }, + removeCartById(cardId: TextCheckerCard["id"]) { + if (currentState?.card?.id !== cardId) { + return; + } + currentState = { + ...currentState, + card: undefined + }; + changeEvent.emit(); + } + }; +}; + +export class TextCheckerPopupElement extends HTMLElement { + private overlay!: HTMLDivElement; + private store: ReturnType; + + constructor() { + super(); + this.store = createTextCheckerPopupState(); + } + + connectedCallback(): void { + const shadow = this.attachShadow({ mode: "open" }); + const overlay = document.createElement("div"); + overlay.className = "popup"; + const style = document.createElement("style"); + style.textContent = ` +.popup { + background-color: #fff; + box-shadow: 0 2px 10px rgba(0,0,0,.2); + padding: 0 0.2rem; +} +`; + + this.overlay = overlay; + shadow.append(style); + shadow.append(overlay); + this.store.onChange(() => { + this.renderAnnotationMarkers(this.store.get()); + }); + } + + public updateCard(card: TextCheckerCard, rect: RectItem) { + this.store.update({ + card, + targetRect: rect + }); + } + + public dismissCard(card: TextCheckerCard) { + this.store.removeCartById(card.id); + } + + private renderAnnotationMarkers = (state: TextCheckerPopupState) => { + const rect = state.targetRect; + if (!rect) { + return; + } + if (!state.card) { + render("", this.overlay); + return; + } + const cardContent = html`

${state.card.message}

`; + const style = `position: fixed; z-index: 2147483644; width: ${rect.width}px; min-width: 300px; top: ${rect.top}px; left: ${rect.left}px;`; + this.overlay.setAttribute("style", style); + render(cardContent, this.overlay); + }; +} + +if (!window.customElements.get("textchecker-popoup-element")) { + window.customElements.define("textchecker-popoup-element", TextCheckerPopupElement); +} diff --git a/packages/textchecker-element/src/textchecker-element.ts b/packages/textchecker-element/src/textchecker-element.ts index 9072a3e..6680969 100644 --- a/packages/textchecker-element/src/textchecker-element.ts +++ b/packages/textchecker-element/src/textchecker-element.ts @@ -1,10 +1,9 @@ import textCaretPos from "text-caret-pos"; import { html, render } from "lit-html"; -import { createTextCheckerStore, RectItem, TextCheckerState } from "./textchecker-store"; -import { AnnotationItem } from ".."; +import { AnnotationItem, createTextCheckerStore, RectItem, TextCheckerState } from "./textchecker-store"; export type TextCheckerElementAttributes = { - target: string; + targetElement: HTMLTextAreaElement; }; const Marker = (rect: RectItem, isHighLight: boolean = false) => { if (isHighLight) { @@ -18,28 +17,22 @@ const Marker = (rect: RectItem, isHighLight: boolean = false) => { } }; -class TextCheckerElement extends HTMLElement implements TextCheckerElementAttributes { - target: string; +export class TextCheckerElement extends HTMLElement { private annotationBox!: HTMLDivElement; private targetElement!: HTMLTextAreaElement; private store: ReturnType; constructor(args: TextCheckerElementAttributes) { super(); - this.target = args.target; + this.targetElement = args.targetElement; this.store = createTextCheckerStore(); } connectedCallback(): void { - const targetSelector = this.target; - if (!targetSelector) { - throw new Error("target attribute should be defined"); - } - const target = document.querySelector(targetSelector) as HTMLTextAreaElement; + const target = this.targetElement; if (!target) { throw new Error("target element is not found"); } - this.targetElement = target; const shadow = this.attachShadow({ mode: "open" }); const overlay = document.createElement("div"); overlay.setAttribute( @@ -88,13 +81,13 @@ class TextCheckerElement extends HTMLElement implements TextCheckerElementAttrib reuse: true, returnHeight: true, returnDiv: true, - debug: true + debug: false }); const endCoordinate = textCaretPos.getCoordinates(this.targetElement, end, { reuse: true, returnHeight: true, returnDiv: true, - debug: true + debug: false }); const fontSize = Number(targetStyle.getPropertyValue("font-size").replace("px", "")); const rectItems: RectItem[] = @@ -163,9 +156,13 @@ class TextCheckerElement extends HTMLElement implements TextCheckerElementAttrib const currentState = state.mouseHoverReactIdMap.get(item.index); const isIncludedMouse = isIncludedIndexes.includes(item.index); if (currentState === false && isIncludedMouse) { - state.annotationItems[item.index]?.onMouseEnter(); + state.annotationItems[item.index]?.onMouseEnter({ + rectItem: item + }); } else if (currentState === true && !isIncludedMouse) { - state.annotationItems[item.index]?.onMouseLeave(); + state.annotationItems[item.index]?.onMouseLeave({ + rectItem: item + }); } state.mouseHoverReactIdMap.set(item.index, isIncludedMouse); }); @@ -174,8 +171,6 @@ class TextCheckerElement extends HTMLElement implements TextCheckerElementAttrib }; } -export { TextCheckerElement }; - -if (!window.customElements.get("textchecker-element")) { - window.customElements.define("textchecker-element", TextCheckerElement); +if (!window.customElements.get("text-checker-element")) { + window.customElements.define("text-checker-element", TextCheckerElement); } diff --git a/packages/textchecker-element/src/textchecker-store.ts b/packages/textchecker-element/src/textchecker-store.ts index 8b4ed2d..a304959 100644 --- a/packages/textchecker-element/src/textchecker-store.ts +++ b/packages/textchecker-element/src/textchecker-store.ts @@ -3,8 +3,8 @@ import { eventmit } from "eventmit"; export type AnnotationItem = { start: number; end: number; - onMouseEnter: () => void; - onMouseLeave: () => void; + onMouseEnter: ({ rectItem }: { rectItem: RectItem }) => void; + onMouseLeave: ({ rectItem }: { rectItem: RectItem }) => void; }; export type RectItem = { index: number; left: number; top: number; height: number; width: number };