Docs: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
No edit summary
Line 128: Line 128:
|mouse down
|mouse down
|event_mousedown
|event_mousedown
|
|Handles dragging, ,setting currentMousePosition, and emits "mouseDown" event.
|
|
|<syntaxhighlight lang="javascript" line="1">
|<syntaxhighlight lang="javascript" line="1">
Line 137: Line 137:
|mouse up
|mouse up
|event_mouseup
|event_mouseup
|
|Stops any dragging, region selection, emits a "mouseUp" event and changes cursor position.
|
|
|
|

Revision as of 15:41, 30 August 2023

Our World Of Text

If you want to talk about this page, go to Talk:Docs

Code Documentation

OWOT.js

Event Listeners:

Object Listen Event Functions Fired Description Example Usage Related Code
window load w.emit("clientLoaded"); When the window is loaded, the client emits a "client loaded" event. This is currently not utilized. 
window.addEventListener("load", function() {
	w.emit("clientLoaded");
});
hash change manageCoordHash(); The URL hash is parsed and if it contains x,y coords then it will teleport the user to that location so long as the World and User models allow it. https://ourworldoftext.com/#x:10,y:20 
window.onhashchange = function(e) {
	manageCoordHash();
}
before unload if(writeBuffer.length) flushWrites(); Sends remaining edits to the server before leaving the page. 
window.onbeforeunload = function() {
	if(writeBuffer.length) flushWrites();
}
resize event_resize Adjusts the scaling and calcuated ratio, then re-renders the canvas. 
window.addEventListener("resize", event_resize);
document select start self Checks if the event is happening on a modal, canvas, or chat window. 
document.onselectstart = function(e) {
	var target = e.target;
	if(closest(target, getChatfield()) || target == elm.chatbar || closest(target, elm.confirm_js_code) || closest(target, elm.announce_text)) {
		return true;
	}
	return Modal.isOpen;
}
key down
  • keydown_regionSelect
  • event_keydown_copy_char
  • event_keydown_copy_color
  • event_keydown
  • Determines if regionSelect function should start.
  • Determines if the user is trying to copy a character at the cursor or mouse position.
  • Determines if the user is trying to copy a color or background color at the mouse position.
  • Handles keydown events for zooming, arrows, erasing, tabbing, esc, and typing.
 
document.addEventListener("keydown", keydown_regionSelect);

document.addEventListener("keydown", event_keydown_copy_char);

document.addEventListener("keydown", event_keydown_copy_color);

document.addEventListener("keydown", event_keydown);
key up event_keyup Emits a "keyUp" event whenever a key is released. 
function event_keyup(e) {
	w.emit("keyUp", e);
}
mouse move
  • mousemove_tileProtectAuto
  • mousemove_linkAuto
  • event_mousemove
  • If tileProtectAuto is active, the tile or cell gets protected on mouse move.
  • If linkAuto is active, the cell gets a link on mouse move.
  • handles region selection, coord-linking, protection, and dragging.
 
document.addEventListener("mousemove", mousemove_tileProtectAuto);

document.addEventListener("mousemove", mousemove_linkAuto);

document.addEventListener("mousemove", event_mousemove);
mouse down event_mousedown Handles dragging, ,setting currentMousePosition, and emits "mouseDown" event. 
/
mouse up event_mouseup Stops any dragging, region selection, emits a "mouseUp" event and changes cursor position.
mouse enter event_mouseenter 
/
touch start event_touchstart 
/
touch end event_touchend 
/
touch move event_touchmove 
/
wheel
  • event_wheel
  • event_wheel_zoom
 
/
document.body key down
  • keydown_tileProtectAuto
  • keydown_linkAuto
 
/
key up onKeyUp 
/
w cursor Move updateCoordDisplay 
/
cursor Hide updateCoordDisplay 
/
tiles Rendered self 
/
cursor Move setClientGuestCursorPosition 
/
cursor Hide setClientGuestCursorPosition 
/
elm.textInput
  • keydown
  • input
  • stabilizeTextInput
  • event_input
 
/
elm.owot context menu self 
/
elm.coords click self

Functions:

Name Description Example Usage Code In Use
init_dom()
getWndWidth() 
/
getWndHeight()
decimal(percentage)
normFontSize(size)
deviceRatio()
makeEnum(vars)
setRGBColorPicker(r, g, b)
setRGBBgColorPicker(r, g, b)
setColorPickerRandom()
updateColorPicker()
updateBgColorPicker()
updateCoordDisplay()
createColorButton(color, isHighlight)
addColorShortcuts()
draggable_element(dragger, dragged, exclusions, onDrag)
resizeChat(width, height)
getStoredNickname()
storeNickname()
getStoredConfig()
storeConfig()
loadBackgroundData(cb, timeout_cb)
keydown_regionSelect(e)
handleRegionSelection(coordA, coordB, regWidth, regHeight)
buildFontTemplate(set)
rebuildFontTemplates()
updateScaleConsts()
setupTextRenderCtx()
reloadRenderer()
updateRendererZoom(percentage)
zoomGarbageCollect()
changeZoom(percentage, isPartial)
setZoombarValue()
fromLogZoom(val)
toLogZoom(val)
browserZoomAdjust(initial)
updateAutoProg()
mousemove_tileProtectAuto()
keydown_tileProtectAuto(e)
mousemove_linkAuto()
keydown_linkAuto(e)
onKeyUp(e)
adjust_scaling_DOM(ratio)
event_resize()
getChar(tileX, tileY, charX, charY)
getCharColor(tileX, tileY, charX, charY)
getCharBgColor(tileX, tileY, charX, charY)
getCharProtection(tileX, tileY, charX, charY)
getCharDecoration(tileX, tileY, charX, charY)
getCharInfo(tileX, tileY, charX, charY)
getCharInfoXY(x, y)
getLink(tileX, tileY, charX, charY)
getLinkXY(x, y)
event_keydown_copy_char(e)
event_keydown_copy_color(e)
resolveColorValue(val)
isTileStale(tileX, tileY)
checkTextColorOverride()
menu_color(color)
defaultStyles()
manageCoordHash()
getWorldProps(world, type, cb)
stopLinkUI()
removeTileProtectHighlight()
stopTileUI()
doLink()
doProtect()
triggerUIClick()
event_mousedown(e, arg_pageX, arg_pageY)
renderCursor(coords)
removeCursor()
stopDragging()
event_mouseup(e, arg_pageX, arg_pageY)
event_mouseleave(e)
event_mouseenter(e)
is_link(tileX, tileY, charX, charY)
flushWrites()
setWriteInterval()
moveCursor(direction, preserveVertPos, amount)
markCharacterAsUndoable(tileX, tileY, charX, charY)
isCharLatestInUndoBuffer(tileX, tileY, charX, charY)
writeCharTo(char, charColor, tileX, tileY, charX, charY, undoFlags, undoOffset, charBgColor, dB, dI, dU, dS)
undoWrite()
redoWrite()
writeCharToXY(char, charColor, x, y, charBgColor, dB, dI, dU, dS)
writeChar(char, doNotMoveCursor, color, noNewline, undoCursorOffset, bgColor, dB, dI, dU, dS)
coordinateAdd(tileX1, tileY1, charX1, charY1, tileX2, tileY2, charX2, charY2)
propagatePosition(coords, char, noEnter, noVertPos)
textcode_parser(value, coords, defaultColor, defaultBgColor)
stabilizeTextInput()
event_input(e)
stopPasting()
autoArrowKeyMoveStart(dir)
autoArrowKeyMoveStop(dir)
event_keydown(e)
event_keyup(e)
isMainPage()
alertJS(data, restrict)
closeJSAlert()
executeJS(code)
confirmRunJSLink(data)
runJSLink(data, restrict)
coord_link_click(evt)
url_link_click(evt)
updateHoveredLink(mouseX, mouseY, evt, safe)
event_mousemove(e, arg_pageX, arg_pageY)
getCenterTouchPosition(touches)
event_touchstart(e)
event_touchend(e)
event_touchmove(e)
touch_pagePos(e)
event_wheel(e)
event_wheel_zoom(e)
convertKeyCode(key)
checkKeyPress(e, combination)
checkKeyPatterns(combination)
createWsPath()
createSocket(getChatHist)
cullRanges(map, width, height)
updateRemoteBoundary()
clearRemoteBoundary()
expandLocalBoundary(x, y)
getAndFetchTiles()
clearTiles(all)
clearVisibleTiles()
highlight(positions, unlimited, color)
blankTile()
colorChar(tileX, tileY, charX, charY, colorClass)
uncolorChar(tileX, tileY, charX, charY, colorClass)
decodeCharProt(str)
encodeCharProt(array, encoding)
getCharTextDecorations(char)
setCharTextDecorations(char, bold, italic, under, strike)
resolveCharEmojiCombinations(char)
detectCharEmojiCombinations(char)
clearCharTextDecorations(char)
clearAllGuestCursors()
renderLoop()
protectPrecisionOption(option)
toggleTextDecoBar()
initTextDecoBar()
protectSelectionStart(start, end, width, height)
protectSelectionCancel()
protectSelection()
buildMenu()
updateMenuEntryVisiblity()
regionSelectionsActive()
RegionSelection()
setClientGuestCursorPosition(tileX, tileY, charX, charY, hidden)
sendCursorPosition()
disableBgColorPicker()
enableBgColorPicker()
makeCoordLinkModal()
makeCoordGotoModal()
makeURLModal()
buildBackgroundColorModal(modal)
resetColorModalVisibility()
makeColorModal()
makeSelectionModal()
searchTellEdit(tileX, tileY, charX, charY)
tile_offset_object(data, tileOffX, tileOffY)
begin()

Variables:

Name Description Example Usage Code In Use
YourWorld An object containing the users current text color, cell background color, and chat nick name. 
//Sets the users color to a random one.
YourWorld.Color = Math.round((Math.random()*16777215));

var YourWorld = {
	Color: window.localStorage ? +localStorage.getItem("color") : 0,
	BgColor: -1,
	Nickname: state.userModel.username
};
owot The DOM canvas element 
//Hides the owot canvas.
owot.style.opacity = 0;

owot = document.getElementById("owot");
owotCtx The CanvasRenderingContext2D of the owot canvas 
//Clears all the rendered tiles from the view.
owotCtx.clearRect(0, 0, owotWidth, owotHeight);

owotCtx = owot.getContext("2d");
textInput The DOM textarea element used for writing to the owot canvas. 
//Paste "hello world" at the current cursor position.
textInput.value = `hello world`;

textInput = document.getElementById("textInput");
linkElm The DOM link element used for user link clicks. 
//logs to the console whether or not the link is a javascript link.
linkElm.addEventListener(`click`,function(){
console.log(linkParams.protocol === `javascript`);                   
})

linkElm = elm.link_element;
link_div The DOM link div element used to scale the linkElm to the same size as a cell within the owot canvas. 
//Highlights the URL being hovered over.
linkDiv.style.background = `rgba(255,255,0,0.5)`

linkDiv = elm.link_div;
colorInput, colorInputBg The DOM color inputs to select text and cell background color. 
//Generate a random color on the text color input field.
const randomColor = Math.floor(Math.random()*16777215).toString(16).toUpperCase();
colorInput.jscolor.fromString(`#${randomColor}`);

	colorInputBg = modal.addEntry("Cell color", "color").input;

	colorInput = modal.addEntry("Text color", "color").input;
colorShortcuts, colorShortcutsBg A DOM div container used as a color pallet for quick access. 
//Randomize all color palette colors.
const colorButtons = colorShortcuts.querySelectorAll('.color_btn');
  colorButtons.forEach(button => {
    if (button.title !== 'Random color') {
     const randomColor = `#${Math.floor(Math.random()*16777215).toString(16).toUpperCase()}`;
      button.style.backgroundColor = randomColor;
      button.title = randomColor;
    }
  });

	for(var i = 0; i < colors.length; i++) {
		var color = colors[i];
		colorShortcuts.appendChild(createColorButton(color));
	}
enums An unused object created to store position and write edits. 
//Use enums.position as a template for creating an updatedPosition object
const newCoord = [7, 5, 3, 1];
const updatedPosition = { ...enums.position };
for (const key in updatedPosition) {
  if (updatedPosition.hasOwnProperty(key)) {
    const positionIndex = updatedPosition[key];
    updatedPosition[key] = newCoord[positionIndex];
  }
}

enums.edit = makeEnum(["tileY", "tileX", "charY", "charX", "time", "char", "id", "color"]);
enums.position = makeEnum(["tileX", "tileY", "charX", "charY"]);
ws_path Stores the pages' websocket path. 
//Change the socket, refreshing the client ID
w.changeSocket(ws_path, true);

var ws_path = createWsPath();
menu,

w.menu, Menu

An object containing all of the DOM elements and functions of the menu. 
//Adds a button to the menu that alerts "Hello World" when clicked.
menu.addOption("alert", function(){alert("Hello World")});

	menu = new Menu(elm.menu_elm, elm.nav_elm);
	w.menu = menu;
menuStyle A temporary style element created and used to style the menu. 
//Generate a random set of colors for the menu each time the menu is hovered over.
elm.menu_elm.addEventListener("mouseover", function() {
  if (menuStyle) {
    document.head.removeChild(menuStyle)
  }
 function makeRandom (){
     return Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
 }
  menuStyle = document.createElement("style");
  const randomColor = makeRandom();
  const randomColorBG = makeRandom();
  const randomColorBorder = makeRandom();

  menuStyle.innerHTML = `
#menu.hover,#nav {background: #${randomColorBG};border-color: #${randomColorBorder};color: #${randomColor};}
 #nav li {border-top-color: #${randomColorBorder};}
 #nav li.hover {background-color: #${randomColorBG};}
 #coords {background-color: #${randomColorBG};color: #${randomColor};}`
  document.head.appendChild(menuStyle);
})

	menuStyle.innerHTML = "#menu.hover, #nav {" +
			"background: " + color + ";" +
			"border-color: " + bColor + ";" +
			"color: " + tColor + ";" +
		"}\n" +
		"#nav li {" +
			"border-top-color: " + bColor + ";" +
		"}\n" +
		"#nav li.hover {" +
			"background-color: " + hColor + ";" +
		"}\n" +
		"#coords {" +
			"background-color: " + bColor + ";" +
			"color: " + tColor + ";" +
		"}";
}
styles An object which controls the colors used within a world. 
//Sets the public tile color to red.
styles.public = "red";
renderTiles(true);

var styles = defaultStyles();
nextObjId An integer used to track edits. 
//Writes the character "█" at the cursorCoords location, then updates the nextObjId id
const [tileX, tileY, charX, charY] = cursorCoords;
console.log(currentPosition)
const editArray = [tileY, tileX, charY, charX, getDate(),"█", nextObjId]
writeBuffer.push(editArray);
nextObjId++;

var nextObjId = 1;
owotWidth,

owotHeight

The current width and height of the DOM window. 
//Estimate the total number of fully visible cells that could exist on the screen
const cellAmount = Math.floor(owotHeight/cellH * owotWidth/cellW);

	owotWidth = Math.round(window_width * ratio);
	owotHeight = Math.round(window_height * ratio);
js_alert_active A bool stating if the javascript alert window is open. 
var js_alert_active = false;
worldFocused A bool stating if the owot canvas is in focus. 
//check every 100ms if the owot canvas was last clicked, if it was then randomly change the public tile color.
setInterval(function() {
  if (worldFocused) {
    styles.public = "#" + Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
    w.redraw()
  }
}, 100)

if(closest(target, getChatfield()) || target == elm.chatbar || target == elm.confirm_js_code) {
		worldFocused = false;
	} else {
		worldFocused = true;
	}
chatResizing A bool stating if the chat window is being resized. 
//check every 100ms if the chat is resizing, if it is, change the public tile color
setInterval(function() {
  if (chatResizing) {
    styles.public = "#" + Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
    w.redraw()
  }
}, 100)

draggable_element(elm.chat_window, null, [
	elm.chatbar, elm.chatsend, elm.chat_close, elm.chat_page_tab, elm.chat_global_tab, elm.page_chatfield, elm.global_chatfield
], function() {
	if(chatResizing) {
		return -1;
	}
});
tiles An object containing all the loaded tiles. 
//Return any visible links
const [X,Y] = cursorCoords;
tiles[`${X},${Y}`].properties.cell_props

Tile.set = function(tileX, tileY, data) {
	var str = tileY + "," + tileX;
	if(!(str in tiles)) {
		w.tile.count++;
	}
	tiles[str] = data;
	expandLocalBoundary(tileX, tileY);
	return data;
}
images,

keysPressed, imgPatterns

Empty, unused objects. 
var images = {};
var keysPressed = {};
previousErase An integer of the last date the erase function was utilised. 
//Logs the previous erase time in a human-readable way.
function readPreviousErase() {
  if (previousErase == 0) {
    return
  }
  const date = new Date(previousErase);
  const options = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    timeZoneName: 'short'
  };
  console.log("last Erased at:", date.toLocaleString(undefined, options));
}

function event_input(e) {
	if(e.inputType == "deleteContentBackward") {
		if(getDate() - previousErase > 25 || !previousErase) {
			moveCursor("left", true);
			writeChar("\x08", true, null, false, 1);
		}
		previousErase = getDate();
	}
}
verticalEnterPos A 2D array coordinate of the position to go when pressing enter. 
//Stair-step the return position on "enter"
textInput.addEventListener("input", function(e) {
  if (e.inputType === "insertLineBreak") {
    const [X, x] = verticalEnterPos;
    verticalEnterPos = [X, (x + 1) % 16]
  }
})

		if(noVertPos) {
			coords.tileX = 0;
			coords.charX = 0;
		} else {
			coords.tileX = verticalEnterPos[0];
			coords.charX = verticalEnterPos[1];
		}
textColorOverride public-member-owner bitfield used to modify the text color in fields. 
	if(styles.public_text != "#000" && styles.public_text != "#000000") {
		textColorOverride |= public;
	} else {
		textColorOverride &= textColorOverride ^ public;
	}
writeBuffer An object holding data waiting to be rendered to the canvas. 
//Writes the character "█" at the cursorCoords location
const [tileX, tileY, charX, charY] = cursorCoords;
const editArray = [tileY, tileX, charY, charX, getDate(), "█", nextObjId++]
writeBuffer.push(editArray);

	tellEdit.push(editArray); // track local changes
	writeBuffer.push(editArray); // send edits to server
	nextObjId++;
highlightFlash An object containing cell coordinates of cells to be highlighted. 
//Flashes a random color on all visible cells
function flashRandom() {
  const visibleTiles = getVisibleTiles();
  const color = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)];
  const positions = [];

  // Generate the positions array
  for (const [tileX, tileY] of visibleTiles) {
    for (let charY = 0; charY < 8; charY++) {
      for (let charX = 0; charX < 16; charX++) {
        positions.push([tileX, tileY, charX, charY]);
      }
    }
  }

  // Update highlightFlash based on positions
  for (const [tileX, tileY, charX, charY] of positions) {
    const tileKey = `${tileY},${tileX}`;
    highlightFlash[tileKey] ??= {};
    highlightFlash[tileKey][charY] ??= {};

    if (!highlightFlash[tileKey][charY][charX]) {
      highlightFlash[tileKey][charY][charX] = [getDate(), color, [...color]];
      highlightCount++;
    }
  }
}

		if(!highlightFlash[tileY + "," + tileX]) {
			highlightFlash[tileY + "," + tileX] = {};
		}
highlightCount An iterator used to limit the amount of highlights rendered to the canvas. 
//Prevents the user from seeing highlights
highlightCount = Infinity;

		if(highlightCount > highlightLimit && !unlimited) return;
coloredChars An object holding all of the highlighted characters. 
	var container = coloredChars[tileY + "," + tileX];
	if(!container) {
		container = {};
		coloredChars[tileY + "," + tileX] = container;
	}
shiftOptState An object used to store the viewport values 
var shiftOptState = { prevX: 0, prevY: 0, x1: 0, y1: 0, x2: 0, y2: 0, prevZoom: -1 };
backgroundImage
backgroundPattern
backgroundPatternSize
guestCursorsByTile
guestCursors
clientGuestCursorPos
disconnectTimeout
menuOptions
undoBuffer
textDecorationOffset
textDecorationModes
fontTemplate
specialFontTemplate
fontOrder
specialFontOrder
initiallyFetched
lastLinkHover
lastTileHover
regionSelections
specialClientHooks
specialClientHookMap
bgImageHasChanged
remoteBoundary
boundaryStatus
positionX
positionY
coordSizeX
coordSizeY
gridEnabled
subgridEnabled
linksEnabled
linksRendered
colorsEnabled
backgroundEnabled
scrollingEnabled
zoomRatio
protectPrecision
checkTileFetchInterval
zoom
userZoom
unloadTilesAuto
useHighlight
highlightLimit
ansiBlockFill
colorizeLinks
brBlockFill
tileFetchOffsetX
tileFetchOffsetY
ignoreCanvasContext
elementSnapApprox
mSpecRendering
combiningCharsEnabled
surrogateCharsEnabled
defaultCoordLinkColor
defaultURLLinkColor
defaultHighlightColor
secureJSLink
secureLink
pasteDirRight
pasteDirDown
defaultCursor
defaultDragCursor
fetchClientMargin
classicTileProcessing
unloadedPatternPanning
cursorRenderingEnabled
guestCursorsEnabled
showMyGuestCursor
unobstructCursor
shiftOptimization
transparentBackground
writeFlushRate
bufferLargeChars
cursorOutlineEnabled
showCursorCoordinates
textDecorationsEnabled
keyConfig
draggable_element_mousemove
draggable_element_mouseup
defaultSizes
cellWidthPad
tileW
tileH
cellW
cellH
font
specialCharFont
tileC
tileR
tileArea
tileWidth
tileHeight
dTileW
dTileH
textRenderCanvas
textRenderCtx
tileProtectAuto
linkAuto
autoTotal
cursorCoords
cursorCoordsCurrent
currentPosition
currentPositionInitted
currentMousePosition
Tile
poolCleanupInterval
dragStartX
dragStartY
dragPosX
dragPosY
isDragging
hasDragged
draggingEnabled
cursorEnabled
writeInterval
write_busy
pasteInterval
linkQueue
autoArrowKeyMoveInterval
autoArrowKeyMoveActive
autoArrowKeyMoveState
linkParams
currentSelectedLink
currentSelectedLinkCoords
touchInitZoom
touchInitDistance
touchPrev
fetchInterval
timesConnected
colorClasses
isTileLoaded
isTileVisible
networkHTTP
network
w
tellEdit
ws_functions
Retrieved from "https://wiki.ourworldoftext.com/index.php?title=Docs&oldid=3016"