diff --git a/src/Node.ts b/src/Node.ts index c7048e6f3..dd044e473 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -2091,7 +2091,7 @@ export abstract class Node { this.toCanvas(config).toBlob((blob) => { resolve(blob); callback?.(blob); - }); + }, config?.mimeType, config?.quality); } catch (err) { reject(err); } diff --git a/src/shapes/Transformer.ts b/src/shapes/Transformer.ts index 959d921ed..ed044b655 100644 --- a/src/shapes/Transformer.ts +++ b/src/shapes/Transformer.ts @@ -18,6 +18,7 @@ export interface Box extends IRect { export interface TransformerConfig extends ContainerConfig { resizeEnabled?: boolean; rotateEnabled?: boolean; + rotateLineVisible?: boolean; rotationSnaps?: Array; rotationSnapTolerance?: number; rotateAnchorOffset?: number; @@ -205,6 +206,7 @@ function getSnap(snaps: Array, newRotationRad: number, tol: number) { * @param {Object} config * @param {Boolean} [config.resizeEnabled] Default is true * @param {Boolean} [config.rotateEnabled] Default is true + * @param {Boolean} [config.rotateLineVisible] Default is true * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is [] * @param {Number} [config.rotationSnapTolerance] Snapping tolerance. If closer than this it will snap. Default is 5 * @param {Number} [config.rotateAnchorOffset] Default is 50 @@ -614,7 +616,7 @@ export class Transformer extends Group { shape.height() + padding * 2 ); ctx.moveTo(shape.width() / 2, -padding); - if (tr.rotateEnabled()) { + if (tr.rotateEnabled() && tr.rotateLineVisible()) { ctx.lineTo( shape.width() / 2, -tr.rotateAnchorOffset() * Util._sign(shape.height()) - padding @@ -1289,6 +1291,7 @@ export class Transformer extends Group { anchorSize: GetSet; resizeEnabled: GetSet; rotateEnabled: GetSet; + rotateLineVisible: GetSet; rotateAnchorOffset: GetSet; rotationSnapTolerance: GetSet; rotateAnchorCursor: GetSet; @@ -1422,6 +1425,21 @@ Factory.addGetterSetter(Transformer, 'anchorSize', 10, getNumberValidator()); */ Factory.addGetterSetter(Transformer, 'rotateEnabled', true); +/** + * get/set visibility of a little line that connects transformer and rotate anchor. + * @name Konva.Transformer#rotateLineVisible + * @method + * @param {Boolean} enabled + * @returns {Boolean} + * @example + * // get + * var rotateLineVisible = transformer.rotateLineVisible(); + * + * // set + * transformer.rotateLineVisible(false); + */ +Factory.addGetterSetter(Transformer, 'rotateLineVisible', true); + /** * get/set rotation snaps angles. * @name Konva.Transformer#rotationSnaps diff --git a/test/unit/Stage-test.ts b/test/unit/Stage-test.ts index 354a51113..76f236781 100644 --- a/test/unit/Stage-test.ts +++ b/test/unit/Stage-test.ts @@ -1368,6 +1368,26 @@ describe('Stage', function () { } }); + it('toBlob with mimeType option using', async function () { + const stage = addStage(); + const layer = new Konva.Layer(); + + stage.add(layer); + + if (isBrowser) { + try { + const blob = await stage.toBlob({ + mimeType: 'image/jpeg', + quality: 0.5, + }); + assert.isTrue(blob instanceof Blob && blob.type === 'image/jpeg', "can't change type of blob"); + } catch (e) { + console.error(e); + assert.fail('error creating blob'); + } + } + }); + it('check hit graph with stage listening property', function () { var stage = addStage(); var layer = new Konva.Layer();