hook.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746
  1. import {
  2. computed,
  3. getCurrentInstance,
  4. nextTick,
  5. reactive,
  6. Ref,
  7. ref,
  8. shallowRef,
  9. toRaw,
  10. watch,
  11. WatchCallback,
  12. watchEffect,
  13. WatchOptions,
  14. WatchSource,
  15. } from "vue";
  16. import { v4 as uuidRaw } from "uuid";
  17. import { DC, EntityShape, Pos, Size } from "./dec";
  18. import { Stage } from "konva/lib/Stage";
  19. import { Transform } from "konva/lib/Util";
  20. import { lineLen } from "./math";
  21. import { Viewer } from "./viewer";
  22. import { KonvaEventObject } from "konva/lib/Node";
  23. import { asyncTimeout } from "@/utils";
  24. export const rendererName = "renderer";
  25. export const rendererMap = new WeakMap<any, { unmounteds: (() => void)[] }>();
  26. export const uuid = uuidRaw
  27. export const useRendererInstance = () => {
  28. let instance = getCurrentInstance()!;
  29. while (instance.type.__name !== rendererName) {
  30. if (instance.parent) {
  31. instance = instance.parent;
  32. } else {
  33. throw "未发现渲染实例";
  34. }
  35. }
  36. return instance;
  37. };
  38. export const installGlobalVar = <T>(
  39. create: () => { var: T; onDestroy: () => void } | T,
  40. key = Symbol("globalVar")
  41. ) => {
  42. const useGlobalVar = (): T => {
  43. const instance = useRendererInstance() as any;
  44. const { unmounteds } = rendererMap.get(instance)!;
  45. if (!(key in instance)) {
  46. let val = create() as any;
  47. if (typeof val === "object" && "var" in val && "onDestroy" in val) {
  48. console.error('val.onDestory', val, key, val.onDestroy)
  49. val.onDestroy && unmounteds.push(val.onDestroy);
  50. if (import.meta.env.DEV) {
  51. unmounteds.push(() => {
  52. console.log("销毁变量", key);
  53. });
  54. }
  55. val = val.var;
  56. }
  57. instance[key] = val;
  58. }
  59. return instance[key];
  60. };
  61. return useGlobalVar;
  62. };
  63. export const useGlobalVar = installGlobalVar(() => {
  64. return {
  65. misPixel: 10,
  66. };
  67. });
  68. export const onlyId = () => uuid();
  69. export const stackVar = <T>(init?: T, test = false) => {
  70. const factory = (init: T) => ({ var: init, id: onlyId() });
  71. const stack = reactive([]) as { var: T; id: string }[];
  72. if (init) {
  73. stack.push(factory(init));
  74. }
  75. const result = {
  76. get value() {
  77. return stack[stack.length - 1]?.var;
  78. },
  79. set value(val) {
  80. stack[stack.length - 1].var = val;
  81. },
  82. push(data: T) {
  83. test && console.error('push', data)
  84. stack.push(factory(data));
  85. const item = stack[stack.length - 1];
  86. const pop = (() => {
  87. const ndx = stack.findIndex(({ id }) => id === item.id);
  88. if (~ndx) {
  89. stack.splice(ndx, 1);
  90. }
  91. }) as (() => void) & { set: (data: T) => void };
  92. pop.set = (data) => {
  93. test && console.error('pop', data)
  94. item.var = data;
  95. };
  96. return pop;
  97. },
  98. pop() {
  99. test && console.error('pop')
  100. if (stack.length - 1 > 0) {
  101. stack.pop();
  102. } else {
  103. console.error("已到达栈顶");
  104. }
  105. },
  106. cycle<R>(data: T, run: () => R): R {
  107. result.push(data);
  108. const r = run();
  109. result.pop();
  110. return r;
  111. },
  112. };
  113. return result;
  114. };
  115. export const useCursor = installGlobalVar(
  116. () => stackVar("default", false),
  117. Symbol("cursor")
  118. );
  119. /**
  120. * 多个函数合并成一个函数
  121. * @param fns
  122. * @returns
  123. */
  124. export const mergeFuns = (...fns: (() => void)[] | (() => void)[][]) => {
  125. return () => {
  126. fns.forEach((fn) => {
  127. if (Array.isArray(fn)) {
  128. fn.forEach((f) => f());
  129. } else {
  130. fn();
  131. }
  132. });
  133. };
  134. };
  135. export const useStage = installGlobalVar(
  136. () => shallowRef<DC<Stage> | undefined>(),
  137. Symbol("stage")
  138. );
  139. export const listener = <
  140. T extends HTMLElement | Window,
  141. K extends keyof HTMLElementEventMap
  142. >(
  143. target: T,
  144. eventName: K,
  145. callback: (this: T, ev: HTMLElementEventMap[K]) => any
  146. ) => {
  147. target.addEventListener(eventName, callback as any);
  148. return () => {
  149. target.removeEventListener(eventName, callback as any);
  150. };
  151. };
  152. export const useGlobalResize = installGlobalVar(() => {
  153. const stage = useStage();
  154. const size = ref<Size>();
  155. const setSize = async () => {
  156. if (fix.value) return;
  157. const container = stage.value?.getStage().container();
  158. if (container) {
  159. container.style.setProperty("display", "none");
  160. }
  161. const dom = stage.value!.getNode().container().parentElement!;
  162. await asyncTimeout(16)
  163. size.value = {
  164. width: dom.offsetWidth,
  165. height: dom.offsetHeight,
  166. };
  167. if (container) {
  168. container.style.removeProperty("display");
  169. }
  170. };
  171. const stopWatch = watchEffect(() => {
  172. if (stage.value) {
  173. setSize();
  174. nextTick(() => stopWatch());
  175. }
  176. });
  177. let unResize = listener(window, "resize", setSize);
  178. const fix = ref(false);
  179. let unWatch: (() => void) | null = null;
  180. const setFixSize = (fixSize: { width: number; height: number } | null) => {
  181. if (fixSize) {
  182. size.value = { ...fixSize };
  183. unWatch && unWatch();
  184. unWatch = watchEffect(() => {
  185. const $stage = stage.value?.getStage();
  186. if ($stage) {
  187. $stage.width(fixSize.width);
  188. $stage.height(fixSize.height);
  189. nextTick(() => unWatch && unWatch());
  190. }
  191. });
  192. }
  193. if (fix.value && !fixSize) {
  194. unResize = listener(window, "resize", setSize);
  195. fix.value = false;
  196. nextTick(setSize);
  197. } else if (!fix.value && fixSize) {
  198. fix.value = true;
  199. unResize();
  200. }
  201. };
  202. return {
  203. var: {
  204. setFixSize: setFixSize,
  205. updateSize: setSize,
  206. size,
  207. fix,
  208. },
  209. onDestroy: () => {
  210. console.error('size onDest')
  211. unResize();
  212. unWatch && unWatch();
  213. },
  214. };
  215. }, Symbol("resize"));
  216. export const globalWatch = <T>(
  217. source: WatchSource<T>,
  218. cb: WatchCallback<T, T>,
  219. options?: WatchOptions
  220. ): (() => void) => {
  221. let stop: () => void;
  222. nextTick(() => {
  223. stop = watch(source, cb as any, options as any);
  224. });
  225. return () => {
  226. stop && stop();
  227. };
  228. };
  229. export const getOffset = (
  230. ev: MouseEvent | TouchEvent,
  231. dom = ev.target! as HTMLElement,
  232. ndx = 0
  233. ) => {
  234. const event = ev instanceof TouchEvent ? ev.changedTouches[ndx] : ev;
  235. const rect = dom.getBoundingClientRect();
  236. const offsetX = event.clientX - rect.left;
  237. const offsetY = event.clientY - rect.top;
  238. return {
  239. x: offsetX,
  240. y: offsetY,
  241. };
  242. };
  243. type DragProps = {
  244. move?: (
  245. info: Record<"start" | "prev" | "end", Pos> & { ev: PointerEvent }
  246. ) => void;
  247. down?: (pos: Pos, ev: PointerEvent) => void;
  248. up?: (pos: Pos, ev: PointerEvent) => void;
  249. notPrevent?: boolean;
  250. };
  251. export const dragListener = (
  252. dom: HTMLElement,
  253. props: DragProps | DragProps["move"] = {}
  254. ) => {
  255. if (typeof props === "function") {
  256. props = { move: props };
  257. }
  258. const { move, up, down } = props;
  259. const mount = document.documentElement;
  260. if (!move && !up && !down) return () => {};
  261. let moveHandler: any, endHandler: any;
  262. let button: number = -1
  263. const downHandler = (ev: PointerEvent) => {
  264. button = ev.button
  265. const start = getOffset(ev, dom);
  266. let prev = start;
  267. down && down(start, ev);
  268. props.notPrevent || ev.preventDefault();
  269. moveHandler = (ev: PointerEvent) => {
  270. if (ev.buttons <= 0) {
  271. endHandler()
  272. return;
  273. }
  274. const end = getOffset(ev, dom);
  275. move!({ start, end, prev, ev });
  276. prev = end;
  277. props.notPrevent || ev.preventDefault();
  278. };
  279. endHandler = (ev: PointerEvent) => {
  280. up && up(getOffset(ev, dom), ev);
  281. mount.removeEventListener("pointermove", moveHandler);
  282. mount.removeEventListener("pointerup", endHandler);
  283. props.notPrevent || ev.preventDefault();
  284. };
  285. move &&
  286. mount.addEventListener("pointermove", moveHandler, { passive: false });
  287. mount.addEventListener("pointerup", endHandler, { passive: false });
  288. };
  289. dom.addEventListener("pointerdown", downHandler, { passive: false });
  290. return () => {
  291. dom.removeEventListener("pointerdown", downHandler);
  292. moveHandler && mount.removeEventListener("pointermove", moveHandler);
  293. endHandler && mount.removeEventListener("pointerup", endHandler);
  294. };
  295. };
  296. export const getTouchScaleProps = (
  297. ev: TouchEvent,
  298. dom = ev.target! as HTMLElement
  299. ) => {
  300. const start = getOffset(ev, dom, 0);
  301. const end = getOffset(ev, dom, 1);
  302. const center = {
  303. x: (end.x + start.x) / 2,
  304. y: (end.y + start.y) / 2,
  305. };
  306. const initDist = lineLen(start, end);
  307. return {
  308. center,
  309. dist: initDist,
  310. };
  311. };
  312. export const touchScaleListener = (
  313. dom: HTMLElement,
  314. cb: (props: { center: Pos; scale: number }) => void
  315. ) => {
  316. const mount = document.documentElement;
  317. let moveHandler: (ev: TouchEvent) => void;
  318. let endHandler: (ev: TouchEvent) => void;
  319. const startHandler = (ev: TouchEvent) => {
  320. if (ev.changedTouches.length <= 1) return;
  321. let prevScale = getTouchScaleProps(ev, dom);
  322. ev.preventDefault();
  323. moveHandler = (ev: TouchEvent) => {
  324. if (ev.changedTouches.length <= 1) return;
  325. const curScale = getTouchScaleProps(ev, dom);
  326. cb({ center: prevScale.center, scale: curScale.dist / prevScale.dist });
  327. prevScale = curScale;
  328. ev.preventDefault();
  329. };
  330. endHandler = (ev: TouchEvent) => {
  331. mount.removeEventListener("touchmove", moveHandler);
  332. mount.removeEventListener("touchend", endHandler);
  333. ev.preventDefault();
  334. };
  335. mount.addEventListener("touchmove", moveHandler, {
  336. passive: false,
  337. });
  338. mount.addEventListener("touchend", endHandler, {
  339. passive: false,
  340. });
  341. };
  342. dom.addEventListener("touchstart", startHandler, { passive: false });
  343. return () => {
  344. dom.removeEventListener("touchstart", startHandler);
  345. mount.removeEventListener("touchmove", moveHandler);
  346. mount.removeEventListener("touchend", endHandler);
  347. };
  348. };
  349. export const wheelListener = (
  350. dom: HTMLElement,
  351. cb: (props: { center: Pos; scale: number }) => void
  352. ) => {
  353. const wheelHandler = (ev: WheelEvent) => {
  354. const scale = 1 - ev.deltaY / 1000;
  355. const center = { x: ev.offsetX, y: ev.offsetY };
  356. cb({ center, scale });
  357. ev.preventDefault();
  358. };
  359. dom.addEventListener("wheel", wheelHandler);
  360. return () => {
  361. dom.removeEventListener("wheel", wheelHandler);
  362. };
  363. };
  364. export const scaleListener = (
  365. dom: HTMLElement,
  366. cb: (props: { center: Pos; scale: number }) => void
  367. ) => mergeFuns(touchScaleListener(dom, cb), wheelListener(dom, cb));
  368. export const useViewer = installGlobalVar(() => {
  369. const stage = useStage();
  370. const viewer = new Viewer();
  371. const transform = ref(new Transform());
  372. const cursor = useCursor();
  373. const init = (dom: HTMLDivElement) => {
  374. viewer.move({x: 10, y: 0})
  375. const dragDestroy = dragListener(dom, {
  376. move: ({ end, prev, ev }) => {
  377. if (cursor.value !== "move") {
  378. viewer.movePixel({ x: end.x - prev.x, y: 0 });
  379. }
  380. },
  381. notPrevent: true,
  382. });
  383. const scaleDestroy = scaleListener(dom, (info) => {
  384. const currentScalex = viewer.viewMat.decompose().scaleX;
  385. const finalScale = currentScalex * info.scale;
  386. const scale = Math.min(Math.max(finalScale, 0.5), 8);
  387. if (cursor.value !== "move") {
  388. viewer.scalePixel(info.center, { x: scale / currentScalex, y: 1 });
  389. }
  390. });
  391. viewer.bus.on("transformChange", (newTransform) => {
  392. // console.log(newTransform.m)
  393. transform.value = newTransform;
  394. });
  395. transform.value = viewer.transform;
  396. return mergeFuns(dragDestroy, scaleDestroy);
  397. };
  398. return {
  399. var: {
  400. transform: transform,
  401. viewer,
  402. },
  403. onDestroy: globalWatch(
  404. () => stage.value?.getNode().container(),
  405. (dom, _, onCleanup) => {
  406. dom && onCleanup(init(dom));
  407. },
  408. { immediate: true }
  409. ),
  410. };
  411. }, Symbol("viewer"));
  412. export const useViewerTransform = installGlobalVar(() => {
  413. const viewer = useViewer();
  414. return viewer.transform;
  415. }, Symbol("viewTransform"));
  416. export const useViewerTransformConfig = () => {
  417. const transform = useViewerTransform();
  418. return computed(() => transform.value.decompose());
  419. };
  420. export const useViewerInvertTransform = () => {
  421. const transform = useViewerTransform();
  422. return computed(() => transform.value.copy().invert());
  423. };
  424. export const useViewerInvertTransformConfig = () => {
  425. const transform = useViewerInvertTransform();
  426. return computed(() => transform.value.decompose());
  427. };
  428. export const flatPositions = (positions: Pos[]) =>
  429. positions.flatMap((p) => [p.x, p.y]);
  430. export type PausePack<T extends object> = T & {
  431. pause: () => void;
  432. resume: () => void;
  433. isPause: boolean;
  434. };
  435. export const usePause = <T extends object>(api?: T): PausePack<T> => {
  436. const isPause = ref(false);
  437. const result = (api || {}) as PausePack<T>;
  438. Object.defineProperty(result, "isPause", {
  439. get() {
  440. return isPause.value;
  441. },
  442. set(v) {
  443. return true;
  444. },
  445. });
  446. result.pause = () => (isPause.value = true);
  447. result.resume = () => (isPause.value = false);
  448. return result;
  449. };
  450. const hoverPointer = (shape: EntityShape, cursor: ReturnType<typeof useCursor>) => {
  451. shape.on("pointerenter.hover", () => {
  452. if (downing) return;
  453. const pop = cursor.push("pointer");
  454. shape.on("pointerleave.hover", () => {
  455. pop();
  456. shape.off("pointerleave.hover");
  457. });
  458. });
  459. return () => {
  460. shape.off("pointerenter.hover pointerleave.hover");
  461. }
  462. }
  463. export const useClickHandler = (shape: Ref<DC<EntityShape> | undefined>, callback: () => void) => {
  464. watchEffect((onCleanup) => {
  465. if (!shape.value) return;
  466. const $shape = shape.value.getNode()
  467. let downPos:Pos | null
  468. const downHandler = (ev: KonvaEventObject<any>) => {
  469. downPos = getOffset(ev.evt)
  470. $shape.on('pointerup.clickHandler', upHandler)
  471. }
  472. const upHandler = (ev: KonvaEventObject<any>) => {
  473. const upPos = getOffset(ev.evt)
  474. if (lineLen(downPos!, upPos) < 0.01) {
  475. callback()
  476. }
  477. $shape.off('pointerup.clickHandler', upHandler)
  478. }
  479. $shape.on('pointerdown.clickHandler', downHandler)
  480. onCleanup(() => {
  481. $shape.off('pointerdown.clickHandler', downHandler)
  482. $shape.off('pointerup.clickHandler', upHandler)
  483. })
  484. })
  485. }
  486. let downing = false
  487. export const useHoverPointer = (shape: Ref<DC<EntityShape> | undefined>) => {
  488. const cursor = useCursor()
  489. watchEffect((onCleanup) => {
  490. if (shape.value) {
  491. console.error('shape.value', shape.value)
  492. onCleanup(hoverPointer(shape.value.getNode(), cursor))
  493. }
  494. })
  495. return cursor
  496. }
  497. export const useDrag = (
  498. shape: Ref<DC<EntityShape> | DC<EntityShape>[] | undefined>,
  499. ) => {
  500. const cursor = useCursor();
  501. const stage = useStage();
  502. const drag = ref<Pos & { ndx: number }>();
  503. const invMat = useViewerInvertTransform();
  504. const init = (shape: EntityShape, dom: HTMLDivElement, ndx: number) => {
  505. console.log(shape)
  506. shape.on("pointerenter.drag", () => {
  507. if (downing) return;
  508. const pop = cursor.push("pointer");
  509. shape.on("pointerleave.drag", () => {
  510. pop();
  511. shape.off("pointerleave.drag");
  512. });
  513. });
  514. let pop: (() => void) | null = null;
  515. let start = { x: 0, y: 0 }
  516. shape.on("pointerdown.drag", (ev) => {
  517. downing = true
  518. pop = cursor.push("move")
  519. start = invMat.value.point(getOffset(ev.evt, stage.value!.getNode().container()));
  520. shape.draggable(true);
  521. });
  522. shape.dragBoundFunc(function (this: any, _: any, ev: MouseEvent) {
  523. if (ev.buttons <= 0) return upHandler()
  524. const current = invMat.value.point(getOffset(ev, stage.value!.getNode().container()));
  525. drag.value = {
  526. x: current.x - start.x,
  527. y: current.y - start.y,
  528. ndx,
  529. };
  530. start = current
  531. return this.absolutePosition();
  532. });
  533. const upHandler = () => {
  534. downing = false
  535. pop && pop();
  536. pop = null;
  537. drag.value = undefined;
  538. shape.draggable(false);
  539. }
  540. return mergeFuns(
  541. listener(document.documentElement, "pointerup", upHandler),
  542. () => {
  543. shape.off("pointerenter.drag pointerleave.drag pointerdown.drag");
  544. if (pop) {
  545. pop();
  546. shape.draggable(false);
  547. }
  548. }
  549. );
  550. };
  551. const result = usePause({
  552. drag,
  553. stop: () => {
  554. stopWatch();
  555. },
  556. });
  557. const stopWatch = watch(
  558. () => {
  559. const shapes = shape.value
  560. ? Array.isArray(shape.value)
  561. ? [...shape.value]
  562. : [shape.value]
  563. : [];
  564. return shapes.filter((item) => !!item)
  565. },
  566. (shapes, _, onCleanup) => {
  567. onCleanup(
  568. mergeFuns(
  569. shapes.map((shape, ndx) =>
  570. watchEffect((onCleanup) => {
  571. if (!result.isPause && shape?.getNode() && stage.value?.getNode) {
  572. onCleanup(
  573. init(
  574. shape?.getNode(),
  575. stage.value?.getNode().container(),
  576. ndx
  577. )
  578. );
  579. }
  580. })
  581. )
  582. )
  583. );
  584. },
  585. { immediate: true }
  586. );
  587. return result;
  588. };
  589. const stageHoverMap = new WeakMap<
  590. Stage,
  591. { result: Ref<EntityShape | undefined>; count: number; des: () => void }
  592. >();
  593. export const getHoverShape = (stage: Stage) => {
  594. let isStop = false;
  595. const stop = () => {
  596. if (isStop || !stageHoverMap.has(stage)) return;
  597. isStop = true;
  598. const data = stageHoverMap.get(stage)!;
  599. if (--data.count <= 0) {
  600. data.des();
  601. }
  602. };
  603. if (stageHoverMap.has(stage)) {
  604. const data = stageHoverMap.get(stage)!;
  605. ++data.count;
  606. return [data.result, stop] as const;
  607. }
  608. const hover = ref<EntityShape>();
  609. const enterHandler = (ev: KonvaEventObject<any, Stage>) => {
  610. const target = ev.target;
  611. hover.value = target;
  612. target.off(`pointerleave`, leaveHandler);
  613. target.on(`pointerleave`, leaveHandler as any);
  614. };
  615. const leaveHandler = () => {
  616. if (hover.value) {
  617. hover.value.off(`pointerleave`, leaveHandler);
  618. hover.value = undefined;
  619. }
  620. };
  621. stage.on(`pointerenter`, enterHandler);
  622. stageHoverMap.set(stage, {
  623. result: hover,
  624. count: 1,
  625. des: () => {
  626. stage.off(`pointerenter`, enterHandler);
  627. leaveHandler();
  628. stageHoverMap.delete(stage);
  629. },
  630. });
  631. return [hover, stop] as const;
  632. };
  633. export const useShapeIsHover = (shape: Ref<DC<EntityShape> | undefined>) => {
  634. const stage = useStage();
  635. const isHover = ref(false);
  636. const stop = watch(
  637. () => ({ stage: stage.value?.getNode(), shape: shape.value?.getNode() }),
  638. ({ stage, shape }, _, onCleanup) => {
  639. if (!stage || !shape || result.isPause) {
  640. isHover.value = false;
  641. return;
  642. }
  643. const [hoverShape, stopHoverListener] = getHoverShape(stage);
  644. watchEffect(() => {
  645. isHover.value = !!(
  646. hoverShape.value && shapeTreeContain([shape], toRaw(hoverShape.value))
  647. );
  648. });
  649. onCleanup(stopHoverListener);
  650. },
  651. { immediate: true }
  652. );
  653. const result = usePause([isHover, stop] as const);
  654. return result;
  655. };
  656. export const shapeTreeContain = (
  657. parent: EntityShape | EntityShape[],
  658. target: EntityShape,
  659. checked: EntityShape[] = []
  660. ) => {
  661. const eq = Array.isArray(parent)
  662. ? (shape: EntityShape) => parent.includes(shape)
  663. : (shape: EntityShape) => parent === shape;
  664. return shapeParentsEq(target, eq, checked);
  665. };
  666. export const shapeParentsEq = (
  667. target: EntityShape,
  668. eq: (shape: EntityShape) => boolean,
  669. checked: EntityShape[] = []
  670. ) => {
  671. while (target) {
  672. if (checked.includes(target)) return null;
  673. if (eq(target)) {
  674. return target;
  675. }
  676. target = target.parent as any;
  677. }
  678. return null;
  679. };