diff --git a/package-lock.json b/package-lock.json index 785aad9b0..1fd86dbe1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16049,6 +16049,11 @@ "pify": "^4.0.1" } }, + "wordcloud": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/wordcloud/-/wordcloud-1.1.2.tgz", + "integrity": "sha512-YTaVrHbCM44xslcw5QOxTKT3v0vLhpNsgVb8vGH9NocO8aIugt0Rw+WhkzgVyo5E6vv7tJO5ISb/ujUO7mBAyw==" + }, "worker-farm": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz", diff --git a/package.json b/package.json index 601e72ced..abf5c5b02 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "sharp": "^0.25.4", "socket.io-client": "^2.3.0", "tslib": "^1.10.0", + "wordcloud": "^1.1.2", "zone.js": "~0.10.2" }, "devDependencies": { diff --git a/src/app/models/top-search.ts b/src/app/models/top-search.ts new file mode 100644 index 000000000..5ed821b80 --- /dev/null +++ b/src/app/models/top-search.ts @@ -0,0 +1,8 @@ +export class TopSearch { + + Documents: { + Text: string; + Hits: number; + }[] = []; + +} diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html index 79f9f4b75..53adb3beb 100644 --- a/src/app/pages/search/search.page.html +++ b/src/app/pages/search/search.page.html @@ -95,13 +95,8 @@

Palavras mais pesquisadas

-
- - +
+ 123
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss index 2825609a1..5b92e2f08 100644 --- a/src/app/pages/search/search.page.scss +++ b/src/app/pages/search/search.page.scss @@ -197,6 +197,11 @@ ion-slide{ text-align: center; color: black; } + + .most-searched-word-container{ + width: 441px; + height: 400px; + } } } diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts index a5ee79198..2a136769c 100644 --- a/src/app/pages/search/search.page.ts +++ b/src/app/pages/search/search.page.ts @@ -1,13 +1,15 @@ import { Component, OnInit } from '@angular/core'; import { ModalController } from '@ionic/angular'; import { ProcessesService } from 'src/app/services/processes.service'; -import { SearchService } from "../../services/search.service"; +import { SearchService, } from "../../services/search.service"; import { SearchCategory } from "src/app/models/search-category"; import { SearchDocument } from "src/app/models/search-document"; import { formatDate } from '@angular/common'; import { CloudData, CloudOptions } from 'angular-tag-cloud-module'; import { SenderPage } from 'src/app/pages/search/sender/sender.page'; import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page'; +import WordCloud from 'src/plugin/wordcloud2.js' + import { NgModel } from '@angular/forms'; @Component({ @@ -54,12 +56,40 @@ export class SearchPage implements OnInit { speed: 400, } + + list = [] + constructor(private modalController: ModalController, private search: SearchService) { this.ordinance = "recent"; } ngOnInit() { + + this.search.mostSeachWord("10").subscribe(res=>{ + + let list = [] + + res.forEach(element => { + list.push(Object.values(element)) + }); + + this.list = list + + const elem = document.documentElement.querySelector('.most-searched-word-container'); + + + WordCloud( + elem, + { + list: this.list, + Family: 'Times, serif', + gridSize: 15 + }, + ); + + }); + } close(){ diff --git a/src/app/services/search.service.ts b/src/app/services/search.service.ts index cd3e66523..f0f6de1cf 100644 --- a/src/app/services/search.service.ts +++ b/src/app/services/search.service.ts @@ -1,11 +1,12 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Event } from '../models/event.model'; -import { Observable } from 'rxjs'; +import { from, Observable } from 'rxjs'; import { environment } from 'src/environments/environment'; import { AuthService } from '../services/auth.service'; import { User } from '../models/user.model'; import { EventSearch } from "src/app/models/event-search"; +import { TopSearch } from 'src/app/models/top-search'; @Injectable({ providedIn: 'root' @@ -52,4 +53,22 @@ export class SearchService { return this.http.get(`${geturl}`, options); } + mostSeachWord(size:string): Observable{ + // Endpoint + const geturl = environment.apiURL + 'search/top'; + // store params + let params = new HttpParams(); + // set https params + + params = params.set("size", size); + + + const options = { + headers: this.headers, + params: params + }; + + return this.http.get(`${geturl}`, options); + } + } diff --git a/src/global.scss b/src/global.scss index 01e714836..47114b419 100644 --- a/src/global.scss +++ b/src/global.scss @@ -156,15 +156,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent- .timeline-mdgpr-box-Oficial{ - border-left: 5px solid #f05d5e !important; + border-left: 5px solid #ffb703 !important; } .timeline-mdgpr-box-Pessoal{ - border-left: 5px solid #ffb703 !important; + border-left: 5px solid #f05d5e !important; } - .table-bordered, .table-bordered{ border: none !important; td, th { diff --git a/src/plugin/wordcloud2.js b/src/plugin/wordcloud2.js new file mode 100644 index 000000000..97fd1dab1 --- /dev/null +++ b/src/plugin/wordcloud2.js @@ -0,0 +1,1215 @@ +/*! + * wordcloud2.js + * http://timdream.org/wordcloud2.js/ + * + * Copyright 2011 - 2019 Tim Guan-tin Chien and contributors. + * Released under the MIT license + */ + +'use strict' + +// setImmediate +if (!window.setImmediate) { + window.setImmediate = (function setupSetImmediate () { + return window.msSetImmediate || + window.webkitSetImmediate || + window.mozSetImmediate || + window.oSetImmediate || + (function setupSetZeroTimeout () { + if (!window.postMessage || !window.addEventListener) { + return null + } + + var callbacks = [undefined] + var message = 'zero-timeout-message' + + // Like setTimeout, but only takes a function argument. There's + // no time argument (always zero) and no arguments (you have to + // use a closure). + var setZeroTimeout = function setZeroTimeout (callback) { + var id = callbacks.length + callbacks.push(callback) + window.postMessage(message + id.toString(36), '*') + + return id + } + + window.addEventListener('message', function setZeroTimeoutMessage (evt) { + // Skipping checking event source, retarded IE confused this window + // object with another in the presence of iframe + if (typeof evt.data !== 'string' || + evt.data.substr(0, message.length) !== message/* || + evt.source !== window */) { + return + } + + evt.stopImmediatePropagation() + + var id = parseInt(evt.data.substr(message.length), 36) + if (!callbacks[id]) { + return + } + + callbacks[id]() + callbacks[id] = undefined + }, true) + + /* specify clearImmediate() here since we need the scope */ + window.clearImmediate = function clearZeroTimeout (id) { + if (!callbacks[id]) { + return + } + + callbacks[id] = undefined + } + + return setZeroTimeout + })() || + // fallback + function setImmediateFallback (fn) { + window.setTimeout(fn, 0) + } + })() +} + +if (!window.clearImmediate) { + window.clearImmediate = (function setupClearImmediate () { + return window.msClearImmediate || + window.webkitClearImmediate || + window.mozClearImmediate || + window.oClearImmediate || + // "clearZeroTimeout" is implement on the previous block || + // fallback + function clearImmediateFallback (timer) { + window.clearTimeout(timer) + } + })() +} + +(function (global) { + // Check if WordCloud can run on this browser + var isSupported = (function isSupported () { + var canvas = document.createElement('canvas') + if (!canvas || !canvas.getContext) { + return false + } + + var ctx = canvas.getContext('2d') + if (!ctx) { + return false + } + if (!ctx.getImageData) { + return false + } + if (!ctx.fillText) { + return false + } + + if (!Array.prototype.some) { + return false + } + if (!Array.prototype.push) { + return false + } + + return true + }()) + + // Find out if the browser impose minium font size by + // drawing small texts on a canvas and measure it's width. + var minFontSize = (function getMinFontSize () { + if (!isSupported) { + return + } + + var ctx = document.createElement('canvas').getContext('2d') + + // start from 20 + var size = 20 + + // two sizes to measure + var hanWidth, mWidth + + while (size) { + ctx.font = size.toString(10) + 'px sans-serif' + if ((ctx.measureText('\uFF37').width === hanWidth) && + (ctx.measureText('m').width) === mWidth) { + return (size + 1) + } + + hanWidth = ctx.measureText('\uFF37').width + mWidth = ctx.measureText('m').width + + size-- + } + + return 0 + })() + + // Based on http://jsfromhell.com/array/shuffle + var shuffleArray = function shuffleArray (arr) { + for (var j, x, i = arr.length; i;) { + j = Math.floor(Math.random() * i) + x = arr[--i] + arr[i] = arr[j] + arr[j] = x + } + return arr + } + + var WordCloud = function WordCloud (elements, options) { + if (!isSupported) { + return + } + + if (!Array.isArray(elements)) { + elements = [elements] + } + + elements.forEach(function (el, i) { + if (typeof el === 'string') { + elements[i] = document.getElementById(el) + if (!elements[i]) { + throw new Error('The element id specified is not found.') + } + } else if (!el.tagName && !el.appendChild) { + throw new Error('You must pass valid HTML elements, or ID of the element.') + } + }) + + /* Default values to be overwritten by options object */ + var settings = { + list: [], + fontFamily: '"Trebuchet MS", "Heiti TC", "微軟正黑體", ' + + '"Arial Unicode MS", "Droid Fallback Sans", sans-serif', + fontWeight: 'normal', + color: 'random-dark', + minSize: 0, // 0 to disable + weightFactor: 1, + clearCanvas: true, + backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1) + + gridSize: 8, + drawOutOfBound: false, + shrinkToFit: false, + origin: null, + + drawMask: false, + maskColor: 'rgba(255,0,0,0.3)', + maskGapWidth: 0.3, + + wait: 0, + abortThreshold: 0, // disabled + abort: function noop () {}, + + minRotation: -Math.PI / 2, + maxRotation: Math.PI / 2, + rotationSteps: 0, + + shuffle: true, + rotateRatio: 0.1, + + shape: 'circle', + ellipticity: 0.65, + + classes: null, + + hover: null, + click: null + } + + if (options) { + for (var key in options) { + if (key in settings) { + settings[key] = options[key] + } + } + } + + /* Convert weightFactor into a function */ + if (typeof settings.weightFactor !== 'function') { + var factor = settings.weightFactor + settings.weightFactor = function weightFactor (pt) { + return pt * factor // in px + } + } + + /* Convert shape into a function */ + if (typeof settings.shape !== 'function') { + switch (settings.shape) { + case 'circle': + /* falls through */ + default: + // 'circle' is the default and a shortcut in the code loop. + settings.shape = 'circle' + break + + case 'cardioid': + settings.shape = function shapeCardioid (theta) { + return 1 - Math.sin(theta) + } + break + + /* + To work out an X-gon, one has to calculate "m", + where 1/(cos(2*PI/X)+m*sin(2*PI/X)) = 1/(cos(0)+m*sin(0)) + http://www.wolframalpha.com/input/?i=1%2F%28cos%282*PI%2FX%29%2Bm*sin%28 + 2*PI%2FX%29%29+%3D+1%2F%28cos%280%29%2Bm*sin%280%29%29 + Copy the solution into polar equation r = 1/(cos(t') + m*sin(t')) + where t' equals to mod(t, 2PI/X) + */ + + case 'diamond': + // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+ + // %28t%2C+PI%2F2%29%29%2Bsin%28mod+%28t%2C+PI%2F2%29%29%29%2C+t+%3D + // +0+..+2*PI + settings.shape = function shapeSquare (theta) { + var thetaPrime = theta % (2 * Math.PI / 4) + return 1 / (Math.cos(thetaPrime) + Math.sin(thetaPrime)) + } + break + + case 'square': + // http://www.wolframalpha.com/input/?i=plot+r+%3D+min(1%2Fabs(cos(t + // )),1%2Fabs(sin(t)))),+t+%3D+0+..+2*PI + settings.shape = function shapeSquare (theta) { + return Math.min( + 1 / Math.abs(Math.cos(theta)), + 1 / Math.abs(Math.sin(theta)) + ) + } + break + + case 'triangle-forward': + // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+ + // %28t%2C+2*PI%2F3%29%29%2Bsqrt%283%29sin%28mod+%28t%2C+2*PI%2F3%29 + // %29%29%2C+t+%3D+0+..+2*PI + settings.shape = function shapeTriangle (theta) { + var thetaPrime = theta % (2 * Math.PI / 3) + return 1 / (Math.cos(thetaPrime) + + Math.sqrt(3) * Math.sin(thetaPrime)) + } + break + + case 'triangle': + case 'triangle-upright': + settings.shape = function shapeTriangle (theta) { + var thetaPrime = (theta + Math.PI * 3 / 2) % (2 * Math.PI / 3) + return 1 / (Math.cos(thetaPrime) + + Math.sqrt(3) * Math.sin(thetaPrime)) + } + break + + case 'pentagon': + settings.shape = function shapePentagon (theta) { + var thetaPrime = (theta + 0.955) % (2 * Math.PI / 5) + return 1 / (Math.cos(thetaPrime) + + 0.726543 * Math.sin(thetaPrime)) + } + break + + case 'star': + settings.shape = function shapeStar (theta) { + var thetaPrime = (theta + 0.955) % (2 * Math.PI / 10) + if ((theta + 0.955) % (2 * Math.PI / 5) - (2 * Math.PI / 10) >= 0) { + return 1 / (Math.cos((2 * Math.PI / 10) - thetaPrime) + + 3.07768 * Math.sin((2 * Math.PI / 10) - thetaPrime)) + } else { + return 1 / (Math.cos(thetaPrime) + + 3.07768 * Math.sin(thetaPrime)) + } + } + break + } + } + + /* Make sure gridSize is a whole number and is not smaller than 4px */ + settings.gridSize = Math.max(Math.floor(settings.gridSize), 4) + + /* shorthand */ + var g = settings.gridSize + var maskRectWidth = g - settings.maskGapWidth + + /* normalize rotation settings */ + var rotationRange = Math.abs(settings.maxRotation - settings.minRotation) + var rotationSteps = Math.abs(Math.floor(settings.rotationSteps)) + var minRotation = Math.min(settings.maxRotation, settings.minRotation) + + /* information/object available to all functions, set when start() */ + var grid, // 2d array containing filling information + ngx, ngy, // width and height of the grid + center, // position of the center of the cloud + maxRadius + + /* timestamp for measuring each putWord() action */ + var escapeTime + + /* function for getting the color of the text */ + var getTextColor + function randomHslColor (min, max) { + return 'hsl(' + + (Math.random() * 360).toFixed() + ',' + + (Math.random() * 30 + 70).toFixed() + '%,' + + (Math.random() * (max - min) + min).toFixed() + '%)' + } + switch (settings.color) { + case 'random-dark': + getTextColor = function getRandomDarkColor () { + return randomHslColor(10, 50) + } + break + + case 'random-light': + getTextColor = function getRandomLightColor () { + return randomHslColor(50, 90) + } + break + + default: + if (typeof settings.color === 'function') { + getTextColor = settings.color + } + break + } + + /* function for getting the font-weight of the text */ + var getTextFontWeight + if (typeof settings.fontWeight === 'function') { + getTextFontWeight = settings.fontWeight + } + + /* function for getting the classes of the text */ + var getTextClasses = null + if (typeof settings.classes === 'function') { + getTextClasses = settings.classes + } + + /* Interactive */ + var interactive = false + var infoGrid = [] + var hovered + + var getInfoGridFromMouseTouchEvent = + function getInfoGridFromMouseTouchEvent (evt) { + var canvas = evt.currentTarget + var rect = canvas.getBoundingClientRect() + var clientX + var clientY + /** Detect if touches are available */ + if (evt.touches) { + clientX = evt.touches[0].clientX + clientY = evt.touches[0].clientY + } else { + clientX = evt.clientX + clientY = evt.clientY + } + var eventX = clientX - rect.left + var eventY = clientY - rect.top + + var x = Math.floor(eventX * ((canvas.width / rect.width) || 1) / g) + var y = Math.floor(eventY * ((canvas.height / rect.height) || 1) / g) + + return infoGrid[x][y] + } + + var wordcloudhover = function wordcloudhover (evt) { + var info = getInfoGridFromMouseTouchEvent(evt) + + if (hovered === info) { + return + } + + hovered = info + if (!info) { + settings.hover(undefined, undefined, evt) + + return + } + + settings.hover(info.item, info.dimension, evt) + } + + var wordcloudclick = function wordcloudclick (evt) { + var info = getInfoGridFromMouseTouchEvent(evt) + if (!info) { + return + } + + settings.click(info.item, info.dimension, evt) + evt.preventDefault() + } + + /* Get points on the grid for a given radius away from the center */ + var pointsAtRadius = [] + var getPointsAtRadius = function getPointsAtRadius (radius) { + if (pointsAtRadius[radius]) { + return pointsAtRadius[radius] + } + + // Look for these number of points on each radius + var T = radius * 8 + + // Getting all the points at this radius + var t = T + var points = [] + + if (radius === 0) { + points.push([center[0], center[1], 0]) + } + + while (t--) { + // distort the radius to put the cloud in shape + var rx = 1 + if (settings.shape !== 'circle') { + rx = settings.shape(t / T * 2 * Math.PI) // 0 to 1 + } + + // Push [x, y, t] t is used solely for getTextColor() + points.push([ + center[0] + radius * rx * Math.cos(-t / T * 2 * Math.PI), + center[1] + radius * rx * Math.sin(-t / T * 2 * Math.PI) * + settings.ellipticity, + t / T * 2 * Math.PI]) + } + + pointsAtRadius[radius] = points + return points + } + + /* Return true if we had spent too much time */ + var exceedTime = function exceedTime () { + return ((settings.abortThreshold > 0) && + ((new Date()).getTime() - escapeTime > settings.abortThreshold)) + } + + /* Get the deg of rotation according to settings, and luck. */ + var getRotateDeg = function getRotateDeg () { + if (settings.rotateRatio === 0) { + return 0 + } + + if (Math.random() > settings.rotateRatio) { + return 0 + } + + if (rotationRange === 0) { + return minRotation + } + + if (rotationSteps > 0) { + // Min rotation + zero or more steps * span of one step + return minRotation + + Math.floor(Math.random() * rotationSteps) * + rotationRange / (rotationSteps - 1) + } else { + return minRotation + Math.random() * rotationRange + } + } + + var getTextInfo = function getTextInfo (word, weight, rotateDeg) { + // calculate the acutal font size + // fontSize === 0 means weightFactor function wants the text skipped, + // and size < minSize means we cannot draw the text. + var debug = false + var fontSize = settings.weightFactor(weight) + if (fontSize <= settings.minSize) { + return false + } + + // Scale factor here is to make sure fillText is not limited by + // the minium font size set by browser. + // It will always be 1 or 2n. + var mu = 1 + if (fontSize < minFontSize) { + mu = (function calculateScaleFactor () { + var mu = 2 + while (mu * fontSize < minFontSize) { + mu += 2 + } + return mu + })() + } + + // Get fontWeight that will be used to set fctx.font + var fontWeight + if (getTextFontWeight) { + fontWeight = getTextFontWeight(word, weight, fontSize) + } else { + fontWeight = settings.fontWeight + } + + var fcanvas = document.createElement('canvas') + var fctx = fcanvas.getContext('2d', { willReadFrequently: true }) + + fctx.font = fontWeight + ' ' + + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily + + // Estimate the dimension of the text with measureText(). + var fw = fctx.measureText(word).width / mu + var fh = Math.max(fontSize * mu, + fctx.measureText('m').width, + fctx.measureText('\uFF37').width + ) / mu + + // Create a boundary box that is larger than our estimates, + // so text don't get cut of (it sill might) + var boxWidth = fw + fh * 2 + var boxHeight = fh * 3 + var fgw = Math.ceil(boxWidth / g) + var fgh = Math.ceil(boxHeight / g) + boxWidth = fgw * g + boxHeight = fgh * g + + // Calculate the proper offsets to make the text centered at + // the preferred position. + + // This is simply half of the width. + var fillTextOffsetX = -fw / 2 + // Instead of moving the box to the exact middle of the preferred + // position, for Y-offset we move 0.4 instead, so Latin alphabets look + // vertical centered. + var fillTextOffsetY = -fh * 0.4 + + // Calculate the actual dimension of the canvas, considering the rotation. + var cgh = Math.ceil((boxWidth * Math.abs(Math.sin(rotateDeg)) + + boxHeight * Math.abs(Math.cos(rotateDeg))) / g) + var cgw = Math.ceil((boxWidth * Math.abs(Math.cos(rotateDeg)) + + boxHeight * Math.abs(Math.sin(rotateDeg))) / g) + var width = cgw * g + var height = cgh * g + + fcanvas.setAttribute('width', width) + fcanvas.setAttribute('height', height) + + if (debug) { + // Attach fcanvas to the DOM + document.body.appendChild(fcanvas) + // Save it's state so that we could restore and draw the grid correctly. + fctx.save() + } + + // Scale the canvas with |mu|. + fctx.scale(1 / mu, 1 / mu) + fctx.translate(width * mu / 2, height * mu / 2) + fctx.rotate(-rotateDeg) + + // Once the width/height is set, ctx info will be reset. + // Set it again here. + fctx.font = fontWeight + ' ' + + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily + + // Fill the text into the fcanvas. + // XXX: We cannot because textBaseline = 'top' here because + // Firefox and Chrome uses different default line-height for canvas. + // Please read https://bugzil.la/737852#c6. + // Here, we use textBaseline = 'middle' and draw the text at exactly + // 0.5 * fontSize lower. + fctx.fillStyle = '#000' + fctx.textBaseline = 'middle' + fctx.fillText( + word, fillTextOffsetX * mu, + (fillTextOffsetY + fontSize * 0.5) * mu + ) + + // Get the pixels of the text + var imageData = fctx.getImageData(0, 0, width, height).data + + if (exceedTime()) { + return false + } + + if (debug) { + // Draw the box of the original estimation + fctx.strokeRect( + fillTextOffsetX * mu, + fillTextOffsetY, fw * mu, fh * mu + ) + fctx.restore() + } + + // Read the pixels and save the information to the occupied array + var occupied = [] + var gx = cgw + var gy, x, y + var bounds = [cgh / 2, cgw / 2, cgh / 2, cgw / 2] + while (gx--) { + gy = cgh + while (gy--) { + y = g + /* eslint no-labels: ["error", { "allowLoop": true }] */ + singleGridLoop: while (y--) { + x = g + while (x--) { + if (imageData[((gy * g + y) * width + + (gx * g + x)) * 4 + 3]) { + occupied.push([gx, gy]) + + if (gx < bounds[3]) { + bounds[3] = gx + } + if (gx > bounds[1]) { + bounds[1] = gx + } + if (gy < bounds[0]) { + bounds[0] = gy + } + if (gy > bounds[2]) { + bounds[2] = gy + } + + if (debug) { + fctx.fillStyle = 'rgba(255, 0, 0, 0.5)' + fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5) + } + break singleGridLoop + } + } + } + if (debug) { + fctx.fillStyle = 'rgba(0, 0, 255, 0.5)' + fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5) + } + } + } + + if (debug) { + fctx.fillStyle = 'rgba(0, 255, 0, 0.5)' + fctx.fillRect( + bounds[3] * g, + bounds[0] * g, + (bounds[1] - bounds[3] + 1) * g, + (bounds[2] - bounds[0] + 1) * g + ) + } + + // Return information needed to create the text on the real canvas + return { + mu: mu, + occupied: occupied, + bounds: bounds, + gw: cgw, + gh: cgh, + fillTextOffsetX: fillTextOffsetX, + fillTextOffsetY: fillTextOffsetY, + fillTextWidth: fw, + fillTextHeight: fh, + fontSize: fontSize + } + } + + /* Determine if there is room available in the given dimension */ + var canFitText = function canFitText (gx, gy, gw, gh, occupied) { + // Go through the occupied points, + // return false if the space is not available. + var i = occupied.length + while (i--) { + var px = gx + occupied[i][0] + var py = gy + occupied[i][1] + + if (px >= ngx || py >= ngy || px < 0 || py < 0) { + if (!settings.drawOutOfBound) { + return false + } + continue + } + + if (!grid[px][py]) { + return false + } + } + return true + } + + /* Actually draw the text on the grid */ + var drawText = function drawText (gx, gy, info, word, weight, distance, theta, rotateDeg, attributes) { + var fontSize = info.fontSize + var color + if (getTextColor) { + color = getTextColor(word, weight, fontSize, distance, theta) + } else { + color = settings.color + } + + // get fontWeight that will be used to set ctx.font and font style rule + var fontWeight + if (getTextFontWeight) { + fontWeight = getTextFontWeight(word, weight, fontSize) + } else { + fontWeight = settings.fontWeight + } + + var classes + if (getTextClasses) { + classes = getTextClasses(word, weight, fontSize) + } else { + classes = settings.classes + } + + elements.forEach(function (el) { + if (el.getContext) { + var ctx = el.getContext('2d') + var mu = info.mu + + // Save the current state before messing it + ctx.save() + ctx.scale(1 / mu, 1 / mu) + + ctx.font = fontWeight + ' ' + + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily + ctx.fillStyle = color + + // Translate the canvas position to the origin coordinate of where + // the text should be put. + ctx.translate( + (gx + info.gw / 2) * g * mu, + (gy + info.gh / 2) * g * mu + ) + + if (rotateDeg !== 0) { + ctx.rotate(-rotateDeg) + } + + // Finally, fill the text. + + // XXX: We cannot because textBaseline = 'top' here because + // Firefox and Chrome uses different default line-height for canvas. + // Please read https://bugzil.la/737852#c6. + // Here, we use textBaseline = 'middle' and draw the text at exactly + // 0.5 * fontSize lower. + ctx.textBaseline = 'middle' + ctx.fillText( + word, info.fillTextOffsetX * mu, + (info.fillTextOffsetY + fontSize * 0.5) * mu + ) + + // The below box is always matches how s are positioned + /* ctx.strokeRect(info.fillTextOffsetX, info.fillTextOffsetY, + info.fillTextWidth, info.fillTextHeight) */ + + // Restore the state. + ctx.restore() + } else { + // drawText on DIV element + var span = document.createElement('span') + var transformRule = '' + transformRule = 'rotate(' + (-rotateDeg / Math.PI * 180) + 'deg) ' + if (info.mu !== 1) { + transformRule += + 'translateX(-' + (info.fillTextWidth / 4) + 'px) ' + + 'scale(' + (1 / info.mu) + ')' + } + var styleRules = { + position: 'absolute', + display: 'block', + font: fontWeight + ' ' + + (fontSize * info.mu) + 'px ' + settings.fontFamily, + left: ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px', + top: ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px', + width: info.fillTextWidth + 'px', + height: info.fillTextHeight + 'px', + lineHeight: fontSize + 'px', + whiteSpace: 'nowrap', + transform: transformRule, + webkitTransform: transformRule, + msTransform: transformRule, + transformOrigin: '50% 40%', + webkitTransformOrigin: '50% 40%', + msTransformOrigin: '50% 40%' + } + if (color) { + styleRules.color = color + } + span.textContent = word + for (var cssProp in styleRules) { + span.style[cssProp] = styleRules[cssProp] + } + if (attributes) { + for (var attribute in attributes) { + span.setAttribute(attribute, attributes[attribute]) + } + } + if (classes) { + span.className += classes + } + el.appendChild(span) + } + }) + } + + /* Help function to updateGrid */ + var fillGridAt = function fillGridAt (x, y, drawMask, dimension, item) { + if (x >= ngx || y >= ngy || x < 0 || y < 0) { + return + } + + grid[x][y] = false + + if (drawMask) { + var ctx = elements[0].getContext('2d') + ctx.fillRect(x * g, y * g, maskRectWidth, maskRectWidth) + } + + if (interactive) { + infoGrid[x][y] = { item: item, dimension: dimension } + } + } + + /* Update the filling information of the given space with occupied points. + Draw the mask on the canvas if necessary. */ + var updateGrid = function updateGrid (gx, gy, gw, gh, info, item) { + var occupied = info.occupied + var drawMask = settings.drawMask + var ctx + if (drawMask) { + ctx = elements[0].getContext('2d') + ctx.save() + ctx.fillStyle = settings.maskColor + } + + var dimension + if (interactive) { + var bounds = info.bounds + dimension = { + x: (gx + bounds[3]) * g, + y: (gy + bounds[0]) * g, + w: (bounds[1] - bounds[3] + 1) * g, + h: (bounds[2] - bounds[0] + 1) * g + } + } + + var i = occupied.length + while (i--) { + var px = gx + occupied[i][0] + var py = gy + occupied[i][1] + + if (px >= ngx || py >= ngy || px < 0 || py < 0) { + continue + } + + fillGridAt(px, py, drawMask, dimension, item) + } + + if (drawMask) { + ctx.restore() + } + } + + /* putWord() processes each item on the list, + calculate it's size and determine it's position, and actually + put it on the canvas. */ + var putWord = function putWord (item) { + var word, weight, attributes + if (Array.isArray(item)) { + word = item[0] + weight = item[1] + } else { + word = item.word + weight = item.weight + attributes = item.attributes + } + var rotateDeg = getRotateDeg() + + // get info needed to put the text onto the canvas + var info = getTextInfo(word, weight, rotateDeg) + + // not getting the info means we shouldn't be drawing this one. + if (!info) { + return false + } + + if (exceedTime()) { + return false + } + + // If drawOutOfBound is set to false, + // skip the loop if we have already know the bounding box of + // word is larger than the canvas. + if (!settings.drawOutOfBound && !settings.shrinkToFit) { + var bounds = info.bounds; + if ((bounds[1] - bounds[3] + 1) > ngx || + (bounds[2] - bounds[0] + 1) > ngy) { + return false + } + } + + // Determine the position to put the text by + // start looking for the nearest points + var r = maxRadius + 1 + + var tryToPutWordAtPoint = function (gxy) { + var gx = Math.floor(gxy[0] - info.gw / 2) + var gy = Math.floor(gxy[1] - info.gh / 2) + var gw = info.gw + var gh = info.gh + + // If we cannot fit the text at this position, return false + // and go to the next position. + if (!canFitText(gx, gy, gw, gh, info.occupied)) { + return false + } + + // Actually put the text on the canvas + drawText(gx, gy, info, word, weight, + (maxRadius - r), gxy[2], rotateDeg, attributes) + + // Mark the spaces on the grid as filled + updateGrid(gx, gy, gw, gh, info, item) + + // Return true so some() will stop and also return true. + return true + } + + while (r--) { + var points = getPointsAtRadius(maxRadius - r) + + if (settings.shuffle) { + points = [].concat(points) + shuffleArray(points) + } + + // Try to fit the words by looking at each point. + // array.some() will stop and return true + // when putWordAtPoint() returns true. + // If all the points returns false, array.some() returns false. + var drawn = points.some(tryToPutWordAtPoint) + + if (drawn) { + // leave putWord() and return true + return true + } + } + if (settings.shrinkToFit) { + if (Array.isArray(item)) { + item[1] = item[1] * 3 / 4 + } else { + item.weight = item.weight * 3 / 4 + } + return putWord(item) + } + // we tried all distances but text won't fit, return false + return false + } + + /* Send DOM event to all elements. Will stop sending event and return + if the previous one is canceled (for cancelable events). */ + var sendEvent = function sendEvent (type, cancelable, details) { + if (cancelable) { + return !elements.some(function (el) { + var event = new CustomEvent(type, { + detail: details || {} + }) + return !el.dispatchEvent(event) + }, this) + } else { + elements.forEach(function (el) { + var event = new CustomEvent(type, { + detail: details || {} + }) + el.dispatchEvent(event) + }, this) + } + } + + /* Start drawing on a canvas */ + var start = function start () { + // For dimensions, clearCanvas etc., + // we only care about the first element. + var canvas = elements[0] + + if (canvas.getContext) { + ngx = Math.ceil(canvas.width / g) + ngy = Math.ceil(canvas.height / g) + } else { + var rect = canvas.getBoundingClientRect() + ngx = Math.ceil(rect.width / g) + ngy = Math.ceil(rect.height / g) + } + + // Sending a wordcloudstart event which cause the previous loop to stop. + // Do nothing if the event is canceled. + if (!sendEvent('wordcloudstart', true)) { + return + } + + // Determine the center of the word cloud + center = (settings.origin) + ? [settings.origin[0] / g, settings.origin[1] / g] + : [ngx / 2, ngy / 2] + + // Maxium radius to look for space + maxRadius = Math.floor(Math.sqrt(ngx * ngx + ngy * ngy)) + + /* Clear the canvas only if the clearCanvas is set, + if not, update the grid to the current canvas state */ + grid = [] + + var gx, gy, i + if (!canvas.getContext || settings.clearCanvas) { + elements.forEach(function (el) { + if (el.getContext) { + var ctx = el.getContext('2d') + ctx.fillStyle = settings.backgroundColor + ctx.clearRect(0, 0, ngx * (g + 1), ngy * (g + 1)) + ctx.fillRect(0, 0, ngx * (g + 1), ngy * (g + 1)) + } else { + el.textContent = '' + el.style.backgroundColor = settings.backgroundColor + el.style.position = 'relative' + } + }) + + /* fill the grid with empty state */ + gx = ngx + while (gx--) { + grid[gx] = [] + gy = ngy + while (gy--) { + grid[gx][gy] = true + } + } + } else { + /* Determine bgPixel by creating + another canvas and fill the specified background color. */ + var bctx = document.createElement('canvas').getContext('2d') + + bctx.fillStyle = settings.backgroundColor + bctx.fillRect(0, 0, 1, 1) + var bgPixel = bctx.getImageData(0, 0, 1, 1).data + + /* Read back the pixels of the canvas we got to tell which part of the + canvas is empty. + (no clearCanvas only works with a canvas, not divs) */ + var imageData = + canvas.getContext('2d').getImageData(0, 0, ngx * g, ngy * g).data + + gx = ngx + var x, y + while (gx--) { + grid[gx] = [] + gy = ngy + while (gy--) { + y = g + /* eslint no-labels: ["error", { "allowLoop": true }] */ + singleGridLoop: while (y--) { + x = g + while (x--) { + i = 4 + while (i--) { + if (imageData[((gy * g + y) * ngx * g + + (gx * g + x)) * 4 + i] !== bgPixel[i]) { + grid[gx][gy] = false + break singleGridLoop + } + } + } + } + if (grid[gx][gy] !== false) { + grid[gx][gy] = true + } + } + } + + imageData = bctx = bgPixel = undefined + } + + // fill the infoGrid with empty state if we need it + if (settings.hover || settings.click) { + interactive = true + + /* fill the grid with empty state */ + gx = ngx + 1 + while (gx--) { + infoGrid[gx] = [] + } + + if (settings.hover) { + canvas.addEventListener('mousemove', wordcloudhover) + } + + if (settings.click) { + canvas.addEventListener('click', wordcloudclick) + canvas.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)' + } + + canvas.addEventListener('wordcloudstart', function stopInteraction () { + canvas.removeEventListener('wordcloudstart', stopInteraction) + + canvas.removeEventListener('mousemove', wordcloudhover) + canvas.removeEventListener('click', wordcloudclick) + hovered = undefined + }) + } + + i = 0 + var loopingFunction, stoppingFunction + if (settings.wait !== 0) { + loopingFunction = window.setTimeout + stoppingFunction = window.clearTimeout + } else { + loopingFunction = window.setImmediate + stoppingFunction = window.clearImmediate + } + + var addEventListener = function addEventListener (type, listener) { + elements.forEach(function (el) { + el.addEventListener(type, listener) + }, this) + } + + var removeEventListener = function removeEventListener (type, listener) { + elements.forEach(function (el) { + el.removeEventListener(type, listener) + }, this) + } + + var anotherWordCloudStart = function anotherWordCloudStart () { + removeEventListener('wordcloudstart', anotherWordCloudStart) + stoppingFunction(timer) + } + + addEventListener('wordcloudstart', anotherWordCloudStart) + + var timer = loopingFunction(function loop () { + if (i >= settings.list.length) { + stoppingFunction(timer) + sendEvent('wordcloudstop', false) + removeEventListener('wordcloudstart', anotherWordCloudStart) + + return + } + escapeTime = (new Date()).getTime() + var drawn = putWord(settings.list[i]) + var canceled = !sendEvent('wordclouddrawn', true, { + item: settings.list[i], + drawn: drawn + }) + if (exceedTime() || canceled) { + stoppingFunction(timer) + settings.abort() + sendEvent('wordcloudabort', false) + sendEvent('wordcloudstop', false) + removeEventListener('wordcloudstart', anotherWordCloudStart) + return + } + i++ + timer = loopingFunction(loop, settings.wait) + }, settings.wait) + } + + // All set, start the drawing + start() + } + + WordCloud.isSupported = isSupported + WordCloud.minFontSize = minFontSize + + // Expose the library as an AMD module + if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef + global.WordCloud = WordCloud + define('wordcloud', [], function () { return WordCloud }) // eslint-disable-line no-undef + } else if (typeof module !== 'undefined' && module.exports) { // eslint-disable-line no-undef + module.exports = WordCloud // eslint-disable-line no-undef + } else { + global.WordCloud = WordCloud + } +})(this) // jshint ignore:line \ No newline at end of file