mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Initial Vite migration setup
This commit is contained in:
BlackWolfNews
parent
7c58477382
commit
35171070a1
88 changed files with 3341 additions and 3664 deletions
1
packages/common/index.js
Normal file
1
packages/common/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export {}
|
||||
|
|
@ -2,18 +2,18 @@
|
|||
"name": "@excalidraw/common",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"main": "./dist/common.umd.js",
|
||||
"module": "./dist/common.es.js",
|
||||
"types": "./dist/types/common/src/index.d.ts",
|
||||
"main": "./dist/prod/index.js",
|
||||
"module": "./dist/prod/index.js",
|
||||
"dependencies": {
|
||||
"@excalidraw/math": "0.1.0"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/types/common/src/index.d.ts",
|
||||
"development": "./dist/dev/index.js",
|
||||
"production": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
},
|
||||
"./*": {
|
||||
"types": "./../common/dist/types/common/src/*.d.ts"
|
||||
"import": "./dist/common.es.js",
|
||||
"require": "./dist/common.umd.js",
|
||||
"default": "./dist/common.es.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
|
|
@ -50,7 +50,12 @@
|
|||
"bugs": "https://github.com/excalidraw/excalidraw/issues",
|
||||
"repository": "https://github.com/excalidraw/excalidraw",
|
||||
"scripts": {
|
||||
"gen:types": "rm -rf types && tsc",
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
|
||||
"gen:types": "if exist types rmdir /s /q types && tsc",
|
||||
"build:esm": "if exist dist rmdir /s /q dist && node ../../scripts/buildBase.js && yarn gen:types",
|
||||
"build": "vite build",
|
||||
"test": "jest",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
"prettier": "prettier --check .",
|
||||
"prettier:fix": "prettier --write ."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@ import {
|
|||
type LocalPoint,
|
||||
} from "@excalidraw/math";
|
||||
|
||||
console.log(pointFromPair);
|
||||
|
||||
import type { NullableGridSize } from "@excalidraw/excalidraw/types";
|
||||
|
||||
export const getSizeFromPoints = (
|
||||
|
|
|
|||
34
packages/common/vite.config.ts
Normal file
34
packages/common/vite.config.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import path from 'path';
|
||||
|
||||
console.log('Alias set to:', path.resolve(__dirname, '../math/dist/math.es.js'));
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
|
||||
name: 'ExcalidrawCommon',
|
||||
fileName: (format) => `common.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['react', 'react-dom'],
|
||||
output: {
|
||||
globals: {
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM'
|
||||
},
|
||||
format: 'es'
|
||||
},
|
||||
onwarn: (warning, warn) => {
|
||||
if (warning.code === 'CIRCULAR_DEPENDENCY') return;
|
||||
warn(warning);
|
||||
}
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@excalidraw/math': path.resolve(__dirname, '../math/dist/math.es.js')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -2,23 +2,33 @@
|
|||
"name": "@excalidraw/element",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"types": "./dist/types/element/src/index.d.ts",
|
||||
"main": "./dist/prod/index.js",
|
||||
"module": "./dist/prod/index.js",
|
||||
"types": "./dist/types/element/src/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/types/element/src/index.d.ts",
|
||||
"development": "./dist/dev/index.js",
|
||||
"production": "./dist/prod/index.js",
|
||||
"import": "./dist/prod/index.js",
|
||||
"require": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
},
|
||||
"./*": {
|
||||
"types": "./../element/dist/types/element/src/*.d.ts"
|
||||
"./textElement": {
|
||||
"types": "./dist/types/element/src/textElement.d.ts",
|
||||
"import": "./dist/prod/index.js",
|
||||
"require": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
},
|
||||
"./sizeHelpers": {
|
||||
"types": "./dist/types/element/src/sizeHelpers.d.ts",
|
||||
"import": "./dist/prod/index.js",
|
||||
"require": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
|
||||
"description": "Excalidraw elements-related logic",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
|
@ -50,7 +60,7 @@
|
|||
"bugs": "https://github.com/excalidraw/excalidraw/issues",
|
||||
"repository": "https://github.com/excalidraw/excalidraw",
|
||||
"scripts": {
|
||||
"gen:types": "rm -rf types && tsc",
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
|
||||
"gen:types": "if exist types rmdir /s /q types && tsc",
|
||||
"build:esm": "if exist dist rmdir /s /q dist && node ../../scripts/buildBase.cjs && yarn gen:types"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { isInvisiblySmallElement } from "./sizeHelpers";
|
||||
import { isLinearElementType } from "./typeChecks";
|
||||
import * as textElement from "./textElement";
|
||||
|
||||
import type {
|
||||
ExcalidrawElement,
|
||||
|
|
@ -71,3 +72,6 @@ export const clearElementsForExport = (
|
|||
export const clearElementsForLocalStorage = (
|
||||
elements: readonly ExcalidrawElement[],
|
||||
) => _clearElements(elements);
|
||||
|
||||
export { textElement };
|
||||
export * from "./sizeHelpers";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.Avatar {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../css/theme";
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.excalidraw-button {
|
||||
@include outlineButtonStyles;
|
||||
@include styles.outlineButtonStyles;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/theme";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
button.standalone {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.Card {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.Checkbox {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.focus-visible-none {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
$verticalBreakpoint: 861px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.confirm-dialog {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.context-menu {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
|
||||
box-shadow: 0 3px 10px transparentize(styles.$oc-black, 0.8);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
&.dangerous {
|
||||
.context-menu-item__label {
|
||||
color: $oc-red-7;
|
||||
color: styles.$oc-red-7;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
.context-menu-item__label {
|
||||
color: var(--popup-bg-color);
|
||||
}
|
||||
background-color: $oc-red-6;
|
||||
background-color: styles.$oc-red-6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -93,6 +93,6 @@
|
|||
|
||||
.context-menu-item-separator {
|
||||
border: none;
|
||||
border-top: 1px solid $oc-gray-5;
|
||||
border-top: 1px solid styles.$oc-gray-5;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.Dialog {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.ElementLinkDialog {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.ExportDialog__preview {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
|
||||
@keyframes successStatusAnimation {
|
||||
0% {
|
||||
transform: scale(0.35);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.ExcButton {
|
||||
|
|
@ -315,3 +301,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes successStatusAnimation {
|
||||
0% {
|
||||
transform: scale(0.35);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.FixedSideContainer {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.FontPicker__container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.HelpDialog {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
// this is loosely based on the longest hint text
|
||||
$wide-viewport-width: 1000px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.picker {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--ImageExportModal-preview-border: #d6d6d6;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "open-color/open-color";
|
||||
@import "../css/variables.module.scss";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.layer-ui__wrapper.animate {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "open-color/open-color";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.layer-ui__library {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "open-color/open-color";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--container-padding-y: 1.5rem;
|
||||
|
|
@ -6,13 +6,13 @@
|
|||
|
||||
.library-menu-items__no-items {
|
||||
text-align: center;
|
||||
color: var(--color-gray-70);
|
||||
color: $oc-gray-7;
|
||||
line-height: 1.5;
|
||||
font-size: 0.875rem;
|
||||
width: 100%;
|
||||
|
||||
&__label {
|
||||
color: var(--color-primary);
|
||||
color: $oc-blue-7;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
&.theme--dark {
|
||||
.library-menu-items__no-items {
|
||||
color: var(--color-gray-40);
|
||||
color: $oc-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
&__header {
|
||||
color: var(--color-primary);
|
||||
color: $oc-blue-7;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
margin: 0.6em 0.2em;
|
||||
color: var(--text-primary-color);
|
||||
color: $text-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.library-unit {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
&.excalidraw-modal-container {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.OverwriteConfirm {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.PasteChartDialog {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.popover {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.publish-library {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
span {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: $oc-gray-6;
|
||||
color: oc.$oc-gray-6;
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.required {
|
||||
color: $oc-red-8;
|
||||
color: oc.$oc-red-8;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -48,22 +48,22 @@
|
|||
}
|
||||
|
||||
&--confirm.ToolIcon_type_button {
|
||||
background-color: $oc-blue-6;
|
||||
background-color: oc.$oc-blue-6;
|
||||
|
||||
&:hover {
|
||||
background-color: $oc-blue-8;
|
||||
background-color: oc.$oc-blue-8;
|
||||
}
|
||||
}
|
||||
|
||||
&--cancel.ToolIcon_type_button {
|
||||
background-color: $oc-gray-5;
|
||||
background-color: oc.$oc-gray-5;
|
||||
&:hover {
|
||||
background-color: $oc-gray-6;
|
||||
background-color: oc.$oc-gray-6;
|
||||
}
|
||||
}
|
||||
|
||||
.ToolIcon__icon {
|
||||
color: $oc-white;
|
||||
color: oc.$oc-white;
|
||||
.Spinner {
|
||||
--spinner-color: #fff;
|
||||
svg {
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
|
||||
&-warning {
|
||||
color: $oc-red-6;
|
||||
color: oc.$oc-red-6;
|
||||
}
|
||||
|
||||
&-note {
|
||||
|
|
@ -102,14 +102,14 @@
|
|||
top: 0.3rem;
|
||||
left: 0.3rem;
|
||||
font-size: 0.7rem;
|
||||
color: $oc-red-7;
|
||||
color: oc.$oc-red-7;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 0.1rem 0.2rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
&__svg {
|
||||
background-color: $oc-white;
|
||||
background-color: oc.$oc-white;
|
||||
padding: 0.3rem;
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
}
|
||||
|
||||
.ToolIcon__icon {
|
||||
background-color: $oc-white;
|
||||
background-color: oc.$oc-white;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0 0.5rem;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
}
|
||||
.required,
|
||||
.error {
|
||||
color: $oc-red-8;
|
||||
color: oc.$oc-red-8;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin: 0.2rem;
|
||||
|
|
@ -152,16 +152,16 @@
|
|||
margin: 0;
|
||||
}
|
||||
.ToolIcon__icon {
|
||||
background-color: $oc-red-6;
|
||||
background-color: oc.$oc-red-6;
|
||||
&:hover {
|
||||
background-color: $oc-red-7;
|
||||
background-color: oc.$oc-red-7;
|
||||
}
|
||||
&:active {
|
||||
background-color: $oc-red-8;
|
||||
background-color: oc.$oc-red-8;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: $oc-white;
|
||||
color: oc.$oc-white;
|
||||
padding: 0.26rem;
|
||||
border-radius: 0.3em;
|
||||
width: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--RadioGroup-background: var(--island-bg-color);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--slider-thumb-size: 16px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.SVGLayer {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "open-color/open-color";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.layer-ui__search {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.ShareableLinkDialog {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "open-color/open-color";
|
||||
@import "../../css/variables.module.scss";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.sidebar {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.sidebar-trigger {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import "open-color/open-color.scss";
|
||||
|
||||
$duration: 1.6s;
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.Spinner {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--Switch-disabled-color: var(--color-border-outline);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
$verticalBreakpoint: 861px;
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ $verticalBreakpoint: 861px;
|
|||
height: 2.5rem;
|
||||
|
||||
font-size: 12px;
|
||||
color: $oc-white;
|
||||
color: oc.$oc-white;
|
||||
background-color: var(--color-primary);
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--ExcTextField--color: var(--color-on-surface);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.TextInput {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.Toast {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "open-color/open-color.scss";
|
||||
@import "../css/variables.module.scss";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.ToolIcon {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "open-color/open-color.scss";
|
||||
@import "../css/variables.module.scss";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.App-toolbar {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
// container in body where the actual tooltip is appended to
|
||||
.excalidraw-tooltip {
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
pointer-events: none;
|
||||
word-wrap: break-word;
|
||||
|
||||
background: $oc-black;
|
||||
background: oc.$oc-black;
|
||||
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $oc-white;
|
||||
color: oc.$oc-white;
|
||||
|
||||
display: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../css/variables.module.scss";
|
||||
@use "../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
--avatar-size: 1.75rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw {
|
||||
.dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as *;
|
||||
|
||||
.excalidraw-hyperlinkContainer {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../css/variables.module.scss";
|
||||
@use "../../css/styles" as styles;
|
||||
|
||||
.excalidraw {
|
||||
.collab-button {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "open-color/open-color.scss";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@use "./styles" as *;
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
@import "./variables.module.scss";
|
||||
@import "./theme";
|
||||
@use "open-color/open-color.scss" as oc;
|
||||
@forward "open-color/open-color.scss" as oc-* with (
|
||||
$oc-gray-2: oc.$oc-gray-2,
|
||||
$oc-red-1: oc.$oc-red-1,
|
||||
$oc-red-9: oc.$oc-red-9
|
||||
);
|
||||
@forward "./_variables.scss" as *;
|
||||
|
||||
:root {
|
||||
--zIndex-canvas: 1;
|
||||
|
|
@ -201,7 +206,7 @@ body.excalidraw-cursor-resize * {
|
|||
|
||||
.divider {
|
||||
width: 1px;
|
||||
background-color: $oc-gray-2;
|
||||
background-color: oc.$oc-gray-2;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +232,7 @@ body.excalidraw-cursor-resize * {
|
|||
label,
|
||||
button,
|
||||
.zIndexButton {
|
||||
@include outlineButtonIconStyles;
|
||||
@include variables.outlineButtonIconStyles;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -469,8 +474,8 @@ body.excalidraw-cursor-resize * {
|
|||
}
|
||||
|
||||
.help-icon {
|
||||
@include outlineButtonStyles;
|
||||
@include filledButtonOnCanvas;
|
||||
@include variables.outlineButtonStyles;
|
||||
@include variables.filledButtonOnCanvas;
|
||||
|
||||
width: var(--lg-button-size);
|
||||
height: var(--lg-button-size);
|
||||
|
|
@ -503,7 +508,7 @@ body.excalidraw-cursor-resize * {
|
|||
margin-inline-start: 0.6em;
|
||||
}
|
||||
|
||||
@include isMobile {
|
||||
@include variables.isMobile {
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -652,7 +657,7 @@ body.excalidraw-cursor-resize * {
|
|||
}
|
||||
|
||||
.main-menu-trigger {
|
||||
@include filledButtonOnCanvas;
|
||||
@include variables.filledButtonOnCanvas;
|
||||
}
|
||||
|
||||
.App-mobile-menu,
|
||||
|
|
@ -705,8 +710,8 @@ body.excalidraw-cursor-resize * {
|
|||
justify-content: center;
|
||||
|
||||
padding: 40px;
|
||||
background-color: $oc-red-1;
|
||||
border: 3px solid $oc-red-9;
|
||||
background-color: oc.$oc-red-1;
|
||||
border: 3px solid oc.$oc-red-9;
|
||||
}
|
||||
|
||||
.ErrorSplash-paragraph {
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
@import "open-color/open-color.scss";
|
||||
@import "./variables.module.scss";
|
||||
@use "sass:color";
|
||||
@use "open-color/open-color.scss";
|
||||
@use "variables.module.scss";
|
||||
|
||||
.excalidraw {
|
||||
--theme-filter: none;
|
||||
--button-destructive-bg-color: #{$oc-red-1};
|
||||
--button-destructive-color: #{$oc-red-9};
|
||||
--button-gray-1: #{$oc-gray-2};
|
||||
--button-gray-2: #{$oc-gray-4};
|
||||
--button-gray-3: #{$oc-gray-5};
|
||||
--button-special-active-bg-color: #{$oc-green-0};
|
||||
--button-destructive-bg-color: #{open-color.$oc-red-1};
|
||||
--button-destructive-color: #{open-color.$oc-red-9};
|
||||
--button-gray-1: #{open-color.$oc-gray-2};
|
||||
--button-gray-2: #{open-color.$oc-gray-4};
|
||||
--button-gray-3: #{open-color.$oc-gray-5};
|
||||
--button-special-active-bg-color: #{open-color.$oc-green-0};
|
||||
--dialog-border-color: var(--color-gray-20);
|
||||
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
|
||||
--focus-highlight-color: #{$oc-blue-2};
|
||||
--focus-highlight-color: #{open-color.$oc-blue-2};
|
||||
--icon-fill-color: var(--color-on-surface);
|
||||
--icon-green-fill-color: #{$oc-green-9};
|
||||
--default-bg-color: #{$oc-white};
|
||||
--input-bg-color: #{$oc-white};
|
||||
--input-border-color: #{$oc-gray-4};
|
||||
--input-hover-bg-color: #{$oc-gray-1};
|
||||
--input-label-color: #{$oc-gray-7};
|
||||
--icon-green-fill-color: #{open-color.$oc-green-9};
|
||||
--default-bg-color: #{open-color.$oc-white};
|
||||
--input-bg-color: #{open-color.$oc-white};
|
||||
--input-border-color: #{open-color.$oc-gray-4};
|
||||
--input-hover-bg-color: #{open-color.$oc-gray-1};
|
||||
--input-label-color: #{open-color.$oc-gray-7};
|
||||
--island-bg-color: #ffffff;
|
||||
--keybinding-color: var(--color-gray-40);
|
||||
--link-color: #{$oc-blue-7};
|
||||
--overlay-bg-color: #{transparentize($oc-white, 0.12)};
|
||||
--link-color: #{open-color.$oc-blue-7};
|
||||
--overlay-bg-color: #{color.adjust(open-color.$oc-white, $alpha: -0.12)};
|
||||
--popup-bg-color: var(--island-bg-color);
|
||||
--popup-secondary-bg-color: #{$oc-gray-1};
|
||||
--popup-text-color: #{$oc-black};
|
||||
--popup-text-inverted-color: #{$oc-white};
|
||||
--select-highlight-color: #{$oc-blue-5};
|
||||
--popup-secondary-bg-color: #{open-color.$oc-gray-1};
|
||||
--popup-text-color: #{open-color.$oc-black};
|
||||
--popup-text-inverted-color: #{open-color.$oc-white};
|
||||
--select-highlight-color: #{open-color.$oc-blue-5};
|
||||
--shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
|
||||
0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
|
||||
0px 7px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
|
||||
--color-selection: #6965db;
|
||||
|
||||
--color-icon-white: #{$oc-white};
|
||||
--color-icon-white: #{open-color.$oc-white};
|
||||
|
||||
--color-primary: #6965db;
|
||||
--color-primary-darker: #5b57d1;
|
||||
|
|
@ -172,7 +173,7 @@
|
|||
&.theme--dark {
|
||||
--theme-filter: invert(93%) hue-rotate(180deg);
|
||||
--button-destructive-bg-color: #5a0000;
|
||||
--button-destructive-color: #{$oc-red-3};
|
||||
--button-destructive-color: #{open-color.$oc-red-3};
|
||||
|
||||
--button-gray-1: #363636;
|
||||
--button-gray-2: #272727;
|
||||
|
|
@ -180,21 +181,21 @@
|
|||
--button-special-active-bg-color: #204624;
|
||||
--dialog-border-color: var(--color-gray-80);
|
||||
--dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
|
||||
--focus-highlight-color: #{$oc-blue-6};
|
||||
--icon-green-fill-color: #{$oc-green-4};
|
||||
--focus-highlight-color: #{open-color.$oc-blue-6};
|
||||
--icon-green-fill-color: #{open-color.$oc-green-4};
|
||||
--default-bg-color: #121212;
|
||||
--input-bg-color: #121212;
|
||||
--input-border-color: #2e2e2e;
|
||||
--input-hover-bg-color: #181818;
|
||||
--input-label-color: #{$oc-gray-2};
|
||||
--input-label-color: #{open-color.$oc-gray-2};
|
||||
--island-bg-color: #232329;
|
||||
--keybinding-color: var(--color-gray-60);
|
||||
--link-color: #{$oc-blue-4};
|
||||
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
|
||||
--link-color: #{open-color.$oc-blue-4};
|
||||
--overlay-bg-color: #{color.adjust(open-color.$oc-gray-8, $alpha: -0.88)};
|
||||
--popup-secondary-bg-color: #222;
|
||||
--popup-text-color: #{$oc-gray-4};
|
||||
--popup-text-color: #{open-color.$oc-gray-4};
|
||||
--popup-text-inverted-color: #2c2c2c;
|
||||
--select-highlight-color: #{$oc-blue-4};
|
||||
--select-highlight-color: #{open-color.$oc-blue-4};
|
||||
--shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
|
||||
0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
|
||||
0px 7px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
|
|
@ -207,8 +208,8 @@
|
|||
0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
|
||||
--avatar-border-color: var(--color-gray-85);
|
||||
|
||||
--scrollbar-thumb: #{$oc-gray-8};
|
||||
--scrollbar-thumb-hover: #{$oc-gray-7};
|
||||
--scrollbar-thumb: #{open-color.$oc-gray-8};
|
||||
--scrollbar-thumb-hover: #{open-color.$oc-gray-7};
|
||||
|
||||
--color-slider-track: hsl(244, 23%, 39%);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,190 +1,79 @@
|
|||
@import "open-color/open-color.scss";
|
||||
|
||||
@mixin isMobile() {
|
||||
@at-root .excalidraw--mobile#{&} {
|
||||
@content;
|
||||
}
|
||||
:root {
|
||||
--color-primary: #6965db;
|
||||
--color-primary-darker: #5653c0;
|
||||
--color-primary-darkest: #4c44b4;
|
||||
--color-primary-hover: #7a75d3;
|
||||
--color-primary-light: #8c7cd5;
|
||||
--color-primary-lighter: #a29be8;
|
||||
--color-primary-lightest: #c3c0f9;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-on-primary-container: #000000;
|
||||
--color-surface-lowest: #f7f7f7;
|
||||
--color-surface-low: #f2f2f2;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-high: #f9f9f9;
|
||||
--color-surface-highest: #f7f7f7;
|
||||
--color-surface-primary-container: #4c44b4;
|
||||
--color-disabled: #c3c0f9;
|
||||
--color-gray-90: #333333;
|
||||
--color-on-surface: #333333;
|
||||
--color-on-surface-high: #333333;
|
||||
--color-on-surface-highest: #333333;
|
||||
--color-on-surface-lowest: #333333;
|
||||
--color-on-surface-low: #333333;
|
||||
--color-on-surface-inverse: #ffffff;
|
||||
--color-on-surface-inverse-high: #ffffff;
|
||||
--color-on-surface-inverse-highest: #ffffff;
|
||||
--color-on-surface-inverse-lowest: #ffffff;
|
||||
--color-on-surface-inverse-low: #ffffff;
|
||||
--color-on-surface-inverse-disabled: #c3c0f9;
|
||||
--color-on-surface-disabled: #c3c0f9;
|
||||
--color-on-surface-high-disabled: #c3c0f9;
|
||||
--color-on-surface-highest-disabled: #c3c0f9;
|
||||
--color-on-surface-lowest-disabled: #c3c0f9;
|
||||
--color-on-surface-low-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-high-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-highest-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-lowest-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-low-disabled: #c3c0f9;
|
||||
--color-on-surface-disabled: #c3c0f9;
|
||||
--color-on-surface-high-disabled: #c3c0f9;
|
||||
--color-on-surface-highest-disabled: #c3c0f9;
|
||||
--color-on-surface-lowest-disabled: #c3c0f9;
|
||||
--color-on-surface-low-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-high-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-highest-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-lowest-disabled: #c3c0f9;
|
||||
--color-on-surface-inverse-low-disabled: #c3c0f9;
|
||||
--button-width: 2.5rem;
|
||||
--button-height: 2.5rem;
|
||||
--default-button-size: 2.5rem;
|
||||
--default-icon-size: 1.5rem;
|
||||
--lg-icon-size: 2rem;
|
||||
--avatar-size: 1.5rem;
|
||||
--border-radius-lg: 0.5rem;
|
||||
--island-bg-color: #ffffff;
|
||||
--text-primary-color: #333333;
|
||||
--button-bg: #ffffff;
|
||||
--button-color: #333333;
|
||||
--button-border: #cccccc;
|
||||
--button-hover-bg: #f7f7f7;
|
||||
--button-hover-color: #333333;
|
||||
--button-hover-border: #cccccc;
|
||||
--button-active-bg: #f2f2f2;
|
||||
--button-active-color: #333333;
|
||||
--button-active-border: #cccccc;
|
||||
--button-selected-bg: #4c44b4;
|
||||
--button-selected-color: #ffffff;
|
||||
--button-selected-border: #4c44b4;
|
||||
--button-selected-hover-bg: #5653c0;
|
||||
--button-selected-hover-color: #ffffff;
|
||||
--button-selected-hover-border: #5653c0;
|
||||
--ui-font: Arial, sans-serif;
|
||||
}
|
||||
|
||||
@mixin toolbarButtonColorStates {
|
||||
&.fillable {
|
||||
.ToolIcon_type_radio,
|
||||
.ToolIcon_type_checkbox {
|
||||
&:checked + .ToolIcon__icon {
|
||||
--icon-fill-color: var(--color-on-primary-container);
|
||||
|
||||
svg {
|
||||
fill: var(--icon-fill-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ToolIcon_type_radio,
|
||||
.ToolIcon_type_checkbox {
|
||||
&:checked + .ToolIcon__icon {
|
||||
background: var(--color-surface-primary-container);
|
||||
--keybinding-color: var(--color-on-primary-container);
|
||||
|
||||
svg {
|
||||
color: var(--color-on-primary-container);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ToolIcon__keybinding {
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.ToolIcon__icon {
|
||||
&:hover {
|
||||
background: var(--button-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--button-hover-bg);
|
||||
border: 1px solid var(--button-active-border);
|
||||
|
||||
svg {
|
||||
color: var(--color-on-primary-container);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-disabled="true"] {
|
||||
background: initial;
|
||||
border: none;
|
||||
|
||||
svg {
|
||||
color: var(--color-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outlineButtonStyles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.625rem;
|
||||
width: var(--button-width, var(--default-button-size));
|
||||
height: var(--button-height, var(--default-button-size));
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--button-border, var(--default-border-color));
|
||||
border-radius: var(--border-radius-lg);
|
||||
cursor: pointer;
|
||||
background-color: var(--button-bg, var(--island-bg-color));
|
||||
color: var(--button-color, var(--color-on-surface));
|
||||
font-family: var(--ui-font);
|
||||
|
||||
svg {
|
||||
width: var(--button-width, var(--lg-icon-size));
|
||||
height: var(--button-height, var(--lg-icon-size));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-hover-bg, var(--island-bg-color));
|
||||
border-color: var(
|
||||
--button-hover-border,
|
||||
var(--button-border, var(--default-border-color))
|
||||
);
|
||||
color: var(
|
||||
--button-hover-color,
|
||||
var(--button-color, var(--text-primary-color, inherit))
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-active-bg, var(--island-bg-color));
|
||||
border-color: var(--button-active-border, var(--color-primary-darkest));
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(
|
||||
--button-selected-bg,
|
||||
var(--color-surface-primary-container)
|
||||
);
|
||||
border-color: var(
|
||||
--button-selected-border,
|
||||
var(--color-surface-primary-container)
|
||||
);
|
||||
|
||||
&:hover {
|
||||
background-color: var(
|
||||
--button-selected-hover-bg,
|
||||
var(--color-surface-primary-container)
|
||||
);
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--button-color, var(--color-on-primary-container));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outlineButtonIconStyles {
|
||||
@include outlineButtonStyles;
|
||||
padding: 0;
|
||||
|
||||
svg {
|
||||
width: var(--default-icon-size);
|
||||
height: var(--default-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatarStyles {
|
||||
width: var(--avatar-size, 1.5rem);
|
||||
height: var(--avatar-size, 1.5rem);
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
outline-offset: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--color-gray-90);
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&.is-followed::before {
|
||||
border-color: var(--color-primary-hover);
|
||||
box-shadow: 0 0 0 1px var(--color-primary-hover);
|
||||
}
|
||||
&.is-current-user {
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filledButtonOnCanvas {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px var(--color-surface-lowest);
|
||||
background-color: var(--color-surface-low);
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0 1px var(--color-brand-active);
|
||||
}
|
||||
}
|
||||
// Theme variables
|
||||
$theme-filter: none !default;
|
||||
$theme-filter-darker: none !default;
|
||||
|
|
|
|||
|
|
@ -87,8 +87,8 @@
|
|||
"image-blob-reduce": "3.0.1",
|
||||
"jotai": "2.11.0",
|
||||
"jotai-scope": "0.7.2",
|
||||
"lodash.throttle": "4.1.1",
|
||||
"lodash.debounce": "4.0.8",
|
||||
"lodash.throttle": "4.1.1",
|
||||
"nanoid": "3.3.3",
|
||||
"open-color": "1.9.1",
|
||||
"pako": "2.0.3",
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
"points-on-curve": "1.0.1",
|
||||
"pwacompat": "2.0.17",
|
||||
"roughjs": "4.6.4",
|
||||
"sass": "1.51.0",
|
||||
"sass": "^1.71.1",
|
||||
"tunnel-rat": "0.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -116,20 +116,24 @@
|
|||
"autoprefixer": "10.4.7",
|
||||
"cross-env": "7.0.3",
|
||||
"dotenv": "16.0.1",
|
||||
"esbuild": "0.19.10",
|
||||
"esbuild-sass-plugin": "2.16.0",
|
||||
"esbuild": "0.25.2",
|
||||
"esbuild-sass-plugin": "3.3.1",
|
||||
"eslint-plugin-react": "7.32.2",
|
||||
"fake-indexeddb": "3.1.7",
|
||||
"fonteditor-core": "2.4.1",
|
||||
"harfbuzzjs": "0.3.6",
|
||||
"jest-diff": "29.7.0",
|
||||
"sass-embedded": "1.86.3",
|
||||
"typescript": "4.9.4"
|
||||
},
|
||||
"repository": "https://github.com/excalidraw/excalidraw",
|
||||
"bugs": "https://github.com/excalidraw/excalidraw/issues",
|
||||
"homepage": "https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw",
|
||||
"scripts": {
|
||||
"gen:types": "rm -rf types && tsc",
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types"
|
||||
"gen:types": "if exist types rmdir /s /q types && tsc",
|
||||
"build:esm": "if exist dist rmdir /s /q dist && node ../../scripts/buildPackage.mjs && yarn gen:types",
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"preview": "vite preview"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
{
|
||||
"extends": "../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/types"
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"incremental": false
|
||||
},
|
||||
"include": ["**/*"],
|
||||
"exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
|
||||
|
|
|
|||
22
packages/excalidraw/vite.config.ts
Normal file
22
packages/excalidraw/vite.config.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: fileURLToPath(new URL('./index.tsx', import.meta.url)),
|
||||
name: 'Excalidraw',
|
||||
fileName: (format) => `excalidraw.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['react', 'react-dom'],
|
||||
output: {
|
||||
globals: {
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -3,14 +3,14 @@
|
|||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"types": "./dist/types/math/src/index.d.ts",
|
||||
"main": "./dist/prod/index.js",
|
||||
"module": "./dist/prod/index.js",
|
||||
"main": "./dist/math.umd.js",
|
||||
"module": "./dist/math.es.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/types/math/src/index.d.ts",
|
||||
"development": "./dist/dev/index.js",
|
||||
"production": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
"development": "./dist/math.es.js",
|
||||
"production": "./dist/math.umd.js",
|
||||
"default": "./dist/math.umd.js"
|
||||
},
|
||||
"./*": {
|
||||
"types": "./../math/dist/types/math/src/*.d.ts"
|
||||
|
|
@ -55,6 +55,11 @@
|
|||
"repository": "https://github.com/excalidraw/excalidraw",
|
||||
"scripts": {
|
||||
"gen:types": "rm -rf types && tsc",
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types",
|
||||
"build": "vite build",
|
||||
"test": "jest",
|
||||
"lint": "eslint . --ext .ts,.tsx",
|
||||
"prettier": "prettier --check .",
|
||||
"prettier:fix": "prettier --write ."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
packages/math/vite.config.ts
Normal file
27
packages/math/vite.config.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
lib: {
|
||||
entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
|
||||
name: 'ExcalidrawMath',
|
||||
fileName: () => 'index.js', // Changed to match package.json
|
||||
},
|
||||
outDir: 'dist/prod', // Added to match package.json
|
||||
rollupOptions: {
|
||||
external: ['react', 'react-dom'],
|
||||
output: {
|
||||
globals: {
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM'
|
||||
},
|
||||
format: 'es' // Still produces ESM; UMD needs separate config if required
|
||||
},
|
||||
onwarn: (warning, warn) => {
|
||||
if (warning.code === 'CIRCULAR_DEPENDENCY') return;
|
||||
warn(warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -8,12 +8,15 @@
|
|||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/types/utils/src/index.d.ts",
|
||||
"development": "./dist/dev/index.js",
|
||||
"production": "./dist/prod/index.js",
|
||||
"import": "./dist/prod/index.js",
|
||||
"require": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
},
|
||||
"./*": {
|
||||
"types": "./../utils/dist/types/utils/src/*.d.ts"
|
||||
"./export": {
|
||||
"types": "./dist/types/utils/src/export.d.ts",
|
||||
"import": "./dist/prod/index.js",
|
||||
"require": "./dist/prod/index.js",
|
||||
"default": "./dist/prod/index.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
|
|
@ -61,6 +64,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "7.0.3",
|
||||
"esbuild": "0.25.2",
|
||||
"esbuild-sass-plugin": "3.3.1",
|
||||
"fonteditor-core": "2.4.0",
|
||||
"typescript": "4.9.4",
|
||||
"wawoff2": "2.0.1",
|
||||
|
|
@ -69,7 +74,7 @@
|
|||
"bugs": "https://github.com/excalidraw/excalidraw/issues",
|
||||
"repository": "https://github.com/excalidraw/excalidraw",
|
||||
"scripts": {
|
||||
"gen:types": "rm -rf types && tsc",
|
||||
"build:esm": "rm -rf dist && node ../../scripts/buildUtils.js && yarn gen:types"
|
||||
"gen:types": "if exist types rmdir /s /q types && tsc",
|
||||
"build:esm": "if exist dist rmdir /s /q dist && node ../../scripts/buildUtils.mjs && yarn gen:types"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,6 @@ export * from "./export";
|
|||
export * from "./withinBounds";
|
||||
export * from "./bbox";
|
||||
export { getCommonBounds } from "@excalidraw/element/bounds";
|
||||
export * from "./collision";
|
||||
export * from "./shape";
|
||||
export * from "./test-utils";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue