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

animatedjs/animated 1742

Declarative Animations Library for React and React Native

atom/github 793

:octocat: Git and GitHub integration for Atom

prettier/prettier-atom 744

An atom package for the prettier formatter.

cerebral/urlon 96

JSON-like object notation that can be embedded in URLs

Evgenus/BigInt 25

Big Integer Library by Leemon

ericclemmons/react-tooling-challenge 13

Competition to improve the tooling landscape for all React users.

prettier/prettier-rpc 13

Single-file build of prettier with JSON-RPC communication

grp/XNAnimation 6

(very) early experiment in animations

3on/scrap.js 5

Scrapping tool for node.js

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

I’ve always wanted option 3: disable on meta key. This is very similar to smart align where it does what you want most times but when it doesn’t, you can try all the meta keys to find which one works.

xixixao

comment created time in 6 hours

pull request commentprettier/prettier

feat: condense graphql docstring into a single line if possible

Seems reasonable to me, but I haven’t worked in the graphql ecosystem much, I don’t know what the customs are. @leeb do you have any thoughts?

joual

comment created time in 10 hours

issue commentexcalidraw/excalidraw

Line Editor shouldn't allow creating rotated two-point lines

That ship has sailed on my end, do whatever you feel is good :)

dai-shi

comment created time in 3 days

issue commentexcalidraw/excalidraw

Updating text inside a shape takes time to reflect in collaboration session

@petehunt I think your change to use deltas is the issue here. It probably doesn't take into account reordering elements, which means that it'll only be synced during the periodic 10s catchup.

prabudhakshin

comment created time in 4 days

issue commentexcalidraw/excalidraw

Self hosting Excalidraw - Umbrella issue

Btw, we don't really need a database. We could use the file system.

kbariotis

comment created time in 6 days

IssuesEvent

issue commentexcalidraw/excalidraw

Add option in export to convert text to outlines in SVG

This would be cool. Do you know how one would implement this in practice?

jelmerdemaat

comment created time in 8 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

I agree with not ending the arrow if it happens to be touching something.

xixixao

comment created time in 9 days

Pull request review commentexcalidraw/excalidraw

calculate coords based on container viewport position

 describe("remove shape in non linear elements", () => {     fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });     fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 }); -    expect(renderScene).toHaveBeenCalledTimes(3);+    expect(renderScene).toHaveBeenCalledTimes(4);

Sadpanda. Do we need to render the scene one more time?

ad1992

comment created time in 9 days

pull request commentexcalidraw/excalidraw

feat: rotating multiple elements

hide bounding box and handles while group rotating

This is smart. It is a bit odd that it gets hidden but way better than the previous behavior. I'm happy shipping with this behavior.

dai-shi

comment created time in 10 days

pull request commentexcalidraw/excalidraw

feat: sharpness

Not for this PR but I'd love if when we use round edges that the last point would also be rounded image

dai-shi

comment created time in 12 days

pull request commentexcalidraw/excalidraw

remap S shortcut to V

Do we want to use S for something else? Can we make both work and change the tooltip to V? And maybe in the future remove the S one.

dwelle

comment created time in 12 days

issue commentexcalidraw/excalidraw

Zoom of no return

Is it possible to detect browser zoom somehow and put a warning or something?

AaronRobinson

comment created time in 13 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

Seems to be very broken with grid mode enabled:

ezgif-2-760353bac35d

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

This is pretty easy, but are we sure we want to do this? I thought about this, and I can see an argument either way. For: the order of creation doesn't matter, so if you want to bind, it's easier. Con: Binding now happens all the time.

I feel like it's weird that the order of operations does matter. When drawing graphs, I often do a sequence of circle, arrow, circle, arrow, circle. But now, if I want to have them all bound correctly, I need to do all the circles first and then all the arrows. That seems like a broken experience to me.

We have command and shift that are left as keybindings (on mac) when dragging to allow for moving without moving all the bound elements with. I feel like that's a reasonable trade-off in case things were accidentally bound.

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

Seems like it would work in this example, but no idea how well it generalizes and what are edge cases.

Also, in order to work, need the x% to not take into account the direction of the arrow and always start from a specific side. Otherwise the left box and the right box will have their points inverted and the arrows will cross when going vertically.

image

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

The two arrows are ~10% and ~70% vertically, but when we take the intersection, they both end up being at 50% horizontally. I wonder what would happen if instead of using the middle of the segment in-between the two intersections, we used the vertical/horizontal ratio.

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

Nice, your fix is working. Looks like the algorithm is a bit weird in that case though. Not really sure how to fix that.

ezgif-2-0b38353789a9

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

I'm not sure what are the consequences, but in this particular example, it's weird that the second end of the arrow doesn't get its position recomputed.

ezgif-2-2530d8465230

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

Do you have plans to bind arrows when you create a shape (circle, rectangle)?

ezgif-2-7ab2828f9c69

xixixao

comment created time in 16 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

Again, can you try this on the branch and see how it feels in practice?

xixixao

comment created time in 17 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

I understand the concern in theory. I’d love to know if in practice it is actually annoying or not

xixixao

comment created time in 17 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

@daishi I thought about this use case but with this exact use case but I couldn’t find a sensible reason where this would be annoying. It’s unclear why you’d want to move just the circle and not the rays. So I don’t see it being annoying in practice.

xixixao

comment created time in 17 days

pull request commentexcalidraw/excalidraw

Only insert text on double click when selection is enabled

Makes sense. Let’s instead cancel the timer if you’re drawing something or the distance between first and second click is too far away

vjeux

comment created time in 17 days

issue commentexcalidraw/excalidraw

Text resize via mouse drag is not in the undo/redo stack

@dai-shi can you take a look?

schrockn

comment created time in 18 days

PR opened excalidraw/excalidraw

Only insert text on double click when selection is enabled

This was an oversight to enable it for all the shapes. I don't believe that we want to be able to insert text on double click when drawing a rectangle for example. And it's definitely a broken experience when doing so for free draw.

Fixes part of #1935

+4 -0

0 comment

1 changed file

pr created time in 18 days

create barnchvjeux/excalidraw

branch : only_double_click_selection

created branch time in 18 days

issue commentexcalidraw/excalidraw

support boolean operations on shapes

@tomhicks this is actually a great suggestion for all actions in excalidraw. I can see how it would be better to be able to mouse over all the things in the left menu and see how they’d look and click to commit. Could you open a separate issue for this?

haan123

comment created time in 18 days

issue commentexcalidraw/excalidraw

Support colors for ranges in text

@kyldvs image

gaearon

comment created time in 18 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

What's missing to ship this? :)

xixixao

comment created time in 19 days

issue commentexcalidraw/excalidraw

Self hosting Excalidraw - Umbrella issue

Right now we have a single instance for both, but they both are really far away from max utilization. The design of both were with scalability in mind. For json, it's just uploading / serving static files. For room, it's just moving opaque binary opaque across all the people in a single room, it doesn't do anything else and doesn't keep any state outside of the list of people in the room.

kbariotis

comment created time in 19 days

issue commentexcalidraw/excalidraw

Link the text inside a shape to the shape

Interesting. I didn't think you'd be able to bind arrows to text fwiw.

pshihn

comment created time in 20 days

issue commentexcalidraw/excalidraw

Link the text inside a shape to the shape

I feel like it achieves the behavior we want: when you move the shape it moves the text around. Now there are some unfortunate side effects:

  • Scaling the shape: now it's just in one axis and not the other. It also scales the text which is unexpected.
  • Changing the text is harder. You need to quadruple click. Inner selection is a bit more weird.

I feel like the downsides are greater than the wins. I feel like once the arrow linking is implemented, we can use the same link in order to move things around and it wouldn't have those drawbacks.

pshihn

comment created time in 20 days

pull request commentexcalidraw/excalidraw

Choosing color before entering text does not update the swatch (Fixes #1897)

@msal4: if you want to help, https://github.com/excalidraw/excalidraw/issues/1904 has concrete things that we'd like help with!

msal4

comment created time in 22 days

issue commentexcalidraw/excalidraw

support boolean operations on shapes

@haan123 hey, since excalidraw was started 6 months ago, no one ever mentioned shape boolean operations as something they would want.

Could you explain some of the use cases where having this feature be useful?

haan123

comment created time in 25 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

@xixixao btw, you're image for the algorithm is way off for one of the arrow (the top left).

image

xixixao

comment created time in 25 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

That's interesting, in my drawings I don't really use arrows for pointing at specific part of the box, just the box itself. Indeed in this use case it wouldn't quite work. That said, the output is reasonable and better than not moving any arrows at all, so while suboptimal it's still better than not binding.

xixixao

comment created time in 25 days

pull request commentexcalidraw/excalidraw

[WIP] Allow binding linear elements to other elements

It's first and foremost a whiteboard app and should retain the feeling of drawing by hand.

I think that this goes with the thinking of mapping physical whiteboard one to one. I strongly believe that we shouldn't and why excalidraw has been successful so far. See this blog post: https://blog.excalidraw.com/rethinking-virtual-whiteboard/

In my experience, if you draw an arrow or a line next to a shape, the expectation is that when you move the shape, you also want the arrow to move. My gut feeling is that this is true most of the time, and therefore is something we should have the default.

Now, there are likely going to be edge cases where it's not the case. I can't foresee them at this point without playing with it. This is why I wanted someone to implement it so we can try it out. If we find out that it's super annoying in practice, let's go back to the drawing board and rethink it through. But I want to be in the mindset of trying it for real.

xixixao

comment created time in 25 days

issue commentexcalidraw/excalidraw

Add ability to add a point on either side of a linear element

@dwelle fyi, what you are talking about is called a Voronoi diagram. Each shaded area corresponds to all the pixels that are closest to a particular point in the 2d space.

xixixao

comment created time in 25 days

push eventexcalidraw/excalidraw

David Luzar

commit sha 7ab0c1aba82cf14b5b5ea41aff0044ae7f4410f5

reload scene on hashchange (#1893) * reload scene on hashchange * tweak isLoading

view details

push time in a month

delete branch excalidraw/excalidraw

delete branch : hashchange

delete time in a month

PR merged excalidraw/excalidraw

reload scene on hashchange

It's annoying that when you paste a scene link to url bar it doesn't reload until 2nd confirm (at least on Win Chrome). This PR fixes that by listening on hashchange.

+13 -0

2 comments

2 changed files

dwelle

pr closed time in a month

pull request commentexcalidraw/excalidraw

reload scene on hashchange

Thank you, it's been annoying me as well for a long time!

dwelle

comment created time in a month

MemberEvent

push eventexcalidraw/excalidraw

Michal Srb

commit sha 5d7020cce6290c32a7ffe9349053caf9284f7ad1

Refactoring in pointer down event handler (#1880) * Refactor: Move context menu touch device handling * Refactor: Move more stuff out of pointer down * Refactor: Move last coords into an object * Refactor: Move scrollbar handling out of pointer down * Refactor: simplify resizing in pointer down * Refactor: further simplify resizing in pointer down * Refactor: clarify clearing selection code * Refactor: move out clearing selection from pointer down * Refactor: further simplify deselection in pointer down

view details

push time in a month

PR merged excalidraw/excalidraw

Refactoring in pointer down event handler

This handler is now at 1000 LOC. I tried to simplify it by pulling things out. I'll follow up with further refactor later.

Reviewing each commit should be easy.

+278 -226

5 comments

3 changed files

xixixao

pr closed time in a month

issue commentexcalidraw/excalidraw

Attached arrows and lines (glue points)

Okay, I spent two hours implementing a prototype for the algorithm above and it looks really good.

https://codesandbox.io/s/quirky-black-3n0q4?file=/src/App.js

ezgif-2-9799ab1e0e03

Note: I cheated, I was lazy and didn't want to compute the correct position based on the gap, so I added an opaque border the size of the gap around the rectangle. It's not perfect but is an okay approximation. We will want to use a correct implementation for production :)

I'd love for someone to implement it for real :)

hmaurer

comment created time in a month

issue commentexcalidraw/excalidraw

Attached arrows and lines (glue points)

I really like the framing you have with the control point. Here's an idea for a specific algorithm to implement it:

  • If you have an arrow that points to a shape
  • Find the two points that the arrow interests with the shape
  • Control point: Center of those two points
  • Gap: Distance between the end of the arrow and the first intersection

If you move the shape around

  • Change the orientation of the arrow to aim at the control point
  • Find the intersection with the shapes
  • Make the distance between the end of the arrow and the first intersection to be the gap.

image

hmaurer

comment created time in a month

issue commentexcalidraw/excalidraw

Sticky notes

You can already double click near the center of a rectangle/oval to write text within in a centered manner.

One thing that I hope we’ll get to is to link shapes together so that if you move the rectangle, it’ll move the text along without needing to select it.

gwww

comment created time in a month

issue commentexcalidraw/excalidraw

Persisted rooms

I like the public/private key idea for handling this.

vjeux

comment created time in a month

issue openedexcalidraw/excalidraw

Persisted rooms

Right now rooms are purely peer to peer and ephemeral. This was the easiest to implement but in practice it is a bit awkward as the links you send "die" after a while. Most collaboration tools those days live forward.

I believe we can create a better user experience within the current system and constraints.

  • Instead of having the client generate a random room key, we ask the server for one. This is going to create an entry in json.excalidraw.com
  • When somebody connects to the room, the server will query json.excalidraw.com and send it to the client. In addition of clients broadcasting the current server. We don't care about conflicts due to the version mechanism.
  • We make the full sync updates visible to the server. When one happens, the server sends the encrypted payload to the json server. We need to ensure that the room server has a secret key that allows doing mutations to the json server. Note: we need to figure out how to avoid overriding with wrong data.

From the end-user experience, nothing changes except that they're able to go back to the room anytime in the future. None of the servers see any user data, only encrypted one. The two things that changed are: 1) the room server knows that some messages are full updates. 2) the room server and json server share a way to know about each others for committing updates.

I'd love thoughts on this setup. cc @petehunt @dwelle @lipis

created time in a month

issue commentexcalidraw/excalidraw

Feature request: Automatically change the color when joining a live-collaboration session

I really like this idea! It’s easy to undo and would make it easy to collaborate :)

On Jul 3, 2020, at 9:37 AM, Warren Seine notifications@github.com wrote:

Following #1868, it would be nice to auto-change the default color to the color of avatar, e.g. if I enter a live-collaboration session and I'm assign a red avatar, my default color would be red and all I'd type would be red instead of black. It wouldn't prevent me from changing the color.

I'm not sure this is a behavior we would always want. It could be a toggle when creating a room.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

warrenseine

comment created time in a month

pull request commentexcalidraw/excalidraw

Add localStorage-based drawing library

@bduffany sounds great. I know that Pete is also short on time, so I'm pretty sure he wouldn't mind if you can take his PR to a shippable state :)

bduffany

comment created time in a month

Pull request review commentexcalidraw/excalidraw

change mobile cursor for touch devices

 const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`); export const isRTL = (text: string) => {   return RE_RTL_CHECK.test(text); };++export const isTouchDevice = () => {

I don’t understand why you need to “track and reset” anything. The system is designed to be stateless, we send all the info about cursor on every update. So if the user suddenly switches from mouse to touch, they’ll just send touch in their new stream of updates and it’ll just work out fine.

kolharsam

comment created time in a month

pull request commentexcalidraw/excalidraw

Add localStorage-based drawing library

This is great! @petehunt, can you figure out how we should move forward between your attempt ( #1787 ) and this one? :)

bduffany

comment created time in a month

Pull request review commentexcalidraw/excalidraw

change mobile cursor for touch devices

 const RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`); export const isRTL = (text: string) => {   return RE_RTL_CHECK.test(text); };++export const isTouchDevice = () => {

We either listen for touchmove or mousemove events. Could you propagate the cursor type from there rather than trying to figure it out based on the window dimensions?

kolharsam

comment created time in a month

issue commentexcalidraw/excalidraw

Feedback:......

Thank you!

seigel

comment created time in a month

issue commentopencollective/opencollective

Scam expense

Merci!

vjeux

comment created time in a month

pull request commentexcalidraw/excalidraw

do not center text when not applicable

omg omg omg omg omg!

dwelle

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

Okay, so looks like beforeprint/afterprint is not doing what it actually says it should. So let's drop the idea and have a print button that does it then.

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Library MVP

I really like the prototype. Some thoughts on the UI:

  • It's very weird that the button doesn't show up until you do some hidden command. I would always show it.
  • Adding something to the library is not very intuitive right now. The way I thought about was to click on the library icon and have a + button there which saves whatever you have currently selected.
  • It's not 100% clear that you can drag and drop to display. I would also enable click which puts the shape in the center of the screen.
  • Would be nice to have key bindings "9" and then "1", "2"... so you can quickly add elements to the screen.
  • You normalize the size of all the elements in the preview. I feel like we should keep it the same size as they would be displayed and have a max-dimension so it doesn't display too big (with some kind of visible hint that it overflows).

I have a lot of questions around how do you share those, how do they work with live collaboration... But they can be addressed later.

petehunt

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

@ikteru correct. So now, your print button in export would just call window.print()

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

Looks like there's a beforeprint/afterprint event. Maybe we can do your hackery in those events so that when people use the default print functionality it'll just work. https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

If you're going the print way, I would call it print rather than pdf, otherwise it's super confusing.

I would love this option too to be honest. I tried to print a scene the other day and it ended up being more difficult than I originally anticipated.

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

If you use your branch and export a pdf, it generates a pdf file. Open the pdf file using a text editor and it'll show you https://github.com/excalidraw/excalidraw/pull/1806#discussion_r443684801

So take the output which is mostly text, inline it inside of the js file and concatenate the two text parts with the binary version of the png file and send it to the save file.

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

@ikteru I'd be fine if you inline the output of the pdf file instead of bringing the entire jspdf project. I believe that it's going to be a small enough addition that it's worth adding to the project.

ikteru

comment created time in a month

issue commentopencollective/opencollective

Scam expense

cc @petehunt who was in this business for a few years. He may have good ideas

vjeux

comment created time in a month

Pull request review commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

 import { AppState } from "../types"; import { t } from "../i18n"; import { DEFAULT_FONT_FAMILY } from "../appState"; +import jsPDF from "jspdf";

I quoted the entire pdf file. I would just do

const pdffile = "giant prelude" + binary of the image + "giant postlude";

ikteru

comment created time in a month

pull request commentexcalidraw/excalidraw

Inline the dropdown icon

Thanks :)

j-f1

comment created time in a month

push eventexcalidraw/excalidraw

Jed Fox

commit sha b6bf011d0d5e49511e13787cc0d5fc1095b80837

Inline the dropdown icon (#1782)

view details

push time in a month

delete branch excalidraw/excalidraw

delete branch : inline-dropdown-arrow

delete time in a month

PR merged excalidraw/excalidraw

Inline the dropdown icon

I ran the SVG through SVGOMG to make it as small (in bytes) as possible without sacrificing image quality.

+1 -1

1 comment

1 changed file

j-f1

pr closed time in a month

issue closedexcalidraw/excalidraw

Inline up-sort.svg

image

It takes a while to load with no good reason.

closed time in a month

vjeux

issue openedopencollective/opencollective

Scam

Someone requested a $1k dollar expense for one of the open source projects I maintain. This is probably a scam to get paid if the owner accidentally accept.

https://opencollective.com/excalidraw/expenses/20710

created time in a month

issue commentexcalidraw/excalidraw

Export drawElementOnCanvas() renderer method

I believe that for the CLI, we would want to export higher level primitives: export to svg, export to png instead of the raw canvas methods.

tommywalkie

comment created time in a month

Pull request review commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

 import { AppState } from "../types"; import { t } from "../i18n"; import { DEFAULT_FONT_FAMILY } from "../appState"; +import jsPDF from "jspdf";

No. It's way better to inline the generated pdf that to lazyload a 100kb library.

ikteru

comment created time in a month

issue openedexcalidraw/excalidraw

Inline up-sort.svg

image

It takes a while to load with no good reason.

created time in a month

pull request commentexcalidraw/excalidraw

grid support (1st iteration)

The grid doesn't seem to be propagated in collaboration mode. Is this something that we want to happen or is the current behavior is the expected one?

dai-shi

comment created time in a month

pull request commentexcalidraw/excalidraw

grid support (1st iteration)

When drawing a circle, the first few pixels are not aligned to the grid and then they are, this makes it feel like there's a glitch when doing it quickly.

dai-shi

comment created time in a month

pull request commentexcalidraw/excalidraw

grid support (1st iteration)

I would like to have a context menu to enable/disable grid and configure the grid size (10, 20, 40), but not sure how to add context sub menus.

You could have cmd+' cycle through 10, 20, 40, none. This way no need for configuration.

dai-shi

comment created time in a month

Pull request review commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

 export const exportCanvas = async (       return;     }   }+  if (type === "pdf") {+    const tempPdf = exportToPdf(elements, appState, {+      exportBackground,+      viewBackgroundColor,+      scale,+      exportPadding,+      shouldAddWatermark,+    });+    await fileSave(new Blob([tempPdf], { type: "application/pdf" }), {

for some reason, it doesn't seem to autocomplete it as .pdf on Chrome for me image

ikteru

comment created time in a month

Pull request review commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

 export const exportToSvg = (   return svgRoot; }; +export const exportToPdf = (+  elements: readonly NonDeletedExcalidrawElement[],+  appState: AppState,+  {+    exportBackground,+    exportPadding = 10,+    scale = 1,+    viewBackgroundColor,+    shouldAddWatermark,+  }: {+    exportBackground: boolean;+    exportPadding?: number;+    scale?: number;+    viewBackgroundColor: string;+    shouldAddWatermark: boolean;+  },+) => {+  let sceneElements = elements;+  if (shouldAddWatermark) {+    const [, , maxX, maxY] = getCommonBounds(elements);+    sceneElements = [...sceneElements, getWatermarkElement(maxX, maxY)];+  }++  var canvas = exportToCanvas(elements, appState, {+    exportBackground,+    viewBackgroundColor,+    exportPadding,+    scale,+    shouldAddWatermark,+  });+  // calculate canvas dimensions+  const [minX, minY, maxX, maxY] = getCommonBounds(sceneElements);+  const width = distance(minX, maxX) + exportPadding * 2;+  const height =+    distance(minY, maxY) ++    exportPadding ++    (shouldAddWatermark ? 0 : exportPadding);++  var imgData = canvas.toDataURL("image/jpeg", 1.0);

jpeg without loss is a terrible compression mechanism. Use png instead

ikteru

comment created time in a month

Pull request review commentexcalidraw/excalidraw

Added PDF export option based on Canvas export

 import { AppState } from "../types"; import { t } from "../i18n"; import { DEFAULT_FONT_FAMILY } from "../appState"; +import jsPDF from "jspdf";

jspdf is huge

290.3
kB
MINIFIED
87.6
kB
MINIFIED + GZIPPED

Since you're only using it to export a static image, could you instead inline the actual pdf it generates?

%PDF-1.3
%ºß¬à
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/MediaBox [0 0 404.92 399.73]
/Contents 4 0 R
>>
endobj
4 0 obj
<<
/Length 53
>>
stream
0.20 w
0 G
q
399.73 0 0 404.92 0.00 -5.19 cm
/I0 Do
Q
endstream
endobj
1 0 obj
<</Type /Pages
/Kids [3 0 R ]
/Count 1
>>
endobj
5 0 obj
<<
/Type /Font
/BaseFont /Helvetica
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
6 0 obj
<<
/Type /Font
/BaseFont /Helvetica-Bold
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
7 0 obj
<<
/Type /Font
/BaseFont /Helvetica-Oblique
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
8 0 obj
<<
/Type /Font
/BaseFont /Helvetica-BoldOblique
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
9 0 obj
<<
/Type /Font
/BaseFont /Courier
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
10 0 obj
<<
/Type /Font
/BaseFont /Courier-Bold
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
11 0 obj
<<
/Type /Font
/BaseFont /Courier-Oblique
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
12 0 obj
<<
/Type /Font
/BaseFont /Courier-BoldOblique
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
13 0 obj
<<
/Type /Font
/BaseFont /Times-Roman
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
14 0 obj
<<
/Type /Font
/BaseFont /Times-Bold
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
15 0 obj
<<
/Type /Font
/BaseFont /Times-Italic
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
16 0 obj
<<
/Type /Font
/BaseFont /Times-BoldItalic
/Subtype /Type1
/Encoding /WinAnsiEncoding
/FirstChar 32
/LastChar 255
>>
endobj
17 0 obj
<<
/Type /Font
/BaseFont /ZapfDingbats
/Subtype /Type1
/FirstChar 32
/LastChar 255
>>
endobj
18 0 obj
<<
/Type /Font
/BaseFont /Symbol
/Subtype /Type1
/FirstChar 32
/LastChar 255
>>
endobj
19 0 obj
<<
/Type /XObject
/Subtype /Image
/Width 799
/Height 809
/ColorSpace /DeviceRGB
/BitsPerComponent 8
/Length 51257
/Filter /DCTDecode
>>
stream
                    ... binary file goes here ...
endstream
endobj
2 0 obj
<<
/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]
/Font <<
/F1 5 0 R
/F2 6 0 R
/F3 7 0 R
/F4 8 0 R
/F5 9 0 R
/F6 10 0 R
/F7 11 0 R
/F8 12 0 R
/F9 13 0 R
/F10 14 0 R
/F11 15 0 R
/F12 16 0 R
/F13 17 0 R
/F14 18 0 R
>>
/XObject <<
/I0 19 0 R
>>
>>
endobj
20 0 obj
<<
/Producer (jsPDF 1.5.3)
/CreationDate (D:20200622092449-07'00')
>>
endobj
21 0 obj
<<
/Type /Catalog
/Pages 1 0 R
/OpenAction [3 0 R /FitH null]
/PageLayout /OneColumn
>>
endobj
xref
0 22
0000000000 65535 f 
0000000227 00000 n 
0000053471 00000 n 
0000000015 00000 n 
0000000124 00000 n 
0000000284 00000 n 
0000000409 00000 n 
0000000539 00000 n 
0000000672 00000 n 
0000000809 00000 n 
0000000932 00000 n 
0000001061 00000 n 
0000001193 00000 n 
0000001329 00000 n 
0000001457 00000 n 
0000001584 00000 n 
0000001713 00000 n 
0000001846 00000 n 
0000001948 00000 n 
0000002044 00000 n 
0000053730 00000 n 
0000053816 00000 n 
trailer
<<
/Size 22
/Root 21 0 R
/Info 20 0 R
/ID [ <142D0971D336356A9C4483D569765BFF> <142D0971D336356A9C4483D569765BFF> ]
>>
startxref
53920
%%EOF
ikteru

comment created time in a month

issue commentexcalidraw/excalidraw

Attached arrows and lines (glue points)

This sounds very reasonable. I’m curious, wouldn’t it be better to make the “bound” mode be the default? And then if you don’t want it then press a modifier.

I can’t think of many use cases where I would want to draw an arrow next to a shape but not attach it to that shape.

hmaurer

comment created time in a month

issue openedexcalidraw/excalidraw

Leading tab messes up text computation

Whitespace is removed from canvas rendering when using leading tabs.

image

image

https://excalidraw.com/#json=5692215863017472,tST-jtHF5qJis2ao5AnACA

created time in a month

issue commentexcalidraw/excalidraw

Add Norwegian Nynorsk (nn-NO) translation

Hey, thanks for reaching out. We're talking through what's the best policy regarding languages as a result of this and other cases we've had in the past. Thanks for be willing to help out and we'll get back to you.

kvasimon

comment created time in 2 months

issue openedexcalidraw/excalidraw

Error message if wrong url

Two different people told me that they were confused because the room they created didn't work. It turns out they used the second part of the url needs to be of exact 22 length or the crypto library throws.

Would be nice to have a visible error message.

created time in 2 months

pull request commentexcalidraw/excalidraw

do not center text when not applicable

This is awesome!

One issue: Multi-line wysiwyg position is very different than canvas selection when zoomed in.

dwelle

comment created time in 2 months

issue commentexcalidraw/excalidraw

Mouse cursor on tablets and touch devices

Agreed, we should likely use a semi transparent filled circle instead of the arrow. Should be easy, we just need to send the fact that it's a touch event in the network.

Ahmed-Ali

comment created time in 2 months

issue commentexcalidraw/excalidraw

Text align not behaving as expected

Right now the alignment only works for multiline. The behavior you described is the expected one for excalidraw but no one actually implemented yet. If you would like to, that would be highly impactful!

coreysimons

comment created time in 2 months

issue commentexcalidraw/excalidraw

iPad + Pencil Support: UX Improvements

@danvenn if you look at Keynote, you are by default in the selection mode and then need to select a shape for drawing it, very similar to excalidraw.

Not saying it's the best but that's the rationale behind excalidraw's behavior.

d11r

comment created time in 2 months

issue openedeendeego/unicalcorn

Different colors for meetings

Right now, the display is a white line for the beginning of a meeting and then a number of lines for each subsequent 15 minutes for the duration of the meeting. This is not very clear to me. I would want to see how it looks if we assign a different color for each meeting and put all the 15 minutes lines of that same color. I have a feeling that it would feel better.

created time in 2 months

issue commentexcalidraw/excalidraw

Can't rotate or resize groups with text

Probably going to be fixed by #1726

eendeego

comment created time in 2 months

issue commentexcalidraw/excalidraw

Feature Request: Follow user's view

This is a good idea to show a list of all the connected users. I’ve always wanted to see who is there.

oliverbenns

comment created time in 2 months

pull request commentexcalidraw/excalidraw

Excalicharts MVP

What I would do is to try and parse the number and ignore everything else. Also in French you use comma for decimals rather than dots.

petehunt

comment created time in 2 months

pull request commentexcalidraw/excalidraw

Excalicharts MVP

In France you put the euro symbol -after- the number for example :)

petehunt

comment created time in 2 months

issue commentexcalidraw/excalidraw

Feature Request: Visually open saved projects

I wonder if there's a way to get mac/windows preview to excalidraw files.

xzab

comment created time in 2 months

issue commentexcalidraw/excalidraw

Feature Request: Visually open saved projects

Agreed!

Do you know if Google Drive (or others) have APIs we can use to start saving files and reading them on-demand?

xzab

comment created time in 2 months

issue commentexcalidraw/excalidraw

Need option to have extra margin for generated image.

For anyone reading, I'm happy to accept a pull request if someone can come up with a heuristic for padding that seem reasonable.

karanganesan

comment created time in 2 months

issue commentexcalidraw/excalidraw

Need option to have extra margin for generated image.

Can you think about reasonable thresholds for when to have smaller or larger paddings based on the situation?

karanganesan

comment created time in 2 months

more