const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'url-loader',
},
{
test: /\.(css|scss|sass)$/,
exclude: /\.module\.(css|scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'sass-loader',
],
},
{
test: /\.module\.(css|scss|sass)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
},
},
'sass-loader',
],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
devServer: {
contentBase: './dist',
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
}),
new CopyWebpackPlugin([
{ from: 'img', to: `static/img` },
]),
],
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Songbird</title>
<link rel="shortcut icon" href="./static/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<div class="wrapper">
</div>
<script type="text/jsx" src="app.js"></script>
</body>
</html>
if (startX < currPointX && startPointY < currPointY) {
while (startPointX !== currPointX && startPointY !== currPointY) {
startPointX += cellsInRow;
startPointY += 1;
window.console.log(startPointY);
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
let startPointX = startX; - начальная точка столбца
let startPointY = startY; - начальная точка строки
const currPointX = Math.floor(pX / cellH) * cellsInRow; - текущаяя точка столбца
const currPointY = Math.floor(pY / cellW); - текущаяя точка строки
const cell = {
top,
left,
curcolor: 'rgb(112, 112, 112)',
fill(color) {
context.fillStyle = color;
context.fillRect(this.top, this.left, cellWidth, cellHeight);
},
drawBorder(boderColor) {
context.beginPath();
context.strokeStyle = boderColor;
context.moveTo(this.top - 0.5, this.left - 0.5);
context.lineTo(this.top - 0.5, this.left + cellWidth - 0.5);
context.lineTo(this.top + cellHeight - 0.5, this.left + cellWidth - 0.5);
context.lineTo(this.top + cellHeight - 0.5, this.left - 0.5);
context.lineTo(this.top - 0.5, this.left - 0.5);
context.stroke();
},
getTop() {
return this.top;
},
getLeft() {
return this.left;
},
};
const choosePixelsSize = require('../penSize/choosePenSize');
const currColorWrapper = document.querySelector('.curr-icon');
function fillArea(topIndex, leftIndex, cells, cellsInRow) {
window.console.log(leftIndex);
const currPixelIndex = topIndex + leftIndex;
const currPixels = choosePixelsSize(cells, topIndex, leftIndex, currPixelIndex, cellsInRow);
for (let i = 0; i < currPixels.length; i += 1) {
if (currPixels[i]) {
currPixels[i].curcolor = `${currColorWrapper.style.backgroundColor}`;
currPixels[i].fill(`${currColorWrapper.style.backgroundColor}`);
}
}
}
export default function drawStroke(startX, startY, pX, pY, cellH, cellsInRow, cellW, cells) {
let startPointX = startX;
let startPointY = startY;
const currPointX = Math.floor(pX / cellH) * cellsInRow;
const currPointY = Math.floor(pY / cellW);
// for (let i = 0; i < cells.length; i += 1) {
// const cell = cells[i];
// if (cell) {
// cell.curcolor = 'rgb(112, 112, 112)';
// cell.fill('rgb(112, 112, 112)');
// cell.drawBorder('rgb(168, 168, 168)');
// }
// }
if (startX < currPointX && startPointY < currPointY) {
while (startPointX !== currPointX && startPointY !== currPointY) {
startPointX += cellsInRow;
startPointY += 1;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX > currPointX && startPointY > currPointY) {
while (startPointX !== currPointX && startPointY !== currPointY) {
startPointX -= cellsInRow;
startPointY -= 1;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX < currPointX && startPointY === currPointY) {
while (startPointX !== currPointX) {
startPointX += cellsInRow;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX === currPointX && startPointY < currPointY) {
while (startPointY !== currPointY) {
startPointY += 1;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX > currPointX && startPointY === currPointY) {
while (startPointX !== currPointX) {
startPointX -= cellsInRow;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX === currPointX && startPointY > currPointY) {
while (startPointY !== currPointY) {
startPointY -= 1;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
if (startX > currPointX && startPointY < currPointY) {
while (startPointY !== currPointY) {
startPointX -= cellsInRow;
startPointY += 1;
fillArea(startPointX, startPointY, cells, cellsInRow);
}
}
}