KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use canvas method in storybook-test-runner
Best JavaScript code snippet using storybook-test-runner
jquery.flot.composeImages.Test.js
Source:jquery.flot.composeImages.Test.js 
1/* eslint-disable */2/* global $, describe, it, xit, xdescribe, after, afterEach, expect*/3describe("composeImages", function() {4 var placeholder, plot;5 var composeImages = $.plot.composeImages,6 canvasData = window.colors.canvasData;7 beforeEach(function() {8 placeholder = setFixtures('<div id="test-container" style="width: 600px;height: 400px; padding: 0px margin: 0px; border: 0px; font-size:0pt; font-family:sans-serif; line-height:0px;">')9 .find('#test-container');10 jasmine.addMatchers(window.colors.jasmineMatchers);11 });12 it('should call composeImages on an empty array of sources, so the destination canvas should stay unmodified', function (done) {13 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +14 '</div>' +15 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'16 ).find('svg').toArray();17 var destinationCanvas = document.getElementById("myCanvas");18 function drawCircleOnToCanvas(canvas) {19 var ctx = canvas.getContext('2d');20 ctx.arc(80, 10, 5, 0, 2 * Math.PI);21 ctx.fill();22 }23 drawCircleOnToCanvas(destinationCanvas); //make sure composeImages won't modify this content24 composeImages(sources, destinationCanvas).then(function() {25 expect(canvasData(destinationCanvas, 80, 10, 1, 1)).toMatchPixelColor([0, 0, 0, 255]);26 expect(destinationCanvas.width).toBe(300);27 expect(destinationCanvas.height).toBe(150);28 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);29 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);30 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);31 expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);32 expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);33 expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 0, 0]);34 done();35 }, null);36 });37 it('should call composeImages on one SVG as a source', function (done) {38 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +39 '<svg id="svgSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg">' +40 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +41 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +42 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +43 '</svg>' +44 '</div>' +45 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'46 ).find('svg').toArray();47 var destinationCanvas = document.getElementById("myCanvas");48 composeImages(sources, destinationCanvas).then(function() {49 expect(destinationCanvas.width).toBe(100);50 expect(destinationCanvas.height).toBe(100);51 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);52 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);53 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);54 done();55 }, null);56 });57 it('should call composeImages on two identical SVGs, one near the other', function (done) {58 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +59 '<svg id="svgSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg">' +60 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +61 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +62 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +63 '</svg>' +64 '<svg id="svgSource2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg2">' +65 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +66 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +67 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +68 '</svg>' +69 '</div>' +70 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'71 ).find('svg').toArray();72 var destinationCanvas = document.getElementById("myCanvas");73 composeImages(sources, destinationCanvas).then(function() {74 expect(destinationCanvas.width).toBe(200); //204 - //200 + 2 * 2px_spacing75 expect(destinationCanvas.height).toBe(100);76 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);77 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);78 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);79 expect(canvasData(destinationCanvas, 110, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 480 expect(canvasData(destinationCanvas, 130, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //130 + 481 expect(canvasData(destinationCanvas, 150, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //150 + 482 done();83 }, null);84 });85 it('should call composeImages on two identical SVGs, one after the other', function (done) {86 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +87 '<svg id="svgSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg">' +88 '<circle id="c1" cx="10" cy="10" r="5" style="fill:#FF0000"/>' +89 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +90 '<circle id="c3" cx="50" cy="70" r="9" style="fill:#0000FF"/>' +91 '</svg>' +92 '<br>' +93 '<svg id="svgSource2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg2">' +94 '<circle id="c1" cx="10" cy="10" r="5" style="fill:#FF0000"/>' +95 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +96 '<circle id="c3" cx="50" cy="70" r="9" style="fill:#0000FF"/>' +97 '</svg>' +98 '</div>' +99 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'100 ).find('svg').toArray();101 var destinationCanvas = document.getElementById("myCanvas");102 composeImages(sources, destinationCanvas).then(function() {103 expect(destinationCanvas.width).toBe(100);104 expect(destinationCanvas.height).toBe(200); //204 - //200 + 2 * 2px_spacing105 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);106 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);107 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);108 expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4109 expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //140 + 4110 expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //170 + 4111 done();112 }, null);113 });114 it('should call composeImages on three identical SVGs, placed in an L-shape', function (done) {115 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +116 '<svg id="svgSource1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg1">' +117 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +118 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +119 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +120 '</svg>' +121 '<svg id="svgSource2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg2">' +122 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +123 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +124 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +125 '</svg>' +126 '<br>' +127 '<svg id="svgSource3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg3">' +128 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +129 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +130 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +131 '</svg>' +132 '</div>' +133 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'134 ).find('svg').toArray();135 var destinationCanvas = document.getElementById("myCanvas");136 composeImages(sources, destinationCanvas).then(function() {137 expect(destinationCanvas.width).toBe(200); //204 - //200 + 2 * 2px_spacing138 expect(destinationCanvas.height).toBe(200); //204 - //200 + 2 * 2px_spacing139 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);140 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);141 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);142 expect(canvasData(destinationCanvas, 110, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4143 expect(canvasData(destinationCanvas, 130, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //130 + 4144 expect(canvasData(destinationCanvas, 150, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //150 + 4145 expect(canvasData(destinationCanvas, 10, 110, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //110 + 4146 expect(canvasData(destinationCanvas, 30, 140, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //140 + 4147 expect(canvasData(destinationCanvas, 50, 170, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //170 + 4148 done();149 }, null);150 });151 it('should call composeImages on one canvas as a source', function (done) {152 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +153 '<canvas id="canvasSource" width="20" height="20" title="canvasSource"></canvas>' +154 '</div>' +155 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'156 ).find('#canvasSource').toArray();157 var originalCanvas = document.getElementById("canvasSource");158 var destinationCanvas = document.getElementById("myCanvas");159 drawSomeLinesOnCanvas(originalCanvas);160 composeImages(sources, destinationCanvas).then(function() {161 expect(destinationCanvas.width).toBe(20);162 expect(destinationCanvas.height).toBe(20);163 expect(canvasData(originalCanvas, 0, 0, 20, 20))164 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));165 done();166 }, null);167 });168 it('should call composeImages on one canvas and one SVG', function (done) {169 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +170 '<canvas class="imgsrc" id="canvasSource" width="20" height="20" title="canvasSource"></canvas>' +171 '<svg class="imgsrc" id="svgSource1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg1">' +172 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +173 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +174 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +175 '</svg>' +176 '</div>' +177 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'178 ).find('.imgsrc').toArray();179 var originalCanvas = document.getElementById("canvasSource");180 var destinationCanvas = document.getElementById("myCanvas");181 drawSomeLinesOnCanvas(originalCanvas);182 composeImages(sources, destinationCanvas).then(function() {183 expect(destinationCanvas.width).toBe(120); //124 - //120 + 2 * 2px_spacing184 expect(destinationCanvas.height).toBe(100);185 expect(canvasData(originalCanvas, 0, 0, 20, 20))186 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 80, 20, 20));187 expect(canvasData(destinationCanvas, 20 + 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]); //24 + 10188 expect(canvasData(destinationCanvas, 20 + 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]); //24 + 30189 expect(canvasData(destinationCanvas, 20 + 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]); //24 + 50190 done();191 }, null);192 });193 it('should call composeImages on two canvases', function (done) {194 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +195 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +196 '<canvas class="imgsrc" id="canvasSource2" width="20" height="20" title="canvasSource2"></canvas>' +197 '</div>' +198 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'199 ).find('.imgsrc').toArray();200 var originalCanvas1 = document.getElementById("canvasSource1");201 var originalCanvas2 = document.getElementById("canvasSource2");202 var destinationCanvas = document.getElementById("myCanvas");203 drawARectangleOnCanvas(originalCanvas1, "#FF0000");204 drawARectangleOnCanvas(originalCanvas2, "#00FF00");205 composeImages(sources, destinationCanvas).then(function() {206 expect(destinationCanvas.width).toBe(40); //44 - //2 * 20 + 2 * spacing207 expect(destinationCanvas.height).toBe(20);208 expect(canvasData(originalCanvas1, 0, 0, 20, 20))209 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));210 expect(canvasData(originalCanvas2, 0, 0, 20, 20))211 .toMatchCanvasArea(canvasData(destinationCanvas, 20 + 0, 0, 20, 20)); //20 + 4212 done();213 }, null);214 });215 it('should call composeImages on two partially overlapped canvases', function (done) {216 var sources = placeholder.html('<style type="text/css">' +217 '#canvasSource2 {position:relative; left:-10px;}' +218 '</style>' +219 '<div id="test-container" style="width: 600px;height: 400px">' +220 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +221 '<canvas class="imgsrc" id="canvasSource2" width="20" height="20" title="canvasSource2"></canvas>' +222 '</div>' +223 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'224 ).find('.imgsrc').toArray();225 var originalCanvas1 = document.getElementById("canvasSource1");226 var originalCanvas2 = document.getElementById("canvasSource2");227 var destinationCanvas = document.getElementById("myCanvas");228 drawARectangleOnCanvas(originalCanvas1, "#FF0000");229 drawARectangleOnCanvas(originalCanvas2, "#00FF00");230 composeImages(sources, destinationCanvas).then(function() {231 expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style232 expect(destinationCanvas.height).toBe(20);233 expect(canvasData(originalCanvas1, 0, 0, 10, 20)) //14234 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 10, 20)); //14235 expect(canvasData(originalCanvas2, 0, 0, 20, 20))236 .toMatchCanvasArea(canvasData(destinationCanvas, 20 + 0 - 10, 0, 20, 20)); //20 + 10 - 4237 done();238 }, null);239 });240 it('should call composeImages on two partially overlapped canvases. Same as above test, but the two canvases have the opposite Z order.', function (done) {241 var sources = placeholder.html('<style type="text/css">' +242 '#canvasSource2 {position:relative; left:-10px;}' +243 '</style>' +244 '<div id="test-container" style="width: 600px;height: 400px">' +245 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +246 '<canvas class="imgsrc" id="canvasSource2" width="20" height="20" title="canvasSource2"></canvas>' +247 '</div>' +248 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'249 ).find('.imgsrc').toArray();250 var originalCanvas1 = document.getElementById("canvasSource1");251 var originalCanvas2 = document.getElementById("canvasSource2");252 var destinationCanvas = document.getElementById("myCanvas");253 drawARectangleOnCanvas(originalCanvas1, "#FF0000");254 drawARectangleOnCanvas(originalCanvas2, "#00FF00");255 sources.reverse(); //make sure the images are composed in the inverse order256 composeImages(sources, destinationCanvas).then(function() {257 expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style258 expect(destinationCanvas.height).toBe(20);259 expect(canvasData(originalCanvas1, 0, 0, 20, 20))260 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));261 expect(canvasData(originalCanvas2, 0, 0, 20 - 10 + 0, 20)) //20 - 10 + 4262 .toMatchCanvasArea(canvasData(destinationCanvas, 20, 0, 20 - 10 + 0, 20)); //20 - 10 + 4263 done();264 }, null);265 });266 it('should call composeImages on two separate canvases, where one canvas is outside of view area', function (done) {267 var sources = placeholder.html('<style type="text/css">' +268 '#canvasSource2 {position:relative; left:-100px;}' +269 '</style>' +270 '<div id="test-container" style="width: 600px;height: 400px">' +271 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +272 '<canvas class="imgsrc" id="canvasSource2" width="20" height="20" title="canvasSource2"></canvas>' +273 '</div>' +274 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'275 ).find('.imgsrc').toArray();276 var originalCanvas1 = document.getElementById("canvasSource1");277 var originalCanvas2 = document.getElementById("canvasSource2");278 var destinationCanvas = document.getElementById("myCanvas");279 drawARectangleOnCanvas(originalCanvas1, "#FF0000");280 drawARectangleOnCanvas(originalCanvas2, "#00FF00");281 composeImages(sources, destinationCanvas).then(function() {282 expect(destinationCanvas.width).toBe(100 - 0); //100 - 4283 expect(destinationCanvas.height).toBe(20);284 expect(canvasData(originalCanvas1, 0, 0, 20, 20))285 .toMatchCanvasArea(canvasData(destinationCanvas, 100 - 20 - 0, 0, 20, 20)); //100 - 20 - 10 + 6286 expect(canvasData(originalCanvas2, 0, 0, 20, 20))287 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));288 done();289 }, null);290 });291 it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency', function (done) {292 var sources = placeholder.html('<style type="text/css">' +293 '#canvasSource1 {position:relative; left:-40px; top:-80px;}' +294 'circle { stroke: black; stroke-width: 2px;}' +295 '</style>' +296 '<div id="test-container" style="width: 600px;height: 400px">' +297 '<svg class="imgsrc" id="svgSource1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg1">' +298 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +299 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +300 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +301 '</svg>' +302 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +303 '</div>' +304 '<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"></canvas>'305 ).find('.imgsrc').toArray();306 var originalCanvas1 = document.getElementById("canvasSource1");307 var destinationCanvas = document.getElementById("myCanvas");308 drawARectangleOnCanvas(originalCanvas1, "#FF0000");309 composeImages(sources, destinationCanvas).then(function() {310 expect(destinationCanvas.width).toBe(100);311 expect(destinationCanvas.height).toBe(100);312 expect(canvasData(originalCanvas1, 0, 0, 20, 20))313 .toMatchCanvasArea(canvasData(destinationCanvas, 100 - 40 + 0, 0, 20, 20)); //100 - 40 + 4314 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);315 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);316 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);317 done();318 }, null);319 });320 it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) {321 var sources = placeholder.html('<style type="text/css">' +322 '#canvasSource1 {position:relative; left:-180px; top:-10px;}' +323 'circle { stroke: black; stroke-width: 4px;}' +324 '</style>' +325 '<div id="test-container" style="width: 600px;height: 400px">' +326 '<svg class="imgsrc" id="svgSource1" viewBox="0 0 250 150" xmlns="http://www.w3.org/2000/svg" width="250" height="150" title="svg1">' +327 '<circle id="c1" cx="230" cy="20" r="15" style="fill:red"/>' +328 '<circle id="c2" cx="175" cy="100" r="25" style="fill:#00FF00"/>' +329 '<circle id="c3" cx="50" cy="130" r="40" style="fill:blue"/>' +330 '</svg>' +331 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +332 '</div>' +333 '<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"></canvas>'334 ).find('.imgsrc').toArray();335 var originalCanvas1 = document.getElementById("canvasSource1");336 var destinationCanvas = document.getElementById("myCanvas");337 drawARectangleOnCanvas(originalCanvas1, "#FF0000");338 composeImages(sources, destinationCanvas).then(function() {339 expect(destinationCanvas.width).toBe(250);340 expect(destinationCanvas.height).toBe(150);341 expect(canvasData(originalCanvas1, 0, 0, 20, 20))342 .toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4343 //circle centers344 expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);345 expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);346 expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);347 //other points on circles should match the required colors, because of configured diameters348 expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);349 expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);350 expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);351 //verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style352 expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]);353 done();354 }, null);355 });356 it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency, using external CSS. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) {357 var sources = placeholder.html('<style type="text/css">' +358 '#canvasSource1 {position:relative; left:-180px; top:-10px;}' +359 '</style>' +360 '<div id="test-container" style="width: 600px;height: 400px">' +361 '<svg class="imgsrc" id="svgSource1" viewBox="0 0 250 150" xmlns="http://www.w3.org/2000/svg" width="250" height="150" title="svg1">' +362 '<circle class="externalCSS" id="c1" cx="230" cy="20" r="15" style="fill:red"/>' +363 '<circle class="externalCSS" id="c2" cx="175" cy="100" r="25" style="fill:#00FF00"/>' +364 '<circle class="externalCSS" id="c3" cx="50" cy="130" r="40" style="fill:blue"/>' +365 '</svg>' +366 '<canvas class="imgsrc" id="canvasSource1" width="20" height="20" title="canvasSource1"></canvas>' +367 '</div>' +368 '<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"></canvas>'369 ).find('.imgsrc').toArray();370 var originalCanvas1 = document.getElementById("canvasSource1");371 var destinationCanvas = document.getElementById("myCanvas");372 drawARectangleOnCanvas(originalCanvas1, "#FF0000");373 composeImages(sources, destinationCanvas).then(function() {374 expect(destinationCanvas.width).toBe(250);375 expect(destinationCanvas.height).toBe(150);376 expect(canvasData(originalCanvas1, 0, 0, 20, 20))377 .toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4378 //circle centers379 expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);380 expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);381 expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);382 //other points on circles should match the required colors, because of configured diameters383 expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);384 expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);385 expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);386 //verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style387 expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]);388 done();389 }, null);390 });391 it('should call composeImages on one dynamically created canvas as a source, without being able to compose', function (done) {392 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +393 '</div>' +394 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'395 ).find('#canvasSource').toArray();396 var originalCanvas = document.createElement('canvas');397 originalCanvas.width = 20;398 originalCanvas.height = 20;399 drawSomeLinesOnCanvas(originalCanvas);400 sources.push(originalCanvas);401 var destinationCanvas = document.getElementById("myCanvas");402 composeImages(sources, destinationCanvas).then(function() {403 expect(destinationCanvas.width).toBe(30);404 expect(destinationCanvas.height).toBe(15);405 done();406 }, null);407 });408 it('should call composeImages on two dynamically created canvas as sources, without being able to compose', function (done) {409 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +410 '</div>' +411 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'412 ).find('#canvasSource').toArray();413 var originalCanvas = document.createElement('canvas');414 originalCanvas.width = 20;415 originalCanvas.height = 20;416 drawSomeLinesOnCanvas(originalCanvas);417 sources.push(originalCanvas);418 originalCanvas = document.createElement('canvas');419 originalCanvas.width = 20;420 originalCanvas.height = 20;421 drawSomeLinesOnCanvas(originalCanvas);422 sources.push(originalCanvas);423 var destinationCanvas = document.getElementById("myCanvas");424 composeImages(sources, destinationCanvas).then(function() {425 expect(destinationCanvas.width).toBe(30);426 expect(destinationCanvas.height).toBe(15);427 done();428 }, null);429 });430 it('should call composeImages on two dynamically created canvas as sources (with left/top properties set), without being able to compose', function (done) {431 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +432 '</div>' +433 '<canvas id="myCanvas" width="30" height="15" style="border:1px solid #d3d3d3;"></canvas>'434 ).find('#canvasSource').toArray();435 var originalCanvas = document.createElement('canvas');436 originalCanvas.width = 20;437 originalCanvas.height = 20;438 originalCanvas.left = 0;439 originalCanvas.top = 0;440 drawSomeLinesOnCanvas(originalCanvas);441 sources.push(originalCanvas);442 originalCanvas = document.createElement('canvas');443 originalCanvas.width = 20;444 originalCanvas.height = 20;445 originalCanvas.left = 0;446 originalCanvas.top = 0;447 drawSomeLinesOnCanvas(originalCanvas);448 sources.push(originalCanvas);449 var destinationCanvas = document.getElementById("myCanvas");450 composeImages(sources, destinationCanvas).then(function() {451 expect(destinationCanvas.width).toBe(30);452 expect(destinationCanvas.height).toBe(15);453 done();454 }, null);455 });456 it('should call composeImages on one canvas as a source and a dynamically generated destination Canvas', function (done) {457 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +458 '<canvas id="canvasSource" width="20" height="20" title="canvasSource"></canvas>' +459 '</div>'460 ).find('#canvasSource').toArray();461 var originalCanvas = document.getElementById("canvasSource");462 var destinationCanvas = document.createElement("canvas");463 destinationCanvas.width = 30;464 destinationCanvas.height = 15;465 drawSomeLinesOnCanvas(originalCanvas);466 composeImages(sources, destinationCanvas).then(function() {467 expect(destinationCanvas.width).toBe(20);468 expect(destinationCanvas.height).toBe(20);469 expect(canvasData(originalCanvas, 0, 0, 20, 20))470 .toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));471 done();472 }, null);473 });474 xit('should call composeImages on one SVG as a source, which defines only its viewbox, without width and height', function (done) {475 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +476 '<svg id="svgSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" title="svg">' +477 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +478 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +479 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +480 '</svg>' +481 '</div>' +482 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'483 ).find('svg').toArray();484 var destinationCanvas = document.getElementById("myCanvas");485 composeImages(sources, destinationCanvas).then(function() {486 expect(destinationCanvas.width).toBe(600);487 expect(destinationCanvas.height).toBe(600);488 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);489 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);490 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);491 done();492 }, null);493 });494 xit('should call composeImages on one SVG as a source, which defines only its width and height, without its viewbox', function (done) {495 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +496 '<svg id="svgSource" xmlns="http://www.w3.org/2000/svg" width="100" height="100" title="svg">' +497 '<circle id="c1" cx="10" cy="10" r="5" style="fill:red"/>' +498 '<circle id="c2" cx="30" cy="40" r="7" style="fill:#00FF00"/>' +499 '<circle id="c3" cx="50" cy="70" r="9" style="fill:blue"/>' +500 '</svg>' +501 '</div>' +502 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'503 ).find('svg').toArray();504 var destinationCanvas = document.getElementById("myCanvas");505 composeImages(sources, destinationCanvas).then(function() {506 expect(destinationCanvas.width).toBe(100);507 expect(destinationCanvas.height).toBe(100);508 expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);509 expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);510 expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);511 done();512 }, null);513 });514 xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only its viewBox is defined.', function (done) {515 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +516 '<svg class="legendLayer" style="width:inherit;height:inherit;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' +517 '<defs>' +518 '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +519 '<polyline points="0,15 5,5 10,10 15,0"></polyline>' +520 '</symbol>' +521 '</defs>' +522 '<g>' +523 '<use xlink:href="#line" class="legendIcon" x="0em" y="0em" stroke="#82A3D1" stroke-width="2" width="1.5em" height="1.5em"></use>' +524 '<text x="0em" y="0em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 1</tspan></text>' +525 '</g>' +526 '<g>' +527 '<use xlink:href="#line" class="legendIcon" x="0em" y="1.5em" stroke="#862323" stroke-width="1" width="1.5em" height="1.5em"></use>' +528 '<text x="0em" y="1.5em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 2</tspan></text>' +529 '</g>' +530 '</svg>' +531 '</div>' +532 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'533 ).find('svg').toArray();534 var destinationCanvas = document.getElementById("myCanvas");535 composeImages(sources, destinationCanvas).then(function() {536 expect(destinationCanvas.width).toBe(600);537 expect(destinationCanvas.height).toBe(400);538 done();539 }, null);540 });541 xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only the width and height properties are defined.', function (done) {542 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +543 '<svg class="legendLayer" style="width:inherit;height:inherit;" xmlns="http://www.w3.org/2000/svg" width="20" height="20">' +544 '<defs>' +545 '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +546 '<polyline points="0,15 5,5 10,10 15,0"></polyline>' +547 '</symbol>' +548 '</defs>' +549 '<g>' +550 '<use xlink:href="#line" class="legendIcon" x="0em" y="0em" stroke="#82A3D1" stroke-width="2" width="1.5em" height="1.5em"></use>' +551 '<text x="0em" y="0em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 1</tspan></text>' +552 '</g>' +553 '<g>' +554 '<use xlink:href="#line" class="legendIcon" x="0em" y="1.5em" stroke="#862323" stroke-width="1" width="1.5em" height="1.5em"></use>' +555 '<text x="0em" y="1.5em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 2</tspan></text>' +556 '</g>' +557 '</svg>' +558 '</div>' +559 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'560 ).find('svg').toArray();561 var destinationCanvas = document.getElementById("myCanvas");562 composeImages(sources, destinationCanvas).then(function() {563 expect(destinationCanvas.width).toBe(600);564 expect(destinationCanvas.height).toBe(400);565 done();566 }, null);567 });568 it('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". ViewBox, width and height properties are defined.', function (done) {569 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +570 '<svg class="legendLayer" style="width:inherit;height:inherit;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100">' +571 '<defs>' +572 '<symbol id="line" fill="none" viewBox="-5 -5 25 25">' +573 '<polyline points="0,15 5,5 10,10 15,0"></polyline>' +574 '</symbol>' +575 '</defs>' +576 '<g>' +577 '<use xlink:href="#line" class="legendIcon" x="0em" y="0em" stroke="#82A3D1" stroke-width="2" width="1.5em" height="1.5em"></use>' +578 '<text x="0em" y="0em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 1</tspan></text>' +579 '</g>' +580 '<g>' +581 '<use xlink:href="#line" class="legendIcon" x="0em" y="1.5em" stroke="#862323" stroke-width="1" width="1.5em" height="1.5em"></use>' +582 '<text x="0em" y="1.5em" text-anchor="start"><tspan dx="2em" dy="1.2em">Plot 2</tspan></text>' +583 '</g>' +584 '</svg>' +585 '</div>' +586 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'587 ).find('svg').toArray();588 var destinationCanvas = document.getElementById("myCanvas");589 composeImages(sources, destinationCanvas).then(function() {590 expect(destinationCanvas.width).toBe(600);591 expect(destinationCanvas.height).toBe(400);592 done();593 }, null);594 });595 xit('should call composeImages on one empty SVG as a source. This may block composeImages.', function (done) {596 var sources = placeholder.html('<div id="test-container" style="width: 600px;height: 400px">' +597 '<svg class="legendLayer" style="width:inherit;height:inherit;" xmlns="http://www.w3.org/2000/svg" id="blockingTest">' +598 '</svg>' +599 '</div>' +600 '<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>'601 ).find('svg').toArray();602 var destinationCanvas = document.getElementById("myCanvas");603 composeImages(sources, destinationCanvas).then(function() {604 expect(destinationCanvas.width).toBe(600);605 expect(destinationCanvas.height).toBe(400);606 done();607 }, null);608 });609 function drawSomeLinesOnCanvas(canvas) {610 var ctx = canvas.getContext('2d');611 ctx.beginPath();612 ctx.moveTo(0, 0);613 ctx.lineTo(19, 19);614 ctx.moveTo(3, 18);615 ctx.lineTo(17, 5);616 ctx.stroke();617 }618 function drawARectangleOnCanvas(canvas, color) {619 var ctx = canvas.getContext('2d');620 ctx.rect(0, 0, 20, 20);621 ctx.fillStyle = color;622 ctx.fill();623 }...
RGraph.common.resizing.js
Source:RGraph.common.resizing.js
1 /**2 * o------------------------------------------------------------------------------o3 * | This file is part of the RGraph package - you can learn more at: |4 * | |5 * | http://www.rgraph.net |6 * | |7 * | This package is licensed under the RGraph license. For all kinds of business |8 * | purposes there is a small one-time licensing fee to pay and for non |9 * | commercial purposes it is free to use. You can read the full license here: |10 * | |11 * | http://www.rgraph.net/LICENSE.txt |12 * o------------------------------------------------------------------------------o13 */14 if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};15 /**16 * This is an array of CSS properties that should be preserved when adding theplaceholder DIV17 */18 __rgraph_resizing_preserve_css_properties__ = [];19 /**20 * This function can be used to allow resizing21 * 22 * @param object obj Your graph object23 */24 RGraph.AllowResizing = function (obj)25 {26 if (obj.Get('chart.resizable')) {27 var canvas = obj.canvas;28 var context = obj.context;29 var resizeHandle = 15;30 RGraph.Resizing.canvas = canvas;31 RGraph.Resizing.placeHolders = [];32 33 /**34 * Add the original width and height to the canvas35 */36 if (!canvas.__original_width__ && !canvas.__original_height__) {37 canvas.__original_width__ = canvas.width;38 canvas.__original_height__ = canvas.height;39 }40 var adjustX = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[0]) == 'number' ? obj.Get('chart.resize.handle.adjust')[0] : 0);41 var adjustY = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[1]) == 'number' ? obj.Get('chart.resize.handle.adjust')[1] : 0);42 /**43 * Draw the resize handle44 */45 var textWidth = context.measureText('Reset').width + 2;46 // Draw the white background for the resize handle - OPTIONAL default is rgba(0,0,0,0);47 var bgcolor = obj.Get('chart.resize.handle.background');48 49 if (!bgcolor) {50 bgcolor = 'rgba(0,0,0,0)';51 }52 context.beginPath();53 context.fillStyle = bgcolor;54 context.moveTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle);55 context.fillRect(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle + adjustY, 2 * resizeHandle, resizeHandle);56 context.fill();57 obj.context.beginPath();58 obj.context.strokeStyle = 'gray';59 obj.context.fillStyle = 'rgba(0,0,0,0)';60 obj.context.lineWidth = 1;61 obj.context.fillRect(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - resizeHandle - 2 + adjustY, resizeHandle, resizeHandle + 2);62 obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth + adjustX, obj.canvas.height - resizeHandle + adjustY, resizeHandle + textWidth, resizeHandle + 2);63 // Draw the arrows64 65 // Vertical line66 obj.context.moveTo(AA(this, obj.canvas.width - (resizeHandle / 2) + adjustX), obj.canvas.height - resizeHandle + adjustY);67 obj.context.lineTo(AA(this, obj.canvas.width - (resizeHandle / 2) + adjustX), obj.canvas.height + adjustY);68 // Horizontal line69 obj.context.moveTo(obj.canvas.width + adjustX, AA(this, obj.canvas.height - (resizeHandle / 2) + adjustY));70 obj.context.lineTo(obj.canvas.width - resizeHandle + adjustX, AA(this, obj.canvas.height - (resizeHandle / 2) + adjustY));71 72 context.fill();73 context.stroke();74 // Top arrow head75 context.fillStyle = 'gray';76 context.beginPath();77 context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height - resizeHandle + adjustY);78 context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);79 context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);80 context.closePath();81 context.fill();82 // Bottom arrow head83 context.beginPath();84 context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height + adjustY);85 context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - 3 + adjustY);86 context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - 3 + adjustY);87 context.closePath();88 context.fill();89 // Left arrow head90 context.beginPath();91 context.moveTo(canvas.width - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);92 context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);93 context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);94 context.closePath();95 context.fill();96 // Right arrow head97 context.beginPath();98 context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);99 context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);100 context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);101 context.closePath();102 context.fill();103 104 // Square at the centre of the arrows105 context.beginPath();106 context.fillStyle = 'white';107 context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);108 context.strokeRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);109 context.fillRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);110 context.stroke();111 context.fill();112 // Draw the "Reset" button113 context.beginPath();114 context.fillStyle = 'gray';115 context.moveTo(AA(this, canvas.width - resizeHandle - 3 + adjustX), canvas.height - resizeHandle / 2 + adjustY);116 context.lineTo(AA(this, canvas.width - resizeHandle - resizeHandle + adjustX), canvas.height - (resizeHandle / 2) + adjustY);117 context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY);118 context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) + 2 + adjustY);119 context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);120 context.stroke();121 context.fill();122 context.beginPath();123 context.moveTo(AA(this, canvas.width - resizeHandle - resizeHandle - 1 + adjustX), canvas.height - (resizeHandle / 2) - 3 + adjustY);124 context.lineTo(AA(this, canvas.width - resizeHandle - resizeHandle - 1 + adjustX), canvas.height - (resizeHandle / 2) + 3 + adjustY);125 context.stroke();126 context.fill();127 128 var window_onmousemove = function (e)129 {130 e = RGraph.FixEventObject(e);131 132 var canvas = RGraph.Resizing.canvas;133 var newWidth = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5134 var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5135 if (RGraph.Resizing.mousedown) {136 if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px';137 if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px';138 139 RGraph.FireCustomEvent(canvas.__object__, 'onresize');140 }141 }142 // Install the function as an event listener - but only once143 if (typeof(canvas.rgraph_resize_window_mousemove_listener_installed) != 'boolean') {144 window.addEventListener('mousemove', window_onmousemove, false);145 canvas.rgraph_resize_window_mousemove_listener_installed = true;146 }147 /**148 * The window onmouseup function149 */150 var MouseupFunc = function (e)151 {152 if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) {153 return;154 }155 if (RGraph.Resizing.div) {156 var div = RGraph.Resizing.div;157 var canvas = div.__canvas__;158 var coords = RGraph.getCanvasXY(div.__canvas__);159 var parentNode = canvas.parentNode;160 if (canvas.style.position != 'absolute') {161 // Create a DIV to go in the canvases place162 var placeHolderDIV = document.createElement('DIV');163 placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px';164 placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px';165 //placeHolderDIV.style.backgroundColor = 'red';166 placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010167 placeHolderDIV.style.position = canvas.style.position;168 placeHolderDIV.style.left = canvas.style.left;169 placeHolderDIV.style.top = canvas.style.top;170 placeHolderDIV.style.cssFloat = canvas.style.cssFloat;171 parentNode.insertBefore(placeHolderDIV, canvas);172 }173 // Now set the canvas to be positioned absolutely174 canvas.style.backgroundColor = 'white';175 canvas.style.position = 'absolute';176 canvas.style.border = '1px dashed gray';177 canvas.style.left = (RGraph.Resizing.originalCanvasX - 1) + 'px';178 canvas.style.top = (RGraph.Resizing.originalCanvasY - 1) + 'px';179 canvas.width = parseInt(div.style.width);180 canvas.height = parseInt(div.style.height);181 182 183 /**184 * Fire the onresize event185 */186 RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');187 RGraph.RedrawCanvas(canvas);188 //canvas.__object__.Draw();189 // Get rid of transparent semi-opaque DIV190 RGraph.Resizing.mousedown = false;191 div.style.display = 'none';192 document.body.removeChild(div);193 }194 /**195 * If there is zoom enabled in thumbnail mode, lose the zoom image196 */197 if (RGraph.Registry.Get('chart.zoomed.div') || RGraph.Registry.Get('chart.zoomed.img')) {198 RGraph.Registry.Set('chart.zoomed.div', null);199 RGraph.Registry.Set('chart.zoomed.img', null);200 }201 /**202 * Fire the onresize event203 */204 RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');205 }206 var window_onmouseup = MouseupFunc;207 // Install the function as an event listener - but only once208 if (typeof(canvas.rgraph_resize_window_mouseup_listener_installed) != 'boolean') {209 window.addEventListener('mouseup', window_onmouseup, false);210 canvas.rgraph_resize_window_mouseup_listener_installed = true;211 }212 var canvas_onmousemove = function (e)213 {214 e = RGraph.FixEventObject(e);215 216 var coords = RGraph.getMouseXY(e);217 var obj = e.target.__object__;218 var canvas = e.target;219 var context = canvas.getContext('2d');220 var cursor = canvas.style.cursor;221 // Save the original cursor222 if (!RGraph.Resizing.original_cursor) {223 RGraph.Resizing.original_cursor = cursor;224 }225 226 if ( (coords[0] > (canvas.width - resizeHandle)227 && coords[0] < canvas.width228 && coords[1] > (canvas.height - resizeHandle)229 && coords[1] < canvas.height)) {230 231 canvas.style.cursor = 'move';232 } else if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)233 && coords[0] < canvas.width - resizeHandle234 && coords[1] > (canvas.height - resizeHandle)235 && coords[1] < canvas.height) {236 237 canvas.style.cursor = 'pointer';238 } else {239 if (RGraph.Resizing.original_cursor) {240 canvas.style.cursor = RGraph.Resizing.original_cursor;241 RGraph.Resizing.original_cursor = null;242 } else {243 canvas.style.cursor = 'default';244 }245 }246 }247 // Install the function as an event listener - but only once248 if (typeof(canvas.rgraph_resize_mousemove_listener_installed) != 'boolean') {249 canvas.addEventListener('mousemove', canvas_onmousemove, false);250 canvas.rgraph_resize_mousemove_listener_installed = true;251 }252 var canvas_onmouseout = function (e)253 {254 e.target.style.cursor = 'default';255 e.target.title = '';256 }257 // Install the function as an event listener - but only once258 if (typeof(canvas.rgraph_resize_mouseout_listener_installed) != 'boolean') {259 canvas.addEventListener('mouseout', canvas_onmouseout, false);260 canvas.rgraph_resize_mouseout_listener_installed = true;261 }262 var canvas_onmousedown = function (e)263 {264 e = RGraph.FixEventObject(e);265 var coords = RGraph.getMouseXY(e);266 var canvasCoords = RGraph.getCanvasXY(e.target);267 var canvas = e.target;268 if ( coords[0] > (obj.canvas.width - resizeHandle)269 && coords[0] < obj.canvas.width270 && coords[1] > (obj.canvas.height - resizeHandle)271 && coords[1] < obj.canvas.height) {272 273 RGraph.FireCustomEvent(obj, 'onresizebegin');274 275 // Save the existing border276 if (canvas.__original_css_border__ == null) {277 canvas.__original_css_border__ = canvas.style.border;278 }279 RGraph.Resizing.mousedown = true;280 /**281 * Create the semi-opaque DIV282 */283 var div = document.createElement('DIV');284 div.style.position = 'absolute';285 div.style.left = canvasCoords[0] + 'px';286 div.style.top = canvasCoords[1] + 'px';287 div.style.width = canvas.width + 'px';288 div.style.height = canvas.height + 'px';289 div.style.border = '1px dotted black';290 div.style.backgroundColor = 'gray';291 div.style.opacity = 0.5;292 div.__canvas__ = e.target;293 document.body.appendChild(div);294 RGraph.Resizing.div = div;295 RGraph.Resizing.placeHolders.push(div);296 297 // Hide the previous resize indicator layers. This is only necessary it seems for the Meter chart298 for (var i=0; i<(RGraph.Resizing.placeHolders.length - 1); ++i) {299 RGraph.Resizing.placeHolders[i].style.display = 'none';300 }301 // This is a repetition of the window.onmouseup function (No need to use DOM2 here)302 div.onmouseup = function (e)303 {304 MouseupFunc(e);305 }306 307 // No need to use DOM2 here308 RGraph.Resizing.div.onmouseover = function (e)309 {310 e = RGraph.FixEventObject(e);311 e.stopPropagation();312 }313 314 // The mouse315 RGraph.Resizing.originalx = e.pageX;316 RGraph.Resizing.originaly = e.pageY;317 318 RGraph.Resizing.originalw = obj.canvas.width;319 RGraph.Resizing.originalh = obj.canvas.height;320 321 RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];322 RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];323 }324 /**325 * This facilitates the reset button326 */327 if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)328 && coords[0] < canvas.width - resizeHandle329 && coords[1] > (canvas.height - resizeHandle)330 && coords[1] < canvas.height) {331 332 /**333 * Fire the onresizebegin event334 */335 RGraph.FireCustomEvent(canvas.__object__, 'onresizebegin');336 // Restore the original width and height337 canvas.width = canvas.__original_width__;338 canvas.height = canvas.__original_height__;339 // Lose the border340 canvas.style.border = canvas.__original_css_border__;341 //canvas.__original_css_border__ = null;342 343 // Add 1 pixel to the top/left because the border is going344 canvas.style.left = (parseInt(canvas.style.left)) + 'px';345 canvas.style.top = (parseInt(canvas.style.top)) + 'px';346 RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');347 // Redraw the canvas348 RGraph.Redraw();349 350 // Set the width and height on the DIV351 if (RGraph.Resizing.div) {352 RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px';353 RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';354 }355 /**356 * Fire the resize event357 */358 RGraph.FireCustomEvent(canvas.__object__, 'onresize');359 RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');360 }361 }362 // Install the function as an event listener - but only once363 if (typeof(canvas.rgraph_resize_mousedown_listener_installed) != 'boolean') {364 canvas.addEventListener('mousedown', canvas_onmousedown, false);365 canvas.rgraph_resize_mousedown_listener_installed = true;366 }367 /**368 * This function facilitates the reset button369 * 370 * NOTE: 31st December 2010 - doesn't appear to be being used any more371 */372 /*373 canvas.onclick = function (e)374 {375 var coords = RGraph.getMouseXY(e);376 var canvas = e.target;377 if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)378 && coords[0] < canvas.width - resizeHandle379 && coords[1] > (canvas.height - resizeHandle)380 && coords[1] < canvas.height) {381 // Restore the original width and height382 canvas.width = canvas.__original_width__;383 canvas.height = canvas.__original_height__;384 // Lose the border385 canvas.style.border = '';386 387 // Add 1 pixel to the top/left because the border is going388 canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px';389 canvas.style.top = (parseInt(canvas.style.top) + 1) + 'px';390 391 // Fire the onresizebeforedraw event392 RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');393 // Redraw the canvas394 canvas.__object__.Draw();395 396 // Set the width and height on the DIV397 RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px';398 RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';399 400 // Fire the resize event401 RGraph.FireCustomEvent(canvas.__object__, 'onresize');402 }403 }404 */405 }...
render.js
Source:render.js
1import $ from 'jquery';2import {3 ACTION_ALL,4 ACTION_MOVE,5 CLASS_HIDDEN,6 DATA_ACTION,7 EVENT_CROP,8} from './constants';9import {10 getAdjustedSizes,11 getRotatedSizes,12 getTransformValues,13} from './utilities';14export default {15 render() {16 this.initContainer();17 this.initCanvas();18 this.initCropBox();19 this.renderCanvas();20 if (this.cropped) {21 this.renderCropBox();22 }23 },24 initContainer() {25 const {26 $element,27 options,28 $container,29 $cropper,30 } = this;31 $cropper.addClass(CLASS_HIDDEN);32 $element.removeClass(CLASS_HIDDEN);33 $cropper.css((this.container = {34 width: Math.max(35 $container.width(),36 Number(options.minContainerWidth) || 200,37 ),38 height: Math.max(39 $container.height(),40 Number(options.minContainerHeight) || 100,41 ),42 }));43 $element.addClass(CLASS_HIDDEN);44 $cropper.removeClass(CLASS_HIDDEN);45 },46 // Canvas (image wrapper)47 initCanvas() {48 const { container, image } = this;49 const { viewMode } = this.options;50 const rotated = Math.abs(image.rotate) % 180 === 90;51 const naturalWidth = rotated ? image.naturalHeight : image.naturalWidth;52 const naturalHeight = rotated ? image.naturalWidth : image.naturalHeight;53 const aspectRatio = naturalWidth / naturalHeight;54 let canvasWidth = container.width;55 let canvasHeight = container.height;56 if (container.height * aspectRatio > container.width) {57 if (viewMode === 3) {58 canvasWidth = container.height * aspectRatio;59 } else {60 canvasHeight = container.width / aspectRatio;61 }62 } else if (viewMode === 3) {63 canvasHeight = container.width / aspectRatio;64 } else {65 canvasWidth = container.height * aspectRatio;66 }67 const canvas = {68 aspectRatio,69 naturalWidth,70 naturalHeight,71 width: canvasWidth,72 height: canvasHeight,73 };74 canvas.left = (container.width - canvasWidth) / 2;75 canvas.top = (container.height - canvasHeight) / 2;76 canvas.oldLeft = canvas.left;77 canvas.oldTop = canvas.top;78 this.canvas = canvas;79 this.limited = (viewMode === 1 || viewMode === 2);80 this.limitCanvas(true, true);81 this.initialImage = $.extend({}, image);82 this.initialCanvas = $.extend({}, canvas);83 },84 limitCanvas(isSizeLimited, isPositionLimited) {85 const {86 options,87 container,88 canvas,89 cropBox,90 } = this;91 const { viewMode } = options;92 const { aspectRatio } = canvas;93 const cropped = this.cropped && cropBox;94 if (isSizeLimited) {95 let minCanvasWidth = Number(options.minCanvasWidth) || 0;96 let minCanvasHeight = Number(options.minCanvasHeight) || 0;97 if (viewMode > 0) {98 if (viewMode > 1) {99 minCanvasWidth = Math.max(minCanvasWidth, container.width);100 minCanvasHeight = Math.max(minCanvasHeight, container.height);101 if (viewMode === 3) {102 if (minCanvasHeight * aspectRatio > minCanvasWidth) {103 minCanvasWidth = minCanvasHeight * aspectRatio;104 } else {105 minCanvasHeight = minCanvasWidth / aspectRatio;106 }107 }108 } else if (minCanvasWidth) {109 minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBox.width : 0);110 } else if (minCanvasHeight) {111 minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBox.height : 0);112 } else if (cropped) {113 minCanvasWidth = cropBox.width;114 minCanvasHeight = cropBox.height;115 if (minCanvasHeight * aspectRatio > minCanvasWidth) {116 minCanvasWidth = minCanvasHeight * aspectRatio;117 } else {118 minCanvasHeight = minCanvasWidth / aspectRatio;119 }120 }121 }122 ({ width: minCanvasWidth, height: minCanvasHeight } = getAdjustedSizes({123 aspectRatio,124 width: minCanvasWidth,125 height: minCanvasHeight,126 }));127 canvas.minWidth = minCanvasWidth;128 canvas.minHeight = minCanvasHeight;129 canvas.maxWidth = Infinity;130 canvas.maxHeight = Infinity;131 }132 if (isPositionLimited) {133 if (viewMode > 0) {134 const newCanvasLeft = container.width - canvas.width;135 const newCanvasTop = container.height - canvas.height;136 canvas.minLeft = Math.min(0, newCanvasLeft);137 canvas.minTop = Math.min(0, newCanvasTop);138 canvas.maxLeft = Math.max(0, newCanvasLeft);139 canvas.maxTop = Math.max(0, newCanvasTop);140 if (cropped && this.limited) {141 canvas.minLeft = Math.min(142 cropBox.left,143 (cropBox.left + cropBox.width) - canvas.width,144 );145 canvas.minTop = Math.min(146 cropBox.top,147 (cropBox.top + cropBox.height) - canvas.height,148 );149 canvas.maxLeft = cropBox.left;150 canvas.maxTop = cropBox.top;151 if (viewMode === 2) {152 if (canvas.width >= container.width) {153 canvas.minLeft = Math.min(0, newCanvasLeft);154 canvas.maxLeft = Math.max(0, newCanvasLeft);155 }156 if (canvas.height >= container.height) {157 canvas.minTop = Math.min(0, newCanvasTop);158 canvas.maxTop = Math.max(0, newCanvasTop);159 }160 }161 }162 } else {163 canvas.minLeft = -canvas.width;164 canvas.minTop = -canvas.height;165 canvas.maxLeft = container.width;166 canvas.maxTop = container.height;167 }168 }169 },170 renderCanvas(changed, transformed) {171 const { canvas, image } = this;172 if (transformed) {173 const { width: naturalWidth, height: naturalHeight } = getRotatedSizes({174 width: image.naturalWidth * Math.abs(image.scaleX || 1),175 height: image.naturalHeight * Math.abs(image.scaleY || 1),176 degree: image.rotate || 0,177 });178 const width = canvas.width * (naturalWidth / canvas.naturalWidth);179 const height = canvas.height * (naturalHeight / canvas.naturalHeight);180 canvas.left -= (width - canvas.width) / 2;181 canvas.top -= (height - canvas.height) / 2;182 canvas.width = width;183 canvas.height = height;184 canvas.aspectRatio = naturalWidth / naturalHeight;185 canvas.naturalWidth = naturalWidth;186 canvas.naturalHeight = naturalHeight;187 this.limitCanvas(true, false);188 }189 if (canvas.width > canvas.maxWidth || canvas.width < canvas.minWidth) {190 canvas.left = canvas.oldLeft;191 }192 if (canvas.height > canvas.maxHeight || canvas.height < canvas.minHeight) {193 canvas.top = canvas.oldTop;194 }195 canvas.width = Math.min(Math.max(canvas.width, canvas.minWidth), canvas.maxWidth);196 canvas.height = Math.min(Math.max(canvas.height, canvas.minHeight), canvas.maxHeight);197 this.limitCanvas(false, true);198 canvas.left = Math.min(Math.max(canvas.left, canvas.minLeft), canvas.maxLeft);199 canvas.top = Math.min(Math.max(canvas.top, canvas.minTop), canvas.maxTop);200 canvas.oldLeft = canvas.left;201 canvas.oldTop = canvas.top;202 this.$canvas.css({203 width: canvas.width,204 height: canvas.height,205 transform: getTransformValues({206 translateX: canvas.left,207 translateY: canvas.top,208 }),209 });210 this.renderImage(changed);211 if (this.cropped && this.limited) {212 this.limitCropBox(true, true);213 }214 },215 renderImage(changed) {216 const { canvas, image } = this;217 const width = image.naturalWidth * (canvas.width / canvas.naturalWidth);218 const height = image.naturalHeight * (canvas.height / canvas.naturalHeight);219 $.extend(image, {220 width,221 height,222 left: (canvas.width - width) / 2,223 top: (canvas.height - height) / 2,224 });225 this.$clone.css({226 width: image.width,227 height: image.height,228 transform: getTransformValues($.extend({229 translateX: image.left,230 translateY: image.top,231 }, image)),232 });233 if (changed) {234 this.output();235 }236 },237 initCropBox() {238 const { options, canvas } = this;239 const { aspectRatio } = options;240 const autoCropArea = Number(options.autoCropArea) || 0.8;241 const cropBox = {242 width: canvas.width,243 height: canvas.height,244 };245 if (aspectRatio) {246 if (canvas.height * aspectRatio > canvas.width) {247 cropBox.height = cropBox.width / aspectRatio;248 } else {249 cropBox.width = cropBox.height * aspectRatio;250 }251 }252 this.cropBox = cropBox;253 this.limitCropBox(true, true);254 // Initialize auto crop area255 cropBox.width = Math.min(Math.max(cropBox.width, cropBox.minWidth), cropBox.maxWidth);256 cropBox.height = Math.min(Math.max(cropBox.height, cropBox.minHeight), cropBox.maxHeight);257 // The width of auto crop area must large than "minWidth", and the height too. (#164)258 cropBox.width = Math.max(cropBox.minWidth, cropBox.width * autoCropArea);259 cropBox.height = Math.max(cropBox.minHeight, cropBox.height * autoCropArea);260 cropBox.left = canvas.left + ((canvas.width - cropBox.width) / 2);261 cropBox.top = canvas.top + ((canvas.height - cropBox.height) / 2);262 cropBox.oldLeft = cropBox.left;263 cropBox.oldTop = cropBox.top;264 this.initialCropBox = $.extend({}, cropBox);265 },266 limitCropBox(isSizeLimited, isPositionLimited) {267 const {268 options,269 container,270 canvas,271 cropBox,272 limited,273 } = this;274 const { aspectRatio } = options;275 if (isSizeLimited) {276 let minCropBoxWidth = Number(options.minCropBoxWidth) || 0;277 let minCropBoxHeight = Number(options.minCropBoxHeight) || 0;278 let maxCropBoxWidth = Math.min(container.width, limited ? canvas.width : container.width);279 let maxCropBoxHeight = Math.min(container.height, limited ? canvas.height : container.height);280 // The min/maxCropBoxWidth/Height must be less than container's width/Height281 minCropBoxWidth = Math.min(minCropBoxWidth, container.width);282 minCropBoxHeight = Math.min(minCropBoxHeight, container.height);283 if (aspectRatio) {284 if (minCropBoxWidth && minCropBoxHeight) {285 if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {286 minCropBoxHeight = minCropBoxWidth / aspectRatio;287 } else {288 minCropBoxWidth = minCropBoxHeight * aspectRatio;289 }290 } else if (minCropBoxWidth) {291 minCropBoxHeight = minCropBoxWidth / aspectRatio;292 } else if (minCropBoxHeight) {293 minCropBoxWidth = minCropBoxHeight * aspectRatio;294 }295 if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {296 maxCropBoxHeight = maxCropBoxWidth / aspectRatio;297 } else {298 maxCropBoxWidth = maxCropBoxHeight * aspectRatio;299 }300 }301 // The minWidth/Height must be less than maxWidth/Height302 cropBox.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);303 cropBox.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);304 cropBox.maxWidth = maxCropBoxWidth;305 cropBox.maxHeight = maxCropBoxHeight;306 }307 if (isPositionLimited) {308 if (limited) {309 cropBox.minLeft = Math.max(0, canvas.left);310 cropBox.minTop = Math.max(0, canvas.top);311 cropBox.maxLeft = Math.min(container.width, canvas.left + canvas.width) - cropBox.width;312 cropBox.maxTop = Math.min(container.height, canvas.top + canvas.height) - cropBox.height;313 } else {314 cropBox.minLeft = 0;315 cropBox.minTop = 0;316 cropBox.maxLeft = container.width - cropBox.width;317 cropBox.maxTop = container.height - cropBox.height;318 }319 }320 },321 renderCropBox() {322 const { options, container, cropBox } = this;323 if (cropBox.width > cropBox.maxWidth || cropBox.width < cropBox.minWidth) {324 cropBox.left = cropBox.oldLeft;325 }326 if (cropBox.height > cropBox.maxHeight || cropBox.height < cropBox.minHeight) {327 cropBox.top = cropBox.oldTop;328 }329 cropBox.width = Math.min(Math.max(cropBox.width, cropBox.minWidth), cropBox.maxWidth);330 cropBox.height = Math.min(Math.max(cropBox.height, cropBox.minHeight), cropBox.maxHeight);331 this.limitCropBox(false, true);332 cropBox.left = Math.min(333 Math.max(cropBox.left, cropBox.minLeft),334 cropBox.maxLeft,335 );336 cropBox.top = Math.min(337 Math.max(cropBox.top, cropBox.minTop),338 cropBox.maxTop,339 );340 cropBox.oldLeft = cropBox.left;341 cropBox.oldTop = cropBox.top;342 if (options.movable && options.cropBoxMovable) {343 // Turn to move the canvas when the crop box is equal to the container344 this.$face.data(DATA_ACTION, (cropBox.width >= container.width &&345 cropBox.height >= container.height) ? ACTION_MOVE : ACTION_ALL);346 }347 this.$cropBox.css({348 width: cropBox.width,349 height: cropBox.height,350 transform: getTransformValues({351 translateX: cropBox.left,352 translateY: cropBox.top,353 }),354 });355 if (this.cropped && this.limited) {356 this.limitCanvas(true, true);357 }358 if (!this.disabled) {359 this.output();360 }361 },362 output() {363 this.preview();364 if (this.completed) {365 this.trigger(EVENT_CROP, this.getData());366 }367 },...
Using AI Code Generation
1const { Canvas, Image } = require('canvas');2const { createCanvas } = require('canvas');3const canvas = createCanvas(200, 200);4const ctx = canvas.getContext('2d');5ctx.font = '30px Impact';6ctx.rotate(0.1);7ctx.fillText('Awesome!', 50, 100);8var text = ctx.measureText('Awesome!');9ctx.strokeStyle = 'rgba(0,0,0,0.5)';10ctx.beginPath();11ctx.lineTo(50, 102);12ctx.lineTo(50 + text.width, 102);13ctx.stroke();14console.log('<img src="' + canvas.toDataURL() + '" />');15const { Canvas, Image } = require('canvas');16const { createCanvas } = require('canvas');17const canvas = createCanvas(200, 200);18const ctx = canvas.getContext('2d');19ctx.font = '30px Impact';20ctx.rotate(0.1);21ctx.fillText('Awesome!', 50, 100);22var text = ctx.measureText('Awesome!');23ctx.strokeStyle = 'rgba(0,0,0,0.5)';24ctx.beginPath();25ctx.lineTo(50, 102);26ctx.lineTo(50 + text.width, 102);27ctx.stroke();28console.log('<img src="' + canvas.toDataURL() + '" />');29const path = require('path');30module.exports = {31 storybookPath: path.resolve(__dirname, '../node_modules/.bin/start-storybook'),32 storybookConfigDir: path.resolve(__dirname, '../.storybook'),33 test: path.resolve(__dirname, './test.test.js'),34 outputDir: path.resolve(__dirname, '../output'),35 puppeteer: {36 }37};
Using AI Code Generation
1import { canvas } from 'storybook-addon-canvas';2import { storiesOf } from '@storybook/html';3import { withKnobs, text, boolean, number, select } from '@storybook/addon-knobs';4storiesOf('Canvas', module)5 .addDecorator(canvas)6 .addDecorator(withKnobs)7 .add('Canvas', () => {8 const textValue = text('text', 'Hello Storybook');9 const booleanValue = boolean('boolean', true);10 const numberValue = number('number', 42);11 const selectValue = select('select', ['A', 'B', 'C'], 'A');12 <p>${textValue}</p>13 <p>${booleanValue}</p>14 <p>${numberValue}</p>15 <p>${selectValue}</p>16 `;17 });18import { configure } from '@storybook/html';19configure(require.context('../src', true, /\.stories\.js$/), module);20import { configure } from '@storybook/html';21configure(require.context('../src', true, /\.stories\.js$/), module);22import { configure } from '@storybook/html';23configure(require.context('../src', true, /\.stories\.js$/), module);24import { configure } from '@storybook/html';25configure(require.context('../src', true, /\.stories\.js$/), module);26import { configure } from '@storybook/html';27configure(require.context('../src', true, /\.stories\.js$/), module);28import { configure } from '@storybook/html';
Using AI Code Generation
1const { createCanvas } = require('canvas');2const { createRunner } = require('storybook-test-runner');3const runner = createRunner({4 canvas: createCanvas(800, 600)5});6runner.run();7storiesOf('test', module)8 .add('test', () => ({9 }));10"scripts": {11}12module.exports = {13 module: {14 {15 options: {16 presets: [require.resolve('@babel/preset-env')]17 }18 }19 }20};21{22 {23 "targets": {24 }25 }26}
Using AI Code Generation
1import { Canvas } from 'storybook-test-runner';2import { storiesOf } from '@storybook/react';3storiesOf('Canvas').add('with text', () => {4 const canvas = new Canvas();5 canvas.rect(0, 0, 100, 100);6 return canvas;7});8import { render } from 'storybook-test-runner';9import { storiesOf } from '@storybook/react';10describe('Canvas', () => {11 it('renders with text', () => {12 const canvas = render(storiesOf('Canvas').add('with text'));13 expect(canvas).toMatchSnapshot();14 });15});16const canvas = new Canvas();17 .rect(0, 0, 100, 100)18 .then(() => {19 });20const canvas = new Canvas();21 .rect(0, 0, 100, 100)22 .then(() => {23 return canvas.toDataURL();24 })25 .then(dataUrl => {26 });27const canvas = new Canvas();28 .rect(0, 0, 100, 100)29 .then(() => {30 return canvas.toDataURL();31 })32 .then(dataUrl => {33 return canvas.toDataURL();34 })35 .then(dataUrl => {36 });37const canvas = new Canvas();38 .rect(0, 0, 100, 100)39 .then(() => {40 return canvas.toDataURL();41 })42 .then(dataUrl => {43 return canvas.toDataURL();44 })45 .then(dataUrl => {46 });47const canvas = new Canvas();48 .rect(0, 0, 100, 100)49 .then(() => {
Using AI Code Generation
1const {CanvasTestContainer} = require('storybooks-core');2const test = require('storybooks-test-runner').test;3test('simple', (t) => {4 const container = new CanvasTestContainer(document.body);5 const canvas = container.createCanvas(100, 100);6 const ctx = canvas.getContext('2d');7 ctx.fillStyle = 'red';8 ctx.fillRect(0, 0, 100, 100);9 setTimeout(() => {10 const image = container.getImageData(0, 0, 100, 100);11 t.imageEquals(image, './test/reference.png', 'should be red');12 t.end();13 }, 1000);14});15{16 "scripts": {17 },18 "devDependencies": {19 }20}21const {CanvasTestContainer} = require('storybooks-core');22const test = require('storybooks-test-runner').test;23module.exports = {24};25const storybooks = require('storybooks');26const test = require('storybooks-test-runner').test;27const CanvasTestContainer = require('storybooks-core').CanvasTestContainer;28storybooks({29});
Using AI Code Generation
1import { Canvas } from 'storyboard';2Canvas.addPage({3 canvas: {4 style: {5 },6 },7});8import { Storyboard } from 'storyboard';9const canvas = Storyboard.getCanvas('MyPage');10const ctx = canvas.getContext('2d');11ctx.fillStyle = 'red';12ctx.fillRect(10, 10, 100, 100);13ctx.fillStyle = 'blue';14ctx.fillRect(50, 50, 100, 100);15ctx.fillStyle = 'green';16ctx.fillRect(90, 90, 100, 100);17import { Canvas } from 'storyboard';18Canvas.addPage({19 canvas: {20 style: {21 },22 },23});24import { Storyboard } from 'storyboard';25const canvas = Storyboard.getCanvas('MyPage');26const ctx = canvas.getContext('2d');27ctx.fillStyle = 'red';28ctx.fillRect(10, 10, 100, 100);29ctx.fillStyle = 'blue';30ctx.fillRect(50, 50, 100, 100);31ctx.fillStyle = 'green';32ctx.fillRect(90, 90, 100, 100);33import { Canvas } from 'storyboard';34Canvas.addPage({35 canvas: {36 style: {37 },38 },39});40import { Storyboard } from 'storyboard';
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-test-runner automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
