Merge pull request #4 from VE-FORBRYDERNE/editable-chunks

Editable chunks
This commit is contained in:
henk717 2021-08-24 01:01:27 +02:00 committed by GitHub
commit 1c8f6cbc75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 284 additions and 80 deletions

View File

@ -543,7 +543,7 @@ def get_message(msg):
# Back/Undo Action
elif(msg['cmd'] == 'back'):
actionback()
# EditMode Action
# EditMode Action (old)
elif(msg['cmd'] == 'edit'):
if(vars.mode == "play"):
vars.mode = "edit"
@ -551,10 +551,15 @@ def get_message(msg):
elif(vars.mode == "edit"):
vars.mode = "play"
emit('from_server', {'cmd': 'editmode', 'data': 'false'}, broadcast=True)
# EditLine Action
# EditLine Action (old)
elif(msg['cmd'] == 'editline'):
editrequest(int(msg['data']))
# DeleteLine Action
# Inline edit
elif(msg['cmd'] == 'inlineedit'):
inlineedit(msg['chunk'], msg['data'])
elif(msg['cmd'] == 'inlinedelete'):
inlinedelete(msg['data'])
# DeleteLine Action (old)
elif(msg['cmd'] == 'delete'):
deleterequest()
elif(msg['cmd'] == 'memory'):
@ -1382,7 +1387,7 @@ def editsubmit(data):
vars.mode = "play"
refresh_story()
emit('from_server', {'cmd': 'texteffect', 'data': vars.editln}, broadcast=True)
emit('from_server', {'cmd': 'editmode', 'data': 'false'}, broadcast=True)
emit('from_server', {'cmd': 'editmode', 'data': 'false'})
#==================================================================#
#
@ -1396,6 +1401,34 @@ def deleterequest():
del vars.actions[vars.editln-1]
vars.mode = "play"
refresh_story()
emit('from_server', {'cmd': 'editmode', 'data': 'false'})
#==================================================================#
#
#==================================================================#
def inlineedit(chunk, data):
chunk = int(chunk)
if(chunk == 0):
vars.prompt = data
else:
vars.actions[chunk-1] = data
refresh_story()
emit('from_server', {'cmd': 'texteffect', 'data': chunk}, broadcast=True)
emit('from_server', {'cmd': 'editmode', 'data': 'false'}, broadcast=True)
#==================================================================#
#
#==================================================================#
def inlinedelete(chunk):
chunk = int(chunk)
# Don't delete prompt
if(chunk == 0):
# Send error message
emit('from_server', {'cmd': 'editmode', 'data': 'false'}, broadcast=True)
else:
del vars.actions[chunk-1]
refresh_story()
emit('from_server', {'cmd': 'editmode', 'data': 'false'}, broadcast=True)
#==================================================================#

View File

@ -21,11 +21,9 @@ var button_format;
var button_mode;
var button_mode_label;
var button_send;
var button_actedit;
var button_actmem;
var button_actback;
var button_actretry;
var button_delete;
var button_actwi;
var game_text;
var input_text;
@ -67,6 +65,11 @@ var seqselcontents;
var memorymode = false;
var gamestarted = false;
var editmode = false;
var connected = false;
var newly_loaded = true;
var current_editing_chunk = null;
var chunk_conflict = false;
// Key states
var shift_down = false;
@ -75,6 +78,7 @@ var do_clear_ent = false;
// Display vars
var allowtoggle = false;
var formatcount = 0;
var allowedit = true; // Whether clicking on chunks will edit them
// Adventure
var action_mode = 0; // 0: story, 1: action
@ -384,32 +388,11 @@ function popupShow(state) {
}
function enterEditMode() {
// Add class to each story chunk
showMessage("Please select a story chunk to edit above.");
button_actedit.html("Cancel");
game_text.children('chunk').addClass("chunkhov");
game_text.on('click', '> *', function() {
editModeSelect($(this).attr("n"));
});
disableSendBtn();
hide([button_actback, button_actmem, button_actretry, button_actwi]);
show([button_delete]);
editmode = true;
}
function exitEditMode() {
// Remove class to each story chunk
hideMessage();
button_actedit.html("Edit");
game_text.children('chunk').removeClass("chunkhov");
game_text.off('click', '> *');
enableSendBtn();
show([button_actback, button_actmem, button_actretry, button_actwi]);
hide([button_delete]);
input_text.val("");
}
function editModeSelect(n) {
socket.send({'cmd': 'editline', 'data': n});
editmode = false;
}
function enterMemoryMode() {
@ -417,7 +400,7 @@ function enterMemoryMode() {
setmodevisibility(false);
showMessage("Edit the memory to be sent with each request to the AI.");
button_actmem.html("Cancel");
hide([button_actback, button_actretry, button_actedit, button_delete, button_actwi]);
hide([button_actback, button_actretry, button_actwi]);
// Display Author's Note field
anote_menu.slideDown("fast");
}
@ -427,7 +410,7 @@ function exitMemoryMode() {
setmodevisibility(adventure);
hideMessage();
button_actmem.html("Memory");
show([button_actback, button_actretry, button_actedit, button_actwi]);
show([button_actback, button_actretry, button_actwi]);
input_text.val("");
// Hide Author's Note field
anote_menu.slideUp("fast");
@ -436,7 +419,7 @@ function exitMemoryMode() {
function enterWiMode() {
showMessage("World Info will be added to memory only when the key appears in submitted text or the last action.");
button_actwi.html("Accept");
hide([button_actedit, button_actback, button_actmem, button_actretry, game_text]);
hide([button_actback, button_actmem, button_actretry, game_text]);
show([wi_menu]);
disableSendBtn();
}
@ -445,7 +428,7 @@ function exitWiMode() {
hideMessage();
button_actwi.html("W Info");
hide([wi_menu]);
show([button_actedit, button_actback, button_actmem, button_actretry, game_text]);
show([button_actback, button_actmem, button_actretry, game_text]);
enableSendBtn();
}
@ -486,14 +469,14 @@ function changemode() {
}
function newTextHighlight(ref) {
ref.addClass("color_green");
ref.addClass("colorfade");
ref.addClass("edit-flash");
setTimeout(function () {
ref.removeClass("color_green");
ref.addClass("colorfade");
ref.removeClass("edit-flash");
setTimeout(function () {
ref.removeClass("colorfade");
}, 1000);
}, 10);
}, 50);
}
function showAidgPopup() {
@ -588,12 +571,11 @@ function hideRandomStoryPopup() {
function setStartState() {
enableSendBtn();
enableButtons([button_actmem, button_actwi]);
disableButtons([button_actedit, button_actback, button_actretry]);
hide([wi_menu, button_delete]);
show([game_text, button_actedit, button_actmem, button_actwi, button_actback, button_actretry]);
disableButtons([button_actback, button_actretry]);
hide([wi_menu]);
show([game_text, button_actmem, button_actwi, button_actback, button_actretry]);
hideMessage();
hideWaitAnimation();
button_actedit.html("Edit");
button_actmem.html("Memory");
button_actwi.html("W Info");
hideAidgPopup();
@ -638,6 +620,126 @@ function setadventure(state) {
}
}
function autofocus(event) {
if(connected) {
current_editing_chunk = event.target;
event.target.focus();
} else {
event.preventDefault();
}
}
function chunkOnKeyDown(event) {
// Enter should submit the chunk changes, except when holding shift
// Escape should also do it regardless of whether shift is held
if(event.keyCode == 27 || (!event.shiftKey && event.keyCode == 13)) {
setTimeout(function () {
event.target.blur();
}, 5);
event.preventDefault();
return;
}
// Allow left and right arrow keys (and backspace) to move between chunks
switch(event.keyCode) {
case 37: // left
case 39: // right
old_selection_offset = getSelection().focusOffset;
setTimeout(function () {
// Wait a few milliseconds and check if the caret has moved
new_selection = getSelection();
if(old_selection_offset != new_selection.focusOffset) {
return;
}
// If it hasn't moved, we're at the beginning or end of a chunk
// and the caret must be moved to a different chunk
chunk = document.activeElement;
switch(event.keyCode) {
case 37: // left
if((chunk = chunk.previousSibling) && chunk.tagName == "CHUNK") {
range = document.createRange();
range.selectNodeContents(chunk);
range.collapse(false);
new_selection.removeAllRanges();
new_selection.addRange(range);
}
break;
case 39: // right
if((chunk = chunk.nextSibling) && chunk.tagName == "CHUNK") {
chunk.focus();
}
}
}, 2);
return;
case 8: // backspace
old_length = document.activeElement.innerText.length;
setTimeout(function () {
// Wait a few milliseconds and compare the chunk's length
if(old_length != document.activeElement.innerText.length) {
return;
}
// If it's the same, we're at the beginning of a chunk
if((chunk = document.activeElement.previousSibling) && chunk.tagName == "CHUNK") {
range = document.createRange();
selection = getSelection();
range.selectNodeContents(chunk);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}
}, 2);
return
}
// Don't allow any edits if not connected to server
if(!connected) {
event.preventDefault();
return;
}
// Prevent CTRL+B, CTRL+I and CTRL+U when editing chunks
if(event.ctrlKey || event.metaKey) { // metaKey is macOS's command key
switch(event.keyCode) {
case 66:
case 98:
case 73:
case 105:
case 85:
case 117:
event.preventDefault();
return;
}
}
}
function submitEditedChunk(event) {
// Don't do anything if the current chunk hasn't been edited or if someone
// else overwrote it while you were busy lollygagging
if(current_editing_chunk === null || chunk_conflict) {
chunk_conflict = false;
return;
}
show([$('#curtain')]);
setTimeout(function () {
if(document.activeElement.tagName == "CHUNK") {
document.activeElement.blur();
}
}, 5);
chunk = current_editing_chunk;
current_editing_chunk = null;
// Submit the edited chunk if it's not empty, otherwise delete it
if(chunk.innerText.length) {
socket.send({'cmd': 'inlineedit', 'chunk': chunk.getAttribute("n"), 'data': chunk.innerText});
} else {
socket.send({'cmd': 'inlinedelete', 'data': chunk.getAttribute("n")});
}
}
//=================================================================//
// READY/RUNTIME
//=================================================================//
@ -661,11 +763,9 @@ $(document).ready(function(){
button_mode = $('#btnmode')
button_mode_label = $('#btnmode_label')
button_send = $('#btnsend');
button_actedit = $('#btn_actedit');
button_actmem = $('#btn_actmem');
button_actback = $('#btn_actundo');
button_actretry = $('#btn_actretry');
button_delete = $('#btn_delete');
button_actwi = $('#btn_actwi');
game_text = $('#gametext');
input_text = $('#input_text');
@ -711,6 +811,7 @@ $(document).ready(function(){
socket.on('from_server', function(msg) {
if(msg.cmd == "connected") {
// Connected to Server Actions
connected = true;
connect_status.html("<b>Connected to KoboldAI Process!</b>");
connect_status.removeClass("color_orange");
connect_status.addClass("color_green");
@ -718,28 +819,46 @@ $(document).ready(function(){
settings_menu.html("");
format_menu.html("");
wi_menu.html("");
// Set up "Allow Editing"
$('body').on('input', autofocus).on('keydown', 'chunk', chunkOnKeyDown).on('focusout', 'chunk', submitEditedChunk);
$('#allowediting').prop('checked', allowedit).prop('disabled', false).change().on('change', function () {
if(allowtoggle) {
allowedit = $(this).prop('checked')
$("chunk").attr('contenteditable', allowedit)
}
});
} else if(msg.cmd == "updatescreen") {
_gamestarted = gamestarted
_gamestarted = gamestarted;
gamestarted = msg.gamestarted;
if(_gamestarted != gamestarted) {
action_mode = 0;
changemode();
}
// Send game content to Game Screen
if(allowedit && document.activeElement.tagName == "CHUNK") {
chunk_conflict = true;
}
game_text.html(msg.data);
// Make content editable if need be
$("chunk").attr('tabindex', -1)
$('chunk').attr('contenteditable', allowedit);
hide([$('#curtain')]);
// Scroll to bottom of text
setTimeout(function () {
$('#gamescreen').animate({scrollTop: $('#gamescreen').prop('scrollHeight')}, 1000);
}, 5);
if(newly_loaded) {
setTimeout(function () {
$('#gamescreen').animate({scrollTop: $('#gamescreen').prop('scrollHeight')}, 1000);
}, 5);
}
newly_loaded = false;
} else if(msg.cmd == "setgamestate") {
// Enable or Disable buttons
if(msg.data == "ready") {
enableSendBtn();
enableButtons([button_actedit, button_actmem, button_actwi, button_actback, button_actretry]);
enableButtons([button_actmem, button_actwi, button_actback, button_actretry]);
hideWaitAnimation();
} else if(msg.data == "wait") {
disableSendBtn();
disableButtons([button_actedit, button_actmem, button_actwi, button_actback, button_actretry]);
disableButtons([button_actmem, button_actwi, button_actback, button_actretry]);
showWaitAnimation();
} else if(msg.data == "start") {
setStartState();
@ -752,11 +871,10 @@ $(document).ready(function(){
exitEditMode();
}
} else if(msg.cmd == "setinputtext") {
// Set input box text for edit mode
input_text.val(msg.data);
} else if(msg.cmd == "enablesubmit") {
// Enables the submit button
enableSendBtn();
// Set input box text for memory mode
if(memorymode) {
input_text.val(msg.data);
}
} else if(msg.cmd == "memmode") {
// Enable or Disable memory edit mode
if(msg.data == "true") {
@ -932,6 +1050,7 @@ $(document).ready(function(){
});
socket.on('disconnect', function() {
connected = false;
connect_status.html("<b>Lost connection...</b>");
connect_status.removeClass("color_green");
connect_status.addClass("color_orange");
@ -956,14 +1075,6 @@ $(document).ready(function(){
hidegenseqs();
});
button_actedit.on("click", function(ev) {
socket.send({'cmd': 'edit', 'data': ''});
});
button_delete.on("click", function(ev) {
socket.send({'cmd': 'delete', 'data': ''});
});
button_actmem.on("click", function(ev) {
socket.send({'cmd': 'memory', 'data': ''});
});
@ -1042,6 +1153,7 @@ $(document).ready(function(){
});
load_accept.on("click", function(ev) {
newly_loaded = true;
socket.send({'cmd': 'loadrequest', 'data': ''});
hideLoadPopup();
});

View File

@ -11,6 +11,15 @@ action {
font-weight: bold;
}
chunk[contenteditable="true"]:focus, chunk[contenteditable="true"]:focus * {
color: #cdf;
font-weight: normal;
}
chunk, chunk * {
outline: 0px solid transparent;
}
#topmenu {
background-color: #337ab7;
padding: 10px;
@ -58,10 +67,9 @@ action {
}
#gamescreen {
height: 500px;
height: 490px;
margin-top: 10px;
padding: 10px;
display: flex;
vertical-align: bottom;
overflow-y: scroll;
background-color: #262626;
@ -77,6 +85,7 @@ action {
#gametext {
max-height: 100%;
width: 100%;
word-wrap: break-word;
}
#seqselmenu {
@ -184,7 +193,7 @@ action {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
z-index: 3;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
@ -318,6 +327,22 @@ action {
width: 100px;
}
.box {
border-radius: 5px;
border: 1px solid #646464;
padding: 4px;
background: #373737;
}
.box-label {
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
display: inline-block;
}
.chunkhov:hover {
color: #c0fc51;
cursor: pointer;
@ -327,7 +352,7 @@ action {
color: #00fa00;
}
.colorfade {
.colorfade, .colorfade * {
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
-webkit-transition:color 1s ease-in;
@ -371,8 +396,17 @@ action {
text-decoration: none;
}
.edit-flash, .edit-flash * {
color: #3bf723;
}
.flex {
display: flex;
align-items: center;
}
.flex-push-right {
margin-left: auto;
}
.formatcolumn {
@ -458,6 +492,20 @@ action {
text-align: right;
}
.layer-container {
display: grid;
}
.layer-bottom {
grid-area: 1/1;
z-index: 0;
}
.layer-top {
grid-area: 1/1;
z-index: 2;
}
.loadlistheader {
padding-left: 10px;
display: grid;
@ -531,11 +579,15 @@ action {
}
.nowrap {
white-space: nowrap;
}
.popupcontainer {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
z-index: 3;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
@ -652,6 +704,10 @@ action {
width: 50px;
}
.width-auto {
width: auto;
}
.wilistitem {
height: 80px;
display: grid;

View File

@ -76,27 +76,30 @@
</div>
<div class="row" id="formatmenu">
</div>
<div class="row" id="gamescreen">
<span id="gametext">...</span>
<div class="hidden" id="wimenu">
<div class="layer-container">
<div class="layer-bottom row" id="gamescreen">
<span id="gametext">...</span>
<div class="hidden" id="wimenu">
</div>
</div>
<div id="curtain" class="layer-top row hidden"></div>
</div>
<div class="row" id="seqselmenu">
<div class="seqselheader">Select sequence to keep:</div>
<div id="seqselcontents">
</div>
</div>
<div class="row" id="actionmenu">
<div class="row flex" id="actionmenu">
<div id="actionmenuitems">
<div>
<button type="button" class="btn btn-primary" id="btn_actedit">Edit</button>
<button type="button" class="btn btn-primary" id="btn_actmem">Memory</button>
<button type="button" class="btn btn-primary" id="btn_actwi">W Info</button>
<button type="button" class="btn btn-primary" id="btn_actundo">Back</button>
<button type="button" class="btn btn-primary" id="btn_actretry">Retry</button>
<button type="button" class="btn btn-primary hidden" id="btn_delete">Delete</button>
<span id="messagefield"></span>
</div>
<button type="button" class="btn btn-primary" id="btn_actmem">Memory</button>
<button type="button" class="btn btn-primary" id="btn_actwi">W Info</button>
<button type="button" class="btn btn-primary" id="btn_actundo">Back</button>
<button type="button" class="btn btn-primary" id="btn_actretry">Retry</button>
</div>
<div id="messagefield"></div>
<div class="box flex-push-right">
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="allowediting" disabled>
<div class="box-label">Allow Editing</div>
</div>
</div>
<div class="row">