websocket-text-relay 1.1.0 → 1.1.2

package/README.md

@@ -6,17 +6,13 @@ front end changes evaluated immediately as they type, without having to first sa
 It's a similar concept to sites like CodePen and JsFiddle, except you can develop locally using your own text editor with all
 of your personalized plugins instead of having to use an in browser code editor.
 
-## Alpha
-
-Note: This tool is still in alpha state. Some features like the VsCode extension have not been published yet. Documentation is still a work in progress
-
 ## Usage
 
 ### 1. Install the extension for your text editor
 
 WTR currently has plugins for Neovim and VSCode.
  - [websocket-text-relay.nvim](https://github.com/niels4/websocket-text-relay.nvim)
- - VSCode extension coming soon!
+ - [websocket-text-relay-vscode](https://github.com/niels4/websocket-text-relay-vscode)
 
 ### 2. Verify the webserver is running with the status UI
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "websocket-text-relay",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "An LSP server for sending live file updates from your text editor to the front end via websockets.",
   "bin": {
     "websocket-text-relay": "./start.js"

package/src/ui/css/main.css

@@ -160,11 +160,12 @@ body {
 }
 
 .tooltip_display_group {
-  display: none;
+  opacity: 0;
+  transition: opacity 0.35s ease;
 }
 
 .tooltip_wrapper_group:hover .tooltip_display_group {
-  display: initial;
+  opacity: 1;
 }
 
 .server_status_label {

package/src/ui/js/components/ActivityTimeseriesGraph.js

@@ -1,7 +1,7 @@
 const { exportDeps, drawSvgElement, drawCircle, drawLinearPath, coordsToPathData, drawText, drawToolTip } = window.__WTR__
 
 const drawValueWithTooltip  = ({x, y, label, direction, parentNode}) => {
-  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  const tooltipWrapperGroup = drawSvgElement({tag: "g", className: "tooltip_wrapper_group", parent: parentNode})
   drawToolTip({x: x, y: y - 0.0032, text: label, direction, parentNode: tooltipWrapperGroup})
   return drawText({x: x, y: y, dominantBaseline: "middle", text: "0", className: "timeseries_value", parentNode: tooltipWrapperGroup})
 }
@@ -67,9 +67,9 @@ class ActivityTimeseriesGraph {
     const minY = -height / 2
     const maxY = minY + height
 
-    const clipPath = drawSvgElement("clipPath", {id: innerCircleClipPathId}, undefined, this.parentNode)
+    const clipPath = drawSvgElement({tag: "clipPath", attributes: {id: innerCircleClipPathId}, parent: this.parentNode})
     drawCircle({cx: 0, cy: 0, r: this.innerRingRadius - 0.005, parentNode: clipPath})
-    drawSvgElement("rect", {"clip-path": `url(#${innerCircleClipPathId})`, x: minX, y: minY, height, width}, "timeseries_bg", this.parentNode)
+    drawSvgElement({tag: "rect", attributes: {"clip-path": `url(#${innerCircleClipPathId})`, x: minX, y: minY, height, width}, className: "timeseries_bg", parent: this.parentNode})
 
     const series = this.dataWindow
     const {startTime, endTime, maxValue} = getSeriesWindowInfo(series)
@@ -90,13 +90,12 @@ class ActivityTimeseriesGraph {
     const onTickUpdate = () => {
       scheduleNextTick()
 
-      console.log("data tick", Date.now())
       const series = this.dataWindow
       const prevEndTime = series.at(-1).time
       const newTime = prevEndTime + dataWindowInterval
       series.shift()
       series.push({time: newTime, value: window.currentActivityCount})
-      currentValueElement.innerHTML = window.currentActivityCount
+      currentValueElement.textContent = window.currentActivityCount
       window.currentActivityCount = 0
 
       const pathCoords = series.map(({time, value}) => {
@@ -110,7 +109,7 @@ class ActivityTimeseriesGraph {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           const {startTime, endTime, maxValue} = getSeriesWindowInfo(series)
-          maxValueElement.innerHTML = maxValue
+          maxValueElement.textContent = maxValue
 
           valueScale = createLinearScale(0, maxValue, maxY, minY) // in svg, y increases as it goes down, so we need to flip max and min in the range
           timeScale = createLinearScale(startTime, endTime, minX, maxX)
@@ -138,12 +137,7 @@ class ActivityTimeseriesGraph {
 
   triggerActivity () {
     window.currentActivityCount++
-    console.log("time series graph activity")
   }
 }
 
 exportDeps({ActivityTimeseriesGraph})
-
-/*
- *
- */

package/src/ui/js/components/HeaderSummary.js

@@ -9,14 +9,7 @@ class HeaderSummary {
   draw () {
     this.parentNode.innerHTML = ""
     drawText({x: -.86, y: -.73, text: "editors", parentNode: this.parentNode})
-    // this.editorCountNode = drawText({x: -.96, y: -.62, text: "0", className: "header_number", parentNode: this.parentNode})
     drawText({x: .86, y: -.73, text: "clients", className: "right_header", parentNode: this.parentNode})
-    // this.clientCountNode = drawText({x: .96, y: -.62, text: "0", className: ["right_header", "header_number"], parentNode: this.parentNode})
-  }
-
-  update (/* data */) {
-    // this.editorCountNode.innerHTML = data.editors.length
-    // this.clientCountNode.innerHTML = data.clients.length
   }
 }
 

package/src/ui/js/components/ServerStatus.js

@@ -21,7 +21,7 @@ class ServerStatus {
       this.valueElement.classList.remove(valueTextClass)
       this.offlineElement.classList.add(offlineTextClass)
     } else {
-      this.valueElement.innerHTML = pid
+      this.valueElement.textContent = pid
       this.valueElement.classList.add(valueTextClass)
       this.offlineElement.classList.remove(offlineTextClass)
     }

package/src/ui/js/components/SessionLabels.js

@@ -2,7 +2,7 @@ const { exportDeps, polarToCartesian, coordsToPathData, drawLinearPath, drawCirc
 
 // a value with a colored circle and tooltip
 const drawSummaryValue  = ({x, y, label, circleClass, parentNode}) => {
-  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  const tooltipWrapperGroup = drawSvgElement({tag: "g", className: "tooltip_wrapper_group", parent: parentNode})
   drawCircle({cx: x, cy: y - 0.0032, r: summaryCircleRadius, className: circleClass, parentNode: tooltipWrapperGroup})
   drawToolTip({x: x, y: y - 0.0032, text: label, parentNode: tooltipWrapperGroup})
   return drawText({x: x + summaryCircleRadius * 2, y: y, dominantBaseline: "middle", text: "0", className: "summary_text_value", parentNode: tooltipWrapperGroup})
@@ -10,13 +10,13 @@ const drawSummaryValue  = ({x, y, label, circleClass, parentNode}) => {
 
 // similar to summary value, but with an update function that automatically handles moving the circle on the left as the text size changes
 const drawRightAlignedSummaryValue  = ({x, y, label, circleClass, parentNode}) => {
-  const tooltipWrapperGroup = drawSvgElement("g", undefined, "tooltip_wrapper_group", parentNode)
+  const tooltipWrapperGroup = drawSvgElement({tag: "g", className: "tooltip_wrapper_group", parent: parentNode})
   drawToolTip({x: x, y: y - 0.0032, text: label, parentNode: tooltipWrapperGroup})
   const textElement =  drawText({x: x + summaryCircleRadius * 2, y: y, dominantBaseline: "middle", text: "0", textAnchor: "end", className: "summary_text_value", parentNode: tooltipWrapperGroup})
   const xDiff = textElement.getBBox().width
   const labelCircle = drawCircle({cx: x - xDiff, cy: y - 0.0032, r: summaryCircleRadius, className: circleClass, parentNode: tooltipWrapperGroup})
   const update = (value) => {
-    textElement.innerHTML = value
+    textElement.textContent = value
     const xDiff = textElement.getBBox().width
     labelCircle.setAttribute("cx", x - xDiff)
   }
@@ -67,7 +67,7 @@ class ClientLabel {
     const watchedCountBbox = this.watchedCountElement.getBBox()
 
     const xDiff = summaryValueSpacing + watchedCountBbox.width
-    this.activeCountTranslateWrapper = drawSvgElement("g", {transform: `translate(${xDiff}, 0)`}, undefined, this.parentNode)
+    this.activeCountTranslateWrapper = drawSvgElement({tag: "g", attributes: {transform: `translate(${xDiff}, 0)`}, parent: this.parentNode})
     this.activeCountElement = drawSummaryValue({x: summaryStartX, y: summaryMidY, label: "Active Files", circleClass: "summary_active_circle", parentNode: this.activeCountTranslateWrapper})
   }
 
@@ -81,13 +81,13 @@ class ClientLabel {
       const halfIndex = Math.floor(name.length / 2)
       const nameFirstHalf = name.substring(0, halfIndex)
       const nameSecondHalf = name.substring(halfIndex, name.length)
-      this.topNameElement.innerHTML = nameFirstHalf
-      this.nameTextElement.innerHTML = nameSecondHalf
+      this.topNameElement.textContent = nameFirstHalf
+      this.nameTextElement.textContent = nameSecondHalf
       this.nameTextElement.classList.add("small_text")
     } else {
       this.topNameElement.innerHTML = ""
       this.nameTextElement.classList.remove("small_text")
-      this.nameTextElement.innerHTML = name
+      this.nameTextElement.textContent = name
     }
 
     const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)
@@ -95,8 +95,8 @@ class ClientLabel {
     const newUnderlinePathData = coordsToPathData(underlineCoords)
     this.underlinePath.setAttribute("d", newUnderlinePathData)
 
-    this.watchedCountElement.innerHTML = client.watchCount
-    this.activeCountElement.innerHTML = client.activeWatchCount
+    this.watchedCountElement.textContent = client.watchCount
+    this.activeCountElement.textContent = client.activeWatchCount
 
     const xDiff = summaryValueSpacing + this.watchedCountElement.getBBox().width
     this.activeCountTranslateWrapper.setAttribute("transform", `translate(${xDiff}, 0)`)
@@ -129,7 +129,7 @@ class EditorLabel {
 
     this.activeCountSummaryValue = drawRightAlignedSummaryValue({x: summaryStartX, y: summaryMidY, label: "Active Files", circleClass: "summary_active_circle", parentNode: this.parentNode})
     const xDiff = this.activeCountSummaryValue.textElement.getBBox().width + summaryCircleRadius + editorSummaryPadding * 2
-    this.openFilesTransformGroup = drawSvgElement('g', {transform: `translate(${-xDiff})`}, undefined, this.parentNode)
+    this.openFilesTransformGroup = drawSvgElement({tag: 'g', attributes: {transform: `translate(${-xDiff})`}, parent: this.parentNode})
     this.openCountSummaryValue = drawRightAlignedSummaryValue({x: summaryStartX, y: summaryMidY, label: "Open Files", circleClass: "summary_watched_circle", parentNode: this.openFilesTransformGroup})
   }
 
@@ -147,13 +147,13 @@ class EditorLabel {
       const halfIndex = Math.floor(name.length / 2)
       const nameFirstHalf = name.substring(0, halfIndex)
       const nameSecondHalf = name.substring(halfIndex, name.length)
-      this.topNameElement.innerHTML = nameFirstHalf
-      this.nameTextElement.innerHTML = nameSecondHalf
+      this.topNameElement.textContent = nameFirstHalf
+      this.nameTextElement.textContent = nameSecondHalf
       this.nameTextElement.classList.add("small_text")
     } else {
       this.topNameElement.innerHTML = ""
       this.nameTextElement.classList.remove("small_text")
-      this.nameTextElement.innerHTML = name
+      this.nameTextElement.textContent = name
     }
 
     const textBbox = addPadding(this.nameTextElement.getBBox(), 0.00, underlinePadding)

package/src/ui/js/components/SessionWedges.js

@@ -46,7 +46,7 @@ class SessionWedges {
     const wedgeAngleDelta = (totalAngleDelta / numWedges) - wedgeSpacing
     const innerRadius = this.outerRingRadius - wedgeWidth / 2
     for (let i = 0; i < numWedges; i++) {
-      const group = drawSvgElement("g", undefined, "single_wedge_group", this.parentNode)
+      const group = drawSvgElement({tag: "g", className: "single_wedge_group", parent: this.parentNode})
 
       let startAngle = totalStartAngle + this.direction * (i + 1) * wedgeSpacing + this.direction * i * wedgeAngleDelta
       if (this.direction === -1) {

package/src/ui/js/main.js

@@ -9,7 +9,7 @@ gridGroup.innerHTML = ""
 // drawGrid(gridGroup)
 
 const headerSummaryNode = document.getElementById('header_summary_group')
-const headerSummary = new HeaderSummary({parentNode: headerSummaryNode})
+new HeaderSummary({parentNode: headerSummaryNode})
 
 const statusRingNode = document.getElementById('status_ring_group')
 const statusRing = new StatusRing({innerRingRadius, outerRingRadius, outerArcSize, parentNode: statusRingNode})
@@ -70,7 +70,6 @@ const handleStatusData = (rawData) => {
   window.__WTR__.lastStatusData = rawData
   const data = statusDataTranform(rawData)
   console.log("status data updated", data)
-  headerSummary.update(data)
   statusRing.update(data)
   clientWedges.update(data.clients)
   editorWedges.update(data.editors)

package/src/ui/js/util/drawing.js

@@ -3,8 +3,8 @@ const { exportDeps } = window.__WTR__
 const TWO_PI = 2 * Math.PI
 const MAX_ANGLE_DELTA = .99999
 
-const drawSvgElement = (tagName, attributes = {}, className, parentNode) => {
-  const element = document.createElementNS("http://www.w3.org/2000/svg", tagName)
+const drawSvgElement = ({tag, attributes = {}, className, parent}) => {
+  const element = document.createElementNS("http://www.w3.org/2000/svg", tag)
 
   if (className && className.length > 0) {
     if (Array.isArray(className)) {
@@ -20,51 +20,32 @@ const drawSvgElement = (tagName, attributes = {}, className, parentNode) => {
     }
   })
 
-  if (parentNode) {
-    parentNode.append(element)
+  if (parent) {
+    parent.append(element)
   }
 
   return element
 }
 
-const drawText = ({x, y, text, dominantBaseline, textAnchor, className, parentNode}) => {
-  const textElement = drawSvgElement("text", {x, y, "dominant-baseline": dominantBaseline, "text-anchor": textAnchor}, className, parentNode)
-  textElement.innerHTML = text
+const drawText = ({x, y, text, dominantBaseline, textAnchor, className, parentNode: parent}) => {
+  const textElement = drawSvgElement({tag: "text", attributes: {x, y, "dominant-baseline": dominantBaseline, "text-anchor": textAnchor}, className, parent})
+  textElement.textContent = text
   return textElement
 }
 
-const drawLine = ({x1, y1, x2, y2, className, parentNode}) => {
-  return drawSvgElement("line", {x1, y1, x2, y2}, className, parentNode)
+const drawLine = ({x1, y1, x2, y2, className, parentNode: parent}) => {
+  return drawSvgElement({tag: "line", attributes: {x1, y1, x2, y2}, className, parent})
 }
 
-const drawCircle = ({cx, cy, r, className, parentNode}) => {
-  return drawSvgElement("circle", {cx, cy, r}, className, parentNode)
+const drawCircle = ({cx, cy, r, className, parentNode: parent}) => {
+  return drawSvgElement({tag: "circle", attributes: {cx, cy, r}, className, parent})
 }
 
 const coordsToPathData = (coords) => "M " + coords.map(coord => coord.join(',')).join(" L ")
 
-const drawLinearPath = ({coords, className, parentNode}) => {
+const drawLinearPath = ({coords, className, parentNode: parent}) => {
   const d = coordsToPathData(coords)
-  return drawSvgElement("path", {d}, className, parentNode)
-}
-
-const drawPolarLine = ({startAngle, startRadius, endAngle, endRadius, className, parentNode}) => {
-  const startAngleRadians = (startAngle % 1) * TWO_PI
-  const endAngleRadians = (endAngle % 1) * TWO_PI
-  const x1 = Math.cos(startAngleRadians) * startRadius
-  const y1 = -Math.sin(startAngleRadians) * startRadius
-  const x2 = Math.cos(endAngleRadians) * endRadius
-  const y2 = -Math.sin(endAngleRadians) * endRadius
-
-  return drawSvgElement("line", {x1, y1, x2, y2}, className, parentNode)
-}
-
-const drawPolarCircle = ({angle, radius, r, className, parentNode}) => {
-  const angleRadians = (angle % 1) * TWO_PI
-  const cx = Math.cos(angleRadians) * radius
-  const cy = -Math.sin(angleRadians) * radius
-
-  return drawSvgElement("circle", {cx, cy, r}, className, parentNode)
+  return drawSvgElement({tag: "path", attributes: {d}, className, parent})
 }
 
 const polarToCartesian = (angle, radius) => {
@@ -74,23 +55,29 @@ const polarToCartesian = (angle, radius) => {
   return [x, y]
 }
 
-const drawWedge = ({startAngle, angleDelta, innerRadius, radiusDelta, className, parentNode}) => {
+const drawPolarLine = ({startAngle, startRadius, endAngle, endRadius, className, parentNode: parent}) => {
+  const [x1, y1] = polarToCartesian(startAngle, startRadius)
+  const [x2, y2] = polarToCartesian(endAngle, endRadius)
+
+  return drawSvgElement({tag: "line", attributes: {x1, y1, x2, y2}, className, parent})
+}
+
+const drawPolarCircle = ({angle, radius, r, className, parentNode: parent}) => {
+  const [cx, cy] = polarToCartesian(angle, radius)
+  return drawSvgElement({tag: "circle", attributes: {cx, cy, r}, className, parent})
+}
+
+const drawWedge = ({startAngle, angleDelta, innerRadius, radiusDelta, className, parentNode: parent}) => {
   if (angleDelta < 0) { angleDelta = 0 }
   if (angleDelta > MAX_ANGLE_DELTA) {angleDelta = MAX_ANGLE_DELTA }
-
-  const startAngleRadians = (startAngle % 1) * TWO_PI
-  const endAngleRadians = ((startAngle + angleDelta) % 1) * TWO_PI
+  const endAngle = startAngle + angleDelta
   const outerRadius = innerRadius + radiusDelta
   const largeArcFlag = (angleDelta % 1) > .5 ? "1" : "0"
 
-  const startX1 = Math.cos(startAngleRadians) * innerRadius
-  const startY1 = -Math.sin(startAngleRadians) * innerRadius
-  const startX2 = Math.cos(startAngleRadians) * outerRadius
-  const startY2 = -Math.sin(startAngleRadians) * outerRadius
-  const endX1 = Math.cos(endAngleRadians) * innerRadius
-  const endY1 = -Math.sin(endAngleRadians) * innerRadius
-  const endX2 = Math.cos(endAngleRadians) * outerRadius
-  const endY2 = -Math.sin(endAngleRadians) * outerRadius
+  const [startX1, startY1] = polarToCartesian(startAngle, innerRadius)
+  const [startX2, startY2] = polarToCartesian(startAngle, outerRadius)
+  const [endX1, endY1] = polarToCartesian(endAngle, innerRadius)
+  const [endX2, endY2] = polarToCartesian(endAngle, outerRadius)
 
   const d = `
 M ${startX1} ${startY1},
@@ -100,28 +87,28 @@ A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${startX2} ${startY2},
 Z
 `
 
-  return drawSvgElement("path", {d}, className, parentNode)
+  return drawSvgElement({tag: "path", attributes: {d}, className, parent})
 }
 
 const triangleHeight = 0.06
 const verticalPadding = 0.01
 const horizontalPadding = 0.04
 
-const drawToolTip = ({x, y, text, direction = "below", parentNode}) => {
+const drawToolTip = ({x, y, text, direction = "below", parentNode: parent}) => {
   const directionMultiplier = direction === "above" ? -1 : 1
-  const tooltipDisplayGroup = drawSvgElement("g", undefined, "tooltip_display_group", parentNode)
-  const bgPlaceholder = drawSvgElement("g", undefined, undefined, tooltipDisplayGroup)
+  const tooltipDisplayGroup = drawSvgElement({tag: "g", className: "tooltip_display_group", parent})
+  const bgPlaceholder = drawSvgElement({tag: "g", parent: tooltipDisplayGroup})
   const textY = y + (triangleHeight + verticalPadding) * directionMultiplier
   const textElement = drawText({x, y: textY, text, className: "tooltip_text", parentNode: tooltipDisplayGroup})
   const textBbox = textElement.getBBox()
-  const rectAttributes = {
+  const attributes = {
     x: textBbox.x - horizontalPadding,
     y: textBbox.y - verticalPadding,
     width: textBbox.width + horizontalPadding * 2,
     height: textBbox.height + verticalPadding * 2,
     rx: 0.015
   }
-  drawSvgElement("rect", rectAttributes, "tooltip_outline", bgPlaceholder)
+  drawSvgElement({tag: "rect", attributes, className: "tooltip_outline", parent: bgPlaceholder})
 }
 
 exportDeps({drawSvgElement, drawLine, drawCircle, drawLinearPath, drawPolarLine, drawPolarCircle, drawWedge,