2020-01-15 20:42:02 +05:00
|
|
|
//
|
|
|
|
|
// All icons are imported from https://fontawesome.com/icons?d=gallery
|
|
|
|
|
// Icons are under the license https://fontawesome.com/license
|
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
import React from "react";
|
|
|
|
|
|
2020-03-07 10:20:38 -05:00
|
|
|
const ACTIVE_ELEMENT_COLOR = "#ffa94d"; // OC ORANGE 4
|
|
|
|
|
|
|
|
|
|
const createIcon = (
|
|
|
|
|
d: string | React.ReactNode,
|
|
|
|
|
width = 512,
|
|
|
|
|
height = width,
|
|
|
|
|
) => (
|
2020-02-21 14:34:18 -05:00
|
|
|
<svg
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
focusable="false"
|
|
|
|
|
role="img"
|
2020-03-07 10:20:38 -05:00
|
|
|
viewBox={`0 0 ${width} ${height}`}
|
2020-02-21 14:34:18 -05:00
|
|
|
>
|
2020-03-07 10:20:38 -05:00
|
|
|
{typeof d === "string" ? <path fill="currentColor" d={d} /> : d}
|
2020-01-20 00:56:19 -05:00
|
|
|
</svg>
|
|
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const link = createIcon(
|
|
|
|
|
"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z",
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const save = createIcon(
|
|
|
|
|
"M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z",
|
|
|
|
|
448,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const load = createIcon(
|
|
|
|
|
"M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z",
|
|
|
|
|
576,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const image = createIcon(
|
|
|
|
|
"M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z",
|
|
|
|
|
384,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const clipboard = createIcon(
|
|
|
|
|
"M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z",
|
|
|
|
|
384,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
basic Socket.io implementation of collaborative editing (#879)
* Enable collaborative syncing for elements
* Don't fall back to local storage if using a room, as that is confusing
* Use remote socket server
* Send updates to new users when they join
* ~
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* Enable collaborative syncing for elements
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* prettier
* Fix bug with remote pointers not changing on scroll
* Enable collaborative syncing for elements
* add mouse tracking
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* Add Live button and app state to support tracking collaborator counts
* enable collaboration, rooms, and mouse tracking
* fix syncing bugs and add a button to start syncing mid session
* fix syncing bugs and add a button to start syncing mid session
* Fix bug with remote pointers not changing on scroll
* remove UI for collaboration
* remove link
* clean up lingering unused UI
* set random IV passed per encrypted message, reduce room id length, refactored socket broadcasting API, rename room_id to room, removed throttling of pointer movement
* fix package.json conflict
2020-03-09 08:48:25 -07:00
|
|
|
export const broadcast = createIcon(
|
|
|
|
|
"M150.94 192h33.73c11.01 0 18.61-10.83 14.86-21.18-4.93-13.58-7.55-27.98-7.55-42.82s2.62-29.24 7.55-42.82C203.29 74.83 195.68 64 184.67 64h-33.73c-7.01 0-13.46 4.49-15.41 11.23C130.64 92.21 128 109.88 128 128c0 18.12 2.64 35.79 7.54 52.76 1.94 6.74 8.39 11.24 15.4 11.24zM89.92 23.34C95.56 12.72 87.97 0 75.96 0H40.63c-6.27 0-12.14 3.59-14.74 9.31C9.4 45.54 0 85.65 0 128c0 24.75 3.12 68.33 26.69 118.86 2.62 5.63 8.42 9.14 14.61 9.14h34.84c12.02 0 19.61-12.74 13.95-23.37-49.78-93.32-16.71-178.15-.17-209.29zM614.06 9.29C611.46 3.58 605.6 0 599.33 0h-35.42c-11.98 0-19.66 12.66-14.02 23.25 18.27 34.29 48.42 119.42.28 209.23-5.72 10.68 1.8 23.52 13.91 23.52h35.23c6.27 0 12.13-3.58 14.73-9.29C630.57 210.48 640 170.36 640 128s-9.42-82.48-25.94-118.71zM489.06 64h-33.73c-11.01 0-18.61 10.83-14.86 21.18 4.93 13.58 7.55 27.98 7.55 42.82s-2.62 29.24-7.55 42.82c-3.76 10.35 3.85 21.18 14.86 21.18h33.73c7.02 0 13.46-4.49 15.41-11.24 4.9-16.97 7.53-34.64 7.53-52.76 0-18.12-2.64-35.79-7.54-52.76-1.94-6.75-8.39-11.24-15.4-11.24zm-116.3 100.12c7.05-10.29 11.2-22.71 11.2-36.12 0-35.35-28.63-64-63.96-64-35.32 0-63.96 28.65-63.96 64 0 13.41 4.15 25.83 11.2 36.12l-130.5 313.41c-3.4 8.15.46 17.52 8.61 20.92l29.51 12.31c8.15 3.4 17.52-.46 20.91-8.61L244.96 384h150.07l49.2 118.15c3.4 8.16 12.76 12.01 20.91 8.61l29.51-12.31c8.15-3.4 12-12.77 8.61-20.92l-130.5-313.41zM271.62 320L320 203.81 368.38 320h-96.76z",
|
|
|
|
|
640,
|
|
|
|
|
512,
|
|
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const trash = createIcon(
|
|
|
|
|
"M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z",
|
|
|
|
|
448,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const palette = createIcon(
|
|
|
|
|
"M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
|
2020-01-15 20:42:02 +05:00
|
|
|
);
|
2020-02-15 21:03:32 +01:00
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const exportFile = createIcon(
|
|
|
|
|
"M384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128zM571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-379 28v-32c0-8.8 7.2-16 16-16h176V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V352H208c-8.8 0-16-7.2-16-16z",
|
|
|
|
|
576,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-02-15 21:03:32 +01:00
|
|
|
);
|
|
|
|
|
|
2020-02-21 14:34:18 -05:00
|
|
|
export const zoomIn = createIcon(
|
|
|
|
|
"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
|
|
|
|
|
448,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-02-21 14:34:18 -05:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const zoomOut = createIcon(
|
|
|
|
|
"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z",
|
|
|
|
|
448,
|
2020-03-07 10:20:38 -05:00
|
|
|
512,
|
2020-02-21 14:34:18 -05:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const done = createIcon(
|
|
|
|
|
"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const menu = createIcon(
|
|
|
|
|
"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z",
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const undo = createIcon(
|
|
|
|
|
"M255.545 8c-66.269.119-126.438 26.233-170.86 68.685L48.971 40.971C33.851 25.851 8 36.559 8 57.941V192c0 13.255 10.745 24 24 24h134.059c21.382 0 32.09-25.851 16.971-40.971l-41.75-41.75c30.864-28.899 70.801-44.907 113.23-45.273 92.398-.798 170.283 73.977 169.484 169.442C423.236 348.009 349.816 424 256 424c-41.127 0-79.997-14.678-110.63-41.556-4.743-4.161-11.906-3.908-16.368.553L89.34 422.659c-4.872 4.872-4.631 12.815.482 17.433C133.798 479.813 192.074 504 256 504c136.966 0 247.999-111.033 248-247.998C504.001 119.193 392.354 7.755 255.545 8z",
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const redo = createIcon(
|
|
|
|
|
"M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z",
|
2020-02-15 21:03:32 +01:00
|
|
|
);
|
2020-02-22 21:24:34 +02:00
|
|
|
|
|
|
|
|
// Icon imported form Storybook
|
|
|
|
|
// Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
|
2020-03-07 10:20:38 -05:00
|
|
|
export const resetZoom = createIcon(
|
|
|
|
|
<path
|
|
|
|
|
stroke="currentColor"
|
|
|
|
|
strokeWidth="40"
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
|
|
|
|
|
/>,
|
|
|
|
|
1024,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const bringForward = createIcon(
|
|
|
|
|
<>
|
2020-02-22 21:24:34 +02:00
|
|
|
<path
|
2020-03-07 10:20:38 -05:00
|
|
|
d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
|
|
|
|
|
stroke="#000"
|
|
|
|
|
strokeWidth="2"
|
2020-02-22 21:24:34 +02:00
|
|
|
/>
|
2020-03-07 10:20:38 -05:00
|
|
|
<path
|
|
|
|
|
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
|
|
|
|
|
fill={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
stroke={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
</>,
|
|
|
|
|
24,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const sendBackward = createIcon(
|
|
|
|
|
<>
|
|
|
|
|
<path
|
|
|
|
|
d="M16 3.556C16 2.696 15.303 2 14.444 2H3.556C2.696 2 2 2.697 2 3.556v10.888C2 15.304 2.697 16 3.556 16h10.888c.86 0 1.556-.697 1.556-1.556V3.556z"
|
|
|
|
|
fill={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
stroke={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
|
|
|
|
|
stroke="#000"
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
</>,
|
|
|
|
|
24,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const bringToFront = createIcon(
|
|
|
|
|
<>
|
|
|
|
|
<path
|
|
|
|
|
d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
|
|
|
|
|
stroke="#000"
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
|
|
|
|
|
fill={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
stroke={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
</>,
|
|
|
|
|
24,
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const sendToBack = createIcon(
|
|
|
|
|
<>
|
|
|
|
|
<path
|
|
|
|
|
d="M18 7.333C18 6.597 17.403 6 16.667 6H7.333C6.597 6 6 6.597 6 7.333v9.334C6 17.403 6.597 18 7.333 18h9.334c.736 0 1.333-.597 1.333-1.333V7.333z"
|
|
|
|
|
fill={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
stroke={ACTIVE_ELEMENT_COLOR}
|
|
|
|
|
strokeLinejoin="round"
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
|
|
|
|
|
stroke="#000"
|
|
|
|
|
strokeLinejoin="round"
|
|
|
|
|
strokeWidth="2"
|
|
|
|
|
/>
|
|
|
|
|
</>,
|
|
|
|
|
24,
|
2020-02-22 21:24:34 +02:00
|
|
|
);
|
