fix goal creation and editing text zooming per scale

web/src/components/GoalTitleQuickEdit/GoalTitleQuickEdit.js

@@ -10,10 +10,12 @@ import { createGoalWithEdge, updateGoal } from '../../projects/goals/actions'
 import { closeGoalForm, updateContent } from '../../goal-form/actions'
 
 import './GoalTitleQuickEdit.css'
+import { firstZoomThreshold, fontSize, fontSizeExtraLarge, fontSizeLarge, lineHeightMultiplier, secondZoomThreshold } from '../../drawing/dimensions'
 
 // if editAddress is present (as a Goal address) it means we are currently EDITING that Goal
 function GoalTitleQuickEdit({
   whoami,
+  scale,
   content, // the value of the text input
   parentAddress,
   editAddress,
@@ -129,6 +131,18 @@ function GoalTitleQuickEdit({
     )
   }
 
+   // the default
+  let fontSizeToUse = fontSize
+  if (scale < secondZoomThreshold) {
+    fontSizeToUse = fontSizeExtraLarge
+  } else if (scale < firstZoomThreshold) {
+    fontSizeToUse = fontSizeLarge
+  }
+  const textStyle = {
+    fontSize: fontSizeToUse,
+    lineHeight: `${parseInt(fontSizeToUse) * lineHeightMultiplier}px`
+  }
+
   return (
     <div
       className="goal-title-quick-edit-wrapper"
@@ -146,6 +160,7 @@ function GoalTitleQuickEdit({
           onKeyDown={handleKeyDown}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          style={textStyle}
         />
       </form>
     </div>
@@ -162,6 +177,7 @@ function mapStateToProps(state) {
     ui: {
       activeProject,
       screensize: { width },
+      viewport: { scale },
       // all the state for this component is store under state->ui->goalForm
       goalForm: {
         parentAddress,
@@ -194,6 +210,7 @@ function mapStateToProps(state) {
 
   return {
     whoami: state.whoami,
+    scale,
     editAddress,
     // the address of the "parent" Goal that we are maybe creating this "under"
     parentAddress,

web/src/drawing/dimensions.js

@@ -14,6 +14,8 @@ export const textBoxWidth = 310
 
 export const firstZoomThreshold = 0.6
 export const secondZoomThreshold = 0.4
+
+export const lineHeightMultiplier = 1.2
 // this is the regular font size, for
 // a regular level of zoom
 // and this is for the Goal Titles
@@ -82,7 +84,7 @@ export function getGoalHeight(ctx, goalText, scale, isEditing) {
   // then its height is a known/constant
   // because the title text is being limited 
   // to a fixed number of lines of text
-  if (!isEditing || scale < firstZoomThreshold) {
+  if (!isEditing) {
     return goalHeight
   }
 
@@ -99,13 +101,21 @@ export function getGoalHeight(ctx, goalText, scale, isEditing) {
   // takes font and font size into account
   const lines = getLinesForParagraphs(ctx, goalText, scale)
 
-  const totalTextHeight = lines.length * (fontSizeInt + lineSpacing)
+  // adjust font size based on scale (zoom factor)
+  let fontSizeToUse = fontSize // default
+  if (scale < secondZoomThreshold) {
+    fontSizeToUse = fontSizeExtraLargeInt
+  } else if (scale < firstZoomThreshold) {
+    fontSizeToUse = fontSizeLargeInt
+  }
+  const totalTextHeight = lines.length * (fontSizeToUse * lineHeightMultiplier)
 
   // calculate the goalHeight
   // from the top and bottom margins + the height
   // of the lines of text
   const detectedGoalHeight =
     textBoxMarginTop * 2 + totalTextHeight + avatarHeight + avatarSpace * 2
 
+  // create a minimum height equal to the goalHeight
   return Math.max(detectedGoalHeight, goalHeight)
 }

web/src/drawing/drawEntryPoints.js

@@ -49,7 +49,8 @@ export default function drawEntryPoints(
     ctx.fillStyle = entryPoint.color
     ctx.font = '25px ' + 'hk-grotesk-bold'
     // distance of entry point title from dotted rectangle
-    ctx.fillText(goal.content, left, top - 20)
+    let content = goal.content.length < 40 ? goal.content : goal.content.slice(0, 40) + '...'
+    ctx.fillText(content, left, top - 20)
     ctx.restore()
   })
 }

web/src/drawing/drawGoalCard.js

@@ -41,6 +41,7 @@ export default function render(
   // use the editText for measuring,
   // even though it's not getting drawn on the canvas
   const text = isEditing ? editText : goal.content
+
   const goalHeight = getGoalHeight(ctx, text, scale, isEditing)
 
   // set up border color
@@ -132,7 +133,7 @@ export default function render(
   // render text, if not in edit mode
   // in which case the text is being rendered in the textarea
   // html element being overlaid on top of this Goal
-  if (!isEditing || scale < firstZoomThreshold) {
+  if (!isEditing) {
     const textBoxLeft = x + textBoxMarginLeft
     const textBoxTop = y + textBoxMarginTop
     const lines = getLinesForParagraphs(ctx, text, scale)

web/src/drawing/index.js

@@ -15,7 +15,7 @@ import {
   RELATION_AS_PARENT,
   RELATION_AS_CHILD,
 } from '../edge-connector/actions'
-import { CONNECTOR_VERTICAL_SPACING } from './dimensions'
+import { CONNECTOR_VERTICAL_SPACING, firstZoomThreshold } from './dimensions'
 
 function setupCanvas(canvas) {
   // Get the device pixel ratio, falling back to 1.
@@ -293,7 +293,10 @@ function render(store, canvas) {
     if (state.ui.goalForm.editAddress) {
       // editing an existing Goal
       const editingGoal = goals[state.ui.goalForm.editAddress]
-      const isEditing = true
+      // we only allow this goal
+      // to be edited using 'quickedit'
+      // above the first zoom threshold
+      const isEditing = scale >= firstZoomThreshold
       const editText = state.ui.goalForm.content
       const membersOfGoal = Object.keys(goalMembers)
         .map(address => goalMembers[address])

web/src/edge-connector/handler.js

@@ -16,6 +16,7 @@ export default function handleEdgeConnectMouseUp(
         parent_address: fromAsParent ? fromAddress : toAddress,
         child_address: fromAsParent ? toAddress : fromAddress,
         randomizer: Date.now(),
+        is_imported: false
       },
     })
     dispatch(createEdgeAction)

web/src/routes/Dashboard/DashboardListProject.css

@@ -196,6 +196,10 @@
 .entry-point-name {
   flex: 1;
   color: #535353;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-right: 40px;
 }
 
 .dashboard-list-project-members-settings {

web/src/routes/ProjectView/MapView/MapView.js

@@ -81,7 +81,7 @@ function MapView({
         {/* Only present this GoalTitleQuickEdit */}
         {/* if the scale is greater than or equal to 60% */}
         {/* because otherwise the font size gets to small and the text is cut off */}
-        {goalFormIsOpen && scale >= firstZoomThreshold && <GoalTitleQuickEdit projectId={projectId} />}
+        {goalFormIsOpen && (scale >= firstZoomThreshold || !goalIsBeingEdited) && <GoalTitleQuickEdit projectId={projectId} />}
       </div>
       {/* below items inside 'goal-form-position-container' maintain their normal scale */}
       {/* while positioning themselves absolutely (position: absolute) on the screen */}