Small editor bugs (#530)

app/common/models/index.ts

@@ -1,6 +1,6 @@
 export enum MouseAction {
  MOVE = 'move',
- CLICK = 'click',
+ MOUSE_DOWN = 'click',
  DOUBLE_CLICK = 'double-click',
 }
 

app/src/lib/editor/engine/index.ts

@@ -134,31 +134,6 @@ export class EditorEngine {
  webview.executeJavaScript('window.api?.processDom()');
  }
 
- async textEditSelectedElement() {
- if (this.text.shouldNotStartEditing) {
- return;
- }
-
- const selected = this.elements.selected;
- if (selected.length === 0) {
- return;
- }
- const selectedEl = selected[0];
- const webviewId = selectedEl.webviewId;
- const webview = this.webviews.getWebview(webviewId);
- if (!webview) {
- return;
- }
-
- const domEl = await webview.executeJavaScript(
- `window.api?.getElementWithSelector('${escapeSelector(selectedEl.selector)}')`,
- );
- if (!domEl) {
- return;
- }
- this.text.start(domEl, webview);
- }
-
  async takeScreenshot(name: string): Promise<string | null> {
  const webview = this.webviews.webviews.values().next().value?.webview;
  if (!webview) {

app/src/lib/editor/engine/insert/index.ts

@@ -6,7 +6,12 @@ import { nanoid } from 'nanoid';
 import React from 'react';
 import { EditorEngine } from '..';
 import { EditorAttributes } from '/common/constants';
-import { ActionElement, ActionTarget, InsertElementAction } from '/common/models/actions';
+import {
+ ActionElement,
+ ActionElementLocation,
+ ActionTarget,
+ InsertElementAction,
+} from '/common/models/actions';
 import { ElementPosition } from '/common/models/element';
 
 export class InsertManager {
@@ -44,7 +49,6 @@ export class InsertManager {
  e: React.MouseEvent<HTMLDivElement>,
  webview: Electron.WebviewTag | null,
  getRelativeMousePositionToWebview: (e: React.MouseEvent<HTMLDivElement>) => ElementPosition,
- mode: EditorMode,
  ) {
  if (!this.isDrawing || !this.drawOrigin) {
  return null;
@@ -59,7 +63,17 @@ export class InsertManager {
  console.error('Webview not found');
  return;
  }
- this.insertElement(webview, newRect, mode);
+
+ if (
+ this.editorEngine.mode === EditorMode.INSERT_TEXT &&
+ newRect.width < 10 &&
+ newRect.height < 10
+ ) {
+ this.editorEngine.text.editElementAtLoc(this.drawOrigin.webview, webview);
+ this.drawOrigin = undefined;
+ return;
+ }
+ this.insertElement(webview, newRect);
  this.drawOrigin = undefined;
  }
 
@@ -92,9 +106,8 @@ export class InsertManager {
  async insertElement(
  webview: Electron.WebviewTag,
  newRect: { x: number; y: number; width: number; height: number },
- mode: EditorMode,
  ) {
- const insertAction = await this.createInsertAction(webview, newRect, mode);
+ const insertAction = await this.createInsertAction(webview, newRect);
  if (!insertAction) {
  console.error('Failed to create insert action');
  return;
@@ -105,19 +118,17 @@ export class InsertManager {
  async createInsertAction(
  webview: Electron.WebviewTag,
  newRect: { x: number; y: number; width: number; height: number },
- mode: EditorMode,
  ): Promise<InsertElementAction | undefined> {
- const location = await webview.executeJavaScript(
+ const location: ActionElementLocation | undefined = await webview.executeJavaScript(
  `window.api?.getInsertLocation(${this.drawOrigin?.webview.x}, ${this.drawOrigin?.webview.y})`,
  );
  if (!location) {
  console.error('Insert position not found');
  return;
  }
-
+ const mode = this.editorEngine.mode;
  const uuid = nanoid();
  const selector = `[${EditorAttributes.DATA_ONLOOK_UNIQUE_ID}="${uuid}"]`;
-
  const width = Math.max(Math.round(newRect.width), 30);
  const height = Math.max(Math.round(newRect.height), 30);
  const styles: Record<string, string> =

app/src/lib/editor/engine/text/index.ts

@@ -92,4 +92,40 @@ export class TextEditingManager {
  private createCurriedEnd(webview: WebviewTag) {
  return () => this.end(webview);
  }
+
+ async editSelectedElement() {
+ if (this.shouldNotStartEditing) {
+ return;
+ }
+
+ const selected = this.editorEngine.elements.selected;
+ if (selected.length === 0) {
+ return;
+ }
+ const selectedEl = selected[0];
+ const webviewId = selectedEl.webviewId;
+ const webview = this.editorEngine.webviews.getWebview(webviewId);
+ if (!webview) {
+ return;
+ }
+
+ const domEl = await webview.executeJavaScript(
+ `window.api?.getElementWithSelector('${escapeSelector(selectedEl.selector)}')`,
+ );
+ if (!domEl) {
+ return;
+ }
+ this.start(domEl, webview);
+ }
+
+ async editElementAtLoc(pos: { x: number; y: number }, webview: WebviewTag) {
+ const el: DomElement = await webview.executeJavaScript(
+ `window.api?.getElementAtLoc(${pos.x}, ${pos.y}, true)`,
+ );
+ if (!el) {
+ console.error('Failed to get element at location');
+ return;
+ }
+ this.start(el, webview);
+ }
 }

app/src/lib/editor/styles/numberUnit.ts

@@ -18,15 +18,23 @@ export function parsedValueToString(floatValue: number | string, unit: string):
  return `${floatValue}${unit}`;
 }
 
+export const getDefaultUnit = (unit: string): string => {
+ return unit === '' ? 'px' : unit;
+};
+
 export const handleNumberInputKeyDown = (
  e: React.KeyboardEvent<HTMLInputElement>,
  key: string,
  value: string,
  setValue: (value: string) => void,
  sendStyleUpdate: (value: string) => void,
 ) => {
+ const { numberVal, unitVal } = stringToParsedValue(value, key === 'opacity');
+ const newUnit = getDefaultUnit(unitVal);
+
  if (e.key === 'Enter') {
- sendStyleUpdate(value);
+ const newValue = parsedValueToString(numberVal, newUnit);
+ sendStyleUpdate(newValue);
  e.currentTarget.blur();
  return;
  }
@@ -36,10 +44,7 @@ export const handleNumberInputKeyDown = (
  const step = e.shiftKey ? 10 : 1;
  const delta = e.key === 'ArrowUp' ? step : -step;
 
- const { numberVal, unitVal } = stringToParsedValue(value, key === 'opacity');
-
- const newNumber = (parseInt(numberVal) + delta).toString();
- const newUnit = unitVal === '' ? 'px' : unitVal;
+ const newNumber = parseInt(numberVal) + delta;
  const newValue = parsedValueToString(newNumber, newUnit);
 
  setValue(newValue);

app/src/lib/models.ts

@@ -10,5 +10,4 @@ export enum EditorMode {
  PAN = 'pan',
  INSERT_TEXT = 'insert-text',
  INSERT_DIV = 'insert-div',
- EDIT_TEXT = 'edit-text',
 }

app/src/routes/editor/Canvas/Hotkeys/index.tsx

@@ -37,7 +37,7 @@ const HotkeysArea = ({ children, scale, setScale }: HotkeysAreaProps) => {
  // Actions
  useHotkeys(Hotkey.UNDO.command, () => editorEngine.action.undo());
  useHotkeys(Hotkey.REDO.command, () => editorEngine.action.redo());
- useHotkeys(Hotkey.ENTER.command, () => editorEngine.textEditSelectedElement());
+ useHotkeys(Hotkey.ENTER.command, () => editorEngine.text.editSelectedElement());
 
  // Copy
  useHotkeys(Hotkey.COPY.command, () => editorEngine.copy.copy());

app/src/routes/editor/EditPanel/inputs/single/ColorInput/index.tsx

@@ -17,9 +17,10 @@ const ColorInput = observer(
  const editorEngine = useEditorEngine();
  const [value, setValue] = useState(elementStyle.defaultValue);
  const [isOpen, toggleOpen] = useState(false);
+ const [isFocused, setIsFocused] = useState(false);
 
  useEffect(() => {
- if (!editorEngine.style.selectedStyle) {
+ if (!editorEngine.style.selectedStyle || isFocused) {
  return;
  }
  const newValue = elementStyle.getValue(editorEngine.style.selectedStyle?.styles);
@@ -44,6 +45,16 @@ const ColorInput = observer(
  );
  }
 
+ const handleFocus = () => {
+ setIsFocused(true);
+ editorEngine.history.startTransaction();
+ };
+
+ const handleBlur = () => {
+ setIsFocused(false);
+ editorEngine.history.commitTransaction();
+ };
+
  function renderTextInput() {
  return (
  <input
@@ -60,8 +71,8 @@ const ColorInput = observer(
  const formattedColor = formatColorInput(event.target.value);
  sendStyleUpdate(formattedColor);
  }}
- onFocus={editorEngine.history.startTransaction}
- onBlur={editorEngine.history.commitTransaction}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
  />
  );
  }

app/src/routes/editor/EditPanel/inputs/single/SelectInput.tsx

@@ -43,7 +43,6 @@ const OVERRIDE_ICONS: Record<string, any> = {
  dotted: <BorderDottedIcon />,
  row: <ArrowRightIcon />,
  column: <ArrowDownIcon />,
- flex: 'Stack',
  block: '--',
 };
 

app/src/routes/editor/EditPanel/inputs/single/TextInput.tsx

@@ -1,6 +1,11 @@
 import { useEditorEngine } from '@/components/Context';
 import { SingleStyle } from '@/lib/editor/styles/models';
-import { handleNumberInputKeyDown } from '@/lib/editor/styles/numberUnit';
+import {
+ getDefaultUnit,
+ handleNumberInputKeyDown,
+ parsedValueToString,
+ stringToParsedValue,
+} from '@/lib/editor/styles/numberUnit';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
@@ -14,35 +19,50 @@ const TextInput = observer(
  }) => {
  const editorEngine = useEditorEngine();
  const [value, setValue] = useState(elementStyle.defaultValue);
+ const [isFocused, setIsFocused] = useState(false);
 
  useEffect(() => {
- if (!editorEngine.style.selectedStyle) {
+ if (isFocused || !editorEngine.style.selectedStyle) {
  return;
  }
  const newValue = elementStyle.getValue(editorEngine.style.selectedStyle?.styles);
  setValue(newValue);
- }, [editorEngine.style.selectedStyle]);
+ }, [editorEngine.style.selectedStyle, isFocused]);
 
  const sendStyleUpdate = (newValue: string) => {
- setValue(newValue);
  editorEngine.style.updateElementStyle(elementStyle.key, newValue);
  onValueChange && onValueChange(elementStyle.key, newValue);
  };
 
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- const newValue = e.currentTarget.value;
+ let newValue = e.currentTarget.value;
+ setValue(newValue);
+
+ const { numberVal, unitVal } = stringToParsedValue(newValue);
+ const newUnit = getDefaultUnit(unitVal);
+ newValue = parsedValueToString(numberVal, newUnit);
  sendStyleUpdate(newValue);
  };
 
+ const handleFocus = () => {
+ setIsFocused(true);
+ editorEngine.history.startTransaction();
+ };
+
+ const handleBlur = () => {
+ setIsFocused(false);
+ editorEngine.history.commitTransaction();
+ };
+
  return (
  <input
  type="text"
  className={`w-full p-[6px] text-xs px-2 rounded border-none text-active bg-background-onlook/75 text-start focus:outline-none focus:ring-0 appearance-none`}
  placeholder="--"
  value={value}
  onChange={handleInputChange}
- onFocus={editorEngine.history.startTransaction}
- onBlur={editorEngine.history.commitTransaction}
+ onFocus={handleFocus}
+ onBlur={handleBlur}
  onKeyDown={(e) =>
  handleNumberInputKeyDown(e, elementStyle.key, value, setValue, sendStyleUpdate)
  }

app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx

@@ -57,7 +57,7 @@ const TreeNode = observer(
  return;
  }
  node.select();
- sendMouseEvent(e, node.data.id, MouseAction.CLICK);
+ sendMouseEvent(e, node.data.id, MouseAction.MOUSE_DOWN);
  }
 
  async function sendMouseEvent(
@@ -69,7 +69,7 @@ const TreeNode = observer(
  for (const webviewState of webviews.values()) {
  const webviewTag = webviewState.webview;
  const el: DomElement = await webviewTag.executeJavaScript(
- `window.api?.getElementWithSelector('${escapeSelector(selector)}', ${action === MouseAction.CLICK})`,
+ `window.api?.getElementWithSelector('${escapeSelector(selector)}', ${action === MouseAction.MOUSE_DOWN})`,
  );
  if (!el) {
  continue;
@@ -78,7 +78,7 @@ const TreeNode = observer(
  case MouseAction.MOVE:
  editorEngine.elements.mouseover(el, webviewTag);
  break;
- case MouseAction.CLICK:
+ case MouseAction.MOUSE_DOWN:
  if (e.shiftKey) {
  editorEngine.elements.shiftClick(el, webviewTag);
  break;