Avoid bug of Firefox

theavuth9 · Jun 3, 2016 · 0f180fc · 0f180fc
1 parent cf1aea5
commit 0f180fc
Show file tree

Hide file tree

Showing 15 changed files with 891 additions and 583 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@ node_modules
 temp
 src/defs.js
 src/leader-line.css
-test/spec/functions
+test/spec/func
diff --git a/src/leader-line.js b/src/leader-line.js
@@ -109,6 +109,7 @@
     CIRCLE_CP = 0.5522847, CIRCLE_8_RAD = 1 / 4 * Math.PI,
     IS_TRIDENT = !!document.uniqueID,
     IS_BLINK = !!(window.chrome && window.chrome.webstore),
+    IS_GECKO = 'MozAppearance' in document.documentElement.style,
 
     /**
      * @typedef {Object.<_id: number, props>} insProps
@@ -522,6 +523,11 @@
       if (prop.hasSE) { values[prop.name] = []; }
       return values;
     }, {});
+
+    if (IS_GECKO) {
+      forceReflow(props.lineFace);
+      forceReflow(props.plugFace);
+    }
   }
   window.bindWindow = bindWindow; // [DEBUG/]
 
@@ -1130,7 +1136,7 @@
 
         case PATH_FLUID:
         case PATH_MAGNET:
-          (/* @EXPORT[file:../test/spec/functions/PATH_FLUID]@ */function(socketGravitySE) {
+          (/* @EXPORT[file:../test/spec/func/PATH_FLUID]@ */function(socketGravitySE) {
             var cx = [], cy = [];
             props.socketXYSE.forEach(function(socketXY, i) {
               var gravity = socketGravitySE[i], offset, anotherSocketXY, overhead, minGravity, len;
@@ -1178,7 +1184,7 @@
           break;
 
         case PATH_GRID:
-          (/* @EXPORT[file:../test/spec/functions/PATH_GRID]@ */function() {
+          (/* @EXPORT[file:../test/spec/func/PATH_GRID]@ */function() {
             /**
              * @typedef {Object} DirPoint
              * @property {number} dirId - DIR_UP, DIR_RIGHT, DIR_DOWN, DIR_LEFT

diff --git a/src/leader-line.scss b/src/leader-line.scss
@@ -9,6 +9,7 @@ $app_id: leader-line;
 ##{$app_id}-defs {
   width: 0;
   height: 0;
+  position: absolute;
 }
 
 .#{$app_id}-line-path {

diff --git a/test/func-PATH_GRID/cases.html b/test/func-PATH_GRID/cases.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <style>
+
+.view {
+  display: block;
+  width: 240px;
+  height: 240px;
+  background: #eee url("../grid.svg");
+  margin: 10px;
+  overflow: visible;
+}
+
+.ll-path {
+  fill: none;
+  stroke: blue;
+  stroke-width: 1px;
+}
+
+.m0 { fill: rgba(127, 205, 255, 0.8); }
+.m1 { fill: rgba(255, 127, 205, 0.8); }
+#mark > polygon { fill: rgba(255, 255, 255, 0.8); }
+
+  </style>
+
+  <script src="../../src/path-data-polyfill.js"></script>
+  <script src="cases.js"></script>
+</head>
+<body>
+
+  <svg version="1.1" style="width: 0; height: 0; position: absolute;">
+    <defs>
+      <g id="mark">
+        <circle r="10" cx="0" cy="0" />
+        <polygon id="arrow" points="-7,-7 10,0 -7,7 0,0" stroke-width="0"/>
+      </g>
+    </defs>
+  </svg>
+
+  <textarea id="code"></textarea>
+
+</body>
+</html>