From 17f8fd8f666e3b3013908caf90cd81eb74f303a9 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Wed, 26 Aug 2020 14:52:08 +0300 Subject: [PATCH 01/23] Created a grid view for boards preview --- src/css/mainwindow.css | 41 ++++++ src/css/storyboarder-sketch-pane.css | 1 - src/js/window/main-window.js | 180 +++++++++++++++++++++++++++ 3 files changed, 221 insertions(+), 1 deletion(-) diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 6be781e6d1..5eca5f281e 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -1004,3 +1004,44 @@ input[type=range]:focus::-webkit-slider-runnable-track { -webkit-user-drag: none; user-drag: none; } + + +.grid-view { + /*transform: scale(0.0,0.0) translate(0,0);*/ + /*transform-origin: 0 0;*/ + position: relative; + /* background: white; */ + /*border-radius: 13px;*/ + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); + flex-shrink: 0; + width: 100%; + height: 100%; + padding: 10px; + overflow: auto; + grid-column-gap: 50px; + grid-row-gap: 50px; + display: grid; + grid-template-columns: auto auto auto; +} + +.thumbnail { + flex: 1; + background: #444; + padding: 5px; + margin-right: 0px; + font-size: 10px; + color: #888; + font-weight: 100; + box-shadow: 0 1px 1px rgba(0,0,0,0.2); + transition: all 0s ease-in-out; +} + +.thumbnail.selected { + background: #8d89cf; + color: #000; + top: 0px; + position: relative; + transition: all 0s ease-out; + box-shadow: none; + z-index: 999; +} \ No newline at end of file diff --git a/src/css/storyboarder-sketch-pane.css b/src/css/storyboarder-sketch-pane.css index d043c1fba8..42229c79c3 100644 --- a/src/css/storyboarder-sketch-pane.css +++ b/src/css/storyboarder-sketch-pane.css @@ -7,7 +7,6 @@ #storyboarder-sketch-pane { flex: 1; - display: flex; position: relative; width: 100%; height: 100%; diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 0f99801376..9a092eda65 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -6522,16 +6522,186 @@ const updateSceneFromScript = async () => { renderScript() } +const setSketchPaneVisibility = (isVisible) => { + let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + let container = storyboarderSketchPane.getElementsByClassName("container")[0] + if(isVisible) { + container.style["visibility"] = "visible"; + container.style["position"] = "relative"; + } else { + container.style["position"] = "absolute"; + container.style["visibility"] = "hidden"; + } +} + + +const renderGridView = () => { + setSketchPaneVisibility(false) + let gridContainer = document.createElement("div") + let hasShots = boardData.boards.find(board => board.newShot) != null + let html = [] + let i = 0 + for (let board of boardData.boards) { + html.push('
') + let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) + try { + if (fs.existsSync(imageFilename)) { + html.push('
') + let src = imageFilename + '?' + getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) + html.push('') + html.push('
') + } else { + // blank image + html.push(`') + } + } catch (err) { + log.error(err) + } + html.push('
') + html.push('
' + board.shot + '
') + if (board.audio && board.audio.filename.length) { + html.push(` +
+ + + +
+ `) + } + html.push('
') + if (board.dialogue) { + html.push(board.dialogue) + } + html.push('
') + if (board.duration) { + html.push(util.msToTime(board.duration)) + } else { + html.push(util.msToTime(boardData.defaultBoardTiming)) + } + html.push('
') + html.push('
') + html.push('
') + i++ + } + gridContainer.innerHTML = html.join('') + gridContainer.className = "grid-view" + let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + storyboarderSketchPane.appendChild(gridContainer) + + + let thumbnails = gridContainer.querySelectorAll('.thumbnail') + console.log(thumbnails) + for (let j = 0; j < thumbnails.length; j++) { + let thumb = thumbnails[j] + console.log(thumb) + thumb.addEventListener('pointerenter', (e) => { + if (!isEditMode && selections.size <= 1 && e.currentTarget.dataset.thumbnail === currentBoard) { + contextMenu.attachTo(e.currentTarget) + } + }) + thumb.addEventListener('pointerleave', (e) => { + if (!contextMenu.hasChild(e.relatedTarget)) { + contextMenu.remove() + } + }) + thumb.addEventListener('pointermove', (e) => { + if (!isEditMode && selections.size <= 1 && e.currentTarget.dataset.thumbnail === currentBoard) { + contextMenu.attachTo(e.currentTarget) + } + }) + thumb.addEventListener('pointerdown', (e) => { + log.info('DOWN') + if (!isEditMode && selections.size <= 1) contextMenu.attachTo(e.currentTarget) + + // always track cursor position + updateThumbnailCursor(e.clientX, e.clientY) + + if (e.button === 0) { + editModeTimer = setTimeout(enableEditMode, enableEditModeDelay) + } else { + enableEditMode() + } + + let index = Number(e.currentTarget.dataset.thumbnail) + if (selections.has(index)) { + // ignore + } else if (isCommandPressed('workspace:thumbnails:select-multiple-modifier')) { + if (selections.size === 0 && !util.isUndefined(currentBoard)) { + // use currentBoard as starting point + selections.add(currentBoard) + } + + // add to selections + let min = Math.min(...selections, index) + let max = Math.max(...selections, index) + selections = new Set(util.range(min, max)) + + renderThumbnailDrawerSelections() + } else if (currentBoard !== index) { + // go to board by index + + // reset selections + selections.clear() + console.log(e) + log.info(`Current board ${currentBoard} and index ${index}`) + saveImageFile().then(() => { + currentBoard = index + renderThumbnailDrawerSelections() + gotoBoard(currentBoard) + }) + } + }, true, true) + } +} +const cleanUpGridView = () => { + let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + let gridView = storyboarderSketchPane.querySelector(".grid-view") + if(!gridView) return + storyboarderSketchPane.removeChild(gridView) +} +// TODO(): Find a better way to switch modes +let isGridViewMode = false const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { let style = { display: show ? 'flex' : 'none' } const onBoardsSelect = () => { + isGridViewMode = false shouldRenderThumbnailDrawer = false + setSketchPaneVisibility(true) renderThumbnailDrawer() + cleanUpGridView() } const onTimelineSelect = () => { + isGridViewMode = false + shouldRenderThumbnailDrawer = true + setSketchPaneVisibility(true) + renderThumbnailDrawer() + cleanUpGridView() + } + const onGridViewSelect = () => { shouldRenderThumbnailDrawer = true + isGridViewMode = true renderThumbnailDrawer() + renderGridView() } return h( @@ -6554,6 +6724,16 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { ['use', { xlinkHref: './img/symbol-defs.svg#timeline-timeline' }] ], ['span', 'Timeline'] + ], + ['div.spacer'], + ['div.btn', { + className: isGridViewMode ? 'selected' : null, + onPointerUp: onGridViewSelect + }, + ['svg', { className: 'icon' }, + ['use', { xlinkHref: './img/symbol-defs.svg#timeline-timeline' }] + ], + ['span', 'Grid View'] ] ] ) From edd14c6b364fa2b7dadbcc81b317ca2a922b68e3 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Thu, 27 Aug 2020 10:49:29 +0300 Subject: [PATCH 02/23] Fixed initial board selection --- src/js/window/main-window.js | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 9a092eda65..8847dbba4f 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -3937,6 +3937,7 @@ const renderSceneTimeline = () => { let renderThumbnailDrawer = () => { updateSceneTiming() + isGridViewMode && renderGridView() // reflect the current view cycleViewMode(0) @@ -4009,7 +4010,8 @@ let renderThumbnailDrawer = () => { html.push('') i++ } - document.querySelector('#thumbnail-drawer').innerHTML = html.join('') + let thumbnailDrawer = document.querySelector('#thumbnail-drawer') + thumbnailDrawer.innerHTML = html.join('') renderThumbnailButtons() @@ -4072,7 +4074,7 @@ let renderThumbnailDrawer = () => { }) } - let thumbnails = document.querySelectorAll('.thumbnail') + let thumbnails = thumbnailDrawer.querySelectorAll('.thumbnail') for (var thumb of thumbnails) { thumb.addEventListener('pointerenter', (e) => { if (!isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { @@ -6536,29 +6538,13 @@ const setSketchPaneVisibility = (isVisible) => { const renderGridView = () => { + cleanUpGridView() setSketchPaneVisibility(false) let gridContainer = document.createElement("div") - let hasShots = boardData.boards.find(board => board.newShot) != null let html = [] let i = 0 for (let board of boardData.boards) { html.push('
') @@ -6609,10 +6595,8 @@ const renderGridView = () => { let thumbnails = gridContainer.querySelectorAll('.thumbnail') - console.log(thumbnails) for (let j = 0; j < thumbnails.length; j++) { let thumb = thumbnails[j] - console.log(thumb) thumb.addEventListener('pointerenter', (e) => { if (!isEditMode && selections.size <= 1 && e.currentTarget.dataset.thumbnail === currentBoard) { contextMenu.attachTo(e.currentTarget) @@ -6671,6 +6655,8 @@ const renderGridView = () => { } }, true, true) } + + renderThumbnailDrawerSelections() } const cleanUpGridView = () => { let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") From c73dd3a5bfa8f05b6167ce62d0a2aeaad58d7209 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Thu, 27 Aug 2020 16:17:43 +0300 Subject: [PATCH 03/23] Added element arrow highlight --- src/css/mainwindow.css | 23 ++++++++ src/js/window/main-window.js | 104 +++++++++++++++++++++++++++++++++-- src/main-window.html | 1 + 3 files changed, 124 insertions(+), 4 deletions(-) diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 5eca5f281e..2bf40b3059 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -203,6 +203,29 @@ body::-webkit-scrollbar { animation-name: bounce; } +#grid-view-cursor { + position: relative; + top: 0; + left: 0; + margin-top: 7px; + + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 10px solid #999; + transition: left .1s ease-in; + animation-delay: 0s; + animation-duration: 0.5s; + animation-timing-function: ease-in; + animation-iteration-count: infinite; + animation-name: bounce; +} +#grid-cursor-container { + position: absolute; + z-index: 9999; +} + @keyframes bounce { 0% { top: 5px; diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 8847dbba4f..ad53a366b2 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -1083,6 +1083,7 @@ const loadBoardUI = async () => { window.addEventListener('pointerup', (e)=>{ if (dragMode) { + console.log("disable dragmode") disableDragMode() preventDragMode = false } @@ -4449,6 +4450,8 @@ let updateDrag = () => { setDragTarget(lastPointer.x) updateThumbnailCursor(lastPointer.x, lastPointer.y) renderThumbnailCursor() + isGridViewMode && updateGridViewCursor(lastPointer.x, lastPointer.y) + isGridViewMode && renderGridViewCursor() } } @@ -6017,8 +6020,11 @@ let enableEditMode = () => { if (!isEditMode && selections.size) { isEditMode = true thumbnailCursor.visible = true + gridViewCursor.visible = true renderThumbnailCursor() + isGridViewMode && renderGridViewCursor() renderThumbnailDrawerSelections() + isGridViewMode && renderGridViewCursor() contextMenu.remove() sfx.positive() sfx.playEffect('on') @@ -6032,7 +6038,9 @@ let disableEditMode = () => { sfx.negative() isEditMode = false thumbnailCursor.visible = false + gridViewCursor.visible = false renderThumbnailCursor() + isGridViewMode && renderGridViewCursor() renderThumbnailDrawerSelections() } } @@ -6040,7 +6048,6 @@ let disableEditMode = () => { let thumbnailFromPoint = (x, y, offset) => { if (!offset) { offset = 0 } let el = document.elementFromPoint(x-offset, y) - if (!el || !el.classList.contains('thumbnail')) return null // if part of a multi-selection, base from right-most element @@ -6536,11 +6543,98 @@ const setSketchPaneVisibility = (isVisible) => { } } +//#region Grid view +let gridViewFromPoint = (x, y, offset) => { + if (!offset) { offset = 0 } + let el = document.elementFromPoint(x-offset, y) + if (!el) return null + + // if part of a multi-selection, base from right-most element + if (selections.has(Number(el.dataset.thumbnail))) { + // base from the right-most thumbnail in the selection + let rightMost = Math.max(...selections) + let rightMostEl = document.querySelector('#thumbnail-drawer div[data-thumbnail="' + rightMost + '"]') + el = rightMostEl + } + + return el +} + +let gridViewCursor = { + visible: false, + x: 0, + el: null +} +let updateGridViewCursor = (x, y) => { + // let shouldRenderThumbnailDrawer = false + if (!shouldRenderThumbnailDrawer) return + +/* if (isBeforeFirstThumbnail(x, y)) { + thumbnailCursor.x = 0 + thumbnailCursor.el = null + return + } */ + + let el = gridViewFromPoint(x, y) + let offset = 0 + if (el) { + offset = el.getBoundingClientRect().width + el = gridViewFromPoint(x, y, offset/2) + } + + if (el) gridViewCursor.el = el // only update if found + if (!el) return + + // store a reference to the nearest thumbnail + gridViewCursor.el = el + + let elementOffsetX = el.getBoundingClientRect().right + + let elementOffsetY = el.getBoundingClientRect().top + + // is this an end shot? + if (el.classList.contains('endShot')) { + elementOffsetX += 5 + } + + let arrowOffsetX = 8 + let arrowOffsetY = -8 + console.log("gridViewCursor", gridViewCursor) + gridViewCursor.x = elementOffsetX + arrowOffsetX + + gridViewCursor.y = elementOffsetY + arrowOffsetY +} + +let renderGridViewCursor = () => { + let el = document.querySelector('#grid-cursor-container') + if (el) { // shouldRenderThumbnailDrawer + if (gridViewCursor.visible) { + el.style.display = '' + el.style.left = gridViewCursor.x + 'px' + el.style.top = gridViewCursor.y + 'px' + } else { + el.style.display = 'none' + el.style.left = '0px' + } + } +} +const gridDrag = (e)=>{ + if (e.pointerType == 'pen' || e.pointerType == 'mouse') { + dragTarget = document.querySelector('.grid-view') + dragTarget.style.overflow = 'hidden' + dragTarget.style.scrollBehavior = 'unset' + dragMode = true + dragPoint = [e.pageX, e.pageY] + scrollPoint = [dragTarget.scrollLeft, dragTarget.scrollTop] + periodicDragUpdate() + } +} const renderGridView = () => { cleanUpGridView() setSketchPaneVisibility(false) let gridContainer = document.createElement("div") + let html = [] let i = 0 for (let board of boardData.boards) { @@ -6590,6 +6684,7 @@ const renderGridView = () => { } gridContainer.innerHTML = html.join('') gridContainer.className = "grid-view" + gridContainer.addEventListener('pointerdown', gridDrag) let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") storyboarderSketchPane.appendChild(gridContainer) @@ -6617,7 +6712,7 @@ const renderGridView = () => { if (!isEditMode && selections.size <= 1) contextMenu.attachTo(e.currentTarget) // always track cursor position - updateThumbnailCursor(e.clientX, e.clientY) + updateGridViewCursor(e.clientX, e.clientY) if (e.button === 0) { editModeTimer = setTimeout(enableEditMode, enableEditModeDelay) @@ -6645,8 +6740,6 @@ const renderGridView = () => { // reset selections selections.clear() - console.log(e) - log.info(`Current board ${currentBoard} and index ${index}`) saveImageFile().then(() => { currentBoard = index renderThumbnailDrawerSelections() @@ -6662,10 +6755,13 @@ const cleanUpGridView = () => { let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") let gridView = storyboarderSketchPane.querySelector(".grid-view") if(!gridView) return + gridView.removeEventListener("pointerdown", gridDrag) + storyboarderSketchPane.removeChild(gridView) } // TODO(): Find a better way to switch modes let isGridViewMode = false +//#endregion const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { let style = { display: show ? 'flex' : 'none' } diff --git a/src/main-window.html b/src/main-window.html index f5eeaf5e7d..197fbaafb5 100644 --- a/src/main-window.html +++ b/src/main-window.html @@ -256,6 +256,7 @@
+
From f09f8b47e4fd704ad90ae5806740222541039e29 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Fri, 28 Aug 2020 10:16:11 +0300 Subject: [PATCH 04/23] Implemented grid view drag and drop --- src/css/mainwindow.css | 39 ++++++++++++++++++++++++++++++--- src/js/window/main-window.js | 42 ++++++++++++++++++++++++++++-------- 2 files changed, 69 insertions(+), 12 deletions(-) diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 2bf40b3059..8be4c5fff5 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -1028,7 +1028,7 @@ input[type=range]:focus::-webkit-slider-runnable-track { user-drag: none; } - +/* The grid view styles */ .grid-view { /*transform: scale(0.0,0.0) translate(0,0);*/ /*transform-origin: 0 0;*/ @@ -1047,7 +1047,7 @@ input[type=range]:focus::-webkit-slider-runnable-track { grid-template-columns: auto auto auto; } -.thumbnail { +.grid-view .thumbnail { flex: 1; background: #444; padding: 5px; @@ -1059,7 +1059,7 @@ input[type=range]:focus::-webkit-slider-runnable-track { transition: all 0s ease-in-out; } -.thumbnail.selected { +.grid-view .thumbnail.selected { background: #8d89cf; color: #000; top: 0px; @@ -1067,4 +1067,37 @@ input[type=range]:focus::-webkit-slider-runnable-track { transition: all 0s ease-out; box-shadow: none; z-index: 999; +} + +.grid-view img { + background: white; + border-radius: 3px; + position: relative; + box-shadow: none; +} + +.grid-view img:after { + content: ""; + position: absolute; + z-index: 2; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + background: white; + border-radius: 3px; +} + +.grid-view .thumbnail * { + pointer-events: none; +} + +.grid-view .thumbnail.selected.editing { + background: #999; + top: -10px; + position: relative; + color: #000; + transition: all .05s ease-in; + box-shadow: 0px 10px 0px rgba(0,0,0,0.1); } \ No newline at end of file diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index ad53a366b2..d4e58f8c2e 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -1093,15 +1093,22 @@ const loadBoardUI = async () => { // log.info('pointerup', isEditMode) if (isEditMode) { + let x = e.clientX, y = e.clientY // 1) try to find nearest thumbnail, otherwise, // HACK 2) try to find last known thumbnail position let el = thumbnailFromPoint(x, y) || thumbnailCursor.el + + if(isGridViewMode) { + el = gridViewFromPoint(x, y) || gridViewCursor.el + } else { + el = thumbnailFromPoint(x, y) || thumbnailCursor.el + } let offset = 0 if (el) { offset = el.getBoundingClientRect().width - el = thumbnailFromPoint(x, y, offset/2) + el = !isGridViewMode ? thumbnailFromPoint(x, y, offset/2) : gridViewFromPoint(x, y, offset/2) } if (!el) { @@ -1125,6 +1132,7 @@ const loadBoardUI = async () => { } renderThumbnailDrawer() + isGridViewMode && renderGridView() gotoBoard(currentBoard, true) }) } else { @@ -1132,6 +1140,7 @@ const loadBoardUI = async () => { } disableEditMode() + } }) @@ -6547,8 +6556,7 @@ const setSketchPaneVisibility = (isVisible) => { let gridViewFromPoint = (x, y, offset) => { if (!offset) { offset = 0 } let el = document.elementFromPoint(x-offset, y) - if (!el) return null - + if (!el || !el.classList.contains('thumbnail')) return null // if part of a multi-selection, base from right-most element if (selections.has(Number(el.dataset.thumbnail))) { // base from the right-most thumbnail in the selection @@ -6591,6 +6599,7 @@ let updateGridViewCursor = (x, y) => { let elementOffsetX = el.getBoundingClientRect().right let elementOffsetY = el.getBoundingClientRect().top + let scrollTop = el.scrollTop // is this an end shot? if (el.classList.contains('endShot')) { @@ -6599,10 +6608,9 @@ let updateGridViewCursor = (x, y) => { let arrowOffsetX = 8 let arrowOffsetY = -8 - console.log("gridViewCursor", gridViewCursor) gridViewCursor.x = elementOffsetX + arrowOffsetX - gridViewCursor.y = elementOffsetY + arrowOffsetY + gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop } let renderGridViewCursor = () => { @@ -6634,11 +6642,27 @@ const renderGridView = () => { cleanUpGridView() setSketchPaneVisibility(false) let gridContainer = document.createElement("div") - + let hasShots = boardData.boards.find(board => board.newShot) != null let html = [] let i = 0 for (let board of boardData.boards) { - html.push('
') @@ -6647,11 +6671,11 @@ const renderGridView = () => { if (fs.existsSync(imageFilename)) { html.push('
') let src = imageFilename + '?' + getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) - html.push('') + html.push('') html.push('
') } else { // blank image - html.push(`') + html.push(`') } } catch (err) { log.error(err) From c294e9430bd7bd5c1dd37c10681f17f970643b62 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Fri, 28 Aug 2020 13:47:37 +0300 Subject: [PATCH 05/23] Decoupled grid-view --- src/js/window/components/GridView/index.js | 256 ++++++++++++++++++ src/js/window/main-window.js | 290 +++------------------ 2 files changed, 296 insertions(+), 250 deletions(-) create mode 100644 src/js/window/components/GridView/index.js diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js new file mode 100644 index 0000000000..9ea3123d1b --- /dev/null +++ b/src/js/window/components/GridView/index.js @@ -0,0 +1,256 @@ +const path = require('path') +const log = require('electron-log') +const fs = require('fs-extra') +const util = require('../../../utils/index') +let enableEditModeDelay = 750 // msecs +class GridView { + constructor(boardData, boardPath, saveImageFile, getSelections, + getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, + gotoBoard, gridDrag, setSketchPaneVisibility, getEtag, boardModel, setEditorModeTimer) { + this.isEditMode = false; + this.boardData = boardData; + this.saveImageFile = saveImageFile; + this.getSelections = getSelections; + this.getCurrentBoard = getCurrentBoard; + this.setCurrentBoard = setCurrentBoard; + this.gridDrag = gridDrag; + this.getContextMenu = getContextMenu; + this.setSketchPaneVisibility = setSketchPaneVisibility; + this.renderThumbnailDrawerSelections = renderThumbnailDrawerSelections; + this.gotoBoard = gotoBoard; + this.getEtag = getEtag; + this.boardModel = boardModel; + this.boardPath = boardPath; + this.setEditorModeTimer = setEditorModeTimer; + this.gridViewCursor = { + visible: false, + x: 0, + el: null + } + } + + get IsEditMode() { + return this.isEditMode; + } + + enableEditMode () { + this.isEditMode = true; + this.gridViewCursor.visible = true + this.renderGridViewCursor() + this.renderThumbnailDrawerSelections() + this.getContextMenu().remove() + } + + gridViewFromPoint(x, y, offset) { + if (!offset) { offset = 0 } + + let el = document.elementFromPoint(x-offset, y) + if (!el || !el.classList.contains('thumbnail')) return null + let selections = this.getSelections() + // if part of a multi-selection, base from right-most element + if (selections.has(Number(el.dataset.thumbnail))) { + // base from the right-most thumbnail in the selection + let rightMost = Math.max(...selections) + let rightMostEl = document.querySelector('.grid-view div[data-thumbnail="' + rightMost + '"]') + el = rightMostEl + } + + return el + } + + renderGridViewCursor() { + let el = document.querySelector('#grid-cursor-container') + if (el) { // shouldRenderThumbnailDrawer + let gridViewCursor = this.gridViewCursor + if (gridViewCursor.visible) { + el.style.display = '' + el.style.left = gridViewCursor.x + 'px' + el.style.top = gridViewCursor.y + 'px' + } else { + el.style.display = 'none' + el.style.left = '0px' + } + } + } + + cleanUpGridView(){ + let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + let gridView = storyboarderSketchPane.querySelector(".grid-view") + if(!gridView) return + gridView.removeEventListener("pointerdown", this.gridDrag) + + storyboarderSketchPane.removeChild(gridView) + } + + updateGridViewCursor(x, y) { + + let el = this.gridViewFromPoint(x, y) + let offset = 0 + if (el) { + offset = el.getBoundingClientRect().width + el = this.gridViewFromPoint(x, y, offset/2) + } + if (!el) return + + this.gridViewCursor.el = el + + let elementOffsetX = el.getBoundingClientRect().right + + let elementOffsetY = el.getBoundingClientRect().top + let scrollTop = el.scrollTop + + let arrowOffsetX = 8 + let arrowOffsetY = -8 + this.gridViewCursor.x = elementOffsetX + arrowOffsetX + + this.gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop + } + + renderGridView () { + this.cleanUpGridView() + this.setSketchPaneVisibility(false) + let gridContainer = document.createElement("div") + let boardData = this.boardData; + let boardPath = this.boardPath; + let hasShots = boardData.boards.find(board => board.newShot) != null + let boardModel = this.boardModel; + let html = [] + let i = 0 + for (let board of boardData.boards) { + html.push('
') + let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) + try { + if (fs.existsSync(imageFilename)) { + html.push('
') + let src = imageFilename + '?' + this.getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) + html.push('') + html.push('
') + } else { + // blank image + html.push(`') + } + } catch (err) { + log.error(err) + } + html.push('
') + html.push('
' + board.shot + '
') + if (board.audio && board.audio.filename.length) { + html.push(` +
+ + + +
+ `) + } + html.push('
') + if (board.dialogue) { + html.push(board.dialogue) + } + html.push('
') + if (board.duration) { + html.push(util.msToTime(board.duration)) + } else { + html.push(util.msToTime(boardData.defaultBoardTiming)) + } + html.push('
') + html.push('
') + html.push('
') + i++ + } + gridContainer.innerHTML = html.join('') + gridContainer.className = "grid-view" + gridContainer.addEventListener('pointerdown', this.gridDrag) + let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + storyboarderSketchPane.appendChild(gridContainer) + + let selections = this.getSelections() + let currentBoard = this.getCurrentBoard() + let thumbnails = gridContainer.querySelectorAll('.thumbnail') + for (let j = 0; j < thumbnails.length; j++) { + let thumb = thumbnails[j] + thumb.addEventListener('pointerenter', (e) => { + selections = this.getSelections() + currentBoard = this.getCurrentBoard() + if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + this.getContextMenu().attachTo(e.target) + } + }) + thumb.addEventListener('pointerleave', (e) => { + if (!this.getContextMenu().hasChild(e.relatedTarget)) { + this.getContextMenu().remove() + } + }) + thumb.addEventListener('pointermove', (e) => { + selections = this.getSelections() + currentBoard = this.getCurrentBoard() + if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + this.getContextMenu().attachTo(e.target) + } + }) + thumb.addEventListener('pointerdown', (e) => { + selections = this.getSelections() + currentBoard = this.getCurrentBoard() + if (!this.isEditMode && selections.size <= 1) this.getContextMenu().attachTo(e.target) + // always track cursor position + this.updateGridViewCursor(e.clientX, e.clientY) + + if (e.button === 0) { + this.setEditorModeTimer(setTimeout(() => this.enableEditMode(), enableEditModeDelay)) + } else { + + this.enableEditMode() + } + + let index = Number(e.target.dataset.thumbnail) + if (selections.has(index)) { + // ignore + } /* else if (isCommandPressed('workspace:thumbnails:select-multiple-modifier')) { + if (selections.size === 0 && !util.isUndefined(currentBoard)) { + // use currentBoard as starting point + selections.add(currentBoard) + } + + // add to selections + let min = Math.min(...selections, index) + let max = Math.max(...selections, index) + selections = new Set(util.range(min, max)) + + this.renderThumbnailDrawerSelections() + } */ else if (currentBoard !== index) { + // go to board by index + // reset selections + selections.clear() + this.saveImageFile().then(() => { + this.setCurrentBoard(index) + this.renderThumbnailDrawerSelections() + this.gotoBoard(index) + }) + } + }, true, true) + } + this.renderThumbnailDrawerSelections() + } + +} + +module.exports = GridView \ No newline at end of file diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index d4e58f8c2e..146d42698f 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -73,6 +73,8 @@ const sharedObj = remote.getGlobal('sharedObj') const SettingsService = require("../windows/shot-generator/SettingsService") +const GridView = require("./components/GridView") + const store = configureStore(getInitialStateRenderer(), 'renderer') window.$r = { store } // for debugging, e.g.: $r.store.getStore() const isCommandPressed = createIsCommandPressed(store) @@ -125,8 +127,8 @@ let imageFileDirtyTimer let isSavingImageFile = false // lock for saveImageFile let drawIdleTimer - -let isEditMode = false +let editModeState = false +let isEditMode = () => editModeState || gridView.IsEditMode let editModeTimer let enableEditModeDelay = 750 // msecs let periodicDragUpdateTimer @@ -172,6 +174,8 @@ let dragPoint let dragTarget let scrollPoint +let gridView + // CAF cancel tokens for async functions let cancelTokens = {} @@ -1070,7 +1074,7 @@ const loadBoardUI = async () => { clearTimeout(editModeTimer) } - if (isEditMode && dragMode) { + if (isEditMode() && dragMode) { // defer to periodicDragUpdate() return } @@ -1083,7 +1087,6 @@ const loadBoardUI = async () => { window.addEventListener('pointerup', (e)=>{ if (dragMode) { - console.log("disable dragmode") disableDragMode() preventDragMode = false } @@ -1092,7 +1095,7 @@ const loadBoardUI = async () => { clearTimeout(editModeTimer) // log.info('pointerup', isEditMode) - if (isEditMode) { + if (isEditMode()) { let x = e.clientX, y = e.clientY @@ -1101,14 +1104,14 @@ const loadBoardUI = async () => { let el = thumbnailFromPoint(x, y) || thumbnailCursor.el if(isGridViewMode) { - el = gridViewFromPoint(x, y) || gridViewCursor.el + el = gridView.gridViewFromPoint(x, y) || gridView.gridViewCursor.el } else { el = thumbnailFromPoint(x, y) || thumbnailCursor.el } let offset = 0 if (el) { offset = el.getBoundingClientRect().width - el = !isGridViewMode ? thumbnailFromPoint(x, y, offset/2) : gridViewFromPoint(x, y, offset/2) + el = !isGridViewMode ? thumbnailFromPoint(x, y, offset/2) : gridView.gridViewFromPoint(x, y, offset/2) } if (!el) { @@ -1132,7 +1135,7 @@ const loadBoardUI = async () => { } renderThumbnailDrawer() - isGridViewMode && renderGridView() + isGridViewMode && gridView.renderGridView() gotoBoard(currentBoard, true) }) } else { @@ -1943,9 +1946,18 @@ const loadBoardUI = async () => { // for debugging: // // remote.getCurrentWebContents().openDevTools() -} + gridView = new GridView(boardData, boardPath, saveImageFile, getSelections, + getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, + gotoBoard, gridDrag, setSketchPaneVisibility, getEtag, boardModel, setEditorModeTimer) +} +const getSelections = () => selections +const getCurrentBoard = () => currentBoard +const setCurrentBoard = (board) => currentBoard = board +const getContextMenu = () => contextMenu +const setEditorModeTimer = (timer) => editModeTimer = timer + // whenever the scene changes const renderScene = async () => { audioPlayback.setSceneData(boardData) @@ -3327,6 +3339,7 @@ let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { // let shouldRenderThumbnailDrawer = false if (shouldRenderThumbnailDrawer) { + renderThumbnailDrawerSelections() for (var item of document.querySelectorAll('.thumbnail')) { item.classList.remove('active') @@ -3894,10 +3907,9 @@ let renderThumbnailDrawerSelections = () => { for (let thumb of thumbnails) { let i = Number(thumb.dataset.thumbnail) - thumb.classList.toggle('active', currentBoard == i) thumb.classList.toggle('selected', selections.has(i)) - thumb.classList.toggle('editing', isEditMode) + thumb.classList.toggle('editing', isEditMode()) } } @@ -3947,7 +3959,7 @@ const renderSceneTimeline = () => { let renderThumbnailDrawer = () => { updateSceneTiming() - isGridViewMode && renderGridView() + isGridViewMode && gridView.renderGridView() // reflect the current view cycleViewMode(0) @@ -4024,7 +4036,6 @@ let renderThumbnailDrawer = () => { thumbnailDrawer.innerHTML = html.join('') renderThumbnailButtons() - renderThumbnailDrawerSelections() if (!contextMenu) { @@ -4087,7 +4098,7 @@ let renderThumbnailDrawer = () => { let thumbnails = thumbnailDrawer.querySelectorAll('.thumbnail') for (var thumb of thumbnails) { thumb.addEventListener('pointerenter', (e) => { - if (!isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + if (!isEditMode() && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { contextMenu.attachTo(e.target) } }) @@ -4097,13 +4108,13 @@ let renderThumbnailDrawer = () => { } }) thumb.addEventListener('pointermove', (e) => { - if (!isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + if (!isEditMode() && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { contextMenu.attachTo(e.target) } }) thumb.addEventListener('pointerdown', (e) => { log.info('DOWN') - if (!isEditMode && selections.size <= 1) contextMenu.attachTo(e.target) + if (!isEditMode() && selections.size <= 1) contextMenu.attachTo(e.target) // always track cursor position updateThumbnailCursor(e.clientX, e.clientY) @@ -4127,7 +4138,6 @@ let renderThumbnailDrawer = () => { let min = Math.min(...selections, index) let max = Math.max(...selections, index) selections = new Set(util.range(min, max)) - renderThumbnailDrawerSelections() } else if (currentBoard !== index) { // go to board by index @@ -4455,12 +4465,12 @@ let updateDrag = () => { } - if (isEditMode && dragMode) { + if (isEditMode() && dragMode) { setDragTarget(lastPointer.x) updateThumbnailCursor(lastPointer.x, lastPointer.y) renderThumbnailCursor() - isGridViewMode && updateGridViewCursor(lastPointer.x, lastPointer.y) - isGridViewMode && renderGridViewCursor() + isGridViewMode && gridView.updateGridViewCursor(lastPointer.x, lastPointer.y) + isGridViewMode && gridView.renderGridViewCursor() } } @@ -4755,7 +4765,7 @@ window.onkeydown = (e) => { if (isCommandPressed('drawing:exit-current-mode')) { e.preventDefault() - if (dragMode && isEditMode && selections.size) { + if (dragMode && isEditMode() && selections.size) { disableEditMode() disableDragMode() } else { @@ -6026,14 +6036,11 @@ let reorderBoardsRight = () => { } let enableEditMode = () => { - if (!isEditMode && selections.size) { - isEditMode = true + if (!isEditMode() && selections.size) { + editModeState = true thumbnailCursor.visible = true - gridViewCursor.visible = true renderThumbnailCursor() - isGridViewMode && renderGridViewCursor() renderThumbnailDrawerSelections() - isGridViewMode && renderGridViewCursor() contextMenu.remove() sfx.positive() sfx.playEffect('on') @@ -6042,14 +6049,14 @@ let enableEditMode = () => { } let disableEditMode = () => { - if (isEditMode) { + if (isEditMode()) { sfx.playEffect('metal') sfx.negative() - isEditMode = false + editModeState = false thumbnailCursor.visible = false - gridViewCursor.visible = false + gridView.gridViewCursor.visible = false renderThumbnailCursor() - isGridViewMode && renderGridViewCursor() + isGridViewMode && gridView.renderGridViewCursor() renderThumbnailDrawerSelections() } } @@ -6553,79 +6560,7 @@ const setSketchPaneVisibility = (isVisible) => { } //#region Grid view -let gridViewFromPoint = (x, y, offset) => { - if (!offset) { offset = 0 } - let el = document.elementFromPoint(x-offset, y) - if (!el || !el.classList.contains('thumbnail')) return null - // if part of a multi-selection, base from right-most element - if (selections.has(Number(el.dataset.thumbnail))) { - // base from the right-most thumbnail in the selection - let rightMost = Math.max(...selections) - let rightMostEl = document.querySelector('#thumbnail-drawer div[data-thumbnail="' + rightMost + '"]') - el = rightMostEl - } - - return el -} - -let gridViewCursor = { - visible: false, - x: 0, - el: null -} -let updateGridViewCursor = (x, y) => { - // let shouldRenderThumbnailDrawer = false - if (!shouldRenderThumbnailDrawer) return - -/* if (isBeforeFirstThumbnail(x, y)) { - thumbnailCursor.x = 0 - thumbnailCursor.el = null - return - } */ - - let el = gridViewFromPoint(x, y) - let offset = 0 - if (el) { - offset = el.getBoundingClientRect().width - el = gridViewFromPoint(x, y, offset/2) - } - - if (el) gridViewCursor.el = el // only update if found - if (!el) return - - // store a reference to the nearest thumbnail - gridViewCursor.el = el - - let elementOffsetX = el.getBoundingClientRect().right - let elementOffsetY = el.getBoundingClientRect().top - let scrollTop = el.scrollTop - - // is this an end shot? - if (el.classList.contains('endShot')) { - elementOffsetX += 5 - } - - let arrowOffsetX = 8 - let arrowOffsetY = -8 - gridViewCursor.x = elementOffsetX + arrowOffsetX - - gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop -} - -let renderGridViewCursor = () => { - let el = document.querySelector('#grid-cursor-container') - if (el) { // shouldRenderThumbnailDrawer - if (gridViewCursor.visible) { - el.style.display = '' - el.style.left = gridViewCursor.x + 'px' - el.style.top = gridViewCursor.y + 'px' - } else { - el.style.display = 'none' - el.style.left = '0px' - } - } -} const gridDrag = (e)=>{ if (e.pointerType == 'pen' || e.pointerType == 'mouse') { dragTarget = document.querySelector('.grid-view') @@ -6638,151 +6573,6 @@ const gridDrag = (e)=>{ } } -const renderGridView = () => { - cleanUpGridView() - setSketchPaneVisibility(false) - let gridContainer = document.createElement("div") - let hasShots = boardData.boards.find(board => board.newShot) != null - let html = [] - let i = 0 - for (let board of boardData.boards) { - html.push('
') - let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) - try { - if (fs.existsSync(imageFilename)) { - html.push('
') - let src = imageFilename + '?' + getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) - html.push('') - html.push('
') - } else { - // blank image - html.push(`') - } - } catch (err) { - log.error(err) - } - html.push('
') - html.push('
' + board.shot + '
') - if (board.audio && board.audio.filename.length) { - html.push(` -
- - - -
- `) - } - html.push('
') - if (board.dialogue) { - html.push(board.dialogue) - } - html.push('
') - if (board.duration) { - html.push(util.msToTime(board.duration)) - } else { - html.push(util.msToTime(boardData.defaultBoardTiming)) - } - html.push('
') - html.push('
') - html.push('
') - i++ - } - gridContainer.innerHTML = html.join('') - gridContainer.className = "grid-view" - gridContainer.addEventListener('pointerdown', gridDrag) - let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") - storyboarderSketchPane.appendChild(gridContainer) - - - let thumbnails = gridContainer.querySelectorAll('.thumbnail') - for (let j = 0; j < thumbnails.length; j++) { - let thumb = thumbnails[j] - thumb.addEventListener('pointerenter', (e) => { - if (!isEditMode && selections.size <= 1 && e.currentTarget.dataset.thumbnail === currentBoard) { - contextMenu.attachTo(e.currentTarget) - } - }) - thumb.addEventListener('pointerleave', (e) => { - if (!contextMenu.hasChild(e.relatedTarget)) { - contextMenu.remove() - } - }) - thumb.addEventListener('pointermove', (e) => { - if (!isEditMode && selections.size <= 1 && e.currentTarget.dataset.thumbnail === currentBoard) { - contextMenu.attachTo(e.currentTarget) - } - }) - thumb.addEventListener('pointerdown', (e) => { - log.info('DOWN') - if (!isEditMode && selections.size <= 1) contextMenu.attachTo(e.currentTarget) - - // always track cursor position - updateGridViewCursor(e.clientX, e.clientY) - - if (e.button === 0) { - editModeTimer = setTimeout(enableEditMode, enableEditModeDelay) - } else { - enableEditMode() - } - - let index = Number(e.currentTarget.dataset.thumbnail) - if (selections.has(index)) { - // ignore - } else if (isCommandPressed('workspace:thumbnails:select-multiple-modifier')) { - if (selections.size === 0 && !util.isUndefined(currentBoard)) { - // use currentBoard as starting point - selections.add(currentBoard) - } - - // add to selections - let min = Math.min(...selections, index) - let max = Math.max(...selections, index) - selections = new Set(util.range(min, max)) - - renderThumbnailDrawerSelections() - } else if (currentBoard !== index) { - // go to board by index - - // reset selections - selections.clear() - saveImageFile().then(() => { - currentBoard = index - renderThumbnailDrawerSelections() - gotoBoard(currentBoard) - }) - } - }, true, true) - } - - renderThumbnailDrawerSelections() -} -const cleanUpGridView = () => { - let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") - let gridView = storyboarderSketchPane.querySelector(".grid-view") - if(!gridView) return - gridView.removeEventListener("pointerdown", gridDrag) - - storyboarderSketchPane.removeChild(gridView) -} // TODO(): Find a better way to switch modes let isGridViewMode = false //#endregion @@ -6794,20 +6584,20 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { shouldRenderThumbnailDrawer = false setSketchPaneVisibility(true) renderThumbnailDrawer() - cleanUpGridView() + gridView.cleanUpGridView() } const onTimelineSelect = () => { isGridViewMode = false shouldRenderThumbnailDrawer = true setSketchPaneVisibility(true) renderThumbnailDrawer() - cleanUpGridView() + gridView.cleanUpGridView() } const onGridViewSelect = () => { shouldRenderThumbnailDrawer = true isGridViewMode = true renderThumbnailDrawer() - renderGridView() + gridView.renderGridView() } return h( From 3042e5c8c4bfe0c4484fd88d0f6320a32d394ef1 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Mon, 31 Aug 2020 16:32:43 +0300 Subject: [PATCH 06/23] Refactored grid-view to react component --- src/css/mainwindow.css | 44 +++- src/js/window/components/GridView/Grid.js | 115 +++++++++ .../components/GridView/GridViewElement.js | 84 +++++++ src/js/window/components/GridView/index.js | 223 ++++++------------ src/js/window/main-window.js | 11 +- src/main-window.html | 4 +- 6 files changed, 322 insertions(+), 159 deletions(-) create mode 100644 src/js/window/components/GridView/Grid.js create mode 100644 src/js/window/components/GridView/GridViewElement.js diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 8be4c5fff5..0ed187523c 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -1030,25 +1030,20 @@ input[type=range]:focus::-webkit-slider-runnable-track { /* The grid view styles */ .grid-view { - /*transform: scale(0.0,0.0) translate(0,0);*/ - /*transform-origin: 0 0;*/ position: relative; - /* background: white; */ - /*border-radius: 13px;*/ + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); flex-shrink: 0; width: 100%; height: 100%; padding: 10px; overflow: auto; - grid-column-gap: 50px; - grid-row-gap: 50px; - display: grid; - grid-template-columns: auto auto auto; } .grid-view .thumbnail { flex: 1; + display: flex; + flex-direction: column; background: #444; padding: 5px; margin-right: 0px; @@ -1057,6 +1052,7 @@ input[type=range]:focus::-webkit-slider-runnable-track { font-weight: 100; box-shadow: 0 1px 1px rgba(0,0,0,0.2); transition: all 0s ease-in-out; + align-content: center; } .grid-view .thumbnail.selected { @@ -1100,4 +1096,34 @@ input[type=range]:focus::-webkit-slider-runnable-track { color: #000; transition: all .05s ease-in; box-shadow: 0px 10px 0px rgba(0,0,0,0.1); -} \ No newline at end of file +} + +.grid-row { + display: flex; + flex-direction: row; +} + +.grid-view .thumbnail.active { + background: #8d89cf; + color: #000; + transition: all 0s ease-out; +} + +.grid-view .thumbnail .number { + font-weight: 700; +} + +.grid-view .thumbnail .duration { + opacity: 0.8; +} + +.grid-view .thumbnail .top { + +} + +.grid-view .thumbnail .info { + display: flex; + flex-direction: row; + justify-content: space-between; + +} diff --git a/src/js/window/components/GridView/Grid.js b/src/js/window/components/GridView/Grid.js new file mode 100644 index 0000000000..df0580a85f --- /dev/null +++ b/src/js/window/components/GridView/Grid.js @@ -0,0 +1,115 @@ +// NOTE(): this is a clone of shot generator grid, with only difference that this is non jsx; +// the Storyboarder window doesn't support jsx yet. When main-window is refactored to react we should remove this file + +const h = require('../../../utils/h') + +// and just use the SG's one +const {useMemo, useEffect, useRef, useCallback, useState} = React = require('react') +const throttle = require('lodash.throttle') + +const getIndices = (container, itemHeight, numCols) => { + if (!container) { + return 0 + } + + //const first = Math.floor(container.scrollTop / itemHeight) * numCols + return Math.round((container.scrollTop + container.parentNode.clientHeight) / itemHeight) * numCols +} + +const getPlaceholder = (elementStyle, i, k, isLoading = false) => ( + ['div', + { + key:`grid-element-placeholder-${i + k}`, + style:elementStyle, + className:(isLoading ? "center-child" : ""), + }, + {/*{isLoading &&
}*/} + ] +) + +const getComponent = (Component, itemData, elements, elementStyle, i, k) => ( + [Component, { + key:`grid-element-${i + k}`, + style:elementStyle, + index:i+k, + data:elements[i + k], + ...itemData + } + ] +) + +const Grid = React.memo(({ + Component, + elements, + + itemData, + + numCols, + itemHeight = '100%', + itemWidth = '100%' +}) => { + const elementStyle = { + height: itemHeight, + width: itemWidth + } + + const containerRef = useRef(null) + const [currentIndex, setCurrentIndex] = useState(getIndices()) + + const onParentScroll = useCallback(throttle((e) => { + console.log("Scrolling") + const index = getIndices(e.target, itemHeight, numCols) + if (index > currentIndex) { + setCurrentIndex(index) + } + }, 500), [currentIndex]) + + useEffect(() => { + if(!containerRef.current) return + console.log(containerRef.current) + containerRef.current.parentNode.addEventListener('scroll', onParentScroll) + const index = getIndices(containerRef.current, itemHeight, numCols) + if (index > currentIndex) { + setCurrentIndex(index) + } + + return () => { + if (containerRef.current) containerRef.current.parentNode.removeEventListener('scroll', onParentScroll) + } + }, [containerRef.current, currentIndex]) + + const components = useMemo(() => { + const result = [] + + for (let i = 0; i < elements.length; i += numCols) { + const row = [] + + for (let k = 0; k < numCols; k++) { + const index = i + k + if (elements[index]) { + if (index < currentIndex) { + row.push(getComponent(Component, itemData, elements, elementStyle, i, k)) + } else { + row.push(getPlaceholder(elementStyle, i, k, true)) + } + + } else { + row.push(getPlaceholder(elementStyle, i, k)) + } + } + + result.push( + ['div', { className:"grid-row", key:`row-${i}`}, row] + ) + } + + return result + }, [elements.length, itemData, currentIndex]) + + return h( + ['div', { ref:containerRef }, + components + ] + ) +}) +module.exports = Grid diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js new file mode 100644 index 0000000000..d9942eb573 --- /dev/null +++ b/src/js/window/components/GridView/GridViewElement.js @@ -0,0 +1,84 @@ +const h = require('../../../utils/h') +const React = require('react') +const path = require('path') +const util = require('../../../utils/index') +const fs = require('fs-extra') +const GridViewElement = React.memo(({ + data: board, + index, + boardPath, + boardModel, + boardData, + getEtag, + pointerDown, + pointerMove, + pointerLeave, + pointerEnter, +}) => { + let defaultHeight = 200 + let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) + let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) + const getImage = () => { + let imageElement = '' + try { + if (fs.existsSync(imageFilename)) { + let src = imageFilename + '?' + getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) + imageElement = ['div', { className:"top"}, + ['img', { src:src, style:{ height:defaultHeight, width:thumbnailWidth }}] + ] + } else { + // blank image + imageElement = ['img', { src:"//:0", style: { height:"${defaultHeight}px", width:`${thumbnailWidth}px`}}] + } + } catch (err) { + } + return imageElement + } + + const getAudio = () => { + if (board.audio && board.audio.filename.length) { + return ['div', { className:"audio" }, + ['svg', + ['use', { 'xlink:href':"./img/symbol-defs.svg#icon-speaker-on"}] + ] + ] + } + } + const getBoardDialogue = () => { + if (board.dialogue) + return board.dialogue + return '' + } + + const getBoardDuration = () => { + if (board.duration) { + return util.msToTime(board.duration) + } else { + return util.msToTime(boardData.defaultBoardTiming) + } + } + + return h( + ['div', { + 'data-thumbnail':index, + className:"thumbnail", + style:{ width:thumbnailWidth }, + onPointerDown: pointerDown, + onPointerMove: pointerMove, + onPointerLeave: pointerLeave, + onPointerEnter: pointerEnter, + }, + ['div', { style:{ display:'flex', 'flex-direction':'column', 'align-self':"center"} }, + getImage(), + ['div', { className:"info" }, + ['div', { className:"number"}, board.shot], + getAudio(), + ['div', { className:"caption" }, getBoardDialogue()], + ['div', { className:"duration"}, getBoardDuration()] + ] + ] + ] + ) +}) + +module.exports = GridViewElement; \ No newline at end of file diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index 9ea3123d1b..def7c2ec2d 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -1,7 +1,7 @@ -const path = require('path') -const log = require('electron-log') -const fs = require('fs-extra') -const util = require('../../../utils/index') +const ReactDOM = require('react-dom') +const h = require('../../../utils/h') +const Grid = require('./Grid') +const GridViewElement = require('./GridViewElement') let enableEditModeDelay = 750 // msecs class GridView { constructor(boardData, boardPath, saveImageFile, getSelections, @@ -74,12 +74,10 @@ class GridView { } cleanUpGridView(){ - let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") - let gridView = storyboarderSketchPane.querySelector(".grid-view") + let gridView = document.querySelector(".grid-view") if(!gridView) return - gridView.removeEventListener("pointerdown", this.gridDrag) - - storyboarderSketchPane.removeChild(gridView) + //gridView.removeEventListener("pointerdown", this.gridDrag) + ReactDOM.unmountComponentAtNode(gridView) } updateGridViewCursor(x, y) { @@ -106,151 +104,80 @@ class GridView { this.gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop } - renderGridView () { - this.cleanUpGridView() - this.setSketchPaneVisibility(false) - let gridContainer = document.createElement("div") - let boardData = this.boardData; - let boardPath = this.boardPath; - let hasShots = boardData.boards.find(board => board.newShot) != null - let boardModel = this.boardModel; - let html = [] - let i = 0 - for (let board of boardData.boards) { - html.push('
') - let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) - try { - if (fs.existsSync(imageFilename)) { - html.push('
') - let src = imageFilename + '?' + this.getEtag(path.join(boardPath, 'images', boardModel.boardFilenameForThumbnail(board))) - html.push('') - html.push('
') - } else { - // blank image - html.push(`') - } - } catch (err) { - log.error(err) - } - html.push('
') - html.push('
' + board.shot + '
') - if (board.audio && board.audio.filename.length) { - html.push(` -
- - - -
- `) - } - html.push('
') - if (board.dialogue) { - html.push(board.dialogue) - } - html.push('
') - if (board.duration) { - html.push(util.msToTime(board.duration)) - } else { - html.push(util.msToTime(boardData.defaultBoardTiming)) - } - html.push('
') - html.push('
') - html.push('
') - i++ + pointerEnter (e) { + let selections = this.getSelections() + let currentBoard = this.getCurrentBoard() + if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + this.getContextMenu().attachTo(e.target) } - gridContainer.innerHTML = html.join('') - gridContainer.className = "grid-view" - gridContainer.addEventListener('pointerdown', this.gridDrag) - let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") - storyboarderSketchPane.appendChild(gridContainer) - + } + + pointerLeave (e) { + if (e.relatedTarget instanceof Element && !this.getContextMenu().hasChild(e.relatedTarget)) { + this.getContextMenu().remove() + } + } + + pointerMove (e) { let selections = this.getSelections() let currentBoard = this.getCurrentBoard() - let thumbnails = gridContainer.querySelectorAll('.thumbnail') - for (let j = 0; j < thumbnails.length; j++) { - let thumb = thumbnails[j] - thumb.addEventListener('pointerenter', (e) => { - selections = this.getSelections() - currentBoard = this.getCurrentBoard() - if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { - this.getContextMenu().attachTo(e.target) - } - }) - thumb.addEventListener('pointerleave', (e) => { - if (!this.getContextMenu().hasChild(e.relatedTarget)) { - this.getContextMenu().remove() - } - }) - thumb.addEventListener('pointermove', (e) => { - selections = this.getSelections() - currentBoard = this.getCurrentBoard() - if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { - this.getContextMenu().attachTo(e.target) - } - }) - thumb.addEventListener('pointerdown', (e) => { - selections = this.getSelections() - currentBoard = this.getCurrentBoard() - if (!this.isEditMode && selections.size <= 1) this.getContextMenu().attachTo(e.target) - // always track cursor position - this.updateGridViewCursor(e.clientX, e.clientY) - - if (e.button === 0) { - this.setEditorModeTimer(setTimeout(() => this.enableEditMode(), enableEditModeDelay)) - } else { + if (!this.isEditMode && selections.size <= 1 && e.target.dataset.thumbnail === currentBoard) { + this.getContextMenu().attachTo(e.target) + } + } - this.enableEditMode() - } - - let index = Number(e.target.dataset.thumbnail) - if (selections.has(index)) { - // ignore - } /* else if (isCommandPressed('workspace:thumbnails:select-multiple-modifier')) { - if (selections.size === 0 && !util.isUndefined(currentBoard)) { - // use currentBoard as starting point - selections.add(currentBoard) - } - - // add to selections - let min = Math.min(...selections, index) - let max = Math.max(...selections, index) - selections = new Set(util.range(min, max)) - - this.renderThumbnailDrawerSelections() - } */ else if (currentBoard !== index) { - // go to board by index - // reset selections - selections.clear() - this.saveImageFile().then(() => { - this.setCurrentBoard(index) - this.renderThumbnailDrawerSelections() - this.gotoBoard(index) - }) - } - }, true, true) + pointerDown (e) { + let selections = this.getSelections() + let currentBoard = this.getCurrentBoard() + if (!this.isEditMode && selections.size <= 1) this.getContextMenu().attachTo(e.target) + // always track cursor position + this.updateGridViewCursor(e.clientX, e.clientY) + + if (e.button === 0) { + this.setEditorModeTimer(setTimeout(() => this.enableEditMode(), enableEditModeDelay)) + } else { + + this.enableEditMode() + } + + let index = Number(e.target.dataset.thumbnail) + if (selections.has(index)) { + // ignore + } else if (currentBoard !== index) { + // go to board by index + // reset selections + selections.clear() + this.saveImageFile().then(() => { + this.setCurrentBoard(index) + this.renderThumbnailDrawerSelections() + this.gotoBoard(index) + }) } - this.renderThumbnailDrawerSelections() } + renderGridView () { + this.cleanUpGridView() + this.setSketchPaneVisibility(false) + let boardData = this.boardData; + + ReactDOM.render(h([Grid, { + itemData:{ + boardData, + boardPath: this.boardPath, + boardModel: this.boardModel, + getEtag: this.getEtag, + pointerDown: (e) => this.pointerDown(e), + pointerMove: (e) => this.pointerMove(e), + pointerLeave: (e) => this.pointerLeave(e), + pointerEnter: (e) => this.pointerEnter(e), + }, + Component:GridViewElement, + elements:boardData.boards, + numCols:3, + itemHeight: 200 + } + ]), document.querySelector('.grid-view'), () => this.renderThumbnailDrawerSelections()) + } } -module.exports = GridView \ No newline at end of file +module.exports = GridView diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 146d42698f..fe22839d72 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -14,6 +14,7 @@ const isDev = require('electron-is-dev') const log = require('electron-log') log.catchErrors() const ReactDOM = require('react-dom') +const { useEffect } = require('react') const h = require('../utils/h') const ShotGeneratorPanel = require('./components/ShotGeneratorPanel') @@ -3904,7 +3905,6 @@ let renderThumbnailDrawerSelections = () => { renderSceneTimeline() let thumbnails = document.querySelectorAll('.thumbnail') - for (let thumb of thumbnails) { let i = Number(thumb.dataset.thumbnail) thumb.classList.toggle('active', currentBoard == i) @@ -6549,13 +6549,18 @@ const updateSceneFromScript = async () => { const setSketchPaneVisibility = (isVisible) => { let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") + let gridView = document.querySelector('.grid-view') let container = storyboarderSketchPane.getElementsByClassName("container")[0] if(isVisible) { container.style["visibility"] = "visible"; container.style["position"] = "relative"; + gridView.style["position"] = "absolute"; + gridView.style["visibility"] = "hidden"; } else { container.style["position"] = "absolute"; container.style["visibility"] = "hidden"; + gridView.style["visibility"] = "visible" + gridView.style["position"] = "relative"; } } @@ -6579,6 +6584,10 @@ let isGridViewMode = false const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { let style = { display: show ? 'flex' : 'none' } + useEffect(() => { + setSketchPaneVisibility(true) + }, []) + const onBoardsSelect = () => { isGridViewMode = false shouldRenderThumbnailDrawer = false diff --git a/src/main-window.html b/src/main-window.html index 197fbaafb5..09651c602c 100644 --- a/src/main-window.html +++ b/src/main-window.html @@ -257,7 +257,9 @@
-
+
+
+
From e8f50aa70ed23e226a34d6a3f140bc39638902b0 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Mon, 31 Aug 2020 17:01:41 +0300 Subject: [PATCH 07/23] Fixed scrollIntoView scrolls parent element --- src/js/window/components/GridView/GridViewElement.js | 2 +- src/js/window/main-window.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index d9942eb573..be63f5271c 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -68,7 +68,7 @@ const GridViewElement = React.memo(({ onPointerLeave: pointerLeave, onPointerEnter: pointerEnter, }, - ['div', { style:{ display:'flex', 'flex-direction':'column', 'align-self':"center"} }, + ['div', { style:{ display:'flex', flexDirection:'column', alignSelf:"center"} }, getImage(), ['div', { className:"info" }, ['div', { className:"number"}, board.shot], diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index fe22839d72..2513538b94 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -3349,8 +3349,7 @@ let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { let thumbDiv = document.querySelector(`[data-thumbnail='${currentBoard}']`) if (thumbDiv) { thumbDiv.classList.add('active') - thumbDiv.scrollIntoView() - + thumbDiv.scrollIntoView(false) let thumbL = thumbDiv.offsetLeft let thumbR = thumbDiv.offsetLeft + thumbDiv.offsetWidth From 22f788ed4bac00b3da97757d0c0ea0894b22b2ad Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 09:47:00 +0300 Subject: [PATCH 08/23] Fixed grid-view element selection size --- src/css/mainwindow.css | 12 +++++++++++- .../components/GridView/GridViewElement.js | 17 ++++++++++------- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 0ed187523c..65b450be18 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -1046,13 +1046,23 @@ input[type=range]:focus::-webkit-slider-runnable-track { flex-direction: column; background: #444; padding: 5px; - margin-right: 0px; font-size: 10px; color: #888; font-weight: 100; box-shadow: 0 1px 1px rgba(0,0,0,0.2); transition: all 0s ease-in-out; align-content: center; + border-radius: 3px; +} + +.grid-view .thumbnail-container { + flex: 1; + display: flex; + flex-direction: column; + padding: 5px; + margin-right: 0px; + font-size: 10px; + align-content: center; } .grid-view .thumbnail.selected { diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index be63f5271c..e38c4dfad8 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -60,15 +60,18 @@ const GridViewElement = React.memo(({ return h( ['div', { - 'data-thumbnail':index, - className:"thumbnail", + className: "thumbnail-container", style:{ width:thumbnailWidth }, - onPointerDown: pointerDown, - onPointerMove: pointerMove, - onPointerLeave: pointerLeave, - onPointerEnter: pointerEnter, }, - ['div', { style:{ display:'flex', flexDirection:'column', alignSelf:"center"} }, + ['div', { + style:{ display:'flex', flexDirection:'column', alignSelf:"center"}, + 'data-thumbnail':index, + className:"thumbnail", + onPointerDown: pointerDown, + onPointerMove: pointerMove, + onPointerLeave: pointerLeave, + onPointerEnter: pointerEnter, + }, getImage(), ['div', { className:"info" }, ['div', { className:"number"}, board.shot], From 1e70f4f819cbdd0ad844d017cbe7b56cc4a9bf67 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 12:29:38 +0300 Subject: [PATCH 09/23] Imlemented opening of selected shot on double click in grid-view --- .../components/GridView/GridViewElement.js | 2 ++ src/js/window/components/GridView/index.js | 7 +++-- src/js/window/main-window.js | 29 ++++++++++--------- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index e38c4dfad8..349905e4de 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -14,6 +14,7 @@ const GridViewElement = React.memo(({ pointerMove, pointerLeave, pointerEnter, + dblclick }) => { let defaultHeight = 200 let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) @@ -71,6 +72,7 @@ const GridViewElement = React.memo(({ onPointerMove: pointerMove, onPointerLeave: pointerLeave, onPointerEnter: pointerEnter, + onDoubleClick: dblclick }, getImage(), ['div', { className:"info" }, diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index def7c2ec2d..a63fcc8750 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -76,7 +76,6 @@ class GridView { cleanUpGridView(){ let gridView = document.querySelector(".grid-view") if(!gridView) return - //gridView.removeEventListener("pointerdown", this.gridDrag) ReactDOM.unmountComponentAtNode(gridView) } @@ -155,9 +154,12 @@ class GridView { } } + doubleClick (e) { + this.setSketchPaneVisibility(true) + } + renderGridView () { this.cleanUpGridView() - this.setSketchPaneVisibility(false) let boardData = this.boardData; ReactDOM.render(h([Grid, { @@ -170,6 +172,7 @@ class GridView { pointerMove: (e) => this.pointerMove(e), pointerLeave: (e) => this.pointerLeave(e), pointerEnter: (e) => this.pointerEnter(e), + dblclick: (e) => this.doubleClick(e) }, Component:GridViewElement, elements:boardData.boards, diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 2513538b94..38a76a7fca 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -6548,18 +6548,23 @@ const updateSceneFromScript = async () => { const setSketchPaneVisibility = (isVisible) => { let storyboarderSketchPane = document.querySelector("#storyboarder-sketch-pane") - let gridView = document.querySelector('.grid-view') + let gridViewElement = document.querySelector('.grid-view') let container = storyboarderSketchPane.getElementsByClassName("container")[0] if(isVisible) { - container.style["visibility"] = "visible"; - container.style["position"] = "relative"; - gridView.style["position"] = "absolute"; - gridView.style["visibility"] = "hidden"; + isGridViewMode = false + container.style["position"] = "relative" + container.style["left"] = "0px" + gridViewElement.style["position"] = "absolute" + gridViewElement.style["left"] = "-99999px" + gridView.cleanUpGridView() + // NOTE(): A hackish way to update sketchpane + gotoBoard(getCurrentBoard()) } else { - container.style["position"] = "absolute"; - container.style["visibility"] = "hidden"; - gridView.style["visibility"] = "visible" - gridView.style["position"] = "relative"; + isGridViewMode = true + container.style["position"] = "absolute" + container.style["left"] = "-99999px" + gridViewElement.style["position"] = "relative" + gridViewElement.style["left"] = "0px" } } @@ -6588,22 +6593,18 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { }, []) const onBoardsSelect = () => { - isGridViewMode = false shouldRenderThumbnailDrawer = false setSketchPaneVisibility(true) renderThumbnailDrawer() - gridView.cleanUpGridView() } const onTimelineSelect = () => { - isGridViewMode = false shouldRenderThumbnailDrawer = true setSketchPaneVisibility(true) renderThumbnailDrawer() - gridView.cleanUpGridView() } const onGridViewSelect = () => { shouldRenderThumbnailDrawer = true - isGridViewMode = true + setSketchPaneVisibility(false) renderThumbnailDrawer() gridView.renderGridView() } From 6b3c93217fbcbac4eb3cc835a931dcc6e0338b4a Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 12:37:59 +0300 Subject: [PATCH 10/23] Fixed grid-view dragging --- src/js/window/components/GridView/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index a63fcc8750..f583946a26 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -76,6 +76,7 @@ class GridView { cleanUpGridView(){ let gridView = document.querySelector(".grid-view") if(!gridView) return + gridView.removeEventListener('pointerdown', this.gridDrag) ReactDOM.unmountComponentAtNode(gridView) } @@ -161,7 +162,8 @@ class GridView { renderGridView () { this.cleanUpGridView() let boardData = this.boardData; - + let gridView = document.querySelector('.grid-view') + gridView.addEventListener('pointerdown', this.gridDrag) ReactDOM.render(h([Grid, { itemData:{ boardData, @@ -179,7 +181,7 @@ class GridView { numCols:3, itemHeight: 200 } - ]), document.querySelector('.grid-view'), () => this.renderThumbnailDrawerSelections()) + ]), gridView, () => this.renderThumbnailDrawerSelections()) } } From 36e90a182a4e415267e6850b68d27ac6b91850af Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 12:50:35 +0300 Subject: [PATCH 11/23] Fixed edit mode is constantly enabled --- src/js/window/components/GridView/index.js | 4 ++++ src/js/window/main-window.js | 1 + 2 files changed, 5 insertions(+) diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index f583946a26..d98d4a6e6b 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -33,6 +33,10 @@ class GridView { return this.isEditMode; } + set IsEditMode(value) { + this.isEditMode = value; + } + enableEditMode () { this.isEditMode = true; this.gridViewCursor.visible = true diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 38a76a7fca..99b7b183b3 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -6054,6 +6054,7 @@ let disableEditMode = () => { editModeState = false thumbnailCursor.visible = false gridView.gridViewCursor.visible = false + gridView.IsEditMode = false renderThumbnailCursor() isGridViewMode && gridView.renderGridViewCursor() renderThumbnailDrawerSelections() From 337c606b9f8799d4acd85a0e5cb7d0f3f1d50798 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 13:33:37 +0300 Subject: [PATCH 12/23] Improved grid-view image quality --- src/js/window/components/GridView/GridViewElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index 349905e4de..1196ddd31c 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -18,7 +18,7 @@ const GridViewElement = React.memo(({ }) => { let defaultHeight = 200 let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) - let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-thumbnail.png')) + let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-posterframe.jpg')) const getImage = () => { let imageElement = '' try { From fc5355d98a80867aa01955af2066bbf2cba5792b Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Tue, 1 Sep 2020 15:20:49 +0300 Subject: [PATCH 13/23] Fixed contaainer shifts if trow has less than 3 elements --- src/js/window/components/GridView/Grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/window/components/GridView/Grid.js b/src/js/window/components/GridView/Grid.js index df0580a85f..7cce94ea54 100644 --- a/src/js/window/components/GridView/Grid.js +++ b/src/js/window/components/GridView/Grid.js @@ -21,7 +21,7 @@ const getPlaceholder = (elementStyle, i, k, isLoading = false) => ( { key:`grid-element-placeholder-${i + k}`, style:elementStyle, - className:(isLoading ? "center-child" : ""), + className:'thumbnail-container', }, {/*{isLoading &&
}*/} ] From 4936ef7a618497bc228d8f0014176c7ece29c7b5 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Wed, 2 Sep 2020 11:48:50 +0300 Subject: [PATCH 14/23] Implemented smooth scroll --- src/js/window/components/GridView/Grid.js | 6 +- .../components/GridView/GridViewElement.js | 3 +- src/js/window/main-window.js | 107 ++++++++++++------ 3 files changed, 75 insertions(+), 41 deletions(-) diff --git a/src/js/window/components/GridView/Grid.js b/src/js/window/components/GridView/Grid.js index 7cce94ea54..99a1209ecb 100644 --- a/src/js/window/components/GridView/Grid.js +++ b/src/js/window/components/GridView/Grid.js @@ -87,11 +87,7 @@ const Grid = React.memo(({ for (let k = 0; k < numCols; k++) { const index = i + k if (elements[index]) { - if (index < currentIndex) { - row.push(getComponent(Component, itemData, elements, elementStyle, i, k)) - } else { - row.push(getPlaceholder(elementStyle, i, k, true)) - } + row.push(getComponent(Component, itemData, elements, elementStyle, i, k)) } else { row.push(getPlaceholder(elementStyle, i, k)) diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index 1196ddd31c..7831c9b48b 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -65,8 +65,9 @@ const GridViewElement = React.memo(({ style:{ width:thumbnailWidth }, }, ['div', { - style:{ display:'flex', flexDirection:'column', alignSelf:"center"}, + style:{ display:"flex", flexDirection:"column", alignSelf:"center"}, 'data-thumbnail':index, + 'data-type':"thumbnail-grid", className:"thumbnail", onPointerDown: pointerDown, onPointerMove: pointerMove, diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 99b7b183b3..d9893cf314 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -3305,6 +3305,32 @@ let goNextBoard = async (direction, shouldPreserveSelections = false) => { } } +const ScrollTypes = { + VERTICAL: "vertical", + HORIZONTAL: "horizontal" +} + +const smoothScroll = (currentPosition, desiredPosition, element, block, scrollType = ScrollTypes.HORIZONTAL) => { + let i = currentPosition || 0; + let visibleSize = scrollType === ScrollTypes.HORIZONTAL ? element.offsetWidth : element.offsetHeight + let position = block === "center" ? visibleSize / 3 : 0 + let steps = 20 + let iterationStep = (desiredPosition - currentPosition - position) / steps + let iteration = 0 + let interval = setInterval(() => { + if (i !== desiredPosition && iteration !== steps) { + if(scrollType === ScrollTypes.HORIZONTAL) { + element.scrollTo(i += iterationStep, 0); + } else { + element.scrollTo(0, i += iterationStep); + } + iteration ++; + } else { + clearInterval(interval); + } + }, 10); +} + let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { if(isRecording && isRecordingStarted) { // make sure we capture the last frame @@ -3346,43 +3372,54 @@ let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { item.classList.remove('active') } - let thumbDiv = document.querySelector(`[data-thumbnail='${currentBoard}']`) - if (thumbDiv) { - thumbDiv.classList.add('active') - thumbDiv.scrollIntoView(false) - let thumbL = thumbDiv.offsetLeft - let thumbR = thumbDiv.offsetLeft + thumbDiv.offsetWidth - - let containerDiv = document.querySelector('#thumbnail-container') - let containerL = containerDiv.scrollLeft - let containerR = containerDiv.scrollLeft + containerDiv.offsetWidth - - if (thumbR >= containerR) { - // if right side of thumbnail is beyond the right edge of the visible container - // scroll the visible container - // to reveal up to the right edge of the thumbnail - containerDiv.scrollLeft = (thumbL - containerDiv.offsetWidth) + thumbDiv.offsetWidth + 100 - } else if (containerL >= thumbL) { - // if left side of thumbnail is beyond the left edge of the visible container - // scroll the visible container - // to reveal up to the left edge of the thumbnail - containerDiv.scrollLeft = thumbL - 50 + let thumbDivs = document.querySelectorAll(`[data-thumbnail='${currentBoard}']`) + for(let i = 0; i < thumbDivs.length; i++) { + let thumbDiv = thumbDivs[i] + if(thumbDiv.dataset.type === 'thumbnail-grid') { + thumbDiv.classList.add('active') + let containerDiv = document.querySelector('.grid-view') + smoothScroll(containerDiv.scrollTop, thumbDiv.parentNode.offsetTop, containerDiv, "center", ScrollTypes.VERTICAL) + } else { + if (thumbDiv) { + thumbDiv.classList.add('active') + let containerDiv = document.querySelector('#thumbnail-container') + thumbDiv.scrollIntoView() + let thumbL = thumbDiv.offsetLeft + let thumbR = thumbDiv.offsetLeft + thumbDiv.offsetWidth + + console.log(containerDiv) + let containerL = containerDiv.scrollLeft + let containerR = containerDiv.scrollLeft + containerDiv.offsetWidth + + if (thumbR >= containerR) { + // if right side of thumbnail is beyond the right edge of the visible container + // scroll the visible container + // to reveal up to the right edge of the thumbnail + containerDiv.scrollLeft = (thumbL - containerDiv.offsetWidth) + thumbDiv.offsetWidth + 100 + } else if (containerL >= thumbL) { + // if left side of thumbnail is beyond the left edge of the visible container + // scroll the visible container + // to reveal up to the left edge of the thumbnail + containerDiv.scrollLeft = thumbL - 50 + } + } else { + // + // TODO when would this happen? + // + // wait for render, then update + setTimeout( + n => { + let newThumb = document.querySelector(`[data-thumbnail='${n}']`) + newThumb.classList.add('active') + newThumb.scrollIntoView() + }, + 10, + currentBoard + ) + } } - } else { - // - // TODO when would this happen? - // - // wait for render, then update - setTimeout( - n => { - let newThumb = document.querySelector(`[data-thumbnail='${n}']`) - newThumb.classList.add('active') - newThumb.scrollIntoView() - }, - 10, - currentBoard - ) } + } renderMetaData() From d4ad79e499b0f205d1bc3ad2214631f7f974feac Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Wed, 2 Sep 2020 11:58:12 +0300 Subject: [PATCH 15/23] Added initial scroll to selected element --- src/js/window/main-window.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index d9893cf314..333b30c693 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -6645,6 +6645,7 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { setSketchPaneVisibility(false) renderThumbnailDrawer() gridView.renderGridView() + gotoBoard(getCurrentBoard()) } return h( From 328f57f8ca421b2a41ba51395e6b05ddc2c5750d Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Wed, 2 Sep 2020 12:53:12 +0300 Subject: [PATCH 16/23] Cleaned up css --- src/css/mainwindow.css | 93 ++++++++++-------------------------------- 1 file changed, 21 insertions(+), 72 deletions(-) diff --git a/src/css/mainwindow.css b/src/css/mainwindow.css index 65b450be18..9f78c5e5f8 100644 --- a/src/css/mainwindow.css +++ b/src/css/mainwindow.css @@ -240,7 +240,8 @@ body::-webkit-scrollbar { -#thumbnail-container .thumbnail * { +#thumbnail-container .thumbnail *, +.grid-view .thumbnail * { pointer-events: none; } @@ -271,13 +272,15 @@ body::-webkit-scrollbar { margin-right: 10px; } -#thumbnail-drawer .thumbnail.active { +#thumbnail-drawer .thumbnail.active, +.grid-view .thumbnail.active { background: #8d89cf; color: #000; transition: all 0s ease-out; } -#thumbnail-drawer .thumbnail.selected { +#thumbnail-drawer .thumbnail.selected, +.grid-view .thumbnail.selected { background: #8d89cf; color: #000; top: 0px; @@ -286,7 +289,8 @@ body::-webkit-scrollbar { box-shadow: none; z-index: 999; } -#thumbnail-drawer .thumbnail.selected.editing { +#thumbnail-drawer .thumbnail.selected.editing, +.grid-view .thumbnail.selected.editing { background: #999; top: -10px; position: relative; @@ -295,14 +299,16 @@ body::-webkit-scrollbar { box-shadow: 0px 10px 0px rgba(0,0,0,0.1); } -#thumbnail-drawer img { +#thumbnail-drawer img, +.grid-view img { background: white; border-radius: 3px; position: relative; box-shadow: none; } -#thumbnail-drawer img:after { +#thumbnail-drawer img:after, +.grid-view img:after { content: ""; position: absolute; z-index: 2; @@ -320,11 +326,13 @@ body::-webkit-scrollbar { flex-direction: row; } -#thumbnail-drawer .thumbnail .number { +#thumbnail-drawer .thumbnail .number, +.grid-view .thumbnail .number { font-weight: 700; } -#thumbnail-drawer .thumbnail .audio svg { +#thumbnail-drawer .thumbnail .audio svg, +.grid-view .thumbnail .audio svg { width: 14px; height: 14px; vertical-align: top; @@ -334,11 +342,13 @@ body::-webkit-scrollbar { margin-bottom: -3px; } -#thumbnail-drawer .thumbnail.selected .audio svg { +#thumbnail-drawer .thumbnail.selected .audio svg, +.grid-view .thumbnail.selected .audio svg { --color1: #000; } -#thumbnail-drawer .thumbnail .duration { +#thumbnail-drawer .thumbnail .duration, +.grid-view .thumbnail .duration { opacity: 0.8; } @@ -1065,75 +1075,14 @@ input[type=range]:focus::-webkit-slider-runnable-track { align-content: center; } -.grid-view .thumbnail.selected { - background: #8d89cf; - color: #000; - top: 0px; - position: relative; - transition: all 0s ease-out; - box-shadow: none; - z-index: 999; -} - -.grid-view img { - background: white; - border-radius: 3px; - position: relative; - box-shadow: none; -} - -.grid-view img:after { - content: ""; - position: absolute; - z-index: 2; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - background: white; - border-radius: 3px; -} - -.grid-view .thumbnail * { - pointer-events: none; -} - -.grid-view .thumbnail.selected.editing { - background: #999; - top: -10px; - position: relative; - color: #000; - transition: all .05s ease-in; - box-shadow: 0px 10px 0px rgba(0,0,0,0.1); -} - .grid-row { display: flex; flex-direction: row; -} - -.grid-view .thumbnail.active { - background: #8d89cf; - color: #000; - transition: all 0s ease-out; -} - -.grid-view .thumbnail .number { - font-weight: 700; -} - -.grid-view .thumbnail .duration { - opacity: 0.8; -} - -.grid-view .thumbnail .top { - + justify-content: space-between; } .grid-view .thumbnail .info { display: flex; flex-direction: row; justify-content: space-between; - } From 59de5e6a25d1b6fbc31d74055b74e10c226c55ee Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Wed, 2 Sep 2020 15:17:50 +0300 Subject: [PATCH 17/23] Created etag service --- src/js/utils/etags.js | 12 ++++++ .../components/GridView/GridViewElement.js | 2 +- src/js/window/components/GridView/index.js | 42 +++++++++---------- src/js/window/main-window.js | 12 +----- 4 files changed, 36 insertions(+), 32 deletions(-) create mode 100644 src/js/utils/etags.js diff --git a/src/js/utils/etags.js b/src/js/utils/etags.js new file mode 100644 index 0000000000..7047dc31b9 --- /dev/null +++ b/src/js/utils/etags.js @@ -0,0 +1,12 @@ +// TODO better name than etags? +// TODO store in boardData instead, but exclude from JSON? +// TODO use mtime trick like we do for layers and posterframes? +// cache buster for thumbnails +let etags = {} +const setEtag = absoluteFilePath => { etags[absoluteFilePath] = Date.now() } +const getEtag = absoluteFilePath => etags[absoluteFilePath] || '0' + +module.exports = { + setEtag, + getEtag +} \ No newline at end of file diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index 7831c9b48b..b1c1554da0 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -87,4 +87,4 @@ const GridViewElement = React.memo(({ ) }) -module.exports = GridViewElement; \ No newline at end of file +module.exports = GridViewElement \ No newline at end of file diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index d98d4a6e6b..92e963cd5b 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -2,26 +2,26 @@ const ReactDOM = require('react-dom') const h = require('../../../utils/h') const Grid = require('./Grid') const GridViewElement = require('./GridViewElement') +const { getEtag } = require('../../../utils/etags') let enableEditModeDelay = 750 // msecs class GridView { constructor(boardData, boardPath, saveImageFile, getSelections, getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, - gotoBoard, gridDrag, setSketchPaneVisibility, getEtag, boardModel, setEditorModeTimer) { - this.isEditMode = false; - this.boardData = boardData; - this.saveImageFile = saveImageFile; - this.getSelections = getSelections; - this.getCurrentBoard = getCurrentBoard; - this.setCurrentBoard = setCurrentBoard; - this.gridDrag = gridDrag; - this.getContextMenu = getContextMenu; - this.setSketchPaneVisibility = setSketchPaneVisibility; - this.renderThumbnailDrawerSelections = renderThumbnailDrawerSelections; - this.gotoBoard = gotoBoard; - this.getEtag = getEtag; - this.boardModel = boardModel; - this.boardPath = boardPath; - this.setEditorModeTimer = setEditorModeTimer; + gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer) { + this.isEditMode = false + this.boardData = boardData + this.saveImageFile = saveImageFile + this.getSelections = getSelections + this.getCurrentBoard = getCurrentBoard + this.setCurrentBoard = setCurrentBoard + this.gridDrag = gridDrag + this.getContextMenu = getContextMenu + this.setSketchPaneVisibility = setSketchPaneVisibility + this.renderThumbnailDrawerSelections = renderThumbnailDrawerSelections + this.gotoBoard = gotoBoard + this.boardModel = boardModel + this.boardPath = boardPath + this.setEditorModeTimer = setEditorModeTimer this.gridViewCursor = { visible: false, x: 0, @@ -30,15 +30,15 @@ class GridView { } get IsEditMode() { - return this.isEditMode; + return this.isEditMode } set IsEditMode(value) { - this.isEditMode = value; + this.isEditMode = value } enableEditMode () { - this.isEditMode = true; + this.isEditMode = true this.gridViewCursor.visible = true this.renderGridViewCursor() this.renderThumbnailDrawerSelections() @@ -165,7 +165,7 @@ class GridView { renderGridView () { this.cleanUpGridView() - let boardData = this.boardData; + let boardData = this.boardData let gridView = document.querySelector('.grid-view') gridView.addEventListener('pointerdown', this.gridDrag) ReactDOM.render(h([Grid, { @@ -173,7 +173,7 @@ class GridView { boardData, boardPath: this.boardPath, boardModel: this.boardModel, - getEtag: this.getEtag, + getEtag, pointerDown: (e) => this.pointerDown(e), pointerMove: (e) => this.pointerMove(e), pointerLeave: (e) => this.pointerLeave(e), diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 333b30c693..fe662ebd33 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -75,7 +75,7 @@ const sharedObj = remote.getGlobal('sharedObj') const SettingsService = require("../windows/shot-generator/SettingsService") const GridView = require("./components/GridView") - +const { setEtag, getEtag } = require('../utils/etags') const store = configureStore(getInitialStateRenderer(), 'renderer') window.$r = { store } // for debugging, e.g.: $r.store.getStore() const isCommandPressed = createIsCommandPressed(store) @@ -188,14 +188,6 @@ const serial = funcs => funcs.reduce((promise, func) => promise.then(result => func().then(Array.prototype.concat.bind(result))), Promise.resolve([])) -// TODO better name than etags? -// TODO store in boardData instead, but exclude from JSON? -// TODO use mtime trick like we do for layers and posterframes? -// cache buster for thumbnails -let etags = {} -const setEtag = absoluteFilePath => { etags[absoluteFilePath] = Date.now() } -const getEtag = absoluteFilePath => etags[absoluteFilePath] || '0' - const cacheKey = filepath => { try { // file exists, cache based on mtime @@ -1951,7 +1943,7 @@ const loadBoardUI = async () => { gridView = new GridView(boardData, boardPath, saveImageFile, getSelections, getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, - gotoBoard, gridDrag, setSketchPaneVisibility, getEtag, boardModel, setEditorModeTimer) + gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer) } const getSelections = () => selections const getCurrentBoard = () => currentBoard From 997bd4215951a6ca75e5e1eb7141aa509e86e06f Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Thu, 3 Sep 2020 13:14:39 +0300 Subject: [PATCH 18/23] Fixed scroll centers on element and scroll staters on arrows press --- src/js/window/main-window.js | 56 +++++++++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 11 deletions(-) diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index fe662ebd33..fbe3ec43fc 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -3302,25 +3302,54 @@ const ScrollTypes = { HORIZONTAL: "horizontal" } -const smoothScroll = (currentPosition, desiredPosition, element, block, scrollType = ScrollTypes.HORIZONTAL) => { - let i = currentPosition || 0; - let visibleSize = scrollType === ScrollTypes.HORIZONTAL ? element.offsetWidth : element.offsetHeight - let position = block === "center" ? visibleSize / 3 : 0 - let steps = 20 - let iterationStep = (desiredPosition - currentPosition - position) / steps +const isElementInViewport = (el, container) => { + + let rectElement = el.getBoundingClientRect() + let rectContainer = container.getBoundingClientRect() + return ( + rectElement.top >= rectContainer.top && + rectElement.left >= rectContainer.left && + rectElement.bottom <= rectContainer.bottom && + rectElement.right <= rectContainer.right + ); +} +let scrollInterval = {} +const smoothScroll = (currentPosition, desiredPosition, element, selectedElement, scrollType = ScrollTypes.HORIZONTAL) => { + let steps = 10 let iteration = 0 + let offset = 10 + // Is in scroll area + if(isElementInViewport(selectedElement, element)) { + return + } + let padding = Number.parseInt(window.getComputedStyle(element, null).getPropertyValue('padding')) + let rectElement = selectedElement.getBoundingClientRect() + let rectContainer = element.getBoundingClientRect() + let difference + // Is Object higher + if( rectElement.top >= rectContainer.top && + rectElement.left >= rectContainer.left) { + difference = scrollType === ScrollTypes.HORIZONTAL ? rectElement.right - rectContainer.right : rectElement.bottom - rectContainer.bottom + difference += padding + offset + } + else { + difference = scrollType === ScrollTypes.HORIZONTAL ? rectElement.left - rectContainer.left : rectElement.top - rectContainer.top + difference -= padding - offset + } + let iterationStep = difference / steps let interval = setInterval(() => { - if (i !== desiredPosition && iteration !== steps) { + if (currentPosition !== desiredPosition && iteration !== steps) { if(scrollType === ScrollTypes.HORIZONTAL) { - element.scrollTo(i += iterationStep, 0); + element.scrollTo(currentPosition += iterationStep, 0); } else { - element.scrollTo(0, i += iterationStep); + element.scrollTo(0, currentPosition += iterationStep); } iteration ++; } else { clearInterval(interval); } }, 10); + return interval } let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { @@ -3370,7 +3399,13 @@ let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { if(thumbDiv.dataset.type === 'thumbnail-grid') { thumbDiv.classList.add('active') let containerDiv = document.querySelector('.grid-view') - smoothScroll(containerDiv.scrollTop, thumbDiv.parentNode.offsetTop, containerDiv, "center", ScrollTypes.VERTICAL) + let rowContainer = thumbDiv.parentNode.parentNode + if(scrollInterval.interval && !scrollInterval.parentNode.isSameNode(rowContainer)) clearInterval(scrollInterval) + + if(!scrollInterval.parentNode || !scrollInterval.parentNode.isSameNode(rowContainer)) { + scrollInterval.interval = smoothScroll(containerDiv.scrollTop, thumbDiv.parentNode.offsetTop, containerDiv, thumbDiv, ScrollTypes.VERTICAL) + scrollInterval.parentNode = rowContainer + } } else { if (thumbDiv) { thumbDiv.classList.add('active') @@ -3379,7 +3414,6 @@ let gotoBoard = (boardNumber, shouldPreserveSelections = false) => { let thumbL = thumbDiv.offsetLeft let thumbR = thumbDiv.offsetLeft + thumbDiv.offsetWidth - console.log(containerDiv) let containerL = containerDiv.scrollLeft let containerR = containerDiv.scrollLeft + containerDiv.offsetWidth From 408cbef1dd402cef553b94fa0622e5b3795975da Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Thu, 3 Sep 2020 13:20:52 +0300 Subject: [PATCH 19/23] Fixed grid-view button highlight --- src/js/window/main-window.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index fbe3ec43fc..b8ca8f6656 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -6687,7 +6687,7 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { ], ['div.spacer'], ['div.btn', { - className: mode !== 'sequence' ? 'selected' : null, + className: mode === 'time' ? 'selected' : null, onPointerUp: onBoardsSelect }, ['svg', { className: 'icon' }, @@ -6697,7 +6697,7 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { ], ['div.spacer'], ['div.btn', { - className: isGridViewMode ? 'selected' : null, + className: mode === 'grid-view' ? 'selected' : null, onPointerUp: onGridViewSelect }, ['svg', { className: 'icon' }, @@ -6709,7 +6709,7 @@ const TimelineModeControlView = ({ mode = 'sequence', show = false }) => { ) } const renderTimelineModeControlView = ({ show = false }) => { - let mode = shouldRenderThumbnailDrawer ? 'sequence' : 'time' + let mode = !shouldRenderThumbnailDrawer ? 'time' : isGridViewMode ? 'grid-view' : 'sequence' ReactDOM.render( h([TimelineModeControlView, { mode, show }]), document.getElementById('timeline-mode-control-view') From b4220fda7533e4c819f0d69b6a07fe951ecdd2d3 Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Thu, 3 Sep 2020 16:14:08 +0300 Subject: [PATCH 20/23] Implemented automatic grid resize on window resize --- src/js/window/components/GridView/Grid.js | 25 +++++++++--- src/js/window/components/GridView/index.js | 47 ++++++++++++---------- 2 files changed, 44 insertions(+), 28 deletions(-) diff --git a/src/js/window/components/GridView/Grid.js b/src/js/window/components/GridView/Grid.js index 99a1209ecb..7bec596787 100644 --- a/src/js/window/components/GridView/Grid.js +++ b/src/js/window/components/GridView/Grid.js @@ -44,20 +44,34 @@ const Grid = React.memo(({ itemData, - numCols, itemHeight = '100%', - itemWidth = '100%' + itemWidth = '100%', + defaultElementWidth }) => { const elementStyle = { height: itemHeight, width: itemWidth } - + const [numCols, setNumCols] = useState(2) const containerRef = useRef(null) const [currentIndex, setCurrentIndex] = useState(getIndices()) + const resizeGrid = (e) => { + // NOTE(): Grid takes 70% of the space? + let gridSpace = window.innerWidth * 0.70 + let columnsNumber = Math.round(gridSpace / defaultElementWidth) + columnsNumber = columnsNumber < 2 ? 2 : columnsNumber + setNumCols(columnsNumber) + } + + useEffect(() => { + resizeGrid() + window.addEventListener('resize', resizeGrid); + return () => { + window.removeEventListener('resize', resizeGrid); + } + }, []) const onParentScroll = useCallback(throttle((e) => { - console.log("Scrolling") const index = getIndices(e.target, itemHeight, numCols) if (index > currentIndex) { setCurrentIndex(index) @@ -66,7 +80,6 @@ const Grid = React.memo(({ useEffect(() => { if(!containerRef.current) return - console.log(containerRef.current) containerRef.current.parentNode.addEventListener('scroll', onParentScroll) const index = getIndices(containerRef.current, itemHeight, numCols) if (index > currentIndex) { @@ -100,7 +113,7 @@ const Grid = React.memo(({ } return result - }, [elements.length, itemData, currentIndex]) + }, [elements.length, itemData, currentIndex, numCols]) return h( ['div', { ref:containerRef }, diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index 92e963cd5b..c3c13c0930 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -164,28 +164,31 @@ class GridView { } renderGridView () { - this.cleanUpGridView() - let boardData = this.boardData - let gridView = document.querySelector('.grid-view') - gridView.addEventListener('pointerdown', this.gridDrag) - ReactDOM.render(h([Grid, { - itemData:{ - boardData, - boardPath: this.boardPath, - boardModel: this.boardModel, - getEtag, - pointerDown: (e) => this.pointerDown(e), - pointerMove: (e) => this.pointerMove(e), - pointerLeave: (e) => this.pointerLeave(e), - pointerEnter: (e) => this.pointerEnter(e), - dblclick: (e) => this.doubleClick(e) - }, - Component:GridViewElement, - elements:boardData.boards, - numCols:3, - itemHeight: 200 - } - ]), gridView, () => this.renderThumbnailDrawerSelections()) + this.cleanUpGridView() + let boardData = this.boardData + let gridView = document.querySelector('.grid-view') + let defaultHeight = 200 + let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) + gridView.addEventListener('pointerdown', this.gridDrag) + ReactDOM.render(h([Grid, { + itemData:{ + boardData, + boardPath: this.boardPath, + boardModel: this.boardModel, + getEtag, + pointerDown: (e) => this.pointerDown(e), + pointerMove: (e) => this.pointerMove(e), + pointerLeave: (e) => this.pointerLeave(e), + pointerEnter: (e) => this.pointerEnter(e), + dblclick: (e) => this.doubleClick(e) + }, + Component:GridViewElement, + elements:boardData.boards, + numCols:3, + itemHeight: defaultHeight, + defaultElementWidth: thumbnailWidth + } + ]), gridView, () => this.renderThumbnailDrawerSelections()) } } From 8b7bc4c0cef93e237e2d7b2688f0ee1f562408ef Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Fri, 4 Sep 2020 12:13:55 +0300 Subject: [PATCH 21/23] Changed the grid-view dragging --- .../components/GridView/GridViewElement.js | 18 +++-- src/js/window/components/GridView/index.js | 58 +++++++++++----- src/js/window/main-window.js | 66 +++++++++++-------- 3 files changed, 95 insertions(+), 47 deletions(-) diff --git a/src/js/window/components/GridView/GridViewElement.js b/src/js/window/components/GridView/GridViewElement.js index b1c1554da0..b34b97bcf4 100644 --- a/src/js/window/components/GridView/GridViewElement.js +++ b/src/js/window/components/GridView/GridViewElement.js @@ -3,6 +3,7 @@ const React = require('react') const path = require('path') const util = require('../../../utils/index') const fs = require('fs-extra') +const { useEffect, useRef } = require('react') const GridViewElement = React.memo(({ data: board, index, @@ -14,12 +15,15 @@ const GridViewElement = React.memo(({ pointerMove, pointerLeave, pointerEnter, - dblclick + dblclick, + gridElementOffset, + selectThumbnail }) => { + const thumbnailRef = useRef() let defaultHeight = 200 let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) - let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-posterframe.jpg')) const getImage = () => { + let imageFilename = path.join(boardPath, 'images', board.url.replace('.png', '-posterframe.jpg')) let imageElement = '' try { if (fs.existsSync(imageFilename)) { @@ -59,10 +63,15 @@ const GridViewElement = React.memo(({ } } + + useEffect(() => { + selectThumbnail(thumbnailRef.current) + }) + return h( ['div', { className: "thumbnail-container", - style:{ width:thumbnailWidth }, + style:{ width:thumbnailWidth + gridElementOffset }, }, ['div', { style:{ display:"flex", flexDirection:"column", alignSelf:"center"}, @@ -73,7 +82,8 @@ const GridViewElement = React.memo(({ onPointerMove: pointerMove, onPointerLeave: pointerLeave, onPointerEnter: pointerEnter, - onDoubleClick: dblclick + onDoubleClick: dblclick, + ref:thumbnailRef }, getImage(), ['div', { className:"info" }, diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index c3c13c0930..3c01d3ab83 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -27,6 +27,7 @@ class GridView { x: 0, el: null } + this.gridElementOffset = 24 } get IsEditMode() { @@ -49,7 +50,11 @@ class GridView { if (!offset) { offset = 0 } let el = document.elementFromPoint(x-offset, y) - if (!el || !el.classList.contains('thumbnail')) return null + if(!el) return null + if(el.classList.contains('thumbnail-container')) { + el = el.childNodes[0] + } + if (!el.classList.contains('thumbnail')) return null let selections = this.getSelections() // if part of a multi-selection, base from right-most element if (selections.has(Number(el.dataset.thumbnail))) { @@ -87,24 +92,32 @@ class GridView { updateGridViewCursor(x, y) { let el = this.gridViewFromPoint(x, y) - let offset = 0 - if (el) { - offset = el.getBoundingClientRect().width - el = this.gridViewFromPoint(x, y, offset/2) - } if (!el) return + let rect = el.getBoundingClientRect() + this.gridViewCursor.el = el + let elementOffsetX - let elementOffsetX = el.getBoundingClientRect().right - - let elementOffsetY = el.getBoundingClientRect().top + let elementOffsetY = rect.top + let arrowOffsetX + // Figures out if mouse is to the left side of container or to the right + let reactMiddlePointX = rect.left + rect.width / 2 + if(x < reactMiddlePointX) { + let cursor = document.querySelector('#grid-cursor-container') + elementOffsetX = rect.left + arrowOffsetX = -8 - cursor.clientWidth + this.gridViewCursor.side = "Left" + } else if(x >= reactMiddlePointX) { + elementOffsetX = rect.right + arrowOffsetX = 8 + this.gridViewCursor.side = "Right" + } + let scrollTop = el.scrollTop - - let arrowOffsetX = 8 let arrowOffsetY = -8 - this.gridViewCursor.x = elementOffsetX + arrowOffsetX + this.gridViewCursor.x = elementOffsetX + arrowOffsetX this.gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop } @@ -163,11 +176,20 @@ class GridView { this.setSketchPaneVisibility(true) } - renderGridView () { + selectThumbnail(thumb) { + let i = Number(thumb.dataset.thumbnail) + if(i === this.getCurrentBoard()) { + thumb.classList.toggle('active', true) + thumb.classList.toggle('selected', this.getSelections().has(i)) + thumb.classList.toggle('editing', this.isEditMode) + } + } + + renderGridView (callback) { this.cleanUpGridView() let boardData = this.boardData let gridView = document.querySelector('.grid-view') - let defaultHeight = 200 + let defaultHeight = 200 + this.gridElementOffset let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) gridView.addEventListener('pointerdown', this.gridDrag) ReactDOM.render(h([Grid, { @@ -180,15 +202,17 @@ class GridView { pointerMove: (e) => this.pointerMove(e), pointerLeave: (e) => this.pointerLeave(e), pointerEnter: (e) => this.pointerEnter(e), - dblclick: (e) => this.doubleClick(e) + dblclick: (e) => this.doubleClick(e), + selectThumbnail: (thumb) => this.selectThumbnail(thumb) }, Component:GridViewElement, elements:boardData.boards, numCols:3, itemHeight: defaultHeight, - defaultElementWidth: thumbnailWidth + defaultElementWidth: thumbnailWidth, + gridElementOffset: this.gridElementOffset } - ]), gridView, () => this.renderThumbnailDrawerSelections()) + ]), gridView, () => { this.renderThumbnailDrawerSelections(), callback && callback() }) } } diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index b8ca8f6656..73799b8ac4 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -1089,33 +1089,48 @@ const loadBoardUI = async () => { // log.info('pointerup', isEditMode) if (isEditMode()) { + let checkoutBoard + let index + if(gridView.IsEditMode) { + let el = gridView.gridViewFromPoint(gridView.gridViewCursor.x, gridView.gridViewCursor.y) || gridView.gridViewCursor.el + if (!el) { + log.warn("couldn't find nearest thumbnail") + return + } + if (el) { + if(gridView.gridViewCursor.side === "Left") { + index = Number(el.dataset.thumbnail) + } else { + index = Number(el.dataset.thumbnail) + 1 + } + } + checkoutBoard = () => gridView.renderGridView(() => gotoBoard(currentBoard, true)) - let x = e.clientX, y = e.clientY - - // 1) try to find nearest thumbnail, otherwise, - // HACK 2) try to find last known thumbnail position - let el = thumbnailFromPoint(x, y) || thumbnailCursor.el - - if(isGridViewMode) { - el = gridView.gridViewFromPoint(x, y) || gridView.gridViewCursor.el } else { - el = thumbnailFromPoint(x, y) || thumbnailCursor.el - } - let offset = 0 - if (el) { - offset = el.getBoundingClientRect().width - el = !isGridViewMode ? thumbnailFromPoint(x, y, offset/2) : gridView.gridViewFromPoint(x, y, offset/2) - } + let x = e.clientX, y = e.clientY - if (!el) { - log.warn("couldn't find nearest thumbnail") - } + // 1) try to find nearest thumbnail, otherwise, + // HACK 2) try to find last known thumbnail position + let el = thumbnailFromPoint(x, y) || thumbnailCursor.el + + el = thumbnailFromPoint(x, y) || thumbnailCursor.el + let offset = 0 + if (el) { + offset = el.getBoundingClientRect().width + el = gridView.gridViewFromPoint(x, y, offset/2) + } + + if (!el) { + log.warn("couldn't find nearest thumbnail") + } + + if (isBeforeFirstThumbnail(x, y)) { + index = 0 + } else if (el) { + index = Number(el.dataset.thumbnail) + 1 + } - let index - if (isBeforeFirstThumbnail(x, y)) { - index = 0 - } else if (el) { - index = Number(el.dataset.thumbnail) + 1 + checkoutBoard = () => gotoBoard(currentBoard, true) } if (!util.isUndefined(index)) { @@ -1128,13 +1143,12 @@ const loadBoardUI = async () => { } renderThumbnailDrawer() - isGridViewMode && gridView.renderGridView() - gotoBoard(currentBoard, true) + + checkoutBoard() }) } else { log.info('could not find point for move operation') } - disableEditMode() } From 6a343f5993589dcbc294f2302f20ca22edcb8d4e Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Fri, 4 Sep 2020 13:30:44 +0300 Subject: [PATCH 22/23] Implemented grid-view scroll on element drag --- src/js/window/components/GridView/index.js | 8 +++- src/js/window/main-window.js | 47 +++++++++++++++------- 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index 3c01d3ab83..618d103106 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -46,6 +46,10 @@ class GridView { this.getContextMenu().remove() } + getDefaultHeight() { + return 200 + this.gridElementOffset + } + gridViewFromPoint(x, y, offset) { if (!offset) { offset = 0 } @@ -119,7 +123,7 @@ class GridView { this.gridViewCursor.x = elementOffsetX + arrowOffsetX this.gridViewCursor.y = elementOffsetY + arrowOffsetY - scrollTop - } + } pointerEnter (e) { let selections = this.getSelections() @@ -189,7 +193,7 @@ class GridView { this.cleanUpGridView() let boardData = this.boardData let gridView = document.querySelector('.grid-view') - let defaultHeight = 200 + this.gridElementOffset + let defaultHeight = this.getDefaultHeight() let thumbnailWidth = Math.floor(defaultHeight * boardData.aspectRatio) gridView.addEventListener('pointerdown', this.gridDrag) ReactDOM.render(h([Grid, { diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 73799b8ac4..83a72c6280 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -4502,15 +4502,7 @@ let getSceneColor = function (sceneString) { return ('black') } -let setDragTarget = (x) => { - let containerRect = dragTarget.getBoundingClientRect() - - let mouseX = x - containerRect.left - let midpointX = containerRect.width / 2 - - // distance ratio -1...0...1 - let distance = (mouseX - midpointX) / midpointX - +const getScrollingStrength = (distance) => { // default is the dead zone at 0 let strength = 0 // -1..-0.5 @@ -4525,16 +4517,39 @@ let setDragTarget = (x) => { } strength = util.clamp(strength, -1, 1) + return strength +} + +let setScroll = (point, target, elementSize, sideName, sizeName, scrollDirection) => { + let containerRect = target.getBoundingClientRect() + let mousePos = point - containerRect[sideName] + let midpointPos = containerRect[sizeName] / 2 + + // distance ratio -1...0...1 + let distance = (mousePos - midpointPos) / midpointPos + + let strength = getScrollingStrength(distance) // max speed is half of the average board width per pointermove - let speedlimit = Math.floor(60 * boardData.aspectRatio * 0.5) + let speedlimit = Math.floor(elementSize * boardData.aspectRatio * 0.5) // NOTE I don't bother clamping min/max because scrollLeft handles that for us - let newScrollLeft = dragTarget.scrollLeft + (strength * speedlimit) + let newScroll = target[scrollDirection] + (strength * speedlimit) - dragTarget.scrollLeft = newScrollLeft + target[scrollDirection] = newScroll } +let scrollTarget = ({x = null, y = null}, target, elementSize) => { + if(x) { + setScroll(x, target, elementSize, 'left', 'width', 'scrollLeft') + } + if(y) { + setScroll(y, target, elementSize, 'top', 'height', 'scrollTop') + } + +} + + let updateDrag = () => { if (util.isUndefined(lastPointer.x) || util.isUndefined(lastPointer.y)) { return @@ -4542,11 +4557,13 @@ let updateDrag = () => { if (isEditMode() && dragMode) { - setDragTarget(lastPointer.x) + + !gridView.IsEditMode ? scrollTarget({x:lastPointer.x}, dragTarget, 60) : + scrollTarget({y:lastPointer.y}, document.querySelector('.grid-view'), gridView.getDefaultHeight()) updateThumbnailCursor(lastPointer.x, lastPointer.y) renderThumbnailCursor() - isGridViewMode && gridView.updateGridViewCursor(lastPointer.x, lastPointer.y) - isGridViewMode && gridView.renderGridViewCursor() + gridView.IsEditMode && gridView.updateGridViewCursor(lastPointer.x, lastPointer.y) + gridView.IsEditMode && gridView.renderGridViewCursor() } } From 8610f5792ac0c4bfbd90171d940e0adb474f6bcf Mon Sep 17 00:00:00 2001 From: Vlad Stepura Date: Fri, 4 Sep 2020 13:36:05 +0300 Subject: [PATCH 23/23] Fixed on shot selection selected mode doesn't rerender --- src/js/window/components/GridView/index.js | 4 +++- src/js/window/main-window.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/js/window/components/GridView/index.js b/src/js/window/components/GridView/index.js index 618d103106..e924d6936a 100644 --- a/src/js/window/components/GridView/index.js +++ b/src/js/window/components/GridView/index.js @@ -7,7 +7,7 @@ let enableEditModeDelay = 750 // msecs class GridView { constructor(boardData, boardPath, saveImageFile, getSelections, getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, - gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer) { + gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer, renderTimelineModeControlView) { this.isEditMode = false this.boardData = boardData this.saveImageFile = saveImageFile @@ -28,6 +28,7 @@ class GridView { el: null } this.gridElementOffset = 24 + this.renderTimelineModeControlView = renderTimelineModeControlView } get IsEditMode() { @@ -178,6 +179,7 @@ class GridView { doubleClick (e) { this.setSketchPaneVisibility(true) + this.renderTimelineModeControlView({ show: true }) } selectThumbnail(thumb) { diff --git a/src/js/window/main-window.js b/src/js/window/main-window.js index 83a72c6280..ee588b1afb 100644 --- a/src/js/window/main-window.js +++ b/src/js/window/main-window.js @@ -1957,7 +1957,7 @@ const loadBoardUI = async () => { gridView = new GridView(boardData, boardPath, saveImageFile, getSelections, getCurrentBoard, setCurrentBoard, getContextMenu, renderThumbnailDrawerSelections, - gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer) + gotoBoard, gridDrag, setSketchPaneVisibility, boardModel, setEditorModeTimer, renderTimelineModeControlView) } const getSelections = () => selections const getCurrentBoard = () => currentBoard