Merge branch 'master' into next-update

This commit is contained in:
Nicola 2022-01-23 16:45:27 +01:00
commit cd1d0cd5eb
12 changed files with 74 additions and 49 deletions

View File

@ -17,6 +17,8 @@ console.log('Building Pixel Editor');
function copy_images(){
// Icons
gulp.src('./images/*.png').pipe(gulp.dest(BUILDDIR));
//favicon
gulp.src('./images/*.ico').pipe(gulp.dest(BUILDDIR));
// Splash images
gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR));
// Logs images

View File

@ -1,7 +1,7 @@
.drawingCanvas {
cursor: url('/pixel-editor/pencil-tool-cursor.png');
cursor: url('pencil-tool-cursor.png');
border: solid 1px #fff;
image-rendering: optimizeSpeed;

View File

@ -112,7 +112,7 @@
button {
border: none;
width: 100%;
cursor: url('/pixel-editor/eyedropper.png'), auto;
cursor: url('eyedropper.png'), auto;
} //white outline
&.selected button::before {
content: "";

View File

@ -116,7 +116,7 @@
}
.dropdown-button {
background: $basehover url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
background: $basehover url('dropdown-arrow.png') right center no-repeat;
border: none;
border-radius: 4px;
color: $basehovertext;
@ -126,7 +126,7 @@
width: 200px;
text-align: left;
&:hover {
background: $baseselected url('/pixel-editor/dropdown-arrow-hover.png') right center no-repeat;
background: $baseselected url('dropdown-arrow-hover.png') right center no-repeat;
color: $baseselectedtext;
}
&.selected {

BIN
images/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

View File

@ -10,7 +10,7 @@ class PanTool extends Tool {
super.onStart(mousePos);
if (target.className != 'drawingCanvas')
return;
currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan-held.png\'), auto";
currFile.canvasView.style.cursor = "url(\'pan-held.png\'), auto";
}
onDrag(mousePos, target) {
@ -31,12 +31,12 @@ class PanTool extends Tool {
if (target.className != 'drawingCanvas')
return;
currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
currFile.canvasView.style.cursor = "url(\'pan.png\'), auto";
}
onSelect() {
super.onSelect();
currFile.canvasView.style.cursor = "url(\'/pixel-editor/pan.png\'), auto";
currFile.canvasView.style.cursor = "url(\'pan.png\'), auto";
}
onDeselect() {

View File

@ -5,12 +5,46 @@ const app = express();
const BUILDDIR = process.argv[2] || './build';
const PORT = process.argv[3] || 3000;
const FULLBUILDPATH = path.join(__dirname, BUILDDIR)
//LOGGING
app.use((req, res, next)=> {
//console.log('REQUEST', req.method+' '+req.originalUrl, res.statusCode);
next();
});
//apply to every request
app.use((req, res, next) => {
//disable caching
res.set("Cache-Control", "no-store");
//enabled/disable reload module
if (process.env.RELOAD === "yes") res.locals.reload = true;
return next();
});
//ROUTE - other files
app.use('/pixel-editor', express.static(path.join(__dirname, BUILDDIR)));
app.use('/', express.static(FULLBUILDPATH, {
//custom function required for logging static files
setHeaders: (res, filePath, fileStats) => {
console.info('GET', '/'+path.relative(FULLBUILDPATH, filePath), res.statusCode);
}
}));
//ROUTE - match / or any route with just numbers letters and dashes, and return index.htm (all other routes should have been handled already)
app.get('/', (req, res, next) => {
console.log('root')
res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) {
console.log('sent file');
return next();
});
});
//HOT RELOADING
// "reload" module allows us to trigger webpage reload automatically on file changes, but inside pixel editor it also
// makes browser steal focus from any other window in order to ask user about unsaved changes. It might be quite
// intrusive so we decided to give option to choose preferred workflow.
@ -19,6 +53,7 @@ if (process.env.RELOAD === "yes") {
//start server
app.server = app.listen(PORT, () => {
console.log(`Web server listening on port ${PORT} (with reload module)`);
})
});
} else {
@ -27,25 +62,13 @@ if (process.env.RELOAD === "yes") {
})
}
// Better to show landing page rather than 404 on editor page reload
app.get('/', (req, res) => {
res.redirect('/pixel-editor');
})
//ROUTE - match / or any route with just numbers letters and dashes, and return index.htm (all other routes should have been handled already)
app.get(['/pixel-editor', /^\/pixel-editor\/[\/a-z0-9-]+$/gi ], (req, res) => {
res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) {
if (err) {
console.log('error sending file', err);
} else {
console.log("Server: Successfully served index.html", req.originalUrl);
}
});
app.use(function(req, res, next) {
res.status(404);
res.type('txt').send('The requested resource does not exist. Did you spell it right? Did you remember to build the app? It\'s probably your fault somehow.');
return next();
});
// Better to show landing page rather than 404 on editor page reload
app.get('/pixel-editor/app', (req, res) => {
res.redirect('/');
})
//LOGGING
app.use((req, res, next)=> {
console.log(req.method+' '+req.originalUrl, res.statusCode);
});

View File

@ -6,7 +6,7 @@
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
<link rel="stylesheet" href="/pixel-editor/pixel-editor.css" />
<link rel="stylesheet" href="/pixel-editor.css" />
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
{{{google-analytics}}}
{{{favicons}}}
@ -40,7 +40,7 @@
{{> save-project}}
</div>
<script src="/pixel-editor/pixel-editor.js"></script>
<script src="/reload/reload.js"></script>
<script src="/pixel-editor.js"></script>
{{#reload}}<script src="/reload/reload.js"></script>{{/reload}}
</body>
</html>

View File

@ -7,7 +7,7 @@ We have some good news for users as well!
I've worked a bit on the pixel grid to make it look a bit better and less intrusive when zooming in. You can see the
difference in behaviour between the new grid (left) and the old grid (right) in the image below.
<img src="/pixel-editor/grid.png"/>
<img src="grid.png"/>
In addition, the pixel grid will now automatically be hidden when the zoom level becomes too low: in that way looking at big
sprites becomes a lot less performance-heavy and it doesn't cause lag.

View File

@ -7,7 +7,7 @@ The editor now has a splash page! Besides a fancy cover image with beautiful art
left of the page you'll be able to create a new custom pixel. You can also use the quickstart
menu to quickly select a preset or load an existing file. It was designed by <a href="https://twitter.com/skeddles">Skeddles</a> himself!
<img src="/pixel-editor/splash.gif"/>
<img src="splash.gif"/>
<strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
by clicking on <strong>Editor -> Splash page</strong>
@ -19,7 +19,7 @@ You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size
drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
the dimensions.
<img src="/pixel-editor/resize-canvas.gif"/>
<img src="resize-canvas.gif"/>
<h2>Sprite scaling</h2>
@ -29,14 +29,14 @@ to scale up or down your work. With the nearest-neighbour algorithm you'll be ab
in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling
down a sprite) antialiasing.
<img src="/pixel-editor/scale-sprite.gif"/>
<img src="scale-sprite.gif"/>
<h2>Line tool</h2>
Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
life improvement are planned for it, the rectangle and the rectangular selection tools.
<img src="/pixel-editor/line-tool.gif"/>
<img src="line-tool.gif"/>
<h2>Advanced mode: colour picker and palette block</h2>
@ -46,7 +46,7 @@ you'll find the new palette block, which lets you arrange your colours however y
remove multiple colours at once. Changes made in the palette block will update the palette list
you've always been familiar with.
<img src="/pixel-editor/palette-block.gif"/>
<img src="palette-block.gif"/>
<h2>Other changes:</h2>
<ul>

View File

@ -12,7 +12,7 @@
<div id="editor-logo">
<div id="black">
<div id="sp-coverdata">
<img src="https://lospec.com/brand/lospec_logo_3x.png"/> pixel editor
<img src="https://cdn.lospec.com/static/brand/lospec_logo_3x.png"/> pixel editor
<p>Version 1.4.0</p>
<a href="https://cdn.discordapp.com/attachments/506277390050131978/795660870221955082/final.png">Art by Unsettled</a>
</div>

View File

@ -1,14 +1,14 @@
<div class="preload">
<img src="/pixel-editor/dropdown-arrow.png" />
<img src="/pixel-editor/dropdown-arrow-hover.png" />
<img src="/pixel-editor/eyedropper.png" />
<img src="/pixel-editor/fill.png" />
<img src="/pixel-editor/pan.png" />
<img src="/pixel-editor/pan-held.png" />
<img src="/pixel-editor/pencil.png" />
<img src="/pixel-editor/zoom-in.png" />
<img src = "/pixel-editor/eraser.png"/>
<img src = "/pixel-editor/rectselect.png"/>
<img src="dropdown-arrow.png" />
<img src="dropdown-arrow-hover.png" />
<img src="eyedropper.png" />
<img src="fill.png" />
<img src="pan.png" />
<img src="pan-held.png" />
<img src="pencil.png" />
<img src="zoom-in.png" />
<img src = "eraser.png"/>
<img src = "rectselect.png"/>
<!-- TODO: [ELLIPSE] Where is this icon used? Do we need similar one for ellipsis? -->
<img src= "/pixel-editor/rectangle.png">
<img src= "rectangle.png">
</div>