profile
viewpoint
Christopher Chedeau vjeux Facebook East Palo Alto, California http://blog.vjeux.com/ Frenchy Front-end Engineer

prettier/prettier 35456

Prettier is an opinionated code formatter.

excalidraw/excalidraw 2941

Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

animatedjs/animated 1718

Declarative Animations Library for React and React Native

atom/github 735

:octocat: Git and GitHub integration for Atom

prettier/prettier-atom 726

An atom package for the prettier formatter.

cerebral/urlon 94

JSON-like object notation that can be embedded in URLs

Evgenus/BigInt 24

Big Integer Library by Leemon

ericclemmons/react-tooling-challenge 13

Competition to improve the tooling landscape for all React users.

prettier/prettier-rpc 12

Single-file build of prettier with JSON-RPC communication

issue openedexcalidraw/excalidraw

Add to homescreen isn’t working offline

First time I tried to put something on the homescreen. It felt fine as an app but unfortunately got the sad news when tried to load it on a plane.

I have no idea how to make it offline available but I figure there must be a settings somewhere.

E2B8CD6E-B495-4293-A56F-AD4034217688

created time in 2 days

issue openedexcalidraw/excalidraw

Wrong resize points for multi-line shape

I drew an ellipse with multi point lines.

I would expect to be able to resize it horizontally and vertically but I only can vertically.

The resize handles should be at the corner, not center.

C79DE830-250A-44CD-840F-BEB27C4DF453

created time in 2 days

issue commentexcalidraw/excalidraw

Multi-line ending

Yeah, I’ve always wanted the click on last point to end drawing.

It would also remove the weirdly pointed arrow when you just click to create a new point.

vjeux

comment created time in 2 days

issue openedexcalidraw/excalidraw

[Mobile] Missing home screen icon

I added the website to my home screen on iOS but it took a crappy screenshot of the app instead of using an icon.

created time in 2 days

issue openedexcalidraw/excalidraw

[Mobile] Missing lock

That feature is very useful when “drawing” stuff with many lines. I’d love to get it on mobile as well :)

created time in 2 days

issue openedexcalidraw/excalidraw

[Mobile] Multi-line ending

I find the way to end a multiline arrow/line not ideal.

My instinct was to click on the line shape again but that did nothing. Maybe we should make it end.

The checkmark button is not visible enough. We should make it a lot more obvious than it is right now somehow. Maybe change colors and/or location.

created time in 2 days

issue openedexcalidraw/excalidraw

[Mobile] Missing undo / redo

I make mistakes, undo is useful, especially on mobile with fat fingers :)

created time in 2 days

issue openedexcalidraw/excalidraw

[Mobile] Missing copy paste

It turns out I’m using it a lot and not having it is annoying :(

created time in 2 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

I disagree that the mobile UI should have less features because it’s on a phone. I use the lock icon a lot when drawing shapes with a bunch of lines. I wish we didn’t totally remove it as it’s useful.

I’m happy for it being behind a menu.

j-f1

comment created time in 2 days

issue commentexcalidraw/excalidraw

Mobile support

I would definitely display them. I don’t think that making them actually draggable is needed

klikstermkd

comment created time in 2 days

issue commentexcalidraw/excalidraw

Ability to quickly change fill / stroke color with keyboard

The hardest part is fixed: selecting a color via the keyboard. But still need a keybinding to open the color picker itsekr

emilsjolander

comment created time in 3 days

pull request commentexcalidraw/excalidraw

feat: add reset zoom button

I’m not on a computer so can’t review. If someone else can review and merge that’d be great!

OrenMe

comment created time in 3 days

push eventexcalidraw/excalidraw

Jed Fox

commit sha 74add8661a16a28435febf800aa0301c89d4b4fc

Fix error on export (#808)

view details

push time in 3 days

delete branch excalidraw/excalidraw

delete branch : fix-error-on-export

delete time in 3 days

PR merged excalidraw/excalidraw

Fix error on export

This is not #792.

+4 -1

3 comments

1 changed file

j-f1

pr closed time in 3 days

pull request commentexcalidraw/excalidraw

Fix error on export

Oh I see, because we use ref hack it gets passed null when the component unmounts

j-f1

comment created time in 3 days

pull request commentexcalidraw/excalidraw

Fix error on export

Should we even call makeEditable if we don’t pass an element?

j-f1

comment created time in 3 days

issue commentexcalidraw/excalidraw

Text alignment

For aligning text, we need to change how we compute the bounding boxes. If you look at all the presentation software (keynote, powerpoint...), you draw a rectangle and text is laid out within this rectangle.

We need to do something similar here, where the rectangle is different than the actual text boundary.

tu4mo

comment created time in 3 days

push eventexcalidraw/excalidraw

Jed Fox

commit sha 43236bed68527fea16c60d68be378bb3e4e4823d

Fix error with contentEditable (#803)

view details

push time in 4 days

delete branch excalidraw/excalidraw

delete branch : fix-contenteditable

delete time in 4 days

PR merged excalidraw/excalidraw

Fix error with contentEditable

I didn’t realize this would throw an error if it was unsupported, but it should be fixed. cc @nc-rasel. Fixes #802.

+13 -2

1 comment

2 changed files

j-f1

pr closed time in 4 days

issue closedexcalidraw/excalidraw

Text tool is gone mad and does not work at all.

@vjeux sorry to tag you here but bro did you check the app? it was fine till last night but now broken. Select the text tool and try to write you'll see the problem. :(

closed time in 4 days

nc-rasel

issue commentexcalidraw/excalidraw

Text tool is gone mad and does not work at all.

I’m not on a computer so can’t check but this is working fine on mobile.

The error is very weird, it seems to indicate that contentEditable = “plaintext-only” is causing the issue.

What browser are you using?

nc-rasel

comment created time in 4 days

pull request commentexcalidraw/excalidraw

Update expiring origin trial token

That’s very short! Is it going to be like this forever or is it going to be longer after it goes out of beta or something?

tomayac

comment created time in 4 days

pull request commentexcalidraw/excalidraw

Update expiring origin trial token

I see, how often does it need to be updated?

tomayac

comment created time in 4 days

pull request commentexcalidraw/excalidraw

Update expiring origin trial token

What is this thing?

tomayac

comment created time in 4 days

issue openedexcalidraw/excalidraw

Integrate with Sentry

People are starting hitting javascript errors, would be nice to log them on the server so that we can fix them without having people to manually report them

created time in 4 days

create barnchexcalidraw/excalidraw

branch : l10n_master

created branch time in 4 days

pull request commentexcalidraw/excalidraw

Undo/Redo buttons, refactor menu toggles

Sorry I’m without a computer for another two days!

j-f1

comment created time in 4 days

issue commentexcalidraw/excalidraw

Update translations

I was thinking of having a commit hook that regenerates all the translation files by having the same order as the english one and putting null for the keys that are not translated yet. This way it’s going to be easier to find out which translations are missing

j-f1

comment created time in 4 days

push eventexcalidraw/excalidraw

Jed Fox

commit sha 0fd3fb4b5bbb890d95a652b000c5fa7034e4a36b

More mobile tweaks (#790) * Disable text selection * Set content-editable=plaintext-only to disable Touch Bar formatting buttons * Enlarge resize handle tap targets for pen/touch * Make the lock button a button in mobile mode * Use icons instead of Unicode characters; add an alternate toolbar for creating multipoint lines * Allow buttons to hide themselves * Fix heuristic for showing shape actions * Refactor icons * Fix label for edit button * Switch edit button icon * Remove lock button on mobile * Add language selector on mobile * Fix showing edit button on mobile * Fix showing edit button on mobile, part 2 * Fix handle touch regions * Fix scroll-back button position * Allow using the text tool on a text object to start editing it * Fix deletion of last point in line

view details

push time in 4 days

delete branch excalidraw/excalidraw

delete branch : more-tweaks

delete time in 4 days

PR merged excalidraw/excalidraw

More mobile tweaks

Ref #138

  • [x] language selector
  • [x] remove lock button on mobile
+272 -222

34 comments

17 changed files

j-f1

pr closed time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

Is this in a state to be merged in? If yes, we should probably do it and continue support in a follow up.

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

Just wanted to say again that this is awesome. I’ve been drawing a quick scene and it works very well on my iphone 6!

I knew it had potential but it’s exceeding my expectations!

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

  • Select a circle
  • Click the edit icon to show the edition menu
  • Click on the scene
  • The edition menu still shows up (with less controls)
  • There is no longer an edit icon to toggle it off

Should we always keep the edit icon visible?

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

(Just to be clear, I’m just posting here all the things I’m seeing around mobile support, they are not required to be addressed in this PR)

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

The hamburger and edit buttons should be active (like lock) when opened

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

Missing zoom indicator. The pinch to zoom gesture is awesome. However it’s very easy to zoom in and out to large or small zooms and then when exported to normal images the scene will be at the wrong scale.

I’m not really sure what’s the right way to deal with it but it’ll likely be an issue

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

There’s a small jump while dragging elements

  • dezoom to the maximum (to make it more obvious)
  • create a circle
  • touch down on the edge with one finger
  • move by one or two pixels
  • the circle jumps to more than a few pixels
  • move by one or two more pixels
  • the circle properly tracks your finger

Usually when I see this kind of bugs, it’s an issue where we don’t keep track of the offset where the element was started being dragged and instead we use the center.

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

The language selector is missing. Should probably be located in the hamburger menu

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

The lock icon doesn’t make much sense to me in the bottom menu. It feels like it’s part if the shape actions. Is there a reason why it’s not up there like on desktop?

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

More mobile tweaks

The done button for drawing arrows seems to be off by one. It only shows after you have added three points instead of two. When you confirm, it drops the last segment of the arrow

j-f1

comment created time in 4 days

pull request commentexcalidraw/excalidraw

Add touch support

Seems like it’s green. Do you want to merge and keep iterating on subsequent PRs?

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add touch support

Btw, I’m not opposed to disable the tests if you can’t find out why they are breaking. Mobile support is more important than the tests in the short term. Hopefully we’ll find the root cause and fix them afterwards.

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add touch support

For deletion, I can think of a trash icon next to the edit one. We’ll also likely want to put undo redo nearby. Maybe a way to copy paste as well

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add touch support

For the editing, we’ll want to do something with the UI (don’t really know what yet) but now it’s almost unusable as it covers the entire scene.

53C8F72F-89E7-44C0-A86F-BF9D8F76D4F7

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add touch support

Probably not a bug introduced by this PR but because there’s no way to end a multi arrow selection, it let me try something unconventional:

  • Click on the unlock icon to lock it
  • Select arrow
  • Click somewhere to start the arrow
  • Click somewhere else to continue the arrow
  • Click on the lock icon to unlock it
  • The previous action resets the shape to selection and unselects the arrow
  • Now you have both selection AND continue building the arrow

46EAED45-8339-47B9-B646-9B5D509572CF

Note: doesn’t need to be fixed in this PR, but we should keep track of it. I assume that when we’ll add some sort of done button (maybe next to the edit one), people won’t click on the lock anymore.

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add touch support

Omg omg omg, just tried it on my phone and it’s working!!

3499B98F-E2E1-4707-A7DC-1E271878EEBC

One small thing, the hints location is off on mobile

j-f1

comment created time in 5 days

Pull request review commentexcalidraw/excalidraw

Add touch support

+import { Pointer } from "./types";+import { normalizeScroll } from "./scene/data";++export function getCenter(pointers: readonly Pointer[]) {+  return {+    x: normalizeScroll(sum(pointers, p => p.x) / pointers.length),+    y: normalizeScroll(sum(pointers, p => p.y) / pointers.length),+  };+}++export function getDistance([a, b]: readonly Pointer[]) {

I learned that this is Math.hypot!

j-f1

comment created time in 5 days

pull request commentskiplang/skip

feat(website): add DocSearch as recommended by docusaurus.

Thank you Sylvain!

s-pace

comment created time in 5 days

push eventskiplang/skip

Sylvain Pace

commit sha 54846212dc66c84a798dc8b013a39cb338845875

feat(website): add DocSearch as recommended by docusaurus. (#185)

view details

push time in 5 days

PR merged skiplang/skip

feat(website): add DocSearch as recommended by docusaurus. CLA Signed

👋 team,

I am working on DocSearch. We have an integration for Docusaurus. We thought it is a shame you can not also used this search that you can find on reactjs for example.

This PR will add DocSearch to the documentation website. It will allow an user to have a learn-as-you-type experience by displaying results thanks to a dropdown in a live way.

Let me know if you need anything.

+4 -0

0 comment

1 changed file

s-pace

pr closed time in 5 days

MemberEvent

pull request commentexcalidraw/excalidraw

Initial support for mobile devices

Thanks!!!!

j-f1

comment created time in 5 days

push eventexcalidraw/excalidraw

Jed Fox

commit sha 7a7a73b78df342507fffba48b054b41dd66422e7

Initial support for mobile devices (#787) * Initial support for mobile devices No editing yet, but UI looks nice and you can open the canvas menu * Add support for editing shape color, etc * Allow the mobile menus to cover the shape selector * Hopefully fix test error * Fix touch on canvas * Fix safe area handling & remove unused Island

view details

push time in 5 days

PR merged excalidraw/excalidraw

Initial support for mobile devices

No editing yet, but UI looks nice and you can open the canvas menu

Does not fix #138

+359 -126

9 comments

13 changed files

j-f1

pr closed time in 5 days

pull request commentexcalidraw/excalidraw

Initial support for mobile devices

Nice, thanks so much Jed!

I think we should merge this in first, and do all the gesture handling in a second PR.

Code looks reasonable.

j-f1

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add a doc with all the current shortcuts

Oh nvm, it’s a markdown file!

lipis

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Add a doc with all the current shortcuts

Could you add a screenshot by any chance? Thanks!

lipis

comment created time in 5 days

pull request commentexcalidraw/excalidraw

Show hint under toolbar

Thank you so much for doing that! I don’t know about you but it doesn’t feel like it’s in the way.

I agree with @dwelle about sorting, let’s not do it after the fact. There’s little value in it and it causes annoyances with merge conflicts

lipis

comment created time in 5 days

issue openednrgapple/excalidraw-standalone

Remove google analytics tag

Otherwise it still sends analytics to google. None of the analytics is actually user generated content but you probably don’t want it if your goal is to be 100% offline.

FE505FD3-BF41-4E31-B916-C3448447ADF6

created time in 6 days

issue commentexcalidraw/excalidraw

Don't regenerate seed on element cloning

For example, I drew a small bomb to represent a regression. I wanted to have a few in a row and copy pasting them gave each of them a unique look at feel, but still looked like bombs.

This is one of the value proposition of excalidraw to me.

dwelle

comment created time in 6 days

issue commentexcalidraw/excalidraw

Don't regenerate seed on element cloning

I disagree, if you duplicate elements you want the lines to be slightly different. This way they all look unique and hand drawn :)

dwelle

comment created time in 6 days

issue commentexcalidraw/excalidraw

The hint for the multipoint arrows/lines is hidden behind the zoom buttons.

Please send a PR to put the hints just below the shape selector. I believe this is the right thing to do and we don’t need to add a setting to hide them.

lipis

comment created time in 6 days

issue commentexcalidraw/excalidraw

Investigate other hosting providers

I’m going to try using zeit back when I’m home. cc @rauchg

dwelle

comment created time in 6 days

pull request commentexcalidraw/excalidraw

Fast & Furious

Yes, that seems like the best course of action given the current issue with downscaling a bitmap.

vjeux

comment created time in 7 days

pull request commentexcalidraw/excalidraw

Fast & Furious

@brodybits: unfortunately it’s not as simple. To draw the diagrams there are two phases:

  • Take the description (I want a rectangle of this size) and generate a list of shapes (lines and curves).
  • Take that list of shape and convert them to pixels

Rough is already well design that you can do step 1 independently of step 2.

Now, every time we scroll or select elements, we have to make sure the UI is updated. Right now the way excalidraw does it is by clearing the entire canvas and doing step 2 for all the elements that are visible.

What this PR is doing is to cache the result of step 2 (actual pixels for each shape) so that on update we can just copy them to the right place. One of the fastest operations that modern computers can do is to copy memory around. This is multiple orders of magnitude faster than re-doing step 2.

This process in the literature is called “compositing”. The browser has a compositor that is being used when you use divs and spans. However in this case we chose to use canvas.

Another option is to start using the browser compositor. What is required is to maintain dom elements with the associated objects we render. We’re already kind of doing it with shape so it shouldn’t be a huge change.

vjeux

comment created time in 7 days

issue commentexcalidraw/excalidraw

An overlay of the shortcuts when pressing "?"

While the idea of having this dialog to be autogenerated from code is good, I don’t believe that it’s going to provide the best user experience.

I would recommend implementing the dialog by hardcoding all the shortcuts and organizing them in a way that makes sense for a human.

Then, and only then, try to figure out if we can help reduce duplication.

We only have so many shortcuts that I’m not too worried about both getting out of sync and causing trouble.

lipis

comment created time in 7 days

Pull request review commentexcalidraw/excalidraw

Fast & Furious

 body {   color: var(--text-color-primary); } +canvas {+  // following props improve blurriness at certain devicePixelRatios.+  // AFAIK it doesn't affect export (in fact, export seems sharp either way).++  image-rendering: pixelated; // chromium

This is likely the reason why the downsampling algorithm used is so bad.

vjeux

comment created time in 7 days

pull request commentexcalidraw/excalidraw

Fast & Furious

What many applications (including browsers) do is an hybrid. They up/downscale the cached texture while zooming and when the user stops, then they compute the properly sized version and swap it.

We don’t have smooth zooming so it doesn’t map as cleanly but just wanted to share :)

vjeux

comment created time in 7 days

pull request commentexcalidraw/excalidraw

Fast & Furious

My initial idea was that we would use the browser up/downscaling algorithm but it seems like they are using a bad one and I assume we can’t change it.

The other thing we can do is to make the cached canvas per zoom level. So if we zoom in and out we throw away the entire cache, but at least all the subsequent pan operations are going to be fast.

vjeux

comment created time in 7 days

issue closedexcalidraw/excalidraw

Curved arrows

This could be implemented as part of #24.

Discussing the feature with Dan, there are several possibilities how to implement this (we can support each).

  1. Two-point bezier curve, where you'd manipulate the end points' bezier handles to create the curve:

    2-point-curve

  2. Three-point bezier curve, where you could manipulate the middle point. Here, we can also decide whether to even show the bezier handles for the middle point, or whether to use some uniform default.

    3-point-curve

closed time in 7 days

dwelle

issue commentexcalidraw/excalidraw

Curved arrows

We shipped it!

dwelle

comment created time in 7 days

pull request commentexcalidraw/excalidraw

feat: add reset zoom button

Go for it, please add a comment above with the link where you took the icon from so we maintain attribution :)

OrenMe

comment created time in 7 days

pull request commentexcalidraw/excalidraw

feat: add reset zoom button

The current icon looks more like reload the page than reset the zoom. I quickly googled for zoom reset icon and found a not so terrible one: https://github.com/FortAwesome/Font-Awesome/issues/14933#issue-436113476

For the jump, I would just always show the icon. If people want to keep clicking on it, just let them :)

OrenMe

comment created time in 7 days

push eventexcalidraw/excalidraw

Szymon Pajka

commit sha 360864ef3d4c95bf2f28544f0b444957d8bc97fe

Add missing Polish translations (#766)

view details

push time in 10 days

pull request commentexcalidraw/excalidraw

Fast & Furious

Also, we squash commits on this repo, so it would blame to you I believe. Then if people are interested in the evolution they can look at the PR on github

vjeux

comment created time in 10 days

pull request commentexcalidraw/excalidraw

Fast & Furious

Don’t worry about the blame, just get it shipped :)

vjeux

comment created time in 10 days

pull request commentexcalidraw/excalidraw

Fast & Furious

Sorry I’m without a laptop for a week, can’t try it out! Super stoked about it :)

vjeux

comment created time in 11 days

push eventexcalidraw/excalidraw

Christopher Chedeau

commit sha dd2d7e1a8818ebe8fad1d33095f1649511888b4a

Updates on the font (#764) * Updates on the font See discussion in #747 Fixes #747 * another update

view details

push time in 11 days

PR merged excalidraw/excalidraw

Updates on the font

See discussion in #747

Fixes #747

+0 -0

2 comments

2 changed files

vjeux

pr closed time in 11 days

issue closedexcalidraw/excalidraw

Cyrillic issues in Virgil font

Unfortunately, the Cyrillic glyphs for Virgil have some issues:

  • р looks a bit like ф (solution: move the curve a bit closer to p)
  • ы looks like bl (solution: make the glyph the same height as "а" or "ч")
  • в looks like b (solution: add top curve, like in B, but not as wide as the bottom one)
  • д is a print variant, not a script/handwritten (should look more like g). It's acceptable, but uncommon

Here's a comparison with some handwritten styles from Google Fonts: fonts

(they have т written as m, but the Virgil variant is also common in such blackboard-style writing)

closed time in 11 days

dchest

pull request commentexcalidraw/excalidraw

Updates on the font

Ellinor made another update. I'm about to go in vacation for a week so I'll land all those changes and we can iterate more afterwards.

vjeux

comment created time in 11 days

push eventvjeux/excalidraw

Christopher Chedeau

commit sha 3025664e6829cb92cc8c1267199dc484ba08f8fa

another update

view details

push time in 11 days

pull request commentexcalidraw/excalidraw

Fast & Furious

I can't approve it...

image

Thanks for pushing it through! I'm happy with the current state. Please land it :) (I don't want to land it when you're not there in case anything breaks)

vjeux

comment created time in 13 days

Pull request review commentexcalidraw/excalidraw

Fast & Furious

-import { ExcalidrawElement } from "../element/types";+import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types"; import { isTextElement } from "../element/typeChecks";-import { getDiamondPoints, getArrowPoints } from "../element/bounds";+import {+  getDiamondPoints,+  getArrowPoints,+  getElementAbsoluteCoords,+} from "../element/bounds"; import { RoughCanvas } from "roughjs/bin/canvas"; import { Drawable } from "roughjs/bin/core"; import { Point } from "roughjs/bin/geometry"; import { RoughSVG } from "roughjs/bin/svg"; import { RoughGenerator } from "roughjs/bin/generator";-import { SVG_NS } from "../utils";+import { SVG_NS, distance } from "../utils";+import rough from "roughjs/bin/rough";++function generateElementCanvas(element: ExcalidrawElement) {+  const canvas = document.createElement("canvas");+  var context = canvas.getContext("2d")!;++  const isLinear = /\b(arrow|line)\b/.test(element.type);++  if (isLinear) {+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);+    canvas.width = (distance(x1, x2) + 40) * window.devicePixelRatio;+    canvas.height = (distance(y1, y2) + 40) * window.devicePixelRatio;+    element.canvasOffsetX =+      element.x > x1 ? distance(element.x, x1) * window.devicePixelRatio : 0;+    element.canvasOffsetY =+      element.y > y1 ? distance(element.y, y1) * window.devicePixelRatio : 0;+    context.translate(element.canvasOffsetX, element.canvasOffsetY);+  } else {+    canvas.width = (element.width + 40) * window.devicePixelRatio;+    canvas.height = (element.height + 40) * window.devicePixelRatio;+  }++  context.translate(20, 20);+  context.scale(window.devicePixelRatio, window.devicePixelRatio);++  var rc2 = rough.canvas(canvas);+  context.globalAlpha = element.opacity / 100;+  if (isLinear) {+    (element.shape as Drawable[]).forEach(shape => rc2.draw(shape));+  } else if (isTextElement(element)) {+    const font = context.font;+    context.font = element.font;+    const fillStyle = context.fillStyle;+    context.fillStyle = element.strokeColor;+    // Canvas does not support multiline text by default+    const lines = element.text.replace(/\r\n?/g, "\n").split("\n");+    const lineHeight = element.height / lines.length;+    const offset = element.height - element.baseline;+    for (let i = 0; i < lines.length; i++) {+      context.fillText(lines[i], 0, (i + 1) * lineHeight - offset);+    }+    context.fillStyle = fillStyle;+    context.font = font;+  } else {+    rc2.draw(element.shape as Drawable);

Okay, let's keep it for now then!

vjeux

comment created time in 13 days

Pull request review commentexcalidraw/excalidraw

use a better cloning algorithm

 export function newTextElement(   return textElement; } -export function duplicateElement(element: ReturnType<typeof newElement>) {-  const copy = {-    ...element,-  };-  if ("points" in copy) {-    copy.points = Array.isArray(element.points)-      ? JSON.parse(JSON.stringify(element.points))-      : element.points;+// Simplified deep clone for the purpose of cloning ExcalidrawElement only+//  (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)+//+// Adapted from https://github.com/lukeed/klona+function _duplicateElement(val: any, depth: number = 0) {+  if (val == null || typeof val !== "object") {+    return val;+  }++  let k, tmp;+  const str = Object.prototype.toString.call(val);++  if (str === "[object Object]") {+    tmp =+      typeof val.constructor === "function"+        ? Object.create(Object.getPrototypeOf(val))+        : {};+    for (k in val) {+      if (val.hasOwnProperty(k)) {+        // don't copy top-level shape property, which we want to regenerate+        if (depth === 0 && k === "shape") {+          continue;+        }+        tmp[k] = _duplicateElement(val[k], depth + 1);+      }+    }+    return tmp;   } -  delete copy.shape;+  if (str === "[object Array]") {

Let's use Array.isArray

dwelle

comment created time in 13 days

Pull request review commentexcalidraw/excalidraw

use a better cloning algorithm

 export function newTextElement(   return textElement; } -export function duplicateElement(element: ReturnType<typeof newElement>) {-  const copy = {-    ...element,-  };-  if ("points" in copy) {-    copy.points = Array.isArray(element.points)-      ? JSON.parse(JSON.stringify(element.points))-      : element.points;+// Simplified deep clone for the purpose of cloning ExcalidrawElement only+//  (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)+//+// Adapted from https://github.com/lukeed/klona+function _duplicateElement(val: any, depth: number = 0) {+  if (val == null || typeof val !== "object") {+    return val;+  }++  let k, tmp;+  const str = Object.prototype.toString.call(val);++  if (str === "[object Object]") {+    tmp =+      typeof val.constructor === "function"+        ? Object.create(Object.getPrototypeOf(val))+        : {};

Let's get rid of this, we shouldn't be copying functions that way

dwelle

comment created time in 13 days

issue commentexcalidraw/excalidraw

Cyrillic issues in Virgil font

@dchest, @thorn0: could you check the latest update here https://github.com/excalidraw/excalidraw/pull/764 ? Thanks!

dchest

comment created time in 13 days

PR opened excalidraw/excalidraw

Updates on the font

See discussion in #747

Fixes #747

+0 -0

0 comment

2 changed files

pr created time in 13 days

create barnchvjeux/excalidraw

branch : font_v3

created branch time in 13 days

PR closed excalidraw/excalidraw

Switch code font + format and save 150kb

Suggestion: switch from Cascadia Code ttf (~200kb) to Victor Mono woff2 (~50kb). Accept if you like it, reject if you don't. It's my font, so I may be partial. :)

Relates to #658.

Skjermbilde 2020-02-11 kl  10 36 26 Skjermbilde 2020-02-11 kl  10 36 08

+19 -12

4 comments

10 changed files

rubjo

pr closed time in 14 days

pull request commentexcalidraw/excalidraw

Switch code font + format and save 150kb

Could you send a new PR for the translations? Thanks!

rubjo

comment created time in 14 days

issue commentexcalidraw/excalidraw

Cyrillic issues in Virgil font

Ellinor made updates to the font based on this feedback. Could people that posted here look at the updated font and see if it works? https://easyupload.io/9281t7

dchest

comment created time in 14 days

pull request commentexcalidraw/excalidraw

Switch code font + format and save 150kb

Are the fonts the exact same size? If not, this is going to mess up all the existing scenes as they are going to be slightly misaligned

rubjo

comment created time in 14 days

issue commentexcalidraw/excalidraw

[discussion] Add option to collaborate

Agreed, that would be great!

szympajka

comment created time in 14 days

Pull request review commentexcalidraw/excalidraw

Fast & Furious

 export class App extends React.Component<any, AppState> {    private saveDebounced = debounce(() => {     saveToLocalStorage(-      elements.filter(x => x.type !== "selection"),+      (elements as any)+        .filter((x: any) => x.type !== "selection")

You removed selection from elements right? We can get rid of it now

vjeux

comment created time in 15 days

Pull request review commentexcalidraw/excalidraw

Fast & Furious

 export class App extends React.Component<any, AppState> {    private saveDebounced = debounce(() => {     saveToLocalStorage(-      elements.filter(x => x.type !== "selection"),+      (elements as any)+        .filter((x: any) => x.type !== "selection")+        .map(({ canvas, shape, ...rest }: any) => ({ ...rest })),

I thought someone already got rid of it here, maybe I was wrong

vjeux

comment created time in 15 days

more