☰

WME Util Singleton

Utility singleton for Waze map editor scripts

目前為 2016-01-01 提交的版本，檢視 最新版本。

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/15731/98371/WME%20Util%20Singleton.js 

  1. // ==UserScript==
  2. // @name         WME Util Singleton
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.201
  5. // @description  Utility singleton for Waze map editor scripts
  6. // @author       slemmon
  7. // @match        https://www.waze.com/editor/*
  8. // @match        https://editor-beta.waze.com/editor/*
  9. // @grant        none
  10. // ==/UserScript==
  11. /* jshint -W097 */
  12. 'use strict';
  13.  
  14. /**
  15.  *  =============================================
  16.  *  USER INFORMATION
  17.  *  =============================================
  18.  *
  19.  * This is a util class to be @required by other scripts.  Consider the API a bit fluid at
  20.  * this stage as this class is new and not very fleshed out.  Documentation for each class
  21.  * method / property will appear just before the method / property.
  22.  * 
  23.  * The Ext JS framework is loaded and once loaded the W.ux.Util singleton is
  24.  * created.  Next we fire a jQuery event of "extready" into the document body
  25.  * so that any scripts waiting on Ext JS and the W.ux.Util singleton know they 
  26.  * may proceed.
  27.  * 
  28.  * Scripts using W.ux.Util should add the following to listen for the 'extready'
  29.  * event:
  30.  *     $(document.body).on('extready', function () {
  31.  *         // script logic - may still need to check for dom ready and / or
  32.  *         // the OpenLayers map's existence here before proceeding
  33.  *     });
  34.  */
  35. $.getScript('https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all-debug.js', function () {
  36.     
  37.     Ext.define('W.ux.Util', {
  38.         /**
  39.          * Adds CSS style rule(s) to the page
  40.          * @param {String/String[]/String...} rule An array of CSS style rule strings or
  41.          * any number of CSS style rule params
  42.          */
  43.         injectStyleRules(rule) {
  44.             var styleTag = this.styleTag,
  45.                 args = Array.prototype.slice.call(arguments),
  46.                 div;
  47.             
  48.             // allows you to pass in an array, string, or n number of string params
  49.             rule = args.length === 1 ? args.shift() : args;
  50.             
  51.             // if the style tag is found cached then create at the end of the <body>
  52.             // and cache a reference to it
  53.             if (!styleTag) {
  54.                 div = $("<div />", {
  55.                     html: '&shy;<style></style>'
  56.                 }).appendTo("body");
  57.                 
  58.                 // cache a ref to the style tag
  59.                 styleTag = this.styleTag = div.find('style');
  60.             }
  61.             
  62.             // append to the style tag the style rule / rules passed
  63.             styleTag.append(Ext.Array.from(rule).join(''));
  64.         },
  65.         
  66.         /**
  67.          * Returns the Waze editor map or false if the map is not found
  68.          * @return {Object/Boolean} The map instance used by Waze or false if not found
  69.          */
  70.         getMap: function () {
  71.             return (W && W.map) ? W.map : false;
  72.         },
  73.         
  74.         /**
  75.          * Simple util to return an array of [a, b] type endpoint sub-arrays given a complete
  76.          * array of points (vertices) from a ring polygon geometry.  For example, if you passed:
  77.          * [x, y, z] in what would be returned is [[x, y], [y, z], [z, x]].
  78.          * @param {Array} points Array of all points in the ring polygon geometry
  79.          * @return {Array} An array of endpoint arrays from the passed points
  80.          */
  81.         getEndpoints: function (points) {
  82.             var endpoints = [],
  83.                 len = points.length,
  84.                 pointB;
  85.             
  86.             points.forEach(function (point, i) {
  87.                 var pointB = (points[i + 1]) ? points[i + 1] : points[0];
  88.                 endpoints.push([points[i], pointB]);
  89.             });
  90.             
  91.             return endpoints;
  92.         },
  93.         
  94.         // http://jsfiddle.net/justin_c_rounds/Gd2S2/
  95.         /**
  96.          * Finds the points where two lines intersect.  That could be intersections where
  97.          * the lines would literally overlap or could be where the extension of a line would
  98.          * logically overlap.
  99.          * @param {Number} line1StartX The starting x coordinate of line 1
  100.          * @param {Number} line1StartY The starting y coordinate of line 1
  101.          * @param {Number} line1EndX The ending x coordinate of line 1
  102.          * @param {Number} line1EndY The ending y coordinate of line 1
  103.          * @param {Number} line2StartX The starting x coordinate of line 2
  104.          * @param {Number} line2StartY The starting y coordinate of line 2
  105.          * @param {Number} line2EndX The ending x coordinate of line 2
  106.          * @param {Number} line2EndY The ending y coordinate of line 2
  107.          * @return {Object} Returns an object with the following key / value info
  108.          * 
  109.          *     - x {Number} the x coordinate of the intersection or null if there is no intersection
  110.          *     - y {Number} the y coordinate of the intersection or null if there is no intersection
  111.          *     - onLine1 {Boolean} true if the intersection falls on line 1 otherwise false
  112.          *     - onLine2 {Boolean} true if the intersection falls on line 2 otherwise false
  113.          */
  114.         findIntersectionPoint: function (line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
  115.             // if the lines intersect, the result contains the x and y of the intersection
  116.             // (treating the lines as infinite) and booleans for whether line segment 1 
  117.             // or line segment 2 contain the point
  118.             var denominator, a, b, numerator1, numerator2, result = {
  119.                 x: null,
  120.                 y: null,
  121.                 onLine1: false,
  122.                 onLine2: false
  123.             };
  124.             
  125.             // we'll assume two arrays of two points were passed so we'll split them out
  126.             if (Ext.isArray(line1StartX)) {
  127.                 line2EndY = line1StartY[1].y;
  128.                 line2EndX = line1StartY[1].x;
  129.                 line2StartY = line1StartY[0].y;
  130.                 line2StartX = line1StartY[0].x;
  131.                 
  132.                 line1EndY = line1StartX[1].y;
  133.                 line1EndX = line1StartX[1].x;
  134.                 line1StartY = line1StartX[0].y;
  135.                 line1StartX = line1StartX[0].x;
  136.             }
  137.  
  138.             denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
  139.             if (denominator == 0) {
  140.                 return result;
  141.             }
  142.             a = line1StartY - line2StartY;
  143.             b = line1StartX - line2StartX;
  144.             numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
  145.             numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
  146.             a = numerator1 / denominator;
  147.             b = numerator2 / denominator;
  148.  
  149.             // if we cast these lines infinitely in both directions, they intersect here:
  150.             result.x = line1StartX + (a * (line1EndX - line1StartX));
  151.             result.y = line1StartY + (a * (line1EndY - line1StartY));
  152.             /*
  153.             // it is worth noting that this should be the same as:
  154.             x = line2StartX + (b * (line2EndX - line2StartX));
  155.             y = line2StartX + (b * (line2EndY - line2StartY));
  156.             */
  157.             // if line1 is a segment and line2 is infinite, they intersect if:
  158.             if (a > 0 && a < 1) {
  159.                 result.onLine1 = true;
  160.             }
  161.             // if line2 is a segment and line1 is infinite, they intersect if:
  162.             if (b > 0 && b < 1) {
  163.                 result.onLine2 = true;
  164.             }
  165.             // if line1 and line2 are segments, they intersect if both of the above are true
  166.             return result;
  167.         },
  168.         
  169.         /**
  170.          * Returns the first two intersecting features from a layer
  171.          * @param {Object} layer The layer from which to find intersecting features
  172.          * @return {Array} An array containing the first two intersecting features
  173.          * found or an empty array if no intersection features were found
  174.          */
  175.         getIntersection: function (layer) {
  176.             if (!layer) {
  177.                 return false;
  178.             }
  179.             
  180.             var features = layer.features,
  181.                 len = features.length,
  182.                 intersected = [],
  183.                 i = 0,
  184.                 j, feature, featureGeo, candidate, candidateGeo, intersects;
  185.             
  186.             for (; i < len; i++) {
  187.                 feature = features[i];
  188.                 featureGeo = feature.geometry;
  189.                 j = 0;
  190.                 for (; j < len; j++) {
  191.                     candidate = features[j];
  192.                     candidateGeo = candidate.geometry;
  193.                     intersects = featureGeo.intersects(candidateGeo);
  194.                     
  195.                     if (intersects && (featureGeo !== candidateGeo)) {
  196.                         intersected = [feature, candidate];
  197.                         break;
  198.                     }
  199.                 }
  200.                 if (intersected.length) {
  201.                     break;
  202.                 }
  203.             }
  204.             
  205.             return intersected;
  206.         },
  207.         
  208.         /**
  209.          * Get a new polygon feature from an array of points
  210.          * @param {Array} points The array of OpenLayers.Geometry.Points used to make the polygon feature
  211.          * @param {Object} [attribs] Optional object to be mapped to the attributes property of the feature
  212.          * @param {Object} [style] Optional style object
  213.          * @return {Object} The polygon feature generaeted from the provided points
  214.          */
  215.         getPolyFromPoints: function (points, attribs, style) {
  216.             var ring = new OpenLayers.Geometry.LinearRing(points),
  217.                 polygon = new OpenLayers.Geometry.Polygon([ring]), 
  218.                 feature = new OpenLayers.Feature.Vector(polygon, attribs, style);
  219.  
  220.             return feature;
  221.         },
  222.         
  223.         /**
  224.          * @private
  225.          * Internal method used by the getMergedPolygon method
  226.          */
  227.         applyIntersectionPoints: function (pointsArrA, pointsArrB, altPoly, segmentsArrA, segmentsArrB, copyPoints) {
  228.             var me = this,
  229.                 intersect, junction;
  230.             
  231.             pointsArrA.forEach(function (first, i) {
  232.                 first.isInternal = altPoly.containsPoint(first);
  233.                 delete first.isJunction;
  234.                 var junctions = [];
  235.                 pointsArrB.forEach(function (second, j) {
  236.                     intersect = me.findIntersectionPoint(segmentsArrA[i], segmentsArrB[j]);
  237.                     if (intersect.onLine1 && intersect.onLine2) {
  238.                         junction = new OpenLayers.Geometry.Point(intersect.x, intersect.y);
  239.                         junction.isJunction = true;
  240.                         junctions.unshift(junction);
  241.                     }
  242.                 });
  243.                 junctions.sort(function (a, b) {
  244.                     var aDist = first.distanceTo(a),
  245.                         bDist = first.distanceTo(b);
  246.  
  247.                     return aDist > bDist ? -1 : ((bDist > aDist) ? 1 : 0);
  248.                 });
  249.                 junctions.forEach(function (item) {
  250.                     copyPoints.splice(copyPoints.indexOf(pointsArrA[i]) + 1, 0, item);
  251.                 });
  252.             });
  253.         },
  254.         
  255.         /**
  256.          * Return a single polygon feature from the outline of two intersecting
  257.          * polygons
  258.          * @param {Object/Object[]} polyA The first polygon or feataure owning the polygon
  259.          * to be merged.  May also be an array of both constituent polygons in which case
  260.          * the second param if passed will be ignored
  261.          * @param {Object} polyB The second polygon or feature owning the polygon to
  262.          * be merged
  263.          * return {Object} The merged polygon vector feature
  264.          */
  265.         getMergedPolygon: function (polyA, polyB) {
  266.             if (this.isArray(polyA)) {
  267.                 polyB = polyA[1];
  268.                 polyA = polyA[0];
  269.             }
  270.             
  271.             // set polyA and B to be the polygon geometries if the parent vector feature was passed in
  272.             polyA = polyA.CLASS_NAME === "OpenLayers.Feature.Vector" ? polyA.geometry : polyA;
  273.             polyB = polyB.CLASS_NAME === "OpenLayers.Feature.Vector" ? polyB.geometry : polyB;
  274.             
  275.             var me = this,
  276.                 pointsA = polyA.getVertices(),
  277.                 pointsB = polyB.getVertices(),
  278.                 copyPointsA = pointsA.slice(),
  279.                 copyPointsB = pointsB.slice(),
  280.                 segmentsA = me.getEndpoints(pointsA),
  281.                 segmentsB = me.getEndpoints(pointsB),
  282.                 initialX = Infinity,
  283.                 initial, activePoints, hostPoly, activePoint, union, altPoints,
  284.                 activeIndex, next, nextAltIndex, i, altNext, altA, altB,
  285.                 centroidA, candidateAIntersects, centroidB, candidateBIntersects,
  286.                 mids, mid;
  287.             
  288.             // Set OpenLayers.geometry.Points in the points / vertices array where the two
  289.             // polygons intersect
  290.             me.applyIntersectionPoints(pointsA, pointsB, polyB, segmentsA, segmentsB, copyPointsA);
  291.             me.applyIntersectionPoints(pointsB, pointsA, polyA, segmentsB, segmentsA, copyPointsB);
  292.  
  293.             // function to find the starting point for when we walk through the polygon to get
  294.             // its outline.  The initial point will be the one that's furthest left
  295.             (function () {
  296.                 var evalPoints = function (points) {
  297.                     points.forEach(function (point) {
  298.                         if (point.x < initialX) {
  299.                             initialX = point.x;
  300.                             initial = point;
  301.                             activePoints = points;
  302.                             hostPoly = (activePoints === copyPointsA) ? polyA : polyB;
  303.                         }
  304.                     });
  305.                 };
  306.  
  307.                 evalPoints(copyPointsA);
  308.                 evalPoints(copyPointsB);
  309.             })();
  310.  
  311.             // the union array will hold the points of the new polygon perimeter
  312.             union = [initial];
  313.             altPoints = (activePoints === copyPointsA) ? copyPointsB : copyPointsA;
  314.             while (activePoint !== initial) {
  315.                 activePoint = activePoint || initial;
  316.  
  317.                 // find the current pointer and the next point from it
  318.                 activeIndex = activePoints.indexOf(activePoint);
  319.                 next = activePoints[activeIndex + 1] || activePoints[0];
  320.                 
  321.                 // if the next point is not a junction add it to the union array
  322.                 if (!next.isJunction) {
  323.                     if (next !== initial) {
  324.                         union.push(next);
  325.                     }
  326.                     activePoint = next;
  327.                 } else { // the point is a junction / intersect point
  328.                     union.push(next); // add it to the union array
  329.                     nextAltIndex;
  330.                     // find the next perimeter junction
  331.                     for (i = 0; i < altPoints.length; i++) {
  332.                         if (altPoints[i].x === next.x && altPoints[i].y === next.y) {
  333.                             nextAltIndex = i;
  334.                             break;
  335.                         }
  336.                     }
  337.  
  338.                     // using the next junction find the point ahead and behind it
  339.                     altNext = altPoints[nextAltIndex];
  340.                     altA = altPoints[nextAltIndex - 1] || altPoints[altPoints.length - 1];
  341.                     altB = altPoints[nextAltIndex + 1] || altPoints[0];
  342.  
  343.                     // see if the point behind it crosses the initial polygon
  344.                     centroidA = new OpenLayers.Geometry.Point((altNext.x + altA.x)/2, (altNext.y + altA.y)/2);
  345.                     candidateAIntersects = hostPoly.containsPoint(centroidA);
  346.                     centroidA.destroy();
  347.  
  348.                     // see if the point ahead of it crosses the initial polygon
  349.                     centroidB = new OpenLayers.Geometry.Point((altNext.x + altB.x)/2, (altNext.y + altB.y)/2);
  350.                     candidateBIntersects = hostPoly.containsPoint(centroidB);
  351.                     centroidB.destroy();
  352.  
  353.                     // the mids array will be the points from the companion polygon
  354.                     // between the two intersections currently being inspected
  355.                     mids = [];
  356.                     mid = {};
  357.                     //if one of the lines does not intersect (its posible for there
  358.                     // to be no points between the junctions)
  359.                     if (!candidateAIntersects || !candidateBIntersects) {
  360.                         i = nextAltIndex;
  361.                         // find all the points between the junctions and add them to the
  362.                         // mids array to be then added to the union array
  363.                         while (!mid.isJunction) {
  364.                             if (!candidateAIntersects) {
  365.                                 i = (i - 1 > -1) ? i - 1 : altPoints.length - 1;
  366.                             } else {
  367.                                 i = (i + 1 < altPoints.length) ? i + 1 : 0;
  368.                             }
  369.                             mid = altPoints[i];
  370.                             if (mid && !mid.isJunction) {
  371.                                 mids.push(mid);
  372.                             }
  373.                         }
  374.                     }
  375.  
  376.                     // add the points between the junctions from the companion polygon
  377.                     union = union.concat(mids);
  378.  
  379.                     // if we're at the junction add the junction point corresponding within
  380.                     // the initial polygon
  381.                     if (mid.isJunction) {
  382.                         for (i = 0; i < activePoints.length; i++) {
  383.                             if (activePoints[i].x === mid.x && activePoints[i].y === mid.y) {
  384.                                 activePoint = activePoints[i];
  385.                                 union.push(activePoint);
  386.                                 break;
  387.                             }
  388.                         }
  389.                     }
  390.                 }
  391.                 // continue the loop until all points from the initial and companion polygon
  392.                 // have been included to create a merged perimeter
  393.             }
  394.  
  395.             return this.getPolyFromPoints(union);
  396.         }
  397.     });
  398.     
  399.     // this announces to any listening scripts that Ext and the W.ux.Util
  400.     // singleton are now ready for use
  401.     $(document.body).trigger('extready');
  402. });