Skip to content

Testing new updates + CRUD #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
talkenson wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Testing new updates + CRUD #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b9e979f
Testing new updates + CRUD
talkenson Nov 13, 2020
e3f8052
Small refactor + crud upgrade
talkenson Nov 26, 2020
ceb6ab5
Broken, but WIP
talkenson Nov 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 171 additions & 61 deletions core/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,36 @@
*/

let STATE = _SETTINGS.setup.initialState;
const { pixelCrud, lineCrud, rectCrud, polyCrud, stateCrud, maskCrud } = {
pixelCrud: new Crud(CrudStore.Pixels),
lineCrud: new Crud(CrudStore.Lines),
rectCrud: new Crud(CrudStore.Rectangles),
polyCrud: new Crud(CrudStore.Polygons),
stateCrud: new Crud(CrudStore.State),
maskCrud: new Crud(CrudStore.Mask),
};
// Usage sample of new CRUD implementation
/*
lineCrud.create({point1: [0,0]});
lineCrud.create({point1: [55,2]});
lineCrud.create({point1: [1,4]});
console.log(lineCrud.getAll());
*/

const PolyMan = new PolygonContainer();


const countSizes = () => {
_SETTINGS.general.activeArea.top = 0;
_SETTINGS.general.activeArea.left = Math.floor((_SETTINGS.toolbar.width + _SETTINGS.toolbar.offset.left + _SETTINGS.toolbar.offset.right) / PIXEL_SIZE) * PIXEL_SIZE;
_SETTINGS.general.activeArea.width = Math.floor((CANVAS_W - (_SETTINGS.toolbar.offset.left + _SETTINGS.toolbar.width + _SETTINGS.toolbar.offset.right)) / PIXEL_SIZE) * PIXEL_SIZE;
_SETTINGS.general.activeArea.height = (Math.floor((CANVAS_H - _SETTINGS.general.activeArea.top) / PIXEL_SIZE) - 1) * PIXEL_SIZE;
_SETTINGS.general.activeArea.cellBorders.left = -Math.floor((CANVAS_W / 2 - _SETTINGS.general.activeArea.left) / PIXEL_SIZE);
_SETTINGS.general.activeArea.cellBorders.top = Math.floor((CANVAS_H / 2 - _SETTINGS.general.activeArea.top + PIXEL_SIZE / 2) / PIXEL_SIZE) - 1;
_SETTINGS.general.activeArea.cellBorders.right = Math.floor((_SETTINGS.general.activeArea.left + _SETTINGS.general.activeArea.width - CANVAS_W / 2) / PIXEL_SIZE);
_SETTINGS.general.activeArea.cellBorders.bottom = -Math.floor((_SETTINGS.general.activeArea.top + _SETTINGS.general.activeArea.height - CANVAS_H / 2 + PIXEL_SIZE / 2) / PIXEL_SIZE);

};

const getRegion = () => {
if (testXY(_SETTINGS.general.activeArea.left,
Expand Down Expand Up @@ -43,15 +73,17 @@ const handleHotkey = (key) => {
};

const drawLineRaw = (point1, point2, color = COLORS.BLACK, thickness = 1) => {
stroke(`rgba(${color.join(',')},0.9)`);
strokeWeight(thickness);
STRCOLORS.STROKE && stroke(color);
STRCOLORS.STROKE ? strokeWeight(thickness) : strokeWeight(0);
line(point1[0], point1[1], point2[0], point2[1]);
};

const drawLine = (point1, point2, color = STATE.currentColor, thickness = 1, type = [AlgoType.BRZ]) => {
stroke(color);
strokeWeight(thickness);
line(CENTER_W + (point1[0] + 0.5) * PIXEL_SIZE, CENTER_H - (point1[1] + 0.5) * PIXEL_SIZE, CENTER_W + point2[0] * PIXEL_SIZE, CENTER_H - (point2[1] + 0.5) * PIXEL_SIZE);
if (type.includes(AlgoType.PLAIN)) {
stroke(color);
strokeWeight(thickness);
line(CENTER_W + (point1[0] + 0.5) * PIXEL_SIZE, CENTER_H - (point1[1] + 0.5) * PIXEL_SIZE, CENTER_W + point2[0] * PIXEL_SIZE, CENTER_H - (point2[1] + 0.5) * PIXEL_SIZE);
}

if (type.includes(AlgoType.BRZ)) {
let x00, x11, y00, y11;
Expand Down Expand Up @@ -94,58 +126,84 @@ const drawLine = (point1, point2, color = STATE.currentColor, thickness = 1, typ

}
};
const drawRectangle = (point1, point2, color = STATE.currentColor, thickness = 1, type = [AlgoType.BRZ]) => {
drawLine(point1, [point2[0], point1[1]], color, 0, [AlgoType.BRZ]);
drawLine([point2[0], point1[1]], point2, color, 0, [AlgoType.BRZ]);
drawLine(point2, [point1[0], point2[1]], color, 0, [AlgoType.BRZ]);
drawLine([point1[0], point2[1]], point1, color, 0, [AlgoType.BRZ]);
};

class LDM {
constructor() {
this.__reset();
}
firstpoint = true;
coord;
colors;
mark = COLORS.WHAY;

__reset = () => {
this.colors = [null, null];
this.coord = [[0, 0], [0, 0]];
};

setCoord = (i, x, y) => {
if (i === 0 && this.colors[i] !== null && !arraysEqual(this.colors[i], this.mark)) {
putPixel([this.coord[i][0], this.coord[i][1]], this.colors[i]);
}

this.colors[i] = get(mouseX, mouseY).slice(0, 3);
putPixel([x, y], this.mark);
this.coord[i] = [x, y];
};
const testForMask = ([x, y]) => {
let mask = [false, false, false, false];

draw = () => {
this.colors = [STATE.currentColor, STATE.currentColor];
drawLine(this.coord[0], this.coord[1], STATE.currentColor, 0, [AlgoType.BRZ]);
if (testXY( // top part
_SETTINGS.general.activeArea.cellBorders.left,
_SETTINGS.general.activeArea.cellBorders.right,
STATE.maskOptions.lt[1],
_SETTINGS.general.activeArea.cellBorders.top, x, y)) {
mask[0] = true
}
}
if (testXY( // right part
STATE.maskOptions.rt[0],
_SETTINGS.general.activeArea.cellBorders.right,
_SETTINGS.general.activeArea.cellBorders.bottom,
_SETTINGS.general.activeArea.cellBorders.top, x, y)) {
mask[1] = true
}
if (testXY( // bottom part
_SETTINGS.general.activeArea.cellBorders.left,
_SETTINGS.general.activeArea.cellBorders.right,
_SETTINGS.general.activeArea.cellBorders.bottom,
STATE.maskOptions.rb[1], x, y)) {
mask[2] = true
}
if (testXY( // left part
_SETTINGS.general.activeArea.cellBorders.left,
STATE.maskOptions.lt[0],
_SETTINGS.general.activeArea.cellBorders.bottom,
_SETTINGS.general.activeArea.cellBorders.top, x, y)) {
mask[3] = true
}
//console.log(['top', 'right', 'bottom', 'left'].map((v, i) => mask[i] ? v : ''));
return mask;
};

const drawGrid = (drawBack = null) => {
background(COLORS.BG);
_SETTINGS.general.activeArea.left = Math.floor((_SETTINGS.toolbar.width + _SETTINGS.toolbar.offset.left + _SETTINGS.toolbar.offset.right) / PIXEL_SIZE) * PIXEL_SIZE;
_SETTINGS.general.activeArea.width = Math.floor((CANVAS_W - (_SETTINGS.toolbar.offset.left + _SETTINGS.toolbar.width + _SETTINGS.toolbar.offset.right)) / PIXEL_SIZE) * PIXEL_SIZE;
_SETTINGS.general.activeArea.height = (Math.floor(CANVAS_H / PIXEL_SIZE) - 1) * PIXEL_SIZE;

/*stroke(COLORS.BLACK);
strokeWeight(3);
console.log(_SETTINGS.general.activeArea.left,
_SETTINGS.general.activeArea.top,
_SETTINGS.general.activeArea.left + _SETTINGS.general.activeArea.width,
_SETTINGS.general.activeArea.top + _SETTINGS.general.activeArea.height);
rect(
_SETTINGS.general.activeArea.left,
_SETTINGS.general.activeArea.top,
_SETTINGS.general.activeArea.left + _SETTINGS.general.activeArea.width,
_SETTINGS.general.activeArea.top + _SETTINGS.general.activeArea.height
);*/

for (let i = _SETTINGS.general.activeArea.left; i <= _SETTINGS.general.activeArea.left + _SETTINGS.general.activeArea.width; i += PIXEL_SIZE) {
drawLineRaw([i, 0], [i, _SETTINGS.general.activeArea.height], COLORS.STROKE)
drawLineRaw([i, 0], [i, _SETTINGS.general.activeArea.height], STRCOLORS.STROKE)
}

for (let i = _SETTINGS.general.activeArea.top; i <= _SETTINGS.general.activeArea.height; i += PIXEL_SIZE) {
drawLineRaw([_SETTINGS.general.activeArea.left, i], [_SETTINGS.general.activeArea.width + _SETTINGS.general.activeArea.left, i], COLORS.STROKE)
drawLineRaw([_SETTINGS.general.activeArea.left, i], [_SETTINGS.general.activeArea.width + _SETTINGS.general.activeArea.left, i], STRCOLORS.STROKE)
}
};
_SETTINGS.setup.modules.grid.render = drawGrid;
// Initializing

const putPixel = ([cox, coy], color = STATE.currentColor) => {
fill(color);
stroke(`rgba(${COLORS.STROKE.join(',')},0.9)`);
strokeWeight(1);
const putPixel = ([cox, coy], color = STATE.currentColor, ignoreMask = false) => {
if (ignoreMask || STATE.maskOptions.isActive && !testForMask([cox, coy]).includes(true) || !STATE.maskOptions.isActive) {
fill(color);
} else {
fill(COLORS.WHAY);
}
STRCOLORS.STROKE && stroke(STRCOLORS.STROKE);
STRCOLORS.STROKE ? strokeWeight(1) : strokeWeight(0);
square(CENTER_W + cox * PIXEL_SIZE, CENTER_H - (coy + 1) * PIXEL_SIZE, PIXEL_SIZE);
};

Expand All @@ -159,17 +217,37 @@ const startFillFrom = async (x, y, isColored = false, startColor = COLORS.WHITE,
putPixel(C2Pix(x, y), STATE.currentColor);

blockDir !== Directions.Left && isDrawable(C2Pix(x - PIXEL_SIZE, y)) &&
await setTimeout(() => startFillFrom(x - PIXEL_SIZE, y, true, startColor, Directions.Right), 30);
await setTimeout(() => startFillFrom(x - PIXEL_SIZE, y, true, startColor, Directions.Right), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Up && isDrawable(C2Pix(x, y - PIXEL_SIZE)) &&
await setTimeout(() => startFillFrom(x, y - PIXEL_SIZE, true, startColor, Directions.Down), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Right && isDrawable(C2Pix(x + PIXEL_SIZE, y)) &&
await setTimeout(() => startFillFrom(x + PIXEL_SIZE, y, true, startColor, Directions.Left), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Down && isDrawable(C2Pix(x, y + PIXEL_SIZE)) &&
await setTimeout(() => startFillFrom(x, y + PIXEL_SIZE, true, startColor, Directions.Up), _SETTINGS.toolbar.toolParams.Fill.delay);
STATE.processes.terminatedByEnd++;
};

const forceFill = async ([x, y], ignoreColor = COLORS._MASK, blockDir = null) => {
let c = get(x, y).slice(0, 3);
if (arraysEqual(c, ignoreColor) || arraysEqual(c, COLORS.BG)) {
STATE.processes.terminatedByColor++;
return;
}
putPixel(C2Pix(x, y), COLORS.BG);

blockDir !== Directions.Left && isDrawable(C2Pix(x - PIXEL_SIZE, y)) &&
await setTimeout(() => forceFill([x - PIXEL_SIZE, y], ignoreColor, Directions.Right), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Up && isDrawable(C2Pix(x, y - PIXEL_SIZE)) &&
await setTimeout(() => startFillFrom(x, y - PIXEL_SIZE, true, startColor, Directions.Down), 30);
await setTimeout(() => forceFill([x, y - PIXEL_SIZE], ignoreColor, Directions.Down), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Right && isDrawable(C2Pix(x + PIXEL_SIZE, y)) &&
await setTimeout(() => startFillFrom(x + PIXEL_SIZE, y, true, startColor, Directions.Left), 30);
await setTimeout(() => forceFill([x + PIXEL_SIZE, y], ignoreColor, Directions.Left), _SETTINGS.toolbar.toolParams.Fill.delay);
blockDir !== Directions.Down && isDrawable(C2Pix(x, y + PIXEL_SIZE)) &&
await setTimeout(() => startFillFrom(x, y + PIXEL_SIZE, true, startColor, Directions.Up), 30);
await setTimeout(() => forceFill([x, y + PIXEL_SIZE], ignoreColor, Directions.Up), _SETTINGS.toolbar.toolParams.Fill.delay);
STATE.processes.terminatedByEnd++;
};

const changeColor = (type) => {
if (STATE.colorBlocked) return;
switch (type) {
case LEFT:
_SETTINGS.general.color.current =
Expand All @@ -190,50 +268,80 @@ const changeColor = (type) => {
const ToolsRenderer = {
'Pixel': (x, y, sx, sy) => {
fill(50);
text('Pix', x, y, sx, sy);
text('Pix', x+1, y, sx-1, sy);
},
'Line': (x, y, sx, sy) => {
fill(50);
text('Line', x, y, sx, sy);
text('Line', x+1, y, sx-1, sy);
},
'Rectangle': (x, y, sx, sy) => {
fill(50);
text('Rect', x+1, y, sx-1, sy);
},
'Polygon': (x, y, sx, sy) => {
fill(50);
text('Poly', x+1, y, sx-1, sy);
},
'Fill': (x, y, sx, sy) => {
fill(50);
text('Fill', x, y, sx, sy);
text('Fill', x+1, y, sx-1, sy);
},
'Colorizer': (x, y, sx, sy) => {
fill(STATE.currentColor);
rect(x, y, sx, sy);
fill(50);
text('COL', x, y, sx, sy);
text('COL', x+1, y, sx-1, sy);
},
'Clear': (x, y, sx, sy) => {
fill(230, 40, 40);
text('ERS', x, y, sx, sy);
text('ERS', x+1, y, sx-1, sy);
},
'Export': (x, y, sx, sy) => {
fill(50);
text('SAV', x, y, sx, sy);
}
text('SAV', x+1, y, sx-1, sy);
},
'Delimiter': (x, y, sx, sy) => {
stroke(STRCOLORS.STROKEBLACKA);
line(x, y + sy/2, x + sx, y + sy/2);
},
'Masking': (x, y, sx, sy) => {
fill(COLORS.RED);
text('MSK', x+1, y, sx-1, sy);
},
'MaskActivate': (x, y, sx, sy) => {
fill(STATE.maskOptions.isActive ? COLORS._MASK : COLORS.WHAY);
rect(x, y, sx, sy);
fill(50);
text(STATE.maskOptions.isActive ? 'ON' : 'OFF', x+1, y, sx-1, sy);
},
};

const ToolActions = {
'Pixel': (type) => {STATE.activeTool = 'Pixel'},
'Line': (type) => {STATE.activeTool = 'Line'},
'Fill': (type) => {STATE.activeTool = 'Fill'},
'Colorizer': (type) => {changeColor(type)},
'Clear': (type) => {
'Pixel': (type) => ToolManager.changeTool('Pixel'),
'Line': (type) => ToolManager.changeTool('Line'),
'Rectangle': (type) => ToolManager.changeTool('Rectangle'),
'Polygon': (type) => ToolManager.changeTool('Polygon'),
'Fill': (type) => ToolManager.changeTool('Fill'),
'Colorizer': (type) => ToolManager.useCallback(() => changeColor(type)),
'Clear': (type) => ToolManager.useCallback( () => {
Object.keys(_SETTINGS.setup.modules).forEach(key => {
_SETTINGS.setup.modules[key].model ?
_SETTINGS.setup.modules[key].model.render()
: (_SETTINGS.setup.modules[key].render ? _SETTINGS.setup.modules[key].render() : console.log(`${key} isn\'t inited before clearing`))
});
document.dispatchEvent(new Event('clearEvent'));
},
'Export': (type) => {
saveCanvas(createCanvasName(), 'jpg')
}
}),
'Export': (type) => ToolManager.useCallback(
() => saveCanvas(createCanvasName(), 'jpg')
),
'Delimiter': (type) => {},
'Masking': (type) => ToolManager.changeTool('Masking'),
'MaskActivate': (type) => ToolManager.useCallback(
() => STATE.maskOptions.isActive = !STATE.maskOptions.isActive
),
};


class Toolbar {
constructor() {
_SETTINGS.setup.modules.toolbar.isActive = true;
Expand Down Expand Up @@ -308,7 +416,9 @@ class Toolbar {
callback: ToolActions[tool]
});

rect(px, py, sx, sy);
if (tool !== 'Delimiter') {
rect(px, py, sx, sy);
}
ToolsRenderer[tool](px, py, sx, sy);

py += this._margins.top + this._blockSize.height;
Expand Down
Loading