You need to sign in to do that
Don't have an account?
Arshadulla.Shariff
Some findings the issue is on touch events
Any help to resolve the above issue
Reflect.defineProperty called on non-object
Hi ,
After spring 19 to test sandbox we are experincing the following issue in digital signature component.
Only for ipad and tablets device
Uncaught TypeError: Reflect.defineProperty called on non-object
/*Component*/
<aura:component implements="force:appHostable"> <aura:handler name="render" value="{!this}" action="{!c.Init}"/> <div style="text-align: center;"> <canvas aura:id="can" style="border:2px solid #ddd;background: transparent;"></canvas> </div> <div style="text-align: center;margin: 7px;"> <button class="slds-button slds-button_brand" onclick="{!c.erase}">Clear</button> <button class="slds-button slds-button_brand" onclick="{!c.save}">Save</button> </div> </aura:component>/*Controller*/
({ Init : function(component, event, helper) { helper.doInit(component, event, helper); }, erase:function(component, event, helper){ helper.eraseHelper(component, event, helper); }, save:function(component, event, helper){ helper.saveHelper(component, event, helper); }, })/*helper*/
({ doInit : function(component, event, helper) { var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false; var x = "black", y = 2, w,h; canvas=component.find('can').getElement(); var ratio = Math.max(window.devicePixelRatio || 1, 1); w = canvas.width*ratio; h = canvas.height*ratio; ctx = canvas.getContext("2d"); console.log('ctx:='+ctx); canvas.addEventListener("mousemove", function (e) { findxy('move', e) }, false); canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false); canvas.addEventListener("mouseup", function (e) { findxy('up', e) }, false); canvas.addEventListener("mouseout", function (e) { findxy('out', e) }, false); // Set up touch events for mobile, etc canvas.addEventListener("touchstart", function (e) { var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); e.preventDefault(); }, false); canvas.addEventListener("touchend", function (e) { var mouseEvent = new MouseEvent("mouseup", {}); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchmove", function (e) { var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX, clientY: touch.clientY }); canvas.dispatchEvent(mouseEvent); e.preventDefault(); }, false); // Get the position of a touch relative to the canvas function getTouchPos(canvasDom, touchEvent) { var rect = canvasDom.getBoundingClientRect(); return { x: touchEvent.touches[0].clientX - rect.left, y: touchEvent.touches[0].clientY - rect.top }; } function findxy(res, e){ const rect = canvas.getBoundingClientRect(); if (res == 'down') { prevX = currX; prevY = currY; currX = e.clientX - rect.left ; currY = e.clientY - rect.top; flag = true; dot_flag = true; if (dot_flag) { ctx.beginPath(); ctx.fillStyle = x; ctx.fillRect(currX, currY, 2, 2); ctx.closePath(); dot_flag = false; } } if (res == 'up' || res == "out") { flag = false; } if (res == 'move') { if (flag) { prevX = currX; prevY = currY; currX = e.clientX - rect.left; currY = e.clientY - rect.top; draw(component,ctx); } } } function draw() { ctx.beginPath(); ctx.moveTo(prevX, prevY); ctx.lineTo(currX, currY); ctx.strokeStyle = x; ctx.lineWidth = y; ctx.stroke(); ctx.closePath(); } }, eraseHelper: function(component, event, helper){ var m = confirm("Want to clear"); if (m) { var canvas=component.find('can').getElement(); var ctx = canvas.getContext("2d"); var w = canvas.width; var h = canvas.height; ctx.clearRect(0, 0, w, h); } }, saveHelper:function(component, event, helper){ var pad=component.find('can').getElement(); var dataUrl = pad.toDataURL(); console.log('dataUrl:='+dataUrl); var strDataURI=dataUrl.replace(/^data:image\/(png|jpg);base64,/, ""); alert(strDataURI); } })
Some findings the issue is on touch events
Any help to resolve the above issue
The issue is resolved. No changes in code .
Might be salesforce team monitored the question raised.
Thanks
All Answers
Hi,
few more words to above question
For the above code please make sure the org your in has spring 19 release
for signup please use
https://www.salesforce.com/form/signup/prerelease-spring19/.
The issue is resolved. No changes in code .
Might be salesforce team monitored the question raised.
Thanks