highperfocused/bitmappery
1
0
Fork 0
mirror of https://github.com/igorski/bitmappery.git synced 2026-07-15 19:39:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Selection outlines should not be visible in copied selections nor exported images

Browse Source
This commit is contained in:
Igor Zinken
2021-01-22 10:12:46 +01:00
parent 430b3579de
commit 98d4e73607
2 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/rendering/canvas-elements/layer-sprite.js
View File

@@ -504,7 +504,7 @@ class LayerSprite extends sprite {
}
}
draw( documentContext, viewport ) {
draw( documentContext, viewport, omitOutlines = false ) {
const scaleDocument = this.isScaled();
// in case Layer has scale effect, apply it here (we don't resample the
@@ -529,53 +529,57 @@ class LayerSprite extends sprite {
renderTempCanvas( this.canvas, documentContext );
}
// render brush outline at pointer position
if ( this._isPaintMode ) {
const drawBrushOutline = this._toolType !== ToolTypes.CLONE || !!this._toolOptions.coords;
if ( this._toolType === ToolTypes.CLONE ) {
const { coords } = this._toolOptions;
let tx = this._pointerX - viewport.left;
let ty = this._pointerY - viewport.top;
const relSource = this._cloneStartCoords ?? this._dragStartEventCoordinates;
if ( coords ) {
tx = ( coords.x - viewport.left ) + ( this._pointerX - relSource.x );
ty = ( coords.y - viewport.top ) + ( this._pointerY - relSource.y );
if ( !omitOutlines ) {
// render brush outline at pointer position
if ( this._isPaintMode ) {
const drawBrushOutline = this._toolType !== ToolTypes.CLONE || !!this._toolOptions.coords;
if ( this._toolType === ToolTypes.CLONE ) {
const { coords } = this._toolOptions;
let tx = this._pointerX - viewport.left;
let ty = this._pointerY - viewport.top;
const relSource = this._cloneStartCoords ?? this._dragStartEventCoordinates;
if ( coords ) {
tx = ( coords.x - viewport.left ) + ( this._pointerX - relSource.x );
ty = ( coords.y - viewport.top ) + ( this._pointerY - relSource.y );
}
// when no source coordinate is set, or when applying the clone stamp, we show a cross to mark the origin
if ( !coords || this._brush.down ) {
renderCross( documentContext, tx, ty, this._brush.radius / this.canvas.zoomFactor );
}
}
// when no source coordinate is set, or when applying the clone stamp, we show a cross to mark the origin
if ( !coords || this._brush.down ) {
renderCross( documentContext, tx, ty, this._brush.radius / this.canvas.zoomFactor );
documentContext.save();
documentContext.beginPath();
if ( drawBrushOutline ) {
// any other brush mode state shows brush outline
documentContext.arc( this._pointerX - viewport.left, this._pointerY - viewport.top, this._brush.radius, 0, 2 * Math.PI );
}
documentContext.stroke();
documentContext.restore();
}
documentContext.save();
documentContext.beginPath();
if ( drawBrushOutline ) {
// any other brush mode state shows brush outline
documentContext.arc( this._pointerX - viewport.left, this._pointerY - viewport.top, this._brush.radius, 0, 2 * Math.PI );
// interactive state implies the sprite's Layer is currently active
// show a border around the Layer contents to indicate the active area
if ( this._interactive ) {
documentContext.save();
documentContext.lineWidth = 1 / this.canvas.zoomFactor;
documentContext.strokeStyle = "#0db0bc";
const { x, y, width, height } = this.layer;
const destX = x - viewport.left;
const destY = y - viewport.top;
if ( this.isRotated()) {
const tX = destX + ( width * .5 );
const tY = destY + ( height * .5 );
documentContext.translate( tX, tY );
documentContext.rotate( this.layer.effects.rotation );
documentContext.translate( -tX, -tY );
}
documentContext.strokeRect( destX, destY, width, height );
documentContext.restore();
}
documentContext.stroke();
documentContext.restore();
}
// interactive state implies the sprite's Layer is currently active
// show a border around the Layer contents to indicate the active area
if ( this._interactive ) {
documentContext.save();
documentContext.lineWidth = 1 / this.canvas.zoomFactor;
documentContext.strokeStyle = "#0db0bc";
const { x, y, width, height } = this.layer;
const destX = x - viewport.left;
const destY = y - viewport.top;
if ( this.isRotated()) {
const tX = destX + ( width * .5 );
const tY = destY + ( height * .5 );
documentContext.translate( tX, tY );
documentContext.rotate( this.layer.effects.rotation );
documentContext.translate( -tX, -tY );
}
documentContext.strokeRect( destX, destY, width, height );
documentContext.restore();
}
if ( scaleDocument ) {

4
src/utils/document-util.js
View File

@@ -40,7 +40,7 @@ export const createDocumentSnapshot = async ( activeDocument, type, quality ) =>
const layer = layers[ i ];
const sprite = getSpriteForLayer( layer );
await renderEffectsForLayer( layer, false );
sprite.draw( ctx, zcvs._viewport );
sprite.draw( ctx, zcvs._viewport, true );
}
quality = parseFloat(( quality / 100 ).toFixed( 2 ));
let base64 = cvs.toDataURL( type, quality );
@@ -76,7 +76,7 @@ export const copySelection = async ( activeDocument, activeLayer ) => {
ctx.clip();
// draw active layer onto temporary canvas at full document scale
sprite.draw( ctx, zcvs._viewport );
sprite.draw( ctx, zcvs._viewport, true );
ctx.restore();
// when calculating the source rectangle we must take the device pixel ratio into account