From 12ec53fe6b0acfa776dd979ebf10290396a78e44 Mon Sep 17 00:00:00 2001 From: Markus Koskimies Date: Wed, 18 Dec 2024 23:40:59 +0200 Subject: [PATCH] Draggable acts (#309) * Draggable acts * Open debug console in dev builds --- README.md | 18 +++++-- public/electron.js | 2 +- src/document/util.js | 2 +- src/gui/arc/arc.js | 3 +- src/gui/common/docIndex.js | 96 ++++++++++++++++++++++++++++------- src/gui/common/styles/TOC.css | 18 +++++++ src/gui/editor/editor.js | 7 +-- 7 files changed, 118 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index f5ce12f..f65239a 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ In short, MaweJS is externally unstructured editor (like Notepad, Word or Google In newer Ubuntus you may encounter errors due to changed permissions. First, you may need to run AppImage without sandboxing: ``` -$ mawejs-0.7.0.Linux.amd.AppImage --no-sandbox +$ mawejs-A.B.C.Linux.amd.AppImage --no-sandbox ``` In newer Ubuntus, if you run the sources, you may need to set SUID bit on. You need to do this every time ElectronJS is updated. There is now npm run target to do that: @@ -125,10 +125,20 @@ Get dependencies: mawejs$ npm install -Running (development version). Open up two terminals (one for the dev server and one for the ElectronJS application): +## Running from Sources + +**Linux:** mawejs$ npm run dev - mawejs$ npm run dev:electron + +**Windows:** If you use command prompt, it can't understand shell commands in `dev` target written for Bash shell. Open up two terminals (one for the dev server and one for the ElectronJS application). Run the latter command, when React dev server is up: + + shell 1: mawejs$ npm run dev:react + shell 2: mawejs$ npm run dev:electron + +`dev:react` React starts development server, and `dev:electron` starts Electron browser. The Electron browser is standard Chromium, but it has ElectronJS backend to allow local access. + +## Updating If you update the project with 'git pull', you may need to update the libraries, too: @@ -139,6 +149,8 @@ If you update the project with 'git pull', you may need to update the libraries, Instructions to get React DevTools working: https://github.com/mkoskim/mawejs/discussions/131 +VS Code Electron debugging: https://github.com/Microsoft/vscode-recipes/tree/master/Electron + ## Example files You can test MaweJS with example files located in examples/ diff --git a/public/electron.js b/public/electron.js index 2ac6b7c..d2def40 100644 --- a/public/electron.js +++ b/public/electron.js @@ -71,11 +71,11 @@ async function createWindow() mainWindow.setMenu(null); //console.log("Languages:", mainWindow.webContents.session.availableSpellCheckerLanguages) //mainWindow.webContents.session.setSpellCheckerLanguages(['fi']) - //mainWindow.webContents.openDevTools(); if(isDev) { debug(); + mainWindow.webContents.openDevTools(); mainWindow.loadURL('http://localhost:3000'); } else{ diff --git a/src/document/util.js b/src/document/util.js index 20b7ef9..63d1f5e 100644 --- a/src/document/util.js +++ b/src/document/util.js @@ -125,7 +125,7 @@ export function elemHeading(elem) { if(elem.children.length) { const [first] = elem.children - if(nodeBreaks(first) === elem.type) return first + if(nodeIsBreak(first) && nodeBreaks(first) === elem.type) return first } return undefined diff --git a/src/gui/arc/arc.js b/src/gui/arc/arc.js index d3cc34a..710da87 100644 --- a/src/gui/arc/arc.js +++ b/src/gui/arc/arc.js @@ -177,6 +177,7 @@ export function StoryArc({doc, updateDoc}) { //console.log(type, source, "-->", destination) switch(type) { + case "act": case "chapter": case "scene": { const {path: srcPath} = IDtoPath(draggableId) @@ -184,7 +185,7 @@ export function StoryArc({doc, updateDoc}) { //const srcEdit = getEditorBySectID(srcSectID) //const dstEdit = getEditorBySectID(dstSectID) - const dropped = dndDrop(bodyeditor, srcPath, bodyeditor, dstPath, destination.index) + dndDrop(bodyeditor, srcPath, bodyeditor, dstPath ?? [], destination.index) //setActive(nodeID(dstSectID, dropped)) break; } diff --git a/src/gui/common/docIndex.js b/src/gui/common/docIndex.js index ab4c254..18b91bc 100644 --- a/src/gui/common/docIndex.js +++ b/src/gui/common/docIndex.js @@ -109,32 +109,76 @@ export function DocIndex({style, sectID, section, wcFormat, include, setActive, // Single unnamed act -> don't show //--------------------------------------------------------------------------- - const skipActName = (section.acts.length === 1 && !elemName(section.acts[0])) + //const skipActName = (section.acts.length === 1 && !elemName(section.acts[0])) //--------------------------------------------------------------------------- // Index //--------------------------------------------------------------------------- return - {section.acts.map((elem, index) => - )} //return useDeferredValue(index) } +//***************************************************************************** +// +// Act drop zone +// +//***************************************************************************** + +class ActDropZone extends React.PureComponent { + + render() { + const {id} = this.props + + //console.log("Index update:", activeID) + + return + {this.DropZone.bind(this)} + + } + + DropZone(provided, snapshot) { + const {acts, id, wcFormat, include, onActivate, unfold, atAct, atChapter, atScene, refCurrent} = this.props + const {innerRef, droppableProps, placeholder} = provided + const {isDraggingOver} = snapshot + + return
+ {acts.map((elem, index) => !nodeIsCtrl(elem) && )} + {placeholder} +
+ } +} + //***************************************************************************** // // Act items @@ -144,7 +188,19 @@ export function DocIndex({style, sectID, section, wcFormat, include, setActive, class ActItem extends React.PureComponent { render() { - const {skipActName, elem, wcFormat, id, include, onActivate, unfold, atAct, atChapter, atScene, refCurrent} = this.props + const {id, index} = this.props + return + {this.Draggable.bind(this)} + + } + + Draggable(provided, snapshot) { + const {elem, wcFormat, id, index, include, onActivate, unfold, atAct, atChapter, atScene, refCurrent} = this.props + const {innerRef, draggableProps, dragHandleProps} = provided const hasDropzone = (include.includes("chapter")) && (unfold || !elem.folded) //const hasDropzone = (unfold || !elem.folded) @@ -154,19 +210,23 @@ class ActItem extends React.PureComponent { (!hasDropzone || atChapter === undefined || elem.children[atChapter].type === "hact") ) - return
- {!skipActName && + } + {...dragHandleProps} + /> {hasDropzone && ", destination) switch(type) { + case "act": case "chapter": case "scene": { const {sectID: srcSectID, path: srcPath} = IDtoPath(draggableId) @@ -420,7 +421,7 @@ export function SingleEditView({doc, updateDoc}) { const srcEdit = getEditorBySectID(srcSectID) const dstEdit = getEditorBySectID(dstSectID) - dndDrop(srcEdit, srcPath, dstEdit, dstPath, destination.index) + dndDrop(srcEdit, srcPath, dstEdit, dstPath ?? [], destination.index) setActive(nodeID(dstSectID)) break; } @@ -675,10 +676,10 @@ function EditorBox({style, settings, mode="Condensed"}) { {/* Editor toolbar */} - - + +