10498848679

Committed 21 Aug 2024 11:10PM UTC coverage: 26.831% (+2.8%) from 24.055%

Build # 10498848679

Build Type

push

github

Committed by

caleb531

Commit Message

Rename components to have *.jsx extension

This is a preliminary step to the actual conversion to JSX.

Run Details

72 of 102 branches covered (70.59%)

Branch coverage included in aggregate %.

0 of 65 new or added lines in 17 files covered. (0.0%)

386 of 1605 relevant lines covered (24.05%)

7.23 hits per line

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

0.0

/scripts/components/timeline.jsx

import m from 'mithril';
import classNames from '../classnames.js';
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 m('ol.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 m('li.timeline-thumbnail', {
        draggable: true,
        // Keying each thumbnail prevents the canvas redraws from compounding
        key: `timeline-thumbnail-${frame.temporaryId}`,
        // Scroll newly-added frames into view
        oncreate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
        // Scroll selected frame into view when navigating frames (Prev/Next)
        onupdate: ({dom}) => this.scrollSelectedThumbnailIntoView(dom),
        class: classNames({'selected': story.selectedFrameIndex === f}),
        'data-index': f
      }, m(FrameComponent, {
        className: 'timeline-thumbnail-canvas',
        frame,
        width: FRAME_THUMBNAIL_WIDTH,
        height: FRAME_THUMBNAIL_HEIGHT
      }));
    }));
  }

}

export default TimelineComponent;

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

caleb531 / flip-book / 10498848679

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