10499286139

Committed 21 Aug 2024 11:59PM UTC coverage: 25.53% (-2.0%) from 27.541%

Build # 10499286139

Build Type

push

github

Committed by

caleb531

Commit Message

Convert components to JSX

Run Details

72 of 100 branches covered (72.0%)

Branch coverage included in aggregate %.

0 of 743 new or added lines in 22 files covered. (0.0%)

54 existing lines in 21 files now uncovered.

386 of 1694 relevant lines covered (22.79%)

6.85 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/scripts/components/timeline.jsx

import clsx from "clsx";
import FrameComponent from "./frame.jsx";

const FRAME_THUMBNAIL_WIDTH = 128;
const FRAME_THUMBNAIL_HEIGHT = 72;

class TimelineComponent {
  async selectThumbnail(target, story) {
    if (target.dataset.index) {
      story.selectFrame(Number(target.dataset.index));
      this.scrollSelectedThumbnailIntoView(target);
      await story.save();
    }
  }

  scrollSelectedThumbnailIntoView(thumbnailElement) {
    if (thumbnailElement.classList.contains("selected")) {
      let timelineElement = thumbnailElement.parentElement;
      let scrollLeft = timelineElement.scrollLeft;
      let scrollRight = scrollLeft + timelineElement.offsetWidth;
      let offsetLeft = thumbnailElement.offsetLeft;
      let offsetRight =
        thumbnailElement.offsetLeft + thumbnailElement.offsetWidth;

      // If the visible timeline is not wide enough to show a full thumbnail,
      // do nothing
      if (timelineElement.offsetWidth < thumbnailElement.offsetWidth) {
        return;
      }

      if (offsetRight > scrollRight) {
        timelineElement.scrollLeft += offsetRight - scrollRight;
      } else if (offsetLeft < scrollLeft) {
        timelineElement.scrollLeft += offsetLeft - scrollLeft;
      }
    }
  }

  handleFrameDragstart(event) {
    if (event.target.dataset.index) {
      this.oldFrameIndex = Number(event.target.dataset.index);
    }
    event.redraw = false;
  }

  async handleFrameDragenter(event, story) {
    event.preventDefault();
    event.redraw = false;
    if (event.target.dataset.index) {
      this.newFrameIndex = Number(event.target.dataset.index);
      if (this.newFrameIndex !== story.selectedFrameIndex) {
        story.moveFrame(this.oldFrameIndex, this.newFrameIndex);
        story.selectFrame(this.newFrameIndex);
        this.oldFrameIndex = this.newFrameIndex;
        await story.save();
        // Do not defer the next redraw
        delete event.redraw;
      }
    }
  }

  handleFrameDragover(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
    event.redraw = false;
  }

  handleFrameDrop(event) {
    // This placeholder handler simply exists to allow Mithril to automatically
    // redraw the timeline when the thumbnail is dropped into its new location
    // (simply by virtue of the event listener existing)
  }

  view({ attrs: { story } }) {
    return (
      <ol
        className="timeline"
        onclick={({ target }) => this.selectThumbnail(target, story)}
        ondragstart={(event) => this.handleFrameDragstart(event)}
        ondragover={(event) => this.handleFrameDragover(event, story)}
        ondragenter={(event) => this.handleFrameDragenter(event, story)}
        ondrop={(event) => this.handleFrameDrop(event, story)}
      >
        {story.frames.map((frame, f) => {
          return (
            <li
              draggable={true}
              key={`timeline-thumbnail-${frame.temporaryId}`}
              oncreate={({ dom }) => this.scrollSelectedThumbnailIntoView(dom)}
              onupdate={({ dom }) => this.scrollSelectedThumbnailIntoView(dom)}
              className={clsx("timeline-thumbnail", {
                selected: story.selectedFrameIndex === f,
              })}
              data-index={f}
            >
              <FrameComponent
                className="timeline-thumbnail-canvas"
                frame={frame}
                width={FRAME_THUMBNAIL_WIDTH}
                height={FRAME_THUMBNAIL_HEIGHT}
              />
            </li>
          );
        })}
      </ol>
    );
  }
}

export default TimelineComponent;

NEW 1	import clsx from "clsx";	×
NEW 2	import FrameComponent from "./frame.jsx";	×
3
4	const FRAME_THUMBNAIL_WIDTH = 128;	×
5	const FRAME_THUMBNAIL_HEIGHT = 72;	×
6
7	class TimelineComponent {	×
UNCOV 8	async selectThumbnail(target, story) {	×
9	if (target.dataset.index) {	×
10	story.selectFrame(Number(target.dataset.index));	×
11	this.scrollSelectedThumbnailIntoView(target);	×
12	await story.save();	×
13	}	×
14	}	×
15
16	scrollSelectedThumbnailIntoView(thumbnailElement) {	×
NEW 17	if (thumbnailElement.classList.contains("selected")) {	×
18	let timelineElement = thumbnailElement.parentElement;	×
19	let scrollLeft = timelineElement.scrollLeft;	×
20	let scrollRight = scrollLeft + timelineElement.offsetWidth;	×
21	let offsetLeft = thumbnailElement.offsetLeft;	×
NEW 22	let offsetRight =	×
NEW 23	thumbnailElement.offsetLeft + thumbnailElement.offsetWidth;	×
24
25	// If the visible timeline is not wide enough to show a full thumbnail,
26	// do nothing
27	if (timelineElement.offsetWidth < thumbnailElement.offsetWidth) {	×
28	return;	×
29	}	×
30
31	if (offsetRight > scrollRight) {	×
32	timelineElement.scrollLeft += offsetRight - scrollRight;	×
33	} else if (offsetLeft < scrollLeft) {	×
34	timelineElement.scrollLeft += offsetLeft - scrollLeft;	×
35	}	×
36	}	×
37	}	×
38
39	handleFrameDragstart(event) {	×
40	if (event.target.dataset.index) {	×
41	this.oldFrameIndex = Number(event.target.dataset.index);	×
42	}	×
43	event.redraw = false;	×
44	}	×
45
46	async handleFrameDragenter(event, story) {	×
47	event.preventDefault();	×
48	event.redraw = false;	×
49	if (event.target.dataset.index) {	×
50	this.newFrameIndex = Number(event.target.dataset.index);	×
51	if (this.newFrameIndex !== story.selectedFrameIndex) {	×
52	story.moveFrame(this.oldFrameIndex, this.newFrameIndex);	×
53	story.selectFrame(this.newFrameIndex);	×
54	this.oldFrameIndex = this.newFrameIndex;	×
55	await story.save();	×
56	// Do not defer the next redraw
57	delete event.redraw;	×
58	}	×
59	}	×
60	}	×
61
62	handleFrameDragover(event) {	×
63	event.preventDefault();	×
NEW 64	event.dataTransfer.dropEffect = "move";	×
65	event.redraw = false;	×
66	}	×
67
68	handleFrameDrop(event) {	×
69	// This placeholder handler simply exists to allow Mithril to automatically
70	// redraw the timeline when the thumbnail is dropped into its new location
71	// (simply by virtue of the event listener existing)
72	}	×
73
NEW 74	view({ attrs: { story } }) {	×
NEW 75	return (	×
NEW 76	<ol	×
NEW 77	className="timeline"	×
NEW 78	onclick={({ target }) => this.selectThumbnail(target, story)}	×
NEW 79	ondragstart={(event) => this.handleFrameDragstart(event)}	×
NEW 80	ondragover={(event) => this.handleFrameDragover(event, story)}	×
NEW 81	ondragenter={(event) => this.handleFrameDragenter(event, story)}	×
NEW 82	ondrop={(event) => this.handleFrameDrop(event, story)}	×
83	>
NEW 84	{story.frames.map((frame, f) => {	×
NEW 85	return (	×
NEW 86	<li	×
NEW 87	draggable={true}	×
NEW 88	key={`timeline-thumbnail-${frame.temporaryId}`}	×
NEW 89	oncreate={({ dom }) => this.scrollSelectedThumbnailIntoView(dom)}	×
NEW 90	onupdate={({ dom }) => this.scrollSelectedThumbnailIntoView(dom)}	×
NEW 91	className={clsx("timeline-thumbnail", {	×
NEW 92	selected: story.selectedFrameIndex === f,	×
NEW 93	})}	×
NEW 94	data-index={f}	×
95	>
NEW 96	<FrameComponent	×
NEW 97	className="timeline-thumbnail-canvas"	×
NEW 98	frame={frame}	×
NEW 99	width={FRAME_THUMBNAIL_WIDTH}	×
NEW 100	height={FRAME_THUMBNAIL_HEIGHT}	×
NEW 101	/>	×
NEW 102	</li>	×
103	);
NEW 104	})}	×
NEW 105	</ol>	×
106	);
UNCOV 107	}	×
UNCOV 108	}	×
109
110	export default TimelineComponent;	×

caleb531 / flip-book / 10499286139

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous