Docs: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 818: | Line 818: | ||
| | | | ||
| | | | ||
| | |ws_functions | ||
| | |||
| | |||
| | |||
| | |||
|} | |||
===Variables:=== | ===Variables:=== | ||
Revision as of 11:34, 30 August 2023
Our World Of Text
If you want to talk about this page, go to Talk:Docs
Code Documentation
OWOT.js
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) | ws_functions |
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 |