From f69e50263932b91ffd291c387cbeb503a12ac973 Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sun, 8 Apr 2018 13:22:41 +0200
Subject: [PATCH] Remove jquery from FrameRenderer.js

---
 src/js/controller/DrawingController.js  |  9 +++++----
 src/js/rendering/frame/FrameRenderer.js | 14 +++++++-------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js
index 16ba5e0..dbccc76 100644
--- a/src/js/controller/DrawingController.js
+++ b/src/js/controller/DrawingController.js
@@ -29,10 +29,11 @@
       'yOffset' : 0
     };
 
-    this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, cfg, ['canvas-overlay']);
-    this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, cfg, ['drawing-canvas']);
-    this.onionSkinRenderer = pskl.rendering.OnionSkinRenderer.createInContainer(this.container, cfg, piskelController);
-    this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, cfg, piskelController);
+    var containerEl = this.container.get(0);
+    this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(containerEl, cfg, ['canvas-overlay']);
+    this.renderer = new pskl.rendering.frame.CachedFrameRenderer(containerEl, cfg, ['drawing-canvas']);
+    this.onionSkinRenderer = pskl.rendering.OnionSkinRenderer.createInContainer(containerEl, cfg, piskelController);
+    this.layersRenderer = new pskl.rendering.layer.LayersRenderer(containerEl, cfg, piskelController);
 
     this.compositeRenderer = new pskl.rendering.CompositeRenderer();
     this.compositeRenderer
diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js
index eeac2b2..d612066 100644
--- a/src/js/rendering/frame/FrameRenderer.js
+++ b/src/js/rendering/frame/FrameRenderer.js
@@ -199,7 +199,7 @@
 
     this.displayCanvas = pskl.utils.CanvasUtils.createCanvas(width, height, this.classList);
     pskl.utils.CanvasUtils.disableImageSmoothing(this.displayCanvas);
-    this.container.append(this.displayCanvas);
+    this.container.appendChild(this.displayCanvas);
   };
 
   ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
@@ -230,9 +230,9 @@
    * @public
    */
   ns.FrameRenderer.prototype.getCoordinates = function(x, y) {
-    var containerOffset = this.container.offset();
-    x = x - containerOffset.left;
-    y = y - containerOffset.top;
+    var containerRect = this.container.getBoundingClientRect();
+    x = x - containerRect.left;
+    y = y - containerRect.top;
 
     // apply margins
     x = x - this.margin.x;
@@ -261,9 +261,9 @@
     x = x + this.margin.x;
     y = y + this.margin.y;
 
-    var containerOffset = this.container.offset();
-    x = x + containerOffset.left;
-    y = y + containerOffset.top;
+    var containerRect = this.container.getBoundingClientRect();
+    x = x + containerRect.left;
+    y = y + containerRect.top;
 
     return {
       x : x + (cellSize / 2),