dgpad

Guía del BootLoader

/*
 * index.html
 */

// configure viewPort
// load DGPad.js

DGPad.js // Heavily commented by me, not well understood
	// define global functions !!
	// if we need to stop mouse events
		Element.prototype.addEventListener; // modify
	// init or load
		// style
		// LANG: load appropriate file
		// MAIN: load all dependencies
		// FilePicker: load external lib
		// FPICKERFRAME: ?? what's this for ??
	// !! bad practice !! must make a global S&R !!
	window.onload();
		$MAIN_INIT(); // <- Utils.js
		$ECHO_SOURCE(); // ?? debugging ??

Utils.js/
	$MAIN_INIT();
		initCanvas();
		new Canvas();
		initEvents();
			// attach all the events from Canvas
		Event.prototype // modify
		Canvas.addTool(); // add all tools, constructors, etc... !!??
		Canvas.clearBackground();
		
// Application has loaded and is waiting for user events

Ficheros más importantes

sources/Canvas.ts
sources/Construction.ts
sources/Constructors/ObjectConstructor.ts
sources/Objects/PointObject.ts

Roadmap / TODOs

Bootstrap procedure

DetermineViewport. This could be integrated into DGPad
DGPad
Load Language: 'NotPacked/lang/LocalStrings(_XX).js' defines global variable $L = {};
Load Main: 'Main.js' Loads the whole damn thing (145 files)
Load FilePicker
window [load] Main Init
IIFE create canvas

Understanding `Interpreter`

The interpreter is created in Canvas->constructor marked at createSandbox.
The interpreter lives inside a dynamically created, invisible iframe called the sandbox.
When the sandbox loads, it is language-gnostic and knows what to load.
The sandbox loads only the base language file, an optional secondary language file and the Interpreter itself.
Once the iframe has been loaded, the Interpreter is instantiated and initialized.
An AJAX request is sent to fetch NotPacked/plug-ins.js.
The contents of the file are EVALed and the defined macros are supposed to populate Interpreter.$macros.
Interpreter adds the macros to the Canvas.MacrosManager which generates a Macro for each one.

Currently, the interpreter is completely broken. I'm trying to grasp a full understanding of the inner workings of this monstruous string evaluator. The most likely route will be to leave the original interpreter alone and start a V2 model for further implementation.

Global vars

$BODY_SCRIPT

holds the last script loaded. How does it work? this isn't set when the window is loaded

$MOBILE_PHONE

false, defaults to desktop

$APP_PATH

// Détermination sans autre globale du chemin // de ce script (dans quel dossier il se trouve) :

$ECHO_SOURCE

must be for debugging purposes, it seems it'll be on by default if $APP_PATH is not defined // Si le script est le premier script DGPad trouvé dans la page :

$ALERT

holds the original window.alert method // Désactive toutes les alertes sur cette fenêtre pour éviter que l'uiwebview // soit polluée par une alerte "popup" de filepicker :

$APPLICATION , $iOS_APPLICATION

// Indique si DGPad s'ouvre dans l'application iOS/Android ou bien dans le navigateur :

$STANDARD_KBD

Only for standard android keyboard

$STOP_MOUSE_EVENTS

When this flag is set to true, some android mouse events are cleared away // Seulement pour la plateforme Android, true dans ce cas :

$SCALE

unknown as of yet

$FPICKERFRAME

unknown

$INCLUDED_FILES

an array that holds everything that has been loaded so far

$HEADSCRIPT

	// loads js files into the head
	let $HEADSCRIPT: (src:string) => HTMLElement

$INCLUDE

	// includes files into the head calling $HEADSCRIPT and stores them in $INCLUDED\_FILES
	// Uniquement utilisé en mode developpement :
	let $INCLUDE: (fname, external) => void

$LOADMAIN

	// loads a file called Main.js
	let $LOADMAIN: () => void

$LOADLANGUAGE

	/**
	 * A convoluted way of determining the language automagically...
	 * Determine the language through the script tag's' data-lang attribute
	 * Default: the UA determines the language...
	 * I probably should let the user define it, not the agent
	 */
	let $LOADLANGUAGE: () => void

$LOADPICKER

	/**
	 * Loads the library FilePicker and sets the key
	 * I still need to understand filepicker
	 */
	let $LOADPICKER: () => void

$MAIN_INIT

makes use of an unidentified global $U

	/**
	 * Initializes all canvas in the document that have an ID that starts with 'DGPad'
	 */
	let $MAIN_INIT: () => void

$ECHOSRC

	/**
	 * Loads the library FilePicker and sets the key
	 * I still need to understand filepicker
	 */
	let $ECHOSRC: () => void

$GETCSS

	/**
	 * Either fetches a cssRule or attempts to delete one
	 * (ruleName: string, deleteFlag?: string) => boolean | CSSStyleRule
	 * deleteFlag should be an optional bool
	 */
	let $GETCSS: (ruleName: string, deleteFlag?: string) => boolean | CSSStyleRule

$SCALECSS

	/**
	 * Scales the ruleName to the global scale size
	 */
	let $SCALECSS: (rule: string, propertiesCSV: string) => void

$U

Undocumented. Found Uninitialized ./Utils.js

A thousand lines of utilities, I'm considering moving the file to the new Utils directory.

$MAIN_INIT makes use of an -unidentified- global $U

	let $U:  {initCanvas:(id:string)=>void}

$P

Undocumented. Found Uninitialized ./Docs/Preferencees.js

$L

Undocumented. Found Uninitialized ./NotPacked/lang/LocalStrings.js

Understand the Canvas Events

During application bootstrap, many events are attached to the canvas element. All of them are methods of Canvas

Event	Callback
`'wheelevent'`	`mouseWheel`
`'touchmove'`	`touchMoved`
`'touchstart'`	`touchStart`
`'touchend'`	`touchEnd`
`'touchcancel'`	`touchEnd`
`'mousemove'`	`mouseMoved`
`'mousedown'`	`mousePressed`
`'mouseup'`	`mouseReleased`
`'click'`	`mouseClicked`
`'dragover'`	`dragOver`
`'drop'`	`drop`

`Canvas.mousedown`: Understand the initiation of a click or drag

Internally documented but still lacking parts

`Canvas.mouseup`: Understand the culmination of a click or drag

Internally documented but still lacking parts

`Canvas.wheelevent`: Understand Zoom procedure

Application.initCanvas adds event listener Canvas.mousewheel
Canvas.mousewheel extracts height info through Utils.extractDelta
Canvas finds (x,y) event page offset from bounds
Canvas calls Construction.zoom and passes the info
Construction updates the changed state for the window
Construction calls CoordsSystem.zoom
clear the canvas
determine the center
verify height does not exceed the maximum allowed (confirm that the new unit value will not exceed the max)
Iterate over Construction.elements. Use setXY on free points, setZoom on circle1 instances
fix new center
fix new unit value (this is going to be a source of precision problems)
Construction attempts to Validate all points... I do not understand this
what is Construction.V: any[]? closest guess: instanceof ConstructionObject
attempt to reset the Indicated objects. What does it mean to be indicated? IMPORTANT: the loop logic inside applyValidateFilters
Construction attempts to Compute All
Paint the Construction

`Canvas.touchMoved`: not understood

prepare a mouseMoved callback
pass the Event and the callback to touchToMouse
... WIP

ClusterFucks

outdated info

Canvas.js

The combination of global, private and public members is daunting to say the least. The file is useless until I can make sense of what is going on.

Construction.js

I am not touching that monstrosity yet.

Utils.js

There are basic utilities mixed with initializers and monster-expando dom manipulators. This file is unmanageable, I'll have to split it.

GUI/Elements/slider.js

this is a function that I haven't looked into

Calc/MainCalcPanel

what a crazy piece of shite. Encapsulated and forgotten

hanzo2001 / dgpad Goto Github PK

dgpad's Introduction