Merge branch 'master' of https://github.com/toeverything/AFFiNE into feature/page-tree-code-style

This commit is contained in:
biqing.hu 2022-08-06 18:30:55 +08:00
commit 05fce1a61e
145 changed files with 3653 additions and 1836 deletions
.all-contributorsrc
.github
README.md
apps
libs/components

View File

@ -1,5 +1,5 @@
{
"projectName": "Ligo-Virgo",
"projectName": "toeverything",
"projectOwner": "toeverything",
"repoType": "github",
"repoHost": "https://github.com",
@ -25,7 +25,7 @@
"login": "tzhangchi",
"name": "Chi Zhang",
"avatar_url": "https://avatars.githubusercontent.com/u/5910926?v=4",
"profile": "https://zhangchi.blog.csdn.net/",
"profile": "http://zhangchi.page/",
"contributions": [
"code",
"doc"
@ -33,7 +33,7 @@
},
{
"login": "alt1o",
"name": "alt1o",
"name": "wang xinglong",
"avatar_url": "https://avatars.githubusercontent.com/u/21084335?v=4",
"profile": "https://github.com/alt1o",
"contributions": [
@ -43,7 +43,7 @@
},
{
"login": "DiamondThree",
"name": "Diamond",
"name": "DiamondThree",
"avatar_url": "https://avatars.githubusercontent.com/u/24630517?v=4",
"profile": "https://github.com/DiamondThree",
"contributions": [
@ -63,7 +63,7 @@
},
{
"login": "zuoxiaodong0815",
"name": "zuoxiaodong0815",
"name": "xiaodong zuo",
"avatar_url": "https://avatars.githubusercontent.com/u/53252747?v=4",
"profile": "https://github.com/zuoxiaodong0815",
"contributions": [
@ -73,7 +73,7 @@
},
{
"login": "SaikaSakura",
"name": "SaikaSakura",
"name": "MingLIang Wang",
"avatar_url": "https://avatars.githubusercontent.com/u/11530942?v=4",
"profile": "https://github.com/SaikaSakura",
"contributions": [
@ -92,10 +92,10 @@
]
},
{
"login": "tuluffy",
"name": "tuluffy",
"avatar_url": "https://avatars.githubusercontent.com/u/26808339?v=4",
"profile": "https://tuluffy.github.io/angular.github.io/",
"login": "mitsuhatu",
"name": "mitsuhatu",
"avatar_url": "https://avatars.githubusercontent.com/u/110213079?v=4",
"profile": "https://github.com/mitsuhatu",
"contributions": [
"code",
"doc"

28
.github/deployment/Caddyfile-affine vendored Normal file
View File

@ -0,0 +1,28 @@
:3000 {
root /* ./dist
file_server {
precompressed br
}
encode {
zstd
gzip 9
}
@notStatic {
not path /*.css
not path /*.js
not path /*.png
not path /*.jpg
not path /*.svg
not path /*.ttf
not path /*.eot
not path /*.woff
not path /*.woff2
}
handle @notStatic {
try_files {path} /index.html
}
}

21
.github/deployment/Dockerfile-affine vendored Normal file
View File

@ -0,0 +1,21 @@
FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN apk add g++ make python3 git libpng-dev
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local
FROM node:16-alpine as relocate
WORKDIR /app
COPY --from=builder /app/dist/apps/ligo-virgo ./dist
COPY --from=builder /app/.github/deployment/Caddyfile-affine ./Caddyfile
RUN rm ./dist/*.txt
# =============
# AFFiNE image
# =============
FROM caddy:2.4.6-alpine as AFFiNE
WORKDIR /app
COPY --from=relocate /app .
EXPOSE 3000
CMD ["caddy", "run"]

View File

@ -1,7 +1,7 @@
FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN apk add g++ make python3 git
RUN apk add g++ make python3 git libpng-dev
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:keck
FROM node:16-alpine as node_modules

View File

@ -1,13 +1,13 @@
FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN apk add g++ make python3 git
RUN apk add g++ make python3 git libpng-dev
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build
FROM node:16-alpine as relocate
WORKDIR /app
COPY --from=builder /app/dist/apps/ligo-virgo ./dist
COPY --from=builder /app/Caddyfile ./
COPY --from=builder /app/.github/deployment/Caddyfile-lisa ./Caddyfile
RUN rm ./dist/*.txt
# =============

View File

@ -1,13 +1,13 @@
FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN apk add g++ make python3 git
RUN apk add g++ make python3 git libpng-dev
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:venus
FROM node:16-alpine as relocate
WORKDIR /app
COPY --from=builder /app/dist/apps/venus ./dist
COPY --from=builder /app/Caddyfile-venus ./Caddyfile
COPY --from=builder /app/.github/deployment/Caddyfile-venus ./Caddyfile
RUN rm ./dist/*.txt
# =============

57
.github/workflows/affine.yml vendored Normal file
View File

@ -0,0 +1,57 @@
name: Build AFFiNE-Local
on:
push:
branches: [master]
pull_request:
branches: [master]
# Cancels all previous workflow runs for pull requests that have not completed.
# See https://docs.github.com/en/actions/using-jobs/using-concurrency
concurrency:
# The concurrency group contains the workflow name and the branch name for
# pull requests or the commit hash for any other events.
group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
cancel-in-progress: true
env:
REGISTRY: ghcr.io
NAMESPACE: toeverything
AFFINE_IMAGE_NAME: AFFiNE
IMAGE_TAG_LATEST: nightly-latest
jobs:
ligo-virgo:
runs-on: self-hosted
environment: development
permissions:
contents: read
packages: write
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Log in to the Container registry
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
with:
registry: ${{ env.REGISTRY }}
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Extract metadata (tags, labels) for Docker (AFFiNE-Local)
id: meta_affine
uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
with:
images: ${{ env.REGISTRY }}/${{ env.NAMESPACE }}/${{ env.AFFINE_IMAGE_NAME }}
tags: ${{ env.IMAGE_TAG_LATEST }}
- name: Build and push Docker image (AFFINE-Local)
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
file: ./.github/deployment/Dockerfile-affine
push: ${{ github.ref == 'refs/heads/master' && true || false }}
tags: ${{ steps.meta_affine.outputs.tags }}
labels: ${{ steps.meta_affine.outputs.labels }}
target: AFFiNE

View File

@ -6,11 +6,13 @@ on:
branches: [master]
paths:
- 'apps/keck/**'
- '.github/deployment'
- '.github/workflows/keck.yml'
pull_request:
branches: [master]
paths:
- 'apps/keck/**'
- '.github/deployment'
- '.github/workflows/keck.yml'
# Cancels all previous workflow runs for pull requests that have not completed.
@ -60,7 +62,7 @@ jobs:
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
file: ./Dockerfile-keck
file: ./.github/deployment/Dockerfile-keck
push: ${{ github.ref == 'refs/heads/field' && true || false }}
tags: ${{ steps.meta_keck.outputs.tags }}
labels: ${{ steps.meta_keck.outputs.labels }}

View File

@ -53,6 +53,7 @@ jobs:
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
file: ./.github/deployment/Dockerfile-lisa
push: ${{ github.ref == 'refs/heads/master' && true || false }}
tags: ${{ steps.meta_lisa.outputs.tags }}
labels: ${{ steps.meta_lisa.outputs.labels }}

View File

@ -5,6 +5,7 @@ on:
branches: [master]
paths:
- 'apps/venus/**'
- '.github/deployment'
- '.github/workflows/venus.yml'
pull_request:
branches: [master]
@ -59,7 +60,7 @@ jobs:
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
file: ./Dockerfile-venus
file: ./.github/deployment/Dockerfile-venus
push: ${{ github.ref == 'refs/heads/master' && true || false }}
tags: ${{ steps.meta_venus.outputs.tags }}
labels: ${{ steps.meta_venus.outputs.labels }}

View File

@ -14,7 +14,7 @@ Planning, Sorting and Creating all Together. Open-source, Privacy-First, and Fre
<!--
Make New Badge Pattern badges inline
See https://github.com/all-contributors/all-contributors/issues/361#issuecomment-637166066
See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
-->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
@ -38,21 +38,29 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment
<a href="https://t.me/affineworkos"><b>Telegram</b></a>
</p>
<p align="center"><img width="1920" alt="affine_screen" src="https://user-images.githubusercontent.com/79301703/182363099-48b479c3-dc26-4fc3-8f9b-45f9cf358f9a.png"><p/>
<p align="center"><img width="1920" alt="affine_screen" src="https://user-images.githubusercontent.com/21084335/182552060-972cac0e-6258-4ccb-85bd-3bb466c30ccd.png"><p/>
# Stay Up-to-Date
# Stay Up-to-Date and Support Us
![952cd7a5-70fe-48ab-b74f-23981d94d2c5](https://user-images.githubusercontent.com/79301703/182365526-df074c64-cee4-45f6-b8e0-b912f17332c6.gif)
# How to use
If you have experience in front-end development, please [refer to here](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine); if you want to experience our latest version, please wait a moment, we will launch a web version in the near future.
And, thanks to Lee who [made a desktop build with Tauri](https://github.com/m1911star/affine-client) for you to try out.
Please notice that AFFiNE is still under Alpha stage and is not ready for production use.
# Table of contents
- [Stay Up-to-Date](#stay-up-to-date)
- [Stay Up-to-Date and Support Us](#stay-up-to-date-and-support-us)
- [How to Use](#how-to-use)
- [Table of contents](#table-of-contents)
- [Shape your page](#shape-your-page)
- [Plan your task](#plan-your-task)
- [Sort your knowledge](#sort-your-knowledge)
- [Create your story](#create-your-story)
- [Getting Started with development](#getting-started-with-development)
- [Documentation](#documentation)
- [Getting Started with development](#getting-started-with-development)
- [Roadmap](#roadmap)
- [Releases](#releases)
- [Feature requests](#feature-requests)
@ -60,6 +68,7 @@ See https://github.com/all-contributors/all-contributors/issues/361#issuecomment
- [The Philosophy of AFFiNE](#the-philosophy-of-affine)
- [Community](#community)
- [Contributors](#contributors)
- [Acknowledgments](#acknowledgments)
- [License](#license)
## Shape your page
@ -80,9 +89,13 @@ We want your data always to be yours, and we don't want to make any sacrifice to
Collaboration isn't only necessary for teams -- you may take and insert pics on your phone, then edit them on your desktop, and share them with your collaborators.
Affine is fully built with web technologies so that consistency and accessibility are always guaranteed on Mac, Windows and Linux. The local file system support will be available when version 0.0.1beta is released.
# Getting Started with development
# Documentation
Please view the [documentation](https://affine.gitbook.io/affine/) in Contribute-to-AFFiNE/Software-Contributions/Environment-setup.
AFFiNE is not yet ready for production use. To install, you may check how to build or depoly the AFFiNE in [quick-start](https://affine.gitbook.io/affine/basic-documentation/contribute-to-affine/quick-start). For the full documentation, please view it [here](https://affine.gitbook.io/affine/).
## Getting Started with development
Please view the path Contribute-to-AFFiNE/Software-Contributions/Quick-Start in documentation.
# Roadmap
@ -110,7 +123,7 @@ It is all perfect... If there are not so many waste operations and redundant inf
That's why we are making AFFiNE. Some of the most important features are:
- Transformable
- Every block can be transformed equally as a database
- Every block can be transformed equally well as a database
- e.g. you can now set up a to-do with MarkDown in text view and edit it in kanban view.
- Every doc can be turned into a whiteboard
- An always good-to-read, structured docs-form page is the best for your notes, but a boundless doodle surface is better for collaboration and creativity.
@ -134,9 +147,17 @@ We would like to give special thanks to the innovators and pioneers who greatly
We would also like to give thanks to open-source projects that make affine possible:
- Yjs & Yrs
- React
- Rust
- [Yjs](https://github.com/yjs/yjs) & [Yrs](https://github.com/y-crdt/y-crdt) -- Fundamental support of CRDTs for our implements on state management and data sync.
- [React](https://github.com/facebook/react) -- View layer support and web GUI framework.
- [Rust](https://github.com/rust-lang/rust) -- High performance language that extends the ability and availability of our real-time backend, JWST.
- [Fossil](https://www2.fossil-scm.org/home/doc/trunk/www/index.wiki) -- Source code management tool made with CRDTs which inspired our design on block data structure.
- [slatejs](https://github.com/ianstormtaylor/slate) -- Customizable rich-text editor.
- [Jotai](https://github.com/pmndrs/jotai) -- Minimal state management tool for frontend.
- [Tldraw](https://github.com/tldraw/tldraw) -- Excellent drawing board.
- [MUI](https://github.com/mui/material-ui) -- Our most used graphic UI component library.
- Other [dependancies](https://github.com/toeverything/AFFiNE/network/dependencies)
Thanks a lot to the community for providing such powerful and simple libraries, so that we can focus more on the implementation of the product logic, and we hope that in the future our projects will also provide a more easy-to-use knowledge base for everyone.
# Community
@ -152,16 +173,16 @@ For help, discussion about best practices, or any other conversation that would
<table>
<tr>
<td align="center"><a href="https://darksky.eu.org/"><img src="https://avatars.githubusercontent.com/u/25152247?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DarkSky</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/tzhangchi"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=100" width="100px;" alt=""/><br /><sub><b>alt1o</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Diamond</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
<td align="center"><a href="http://zhangchi.page/"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=100" width="100px;" alt=""/><br /><sub><b>wang xinglong</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DiamondThree</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
<td align="center"><a href="https://lawvs.github.io/profile/"><img src="https://avatars.githubusercontent.com/u/18554747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Whitewater</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zuoxiaodong0815</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SaikaSakura</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=100" width="100px;" alt=""/><br /><sub><b>xiaodong zuo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MingLIang Wang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/QiShaoXuan"><img src="https://avatars.githubusercontent.com/u/22772830?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Qi</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Documentation">📖</a></td>
<td align="center"><a href="https://tuluffy.github.io/angular.github.io/"><img src="https://avatars.githubusercontent.com/u/26808339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>tuluffy</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tuluffy" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/mitsuhatu"><img src="https://avatars.githubusercontent.com/u/110213079?v=4?s=100" width="100px;" alt=""/><br /><sub><b>mitsuhatu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Documentation">📖</a></td>
<td align="center"><a href="https://shockwave.me/"><img src="https://avatars.githubusercontent.com/u/15013925?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Austaras</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/uptonking?tab=repositories&type=source"><img src="https://avatars.githubusercontent.com/u/11391549?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jin Yao</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Documentation">📖</a></td>
</tr>

View File

@ -1,16 +1,9 @@
/* eslint-disable filename-rules/match */
import {
useEffect,
useRef,
type UIEvent,
useState,
useLayoutEffect,
} from 'react';
import { useEffect, useRef, type UIEvent, useState } from 'react';
import { useParams } from 'react-router';
import {
MuiBox as Box,
MuiCircularProgress as CircularProgress,
MuiDivider as Divider,
styled,
} from '@toeverything/components/ui';
import { AffineEditor } from '@toeverything/components/affine-editor';
@ -31,7 +24,7 @@ import { WorkspaceName } from './workspace-name';
import { CollapsiblePageTree } from './collapsible-page-tree';
import { useFlag } from '@toeverything/datasource/feature-flags';
import { type BlockEditor } from '@toeverything/components/editor-core';
import { Tabs } from './components/tabs';
type PageProps = {
workspace: string;
};
@ -40,30 +33,8 @@ export function Page(props: PageProps) {
const { page_id } = useParams();
const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
useShowSpaceSidebar();
const { user } = useUserAndSpaces();
const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
useEffect(() => {
if (!user?.id || !page_id) return;
const updateRecentPages = async () => {
// TODO: deal with it temporarily
await services.api.editorBlock.getWorkspaceDbBlock(
props.workspace,
{
userId: user.id,
}
);
// await services.api.userConfig.addRecentPage(
// props.workspace,
// user.id,
// page_id
// );
await services.api.editorBlock.clearUndoRedo(props.workspace);
};
updateRecentPages();
}, [user, props.workspace, page_id]);
return (
<LigoApp>
<LigoLeftContainer style={{ width: fixedDisplay ? '300px' : 0 }}>
@ -80,7 +51,9 @@ export function Page(props: PageProps) {
onMouseLeave={() => setSpaceSidebarVisible(false)}
>
<WorkspaceName />
<Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
<Tabs />
<WorkspaceSidebarContent>
<div>
{dailyNotesFlag && (
@ -92,14 +65,14 @@ export function Page(props: PageProps) {
)}
<div>
<CollapsibleTitle
title="Activities"
title="ACTIVITIES"
initialOpen={false}
>
<Activities />
</CollapsibleTitle>
</div>
<div>
<CollapsiblePageTree title="Page Tree">
<CollapsiblePageTree title="PAGES">
{page_id ? <PageTree /> : null}
</CollapsiblePageTree>
</div>
@ -120,38 +93,29 @@ const EditorContainer = ({
workspace: string;
}) => {
const [lockScroll, setLockScroll] = useState(false);
const scrollContainerRef = useRef<HTMLDivElement>();
const [scrollContainer, setScrollContainer] = useState<HTMLElement>();
const editorRef = useRef<BlockEditor>();
const onScroll = (event: UIEvent) => {
editorRef.current.getHooks().onRootNodeScroll(event);
editorRef.current.scrollManager.emitScrollEvent(event);
};
useEffect(() => {
editorRef.current.scrollManager.scrollContainer =
scrollContainerRef.current;
editorRef.current.scrollManager.scrollController = {
lockScroll: () => setLockScroll(true),
unLockScroll: () => setLockScroll(false),
};
}, []);
const { setPageClientWidth } = usePageClientWidth();
useEffect(() => {
if (scrollContainerRef.current) {
if (scrollContainer) {
const obv = new ResizeObserver(e => {
setPageClientWidth(e[0].contentRect.width);
});
obv.observe(scrollContainerRef.current);
obv.observe(scrollContainer);
return () => obv.disconnect();
}
});
}, [setPageClientWidth, scrollContainer]);
return (
<StyledEditorContainer
lockScroll={lockScroll}
ref={scrollContainerRef}
ref={ref => setScrollContainer(ref)}
onScroll={onScroll}
>
{pageId ? (
@ -159,6 +123,11 @@ const EditorContainer = ({
workspace={workspace}
rootBlockId={pageId}
ref={editorRef}
scrollContainer={scrollContainer}
scrollController={{
lockScroll: () => setLockScroll(true),
unLockScroll: () => setLockScroll(false),
}}
/>
) : (
<Box
@ -198,7 +167,7 @@ const LigoLeftContainer = styled('div')({
position: 'relative',
});
const WorkspaceSidebar = styled('div')(({ hidden }) => ({
const WorkspaceSidebar = styled('div')(({ theme }) => ({
position: 'absolute',
bottom: '48px',
top: '12px',
@ -208,7 +177,7 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
width: 300,
minWidth: 300,
borderRadius: '0px 10px 10px 0px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadow1,
backgroundColor: '#FFFFFF',
transitionProperty: 'left',
transitionDuration: '0.35s',
@ -219,4 +188,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
const WorkspaceSidebarContent = styled('div')({
flex: 'auto',
overflow: 'hidden auto',
marginTop: '18px',
});

View File

@ -1,34 +1,34 @@
import { useCallback, useState } from 'react';
import React, { useCallback, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import clsx from 'clsx';
import style9 from 'style9';
import {
MuiBox as Box,
MuiButton as Button,
MuiCollapse as Collapse,
MuiIconButton as IconButton,
styled,
} from '@toeverything/components/ui';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import {
ArrowDropDownIcon,
ArrowRightIcon,
} from '@toeverything/components/icons';
import { services } from '@toeverything/datasource/db-service';
import { NewpageIcon } from '@toeverything/components/common';
import {
usePageTree,
useCalendarHeatmap,
} from '@toeverything/components/layout';
import { AddIcon } from '@toeverything/components/icons';
const styles = style9.create({
ligoButton: {
textTransform: 'none',
},
newPage: {
color: '#B6C7D3',
width: '26px',
fontSize: '18px',
textAlign: 'center',
cursor: 'pointer',
},
const StyledContainer = styled('div')({
height: '32px',
display: 'flex',
alignItems: 'center',
});
const StyledBtn = styled('div')({
color: '#98ACBD',
textTransform: 'none',
fontSize: '12px',
fontWeight: '600',
});
export type CollapsiblePageTreeProps = {
@ -73,31 +73,35 @@ export function CollapsiblePageTree(props: CollapsiblePageTreeProps) {
justifyContent: 'space-between',
alignItems: 'center',
paddingRight: 1,
'&:hover': {
background: '#f5f7f8',
borderRadius: '5px',
},
}}
onMouseEnter={() => setNewPageBtnVisible(true)}
onMouseLeave={() => setNewPageBtnVisible(false)}
>
<Button
startIcon={
open ? <ArrowDropDownIcon /> : <ArrowRightIcon />
}
onClick={() => setOpen(prev => !prev)}
sx={{ color: '#566B7D', textTransform: 'none' }}
className={clsx(styles('ligoButton'), className)}
style={style}
disableElevation
disableRipple
>
{title}
</Button>
<StyledContainer>
{open ? (
<ArrowDropDownIcon sx={{ color: '#566B7D' }} />
) : (
<ArrowRightIcon sx={{ color: '#566B7D' }} />
)}
<StyledBtn onClick={() => setOpen(prev => !prev)}>
{title}
</StyledBtn>
</StyledContainer>
{newPageBtnVisible && (
<div
<AddIcon
style={{
width: '20px',
height: '20px',
color: '#98ACBD',
cursor: 'pointer',
}}
onClick={create_page}
className={clsx(styles('newPage'), className)}
>
+
</div>
/>
)}
</Box>
{children ? (

View File

@ -0,0 +1,19 @@
export const Logo = ({ color, style, ...props }) => {
return (
<svg
width="52"
height="52"
viewBox="0 0 52 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="52" height="52" rx="10" fill="#3E6FDB" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z"
fill="white"
/>
</svg>
);
};

View File

@ -0,0 +1 @@
export { Logo } from './Logo';

View File

@ -0,0 +1,61 @@
import { useState } from 'react';
import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
import type { ValueOf } from '@toeverything/utils';
const StyledTabs = styled('div')({
width: '100%',
height: '12px',
marginTop: '12px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
});
const StyledDivider = styled(Divider)<{ isActive?: boolean }>(
({ isActive }) => {
return {
flex: 1,
backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
borderWidth: '2px',
};
}
);
const TAB_TITLE = {
PAGES: 'pages',
GALLERY: 'gallery',
TOC: 'toc',
} as const;
const TabMap = new Map<TabKey, TabValue>([
['PAGES', 'pages'],
['GALLERY', 'gallery'],
['TOC', 'toc'],
]);
type TabKey = keyof typeof TAB_TITLE;
type TabValue = ValueOf<typeof TAB_TITLE>;
const Tabs = () => {
const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
const onClick = (v: TabValue) => {
setActiveTab(v);
};
return (
<StyledTabs>
{[...TabMap.entries()].map(([k, v]) => {
return (
<StyledDivider
key={v}
isActive={v === activeTab}
onClick={() => onClick(v)}
/>
);
})}
</StyledTabs>
);
};
export { Tabs };

View File

@ -0,0 +1 @@
export { Tabs } from './Tabs';

View File

@ -1,27 +1,28 @@
import {
MuiButton as Button,
Switch,
styled,
MuiOutlinedInput as OutlinedInput,
} from '@toeverything/components/ui';
import { LogoIcon } from '@toeverything/components/icons';
import { PinIcon } from '@toeverything/components/icons';
import {
useUserAndSpaces,
useShowSpaceSidebar,
} from '@toeverything/datasource/state';
import { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { services } from '@toeverything/datasource/db-service';
import { Logo } from './components/logo/Logo';
const WorkspaceContainer = styled('div')({
display: 'flex',
alignItems: 'center',
minHeight: 60,
padding: '12px 0px',
flexDirection: 'column',
paddingBottom: '12px',
color: '#566B7D',
});
const LeftContainer = styled('div')({
flex: 'auto',
display: 'flex',
height: '52px',
alignItems: 'center',
margin: '0 12px',
});
const LogoContainer = styled('div')({
@ -32,20 +33,36 @@ const LogoContainer = styled('div')({
minWidth: 24,
});
const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
return {
color: theme.affine.palette.primary,
width: '16px !important',
height: '16px !important',
};
const StyledPin = styled('div')({
display: 'flex',
justifyContent: 'end',
alignItems: 'center',
});
const StyledWorkspace = styled('div')({
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
marginLeft: '12px',
paddingLeft: '12px',
});
const StyledWorkspaceDesc = styled('div')({
fontSize: '12px',
color: '#98ACBD',
height: '18px',
display: 'flex',
alignItems: 'center',
});
const WorkspaceNameContainer = styled('div')({
display: 'flex',
alignItems: 'center',
flex: 'auto',
width: '100px',
marginRight: '10px',
width: '165px',
height: '34px',
input: {
padding: '5px 10px',
},
@ -58,21 +75,15 @@ const WorkspaceNameContainer = styled('div')({
});
const WorkspaceReNameContainer = styled('div')({
marginRight: '10px',
height: '34px',
display: 'flex',
alignItems: 'center',
input: {
padding: '5px 10px',
},
});
const ToggleDisplayContainer = styled('div')({
display: 'flex',
alignItems: 'center',
fontSize: 12,
color: '#3E6FDB',
padding: 6,
minWidth: 64,
});
export const WorkspaceName = () => {
const { currentSpaceId } = useUserAndSpaces();
const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
@ -139,35 +150,46 @@ export const WorkspaceName = () => {
return (
<WorkspaceContainer>
<StyledPin>
<PinIcon
style={{
width: '20px',
height: '20px',
color: fixedDisplay ? '#3E6FDB' : '',
cursor: 'pointer',
}}
onClick={toggleSpaceSidebar}
/>
</StyledPin>
<LeftContainer>
<LogoContainer>
<StyledLogoIcon />
<Logo color={undefined} style={undefined} />
</LogoContainer>
{inRename ? (
<WorkspaceReNameContainer>
<OutlinedInput
value={workspaceName}
onChange={handleChange}
onKeyDown={handleKeyDown}
onMouseLeave={() => setInRename(false)}
/>
</WorkspaceReNameContainer>
) : (
<WorkspaceNameContainer>
<span onClick={() => setInRename(true)}>
{workspaceName || workspaceId}
</span>
</WorkspaceNameContainer>
)}
<StyledWorkspace>
{inRename ? (
<WorkspaceReNameContainer>
<OutlinedInput
style={{ width: '140px', height: '28px' }}
value={workspaceName}
onChange={handleChange}
onKeyDown={handleKeyDown}
onMouseLeave={() => setInRename(false)}
/>
</WorkspaceReNameContainer>
) : (
<WorkspaceNameContainer>
<span onClick={() => setInRename(true)}>
{workspaceName || workspaceId}
</span>
</WorkspaceNameContainer>
)}
<StyledWorkspaceDesc>
To shape, Not to Adapt.
</StyledWorkspaceDesc>
</StyledWorkspace>
</LeftContainer>
<ToggleDisplayContainer onClick={toggleSpaceSidebar}>
<Switch
checked={fixedDisplay}
checkedLabel="ON"
uncheckedLabel="OFF"
/>
</ToggleDisplayContainer>
</WorkspaceContainer>
);
};

View File

@ -14,6 +14,9 @@
},
"devDependencies": {
"mini-css-extract-plugin": "^2.6.1",
"webpack": "^5.73.0"
"image-minimizer-webpack-plugin": "^3.2.3",
"imagemin": "^8.0.1",
"imagemin-optipng": "^8.0.0",
"webpack": "^5.74.0"
}
}

Binary file not shown.

After

(image error) Size: 1.5 MiB

View File

@ -6,13 +6,18 @@ import clsx from 'clsx';
import { CssVarsProvider, styled } from '@mui/joy/styles';
import { Box, Button, Container, Grid, SvgIcon, Typography } from '@mui/joy';
import Card from '@mui/joy/Card';
import GitHubIcon from '@mui/icons-material/GitHub';
import RedditIcon from '@mui/icons-material/Reddit';
import TelegramIcon from '@mui/icons-material/Telegram';
// eslint-disable-next-line no-restricted-imports
import { useMediaQuery } from '@mui/material';
import LogoImage from './logo.png';
import CollaborationImage from './collaboration.png';
import PageImage from './page.png';
import ShapeImage from './shape.png';
import TaskImage from './task.png';
const DiscordIcon = (props: any) => {
return (
<SvgIcon
@ -20,12 +25,12 @@ const DiscordIcon = (props: any) => {
width="71"
height="55"
viewBox="0 0 71 55"
fill="none"
fill="currentcolor"
>
<g clip-path="url(#clip0)">
<path
d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
fill="#23272A"
fill="currentcolor"
/>
</g>
<defs>
@ -407,10 +412,7 @@ export function App() {
},
}}
>
<AffineImage
src="/assets/page.png"
alt="AFFiNE main ui"
/>
<AffineImage src={PageImage} alt="AFFiNE main ui" />
</Box>
</Grid>
<Grid xs={12} sx={{ display: 'flex' }}>
@ -515,14 +517,16 @@ export function App() {
justifyContent: 'left',
textAlign: 'left',
transition: 'all .5s',
// boxShadow: '2px 2px 40px #08f2',
// ':hover': {
// boxShadow: '2px 2px 40px #08f4',
// },
transform: 'scale(0.98)',
boxShadow: '2px 2px 40px #0002',
':hover': {
transform: 'scale(1)',
boxShadow: '2px 2px 40px #0004',
},
}}
>
<AffineImage
src="/assets/shape.png"
src={ShapeImage}
alt="AFFiNE Shape Your Page"
/>
</Box>
@ -537,10 +541,10 @@ export function App() {
}}
>
<Grid
xs={matches ? 12 : 4}
xs={matches ? 12 : 6}
sx={{
display: 'flex',
...(matches ? {} : { marginRight: '4em' }),
...(matches ? {} : { marginLeft: '4em' }),
}}
>
<Box
@ -584,7 +588,7 @@ export function App() {
</Box>
</Grid>
<Grid
xs={matches ? 12 : 8}
xs={matches ? 12 : 6}
sx={{ display: 'flex', width: '100%' }}
>
<Box
@ -595,14 +599,16 @@ export function App() {
justifyContent: 'left',
textAlign: 'left',
transition: 'all .5s',
// boxShadow: '2px 2px 40px #08f2',
// ':hover': {
// boxShadow: '2px 2px 40px #08f4',
// },
transform: 'scale(0.98)',
boxShadow: '2px 2px 40px #0002',
':hover': {
transform: 'scale(1)',
boxShadow: '2px 2px 40px #0004',
},
}}
>
<AffineImage
src="/assets/task.png"
src={TaskImage}
alt="AFFiNE Plan Your Task"
/>
</Box>
@ -656,14 +662,14 @@ export function App() {
justifyContent: 'center',
margin: 'auto',
transition: 'all .5s',
// boxShadow: '2px 2px 40px #08f2',
// ':hover': {
// boxShadow: '2px 2px 40px #08f4',
// },
transform: 'scale(0.98)',
':hover': {
transform: 'scale(1)',
},
}}
>
<AffineImage
src="/assets/collaboration.png"
src={CollaborationImage}
alt="AFFiNE Privacy-first, and collaborative"
/>
</Box>
@ -676,7 +682,7 @@ export function App() {
margin: 'auto',
}}
>
<AffineImage src="/assets/logo.png" alt="AFFiNE Logo" />
<AffineImage src={LogoImage} alt="AFFiNE Logo" />
</Box>
</Grid>
<Grid xs={12} sx={{ display: 'flex' }}>
@ -738,13 +744,20 @@ export function App() {
}}
>
<Box sx={{ display: 'flex', width: '100%' }}>
<Card
<Button
variant="plain"
sx={{
display: 'flex',
flexDirection: 'column',
margin: 'auto',
minWidth: '4em',
'--Card-padding': '4px',
'--Card-radius': '0',
padding: '1em',
minWidth: '6em',
}}
onClick={() =>
window.open(
'https://github.com/toeverything/AFFiNE/'
)
}
>
<Grid
xs={12}
@ -767,21 +780,30 @@ export function App() {
}}
>
<Typography
sx={{ display: 'flex', color: '#888' }}
sx={{
display: 'flex',
color: '#888',
fontSize: '0.5em',
}}
>
GitHub
</Typography>
</Grid>
</Card>
</Button>
</Box>
<Box sx={{ display: 'flex', width: '100%' }}>
<Card
<Button
variant="plain"
sx={{
display: 'flex',
flexDirection: 'column',
margin: 'auto',
minWidth: '4em',
'--Card-padding': '4px',
'--Card-radius': '0',
padding: '1em',
minWidth: '6em',
}}
onClick={() =>
window.open('https://www.reddit.com/r/Affine/')
}
>
<Grid
xs={12}
@ -804,12 +826,16 @@ export function App() {
}}
>
<Typography
sx={{ display: 'flex', color: '#888' }}
sx={{
display: 'flex',
color: '#888',
fontSize: '0.5em',
}}
>
Reddit
</Typography>
</Grid>
</Card>
</Button>
</Box>
<Box
sx={{
@ -817,13 +843,18 @@ export function App() {
width: '100%',
}}
>
<Card
<Button
variant="plain"
sx={{
display: 'flex',
flexDirection: 'column',
margin: 'auto',
minWidth: '4em',
'--Card-padding': '4px',
'--Card-radius': '0',
padding: '1em',
minWidth: '6em',
}}
onClick={() =>
window.open('https://t.me/affineworkos')
}
>
<Grid
xs={12}
@ -846,21 +877,30 @@ export function App() {
}}
>
<Typography
sx={{ display: 'flex', color: '#888' }}
sx={{
display: 'flex',
color: '#888',
fontSize: '0.5em',
}}
>
Telegram
</Typography>
</Grid>
</Card>
</Button>
</Box>
<Box sx={{ display: 'flex', width: '100%' }}>
<Card
<Button
variant="plain"
sx={{
display: 'flex',
flexDirection: 'column',
margin: 'auto',
minWidth: '4em',
'--Card-padding': '4px',
'--Card-radius': '0',
padding: '1em',
minWidth: '6em',
}}
onClick={() =>
window.open('https://discord.gg/yz6tGVsf5p')
}
>
<Grid
xs={12}
@ -870,7 +910,11 @@ export function App() {
}}
>
<DiscordIcon
sx={{ width: '36px', height: '36px' }}
sx={{
width: '36px',
height: '36px',
color: '#09449d',
}}
/>
</Grid>
@ -883,12 +927,16 @@ export function App() {
}}
>
<Typography
sx={{ display: 'flex', color: '#888' }}
sx={{
display: 'flex',
color: '#888',
fontSize: '0.5em',
}}
>
Discord
</Typography>
</Grid>
</Card>
</Button>
</Box>
</Box>
<Grid xs={12} sx={{ display: 'flex', marginBottom: '2em' }}>

View File

Before

(image error) Size: 11 KiB

After

(image error) Size: 11 KiB

BIN
apps/venus/src/app/page.png Normal file

Binary file not shown.

After

(image error) Size: 1.0 MiB

Binary file not shown.

After

(image error) Size: 1.2 MiB

BIN
apps/venus/src/app/task.png Normal file

Binary file not shown.

After

(image error) Size: 1.0 MiB

Binary file not shown.

Before

(image error) Size: 1.6 MiB

View File

@ -1,10 +0,0 @@
<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#23272A"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="71" height="55" fill="white"/>
</clipPath>
</defs>
</svg>

Before

(image error) Size: 2.0 KiB

Binary file not shown.

Before

(image error) Size: 1.0 MiB

Binary file not shown.

Before

(image error) Size: 1.2 MiB

Binary file not shown.

Before

(image error) Size: 1.2 MiB

Binary file not shown.

Before

Width: 48px  |  Height: 48px  |  Size: 15 KiB

View File

@ -7,6 +7,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const Style9Plugin = require('style9/webpack');
@ -61,6 +62,14 @@ module.exports = function (webpackConfig) {
parallel: true,
}),
new CssMinimizerPlugin(),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [['optipng', { optimizationLevel: 5 }]],
},
},
}),
],
splitChunks: {
chunks: 'all',

View File

@ -18,6 +18,12 @@ interface AffineEditorProps {
scrollBlank?: boolean;
isWhiteboard?: boolean;
scrollContainer?: HTMLElement;
scrollController?: {
lockScroll: () => void;
unLockScroll: () => void;
};
}
function _useConstantWithDispose(
@ -53,13 +59,32 @@ function _useConstantWithDispose(
}
export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
(
{
workspace,
rootBlockId,
scrollBlank = true,
isWhiteboard,
scrollController,
scrollContainer,
},
ref
) => {
const editor = _useConstantWithDispose(
workspace,
rootBlockId,
isWhiteboard
);
useEffect(() => {
if (scrollContainer) {
editor.scrollManager.scrollContainer = scrollContainer;
}
if (scrollController) {
editor.scrollManager.scrollController = scrollController;
}
}, [editor, scrollContainer, scrollController]);
useImperativeHandle(ref, () => editor);
return (

View File

@ -29,6 +29,7 @@ import { ErrorBoundary } from 'react-error-boundary';
import { ErrorFallback } from './components/error-fallback';
import { ZoomBar } from './components/zoom-bar';
import { CommandPanel } from './components/command-panel';
import { usePageClientWidth } from '@toeverything/datasource/state';
export interface TldrawProps extends TldrawAppCtorProps {
/**
@ -132,6 +133,9 @@ export function Tldraw({
tools,
}: TldrawProps) {
const [sId, set_sid] = React.useState(id);
const { pageClientWidth } = usePageClientWidth();
// page padding left and right total 300px
const editorShapeInitSize = pageClientWidth - 300;
// Create a new app when the component mounts.
const [app, setApp] = React.useState(() => {
@ -140,6 +144,7 @@ export function Tldraw({
callbacks,
commands,
getSession,
editorShapeInitSize,
tools,
});
return app;

View File

@ -11,6 +11,7 @@ import { StrokeLineStyleConfig } from './stroke-line-style-config';
import { Group, UnGroup } from './GroupOperation';
import { DeleteShapes } from './DeleteOperation';
import { Lock, Unlock } from './LockOperation';
import { FrameFillColorConfig } from './FrameFillColorConfig';
export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
const state = app.useStore();
@ -51,6 +52,13 @@ export const CommandPanel: FC<{ app: TldrawApp }> = ({ app }) => {
shapes={config.fill.selectedShapes}
/>
) : null,
frameFill: config.frameFill.selectedShapes.length ? (
<FrameFillColorConfig
key="fill"
app={app}
shapes={config.frameFill.selectedShapes}
/>
) : null,
font: config.font.selectedShapes.length ? (
<FontSizeConfig
key="font"

View File

@ -0,0 +1,89 @@
import type { FC } from 'react';
import type { TldrawApp } from '@toeverything/components/board-state';
import type { TDShape } from '@toeverything/components/board-types';
import {
Popover,
Tooltip,
IconButton,
useTheme,
} from '@toeverything/components/ui';
import {
ShapeColorNoneIcon,
ShapeColorDuotoneIcon,
} from '@toeverything/components/icons';
import { countBy, maxBy } from '@toeverything/utils';
import { getShapeIds } from './utils';
import { Palette } from '../palette';
interface BorderColorConfigProps {
app: TldrawApp;
shapes: TDShape[];
}
type ColorType = 'none' | string;
const _colors: ColorType[] = [
'rgba(255, 133, 137, 0.5)',
'rgba(255, 159, 101, 0.5)',
'rgba(255, 251, 69, 0.5)',
'rgba(64, 255, 138, 0.5)',
'rgba(26, 252, 255, 0.5)',
'rgba(198, 156, 255, 0.5)',
'rgba(255, 143, 224, 0.5)',
'rgba(152, 172, 189, 0.5)',
'rgba(216, 226, 248, 0.5)',
];
const _getIconRenderColor = (shapes: TDShape[]) => {
const counted = countBy(shapes, shape => shape.style.fill);
const max = maxBy(Object.entries(counted), ([c, n]) => n);
return max[0];
};
export const FrameFillColorConfig: FC<BorderColorConfigProps> = ({
app,
shapes,
}) => {
const theme = useTheme();
const setFillColor = (color: ColorType) => {
app.style(
{ fill: color, isFilled: color !== 'none' },
getShapeIds(shapes)
);
};
const iconColor = _getIconRenderColor(shapes);
return (
<Popover
trigger="hover"
placement="bottom-start"
content={
<Palette
colors={_colors}
selected={iconColor}
onSelect={setFillColor}
/>
}
>
<Tooltip content="Frame Background Color" placement="top-start">
<IconButton>
{iconColor === 'none' ? (
<ShapeColorNoneIcon />
) : (
<ShapeColorDuotoneIcon
style={{
color: iconColor,
border:
iconColor === '#FFFFFF'
? `1px solid ${theme.affine.palette.tagHover}`
: 0,
borderRadius: '5px',
}}
/>
)}
</IconButton>
</Tooltip>
</Popover>
);
};

View File

@ -7,6 +7,7 @@ interface Config {
type:
| 'stroke'
| 'fill'
| 'frameFill'
| 'font'
| 'group'
| 'ungroup'
@ -22,6 +23,10 @@ const _createInitConfig = (): Record<Config['type'], Config> => {
type: 'fill',
selectedShapes: [],
},
frameFill: {
type: 'frameFill',
selectedShapes: [],
},
stroke: {
type: 'stroke',
selectedShapes: [],
@ -64,6 +69,7 @@ const _isSupportStroke = (shape: TDShape): boolean => {
TDShapeType.Pencil,
TDShapeType.Laser,
TDShapeType.Highlight,
TDShapeType.Draw,
TDShapeType.Arrow,
TDShapeType.Line,
].some(type => type === shape.type);
@ -91,6 +97,10 @@ const _isSupportFont = (shape: TDShape): boolean => {
].some(type => type === shape.type);
};
const _isSupportFrameFill = (shape: TDShape): boolean => {
return shape.type === TDShapeType.Frame;
};
export const useConfig = (app: TldrawApp): Record<Config['type'], Config> => {
const state = app.useStore();
const selectedShapes = TLDR.get_selected_shapes(state, app.currentPageId);
@ -105,6 +115,9 @@ export const useConfig = (app: TldrawApp): Record<Config['type'], Config> => {
if (_isSupportFont(cur)) {
acc.font.selectedShapes.push(cur);
}
if (_isSupportFrameFill(cur)) {
acc.frameFill.selectedShapes.push(cur);
}
return acc;
},
_createInitConfig()

View File

@ -6,6 +6,7 @@ import {
TldrawPatch,
TDShape,
TDStatus,
TDShapeType,
} from '@toeverything/components/board-types';
import { TLDR } from '@toeverything/components/board-state';
import { BaseSession } from './base-session';
@ -75,6 +76,10 @@ export class RotateSession extends BaseSession {
app: { currentPageId, currentPoint, shiftKey },
} = this;
const filteredShapes = initialShapes.filter(
shape => shape.shape.type !== TDShapeType.Editor
);
const shapes: Record<string, Partial<TDShape>> = {};
let directionDelta =
@ -85,7 +90,7 @@ export class RotateSession extends BaseSession {
}
// Update the shapes
initialShapes.forEach(({ center, shape }) => {
filteredShapes.forEach(({ center, shape }) => {
const { rotation = 0 } = shape;
let shapeDelta = 0;

View File

@ -1,12 +1,9 @@
import * as React from 'react';
/* eslint-disable no-restricted-syntax */
import { Utils, SVGContainer } from '@tldraw/core';
import {
FrameShape,
DashStyle,
TDShapeType,
TDMeta,
GHOSTED_OPACITY,
LABEL_POINT,
} from '@toeverything/components/board-types';
import { TDShapeUtil } from '../TDShapeUtil';
import {
@ -14,14 +11,13 @@ import {
getShapeStyle,
getBoundsRectangle,
transformRectangle,
getFontStyle,
transformSingleRectangle,
} from '../shared';
import { DrawFrame } from './components/draw-frame';
import { Frame } from './components/Frame';
import { styled } from '@toeverything/components/ui';
type T = FrameShape;
type E = HTMLDivElement;
type E = SVGSVGElement;
export class FrameUtil extends TDShapeUtil<T, E> {
type = TDShapeType.Frame as const;
@ -56,10 +52,7 @@ export class FrameUtil extends TDShapeUtil<T, E> {
(
{
shape,
isEditing,
isBinding,
isSelected,
isGhost,
meta,
bounds,
events,
@ -70,21 +63,20 @@ export class FrameUtil extends TDShapeUtil<T, E> {
) => {
const { id, size, style } = shape;
return (
<FullWrapper ref={ref} {...events}>
<SVGContainer
id={shape.id + '_svg'}
opacity={1}
fill={'#fff'}
>
<DrawFrame
id={id}
style={style}
size={size}
isSelected={isSelected}
isDarkMode={meta.isDarkMode}
/>
</SVGContainer>
</FullWrapper>
<SVGContainer
ref={ref}
{...events}
id={shape.id + '_svg'}
opacity={1}
>
<Frame
id={id}
style={style}
size={size}
isSelected={isSelected}
isDarkMode={meta.isDarkMode}
/>
</SVGContainer>
);
}
);
@ -121,27 +113,9 @@ export class FrameUtil extends TDShapeUtil<T, E> {
override transform = transformRectangle;
override transformSingle = transformSingleRectangle;
override hitTestPoint = (shape: T, point: number[]): boolean => {
return false;
};
override hitTestLineSegment = (
shape: T,
A: number[],
B: number[]
): boolean => {
return false;
};
}
const FullWrapper = styled('div')({
width: '100%',
height: '100%',
'.tl-fill-hitarea': {
fill: '#F7F9FF',
},
'.tl-stroke-hitarea': {
fill: '#F7F9FF',
},
});

View File

@ -0,0 +1,54 @@
import * as React from 'react';
import { BINDING_DISTANCE } from '@toeverything/components/board-types';
import type { ShapeStyles } from '@toeverything/components/board-types';
import { getShapeStyle } from '../../shared';
interface RectangleSvgProps {
id: string;
style: ShapeStyles;
isSelected: boolean;
size: number[];
isDarkMode: boolean;
}
export const Frame = React.memo(function DashedRectangle({
id,
style,
size,
isSelected,
isDarkMode,
}: RectangleSvgProps) {
const { strokeWidth, fill } = getShapeStyle(style, isDarkMode);
const _fill = fill && fill !== 'none' ? fill : '#F7F9FF';
const sw = 1 + strokeWidth * 1.618;
const w = Math.max(0, size[0] - sw / 2);
const h = Math.max(0, size[1] - sw / 2);
return (
<>
<rect
className={
isSelected || style.isFilled
? 'tl-fill-hitarea'
: 'tl-stroke-hitarea'
}
x={sw / 2}
y={sw / 2}
width={w}
height={h}
strokeWidth={BINDING_DISTANCE}
/>
<rect
x={sw / 2}
y={sw / 2}
width={w}
height={h}
fill={_fill}
pointerEvents="none"
/>
</>
);
});

View File

@ -1,42 +0,0 @@
import * as React from 'react';
import { BINDING_DISTANCE } from '@toeverything/components/board-types';
import type { ShapeStyles } from '@toeverything/components/board-types';
import { getShapeStyle } from '../../shared';
interface RectangleSvgProps {
id: string;
style: ShapeStyles;
isSelected: boolean;
size: number[];
isDarkMode: boolean;
}
export const DrawFrame = React.memo(function DashedRectangle({
id,
style,
size,
isSelected,
isDarkMode,
}: RectangleSvgProps) {
const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode);
const sw = 1 + strokeWidth * 1.618;
const w = Math.max(0, size[0] - sw / 2);
const h = Math.max(0, size[1] - sw / 2);
return (
<rect
className={
isSelected || style.isFilled
? 'tl-fill-hitarea'
: 'tl-stroke-hitarea'
}
x={sw / 2}
y={sw / 2}
width={w}
height={h}
strokeWidth={BINDING_DISTANCE}
/>
);
});

View File

@ -1 +1 @@
export * from './frame-util';
export * from './FrameUtil';

View File

@ -73,6 +73,7 @@ import { StateManager } from './manager/state-manager';
import { getClipboard, setClipboard } from './idb-clipboard';
import type { Commands } from './types/commands';
import type { BaseTool } from './types/tool';
import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
const uuid = Utils.uniqueId();
@ -178,6 +179,7 @@ export interface TldrawAppCtorProps {
getSession: (type: SessionType) => {
new (app: TldrawApp, ...args: any[]): BaseSessionType;
};
editorShapeInitSize?: number;
commands: Commands;
tools: Record<string, { new (app: TldrawApp): BaseTool }>;
}
@ -223,6 +225,8 @@ export class TldrawApp extends StateManager<TDSnapshot> {
fileSystemHandle: FileSystemHandle | null = null;
editorShapeInitSize = MIN_PAGE_WIDTH;
viewport = Utils.getBoundsFromPoints([
[0, 0],
[100, 100],
@ -285,6 +289,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
return acc;
}, {} as Record<string, BaseTool>);
this.currentTool = this.tools['select'];
if (props.editorShapeInitSize) {
this.editorShapeInitSize = props.editorShapeInitSize;
}
}
/* -------------------- Internal -------------------- */

View File

@ -18,6 +18,7 @@ export class EditorTool extends BaseTool {
const {
currentPoint,
currentGrid,
editorShapeInitSize,
settings: { showGrid },
appState: { currentPageId, currentStyle },
document: { id: workspace },
@ -47,6 +48,7 @@ export class EditorTool extends BaseTool {
? Vec.snap(currentPoint, currentGrid)
: currentPoint,
style: { ...currentStyle },
size: [editorShapeInitSize, 200],
workspace,
});
// In order to make the cursor just positioned at the beginning of the first line, it needs to be adjusted according to the padding newShape.point = Vec.sub(newShape.point, [50, 30]);

View File

@ -1,16 +1,21 @@
import { useState } from 'react';
import clsx from 'clsx';
import style9 from 'style9';
import {
MuiButton as Button,
MuiCollapse as Collapse,
styled,
} from '@toeverything/components/ui';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import {
ArrowDropDownIcon,
ArrowRightIcon,
} from '@toeverything/components/icons';
const styles = style9.create({
ligoButton: {
textTransform: 'none',
const StyledContainer = styled('div')({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
'&:hover': {
background: '#f5f7f8',
borderRadius: '5px',
},
});
@ -24,29 +29,32 @@ export type CollapsibleTitleProps = {
};
export function CollapsibleTitle(props: CollapsibleTitleProps) {
const { className, style, children, title, initialOpen = true } = props;
const { children, title, initialOpen = true } = props;
const [open, setOpen] = useState(initialOpen);
return (
<>
<Button
startIcon={
open ? (
<ArrowDropDownIcon sx={{ color: '#566B7D' }} />
) : (
<ArrowRightIcon sx={{ color: '#566B7D' }} />
)
}
onClick={() => setOpen(prev => !prev)}
sx={{ color: '#566B7D', textTransform: 'none' }}
className={clsx(styles('ligoButton'), className)}
style={style}
disableElevation
disableRipple
>
{title}
</Button>
<StyledContainer onClick={() => setOpen(prev => !prev)}>
{open ? (
<ArrowDropDownIcon sx={{ color: '#566B7D' }} />
) : (
<ArrowRightIcon sx={{ color: '#566B7D' }} />
)}
<div
style={{
color: '#98ACBD',
textTransform: 'none',
fontSize: '12px',
fontWeight: '600',
height: '32px',
display: 'flex',
alignItems: 'center',
}}
>
{title}
</div>
</StyledContainer>
{children ? (
<Collapse in={open} timeout="auto" unmountOnExit>
{children}

View File

@ -121,11 +121,11 @@ const isLinkActive = (editor: ReactEditor) => {
const LinkStyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (
<Tooltip {...props} classes={{ popper: className }} />
))(() => ({
))(({ theme }) => ({
[`& .${muiTooltipClasses.tooltip}`]: {
backgroundColor: '#fff',
color: '#4C6275',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadow1,
fontSize: '14px',
},
[`& .MuiTooltip-tooltipPlacementBottom`]: {
@ -412,8 +412,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
visible && (
<>
<LinkBehavior onMousedown={handle_mouse_down} rects={rects} />
<div
className={styles('linkModalContainer')}
<LinkModalContainer
style={{
top: top + height + GAP_BETWEEN_CONTENT_AND_MODAL,
left,
@ -431,7 +430,7 @@ export const LinkModal = memo((props: LinkModalProps) => {
autoComplete="off"
ref={inputEl}
/>
</div>
</LinkModalContainer>
</>
),
body
@ -491,19 +490,20 @@ const LinkBehavior = (props: {
);
};
const LinkModalContainer = styled('div')(({ theme }) => ({
position: 'fixed',
width: '354px',
height: '40px',
padding: '12px',
display: 'flex',
borderRadius: '4px',
boxShadow: theme.affine.shadows.shadow1,
backgroundColor: '#fff',
alignItems: 'center',
zIndex: '1',
}));
const styles = style9.create({
linkModalContainer: {
position: 'fixed',
width: '354px',
height: '40px',
padding: '12px',
display: 'flex',
borderRadius: '4px',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
backgroundColor: '#fff',
alignItems: 'center',
zIndex: '1',
},
linkModalContainerIcon: {
width: '16px',
margin: '0 16px 0 4px',

View File

@ -17,7 +17,7 @@ import {
supportChildren,
RenderBlockChildren,
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { List } from '../../components/style-container';
import { getChildrenType, BulletIcon, NumberType } from './data';
@ -188,7 +188,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
return (
<BlockContainer editor={editor} block={block} selected={isSelect}>
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<List>
<BulletLeft>
<BulletIcon numberType={properties.numberType} />
@ -206,7 +206,7 @@ export const BulletView: FC<CreateView> = ({ block, editor }) => {
/>
</div>
</List>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
<IndentWrapper>
<RenderBlockChildren block={block} />
</IndentWrapper>

View File

@ -50,7 +50,7 @@ import { Option, Select } from '@toeverything/components/ui';
import {
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { copyToClipboard } from '@toeverything/utils';
interface CreateCodeView extends CreateView {
@ -163,7 +163,7 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
editor.selectionManager.activePreviousNode(block.id, 'start');
};
return (
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<CodeBlock
onKeyDown={e => {
e.stopPropagation();
@ -222,6 +222,6 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
handleKeyArrowUp={handleKeyArrowUp}
/>
</CodeBlock>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
);
};

View File

@ -1,7 +1,7 @@
import { FC, useState } from 'react';
import { CreateView } from '@toeverything/framework/virgo';
import {
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
useOnSelect,
} from '@toeverything/components/editor-core';
import { Upload } from '../../components/upload/upload';
@ -33,7 +33,7 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
};
return (
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<LinkContainer>
{embedLinkUrl ? (
<SourceView
@ -53,6 +53,6 @@ export const EmbedLinkView: FC<EmbedLinkView> = props => {
/>
)}
</LinkContainer>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
);
};

View File

@ -2,7 +2,7 @@ import { FC, useState } from 'react';
import { CreateView } from '@toeverything/framework/virgo';
import {
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { Upload } from '../../components/upload/upload';
import { SourceView } from '../../components/source-view';
@ -30,7 +30,7 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
setIsSelect(isSelect);
});
return (
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<LinkContainer>
{figmaUrl ? (
<SourceView
@ -52,6 +52,6 @@ export const FigmaView: FC<FigmaView> = ({ block, editor }) => {
/>
)}
</LinkContainer>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
);
};

View File

@ -12,6 +12,8 @@ type GridHandleProps = {
blockId: string;
enabledAddItem: boolean;
draggable: boolean;
alertHandleId: string;
onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
};
export const GridHandle: FC<GridHandleProps> = function ({
@ -21,6 +23,8 @@ export const GridHandle: FC<GridHandleProps> = function ({
onDrag,
onMouseDown,
draggable,
alertHandleId,
onMouseEnter,
}) {
const [isMouseDown, setIsMouseDown] = useState<boolean>(false);
const handleMouseDown: React.MouseEventHandler<HTMLDivElement> = e => {
@ -44,16 +48,17 @@ export const GridHandle: FC<GridHandleProps> = function ({
editor.selectionManager.setActivatedNodeId(textBlock.id);
}
};
const handleMouseEnter: React.MouseEventHandler<HTMLDivElement> = e => {
onMouseEnter && onMouseEnter(e);
};
return (
<GridHandleContainer
style={
isMouseDown
? {
backgroundColor: '#3E6FDB',
}
: {}
}
isMouseDown={isMouseDown}
onMouseDown={handleMouseDown}
onMouseEnter={handleMouseEnter}
isAlert={alertHandleId === blockId}
>
{enabledAddItem ? (
<AddGridHandle
@ -67,7 +72,10 @@ export const GridHandle: FC<GridHandleProps> = function ({
);
};
const GridHandleContainer = styled('div')(({ theme }) => ({
const GridHandleContainer = styled('div')<{
isMouseDown: boolean;
isAlert: boolean;
}>(({ theme, isMouseDown, isAlert }) => ({
position: 'relative',
width: '10px',
flexGrow: '0',
@ -78,11 +86,15 @@ const GridHandleContainer = styled('div')(({ theme }) => ({
borderRadius: '1px',
backgroundClip: 'content-box',
' &:hover': {
backgroundColor: theme.affine.palette.primary,
backgroundColor: isAlert ? 'red' : theme.affine.palette.primary,
[`.${GRID_ADD_HANDLE_NAME}`]: {
display: 'block',
},
},
...(isMouseDown &&
(isAlert
? { backgroundColor: 'red' }
: { backgroundColor: theme.affine.palette.primary })),
}));
const AddGridHandle = styled('div')(({ theme }) => ({

View File

@ -31,6 +31,7 @@ export const Grid: FC<CreateView> = function (props) {
const gridItemCountRef = useRef<number>();
const originalLeftWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const originalRightWidth = useRef<number>(GRID_ITEM_MIN_WIDTH);
const [alertHandleId, setAlertHandleId] = useState<string>(null);
const getLeftRightGridItemDomByIndex = (index: number) => {
const gridItems = Array.from(gridContainerRef.current?.children).filter(
@ -117,7 +118,7 @@ export const Grid: FC<CreateView> = function (props) {
itemDom.style.width = width;
};
const handleDragGrid = (e: MouseEvent, index: number) => {
const handleDragGrid = async (e: MouseEvent, index: number) => {
setIsOnDrag(true);
window.getSelection().removeAllRanges();
if (!isSetMouseUp.current) {
@ -165,39 +166,47 @@ export const Grid: FC<CreateView> = function (props) {
setItemWidth(leftGrid, newLeft);
setItemWidth(rightGrid, newRight);
updateDbWidth(leftBlockId, newLeft, rightBlockId, newRight);
[leftBlockId, rightBlockId].forEach(async blockId => {
if (await checkGridItemHasOverflow(blockId)) {
setAlertHandleId(leftBlockId);
} else {
setAlertHandleId(null);
}
});
}
}
};
const children = (
<>
{block.childrenIds.map((id, i) => {
return (
<GridItem
style={{
transition: isOnDrag
? 'none'
: 'all 0.2s ease-in-out',
}}
key={id}
className={GRID_ITEM_CLASS_NAME}
>
<RenderBlock hasContainer={false} blockId={id} />
<GridHandle
onDrag={event => handleDragGrid(event, i)}
editor={editor}
onMouseDown={event => handleMouseDown(event, i)}
blockId={id}
enabledAddItem={
block.childrenIds.length < MAX_ITEM_COUNT
}
draggable={i !== block.childrenIds.length - 1}
/>
</GridItem>
);
})}
</>
);
const checkGridItemHasOverflow = async (blockId: string) => {
let isOverflow = false;
const block = await editor.getBlockById(blockId);
if (block) {
const blockDom = block.dom;
if (blockDom) {
block.dom.style.overflow = 'scroll';
if (block.dom.clientWidth !== block.dom.scrollWidth) {
isOverflow = true;
}
blockDom.style.overflow = 'visible';
}
}
return isOverflow;
};
const handleHandleMouseEnter = (
e: React.MouseEvent<HTMLDivElement>,
index: number
) => {
const leftBlockId = block.childrenIds[index];
const rightBlockId = block.childrenIds[index + 1];
[leftBlockId, rightBlockId].forEach(async blockId => {
if (await checkGridItemHasOverflow(blockId)) {
setAlertHandleId(leftBlockId);
} else {
setAlertHandleId(null);
}
});
};
return (
<>
@ -206,7 +215,35 @@ export const Grid: FC<CreateView> = function (props) {
ref={gridContainerRef}
isOnDrag={isOnDrag}
>
{children}
{block.childrenIds.map((id, i) => {
return (
<GridItem
style={{
transition: isOnDrag
? 'none'
: 'all 0.2s ease-in-out',
}}
key={id}
className={GRID_ITEM_CLASS_NAME}
>
<RenderBlock hasContainer={false} blockId={id} />
<GridHandle
onDrag={event => handleDragGrid(event, i)}
editor={editor}
onMouseDown={event => handleMouseDown(event, i)}
blockId={id}
enabledAddItem={
block.childrenIds.length < MAX_ITEM_COUNT
}
onMouseEnter={event =>
handleHandleMouseEnter(event, i)
}
alertHandleId={alertHandleId}
draggable={i !== block.childrenIds.length - 1}
/>
</GridItem>
);
})}
</GridContainer>
{isOnDrag
? ReactDOM.createPortal(<GridMask />, window.document.body)

View File

@ -60,7 +60,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
({ isSelect, theme }) => ({
background: theme.affine.palette.white,
border: '2px solid rgba(236,241,251,.5)',
padding: '15px 12px',
padding: `15px 16px 0 16px`,
borderRadius: '10px',
...(isSelect
? {
@ -69,7 +69,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
}
: {
'&:hover': {
boxShadow: '0px 1px 10px rgb(152 172 189 / 60%)',
boxShadow: theme.affine.shadows.shadow1,
},
}),
})

View File

@ -2,11 +2,11 @@ import { styled } from '@toeverything/components/ui';
import type { ComponentPropsWithRef, MouseEvent } from 'react';
import { forwardRef } from 'react';
const StyledPanel = styled('div')(() => ({
const StyledPanel = styled('div')(({ theme }) => ({
position: 'absolute',
top: 50,
background: '#FFFFFF',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
boxShadow: theme.affine.shadows.shadow1,
borderRadius: 10,
padding: '12px 24px',
}));

View File

@ -41,6 +41,7 @@ const getKanbanColor = (
return DEFAULT_COLOR;
}
if (
group.type === PropertyType.Status ||
group.type === PropertyType.Select ||
group.type === PropertyType.MultiSelect ||
group.type === DEFAULT_GROUP_ID

View File

@ -25,7 +25,7 @@ const AddCard = ({ group }: { group: KanbanGroup }) => {
const { addCard } = useKanban();
const handleClick = useCallback(async () => {
await addCard(group);
}, [addCard]);
}, [addCard, group]);
return <AddCardWrapper onClick={handleClick}>+</AddCardWrapper>;
};

View File

@ -1,6 +1,11 @@
import type { KanbanCard } from '@toeverything/components/editor-core';
import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
import {
RenderBlock,
useKanban,
useRefPage,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import { useFlag } from '@toeverything/datasource/feature-flags';
const CardContent = styled('div')({
margin: '20px',
@ -58,18 +63,24 @@ export const CardItem = ({
block: KanbanCard['block'];
}) => {
const { addSubItem } = useKanban();
const { openSubPage } = useRefPage();
const showKanbanRefPageFlag = useFlag('ShowKanbanRefPage', false);
const onAddItem = async () => {
await addSubItem(block);
};
const onClickCard = async () => {
showKanbanRefPageFlag && openSubPage(id);
};
return (
<CardContainer>
<CardContainer onClick={onClickCard}>
<CardContent>
<RenderBlock blockId={id} />
</CardContent>
<CardActions onClick={onAddItem}>
<PlusIcon />
<span>Add item</span>
<span>Add a sub-block</span>
</CardActions>
</CardContainer>
);

View File

@ -1,7 +1,7 @@
import {
useCurrentView,
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import { services } from '@toeverything/datasource/db-service';
@ -143,13 +143,13 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
type: 'link',
});
};
const handle_click = (e: React.MouseEvent<HTMLDivElement>) => {
const handle_click = async (e: React.MouseEvent<HTMLDivElement>) => {
//TODO clear active selection
// document.getElementsByTagName('body')[0].click();
e.stopPropagation();
e.nativeEvent.stopPropagation();
editor.selectionManager.setSelectedNodesIds([block.id]);
editor.selectionManager.activeNodeByNodeId(block.id);
await editor.selectionManager.setSelectedNodesIds([block.id]);
await editor.selectionManager.activeNodeByNodeId(block.id, 'end');
};
const down_file = () => {
if (down_ref) {
@ -158,7 +158,7 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
};
return (
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<ImageBlock>
<div ref={resize_box}>
{imgUrl ? (
@ -229,6 +229,6 @@ export const ImageView: FC<ImageView> = ({ block, editor }) => {
</div> */}
</div>
</ImageBlock>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
);
};

View File

@ -19,9 +19,8 @@ import {
supportChildren,
RenderBlockChildren,
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import { List } from '../../components/style-container';
import { BlockContainer } from '../../components/BlockContainer';
@ -185,7 +184,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
return (
<BlockContainer editor={editor} block={block} selected={isSelect}>
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<List>
<div className={'checkBoxContainer'}>
{getNumber(properties.numberType, number)}.
@ -203,7 +202,7 @@ export const NumberedView: FC<CreateView> = ({ block, editor }) => {
/>
</div>
</List>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
<IndentWrapper>
<RenderBlockChildren block={block} />

View File

@ -8,7 +8,7 @@ import {
supportChildren,
unwrapGroup,
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import { Protocol } from '@toeverything/datasource/db-service';
@ -99,7 +99,7 @@ export const TextView: FC<CreateTextView> = ({
if (!parentBlock) {
return false;
}
const preParent = await parentBlock.previousSibling();
if (Protocol.Block.Type.group === parentBlock.type) {
const children = await block.children();
const preNode = await block.physicallyPerviousSibling();
@ -129,34 +129,19 @@ export const TextView: FC<CreateTextView> = ({
'start'
);
if (block.blockProvider.isEmpty()) {
block.remove();
}
}
return true;
} else {
// TODO remove timing problem
const prevGroupBlock = await parentBlock.previousSibling();
if (!prevGroupBlock) {
const childrenBlock = await parentBlock.children();
if (childrenBlock.length) {
if (children.length) {
await parentBlock.append(...children);
}
await block.remove();
return true;
const parentChild = await parentBlock.children();
if (
parentBlock.type ===
Protocol.Block.Type.group &&
!parentChild.length
) {
await editor.selectionManager.setSelectedNodesIds(
[preParent?.id ?? editor.getRootBlockId()]
);
}
}
parentBlock.remove();
return true;
}
if (prevGroupBlock.type !== Protocol.Block.Type.group) {
unwrapGroup(parentBlock);
return true;
}
mergeGroup(prevGroupBlock, parentBlock);
return true;
}
}
@ -231,7 +216,7 @@ export const TextView: FC<CreateTextView> = ({
selected={isSelect}
className={containerClassName}
>
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<BlockPendantProvider block={block}>
<TextBlock
block={block}
type={block.type}
@ -242,7 +227,7 @@ export const TextView: FC<CreateTextView> = ({
handleConvert={handleConvert}
handleTab={onTab}
/>
</WrapperWithPendantAndDragDrop>
</BlockPendantProvider>
<IndentWrapper>
<RenderBlockChildren block={block} />
</IndentWrapper>

View File

@ -1,6 +1,18 @@
import type { AsyncBlock } from '@toeverything/components/editor-core';
import {
AsyncBlock,
useCurrentView,
useLazyIframe,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import type { FC } from 'react';
import {
FC,
ReactElement,
ReactNode,
useEffect,
useRef,
useState,
} from 'react';
import { SCENE_CONFIG } from '../../blocks/group/config';
import { BlockPreview } from './BlockView';
import { formatUrl } from './format-url';
@ -15,7 +27,18 @@ export interface Props {
}
const getHost = (url: string) => new URL(url).host;
const MouseMaskContainer = styled('div')({
position: 'absolute',
zIndex: 1,
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
backgroundColor: 'transparent',
'&:hover': {
pointerEvents: 'none',
},
});
const LinkContainer = styled('div')<{
isSelected: boolean;
}>(({ theme, isSelected }) => {
@ -38,12 +61,28 @@ const LinkContainer = styled('div')<{
},
};
});
const _getLinkStyle = (scene: string) => {
switch (scene) {
case SCENE_CONFIG.PAGE:
return {
width: '420px',
height: '198px',
};
default:
return {
width: '252px',
height: '126px',
};
}
};
const SourceViewContainer = styled('div')<{
isSelected: boolean;
}>(({ theme, isSelected }) => {
scene: string;
}>(({ theme, isSelected, scene }) => {
return {
..._getLinkStyle(scene),
overflow: 'hidden',
position: 'relative',
borderRadius: theme.affine.shape.borderRadius,
background: isSelected ? 'rgba(152, 172, 189, 0.1)' : 'transparent',
padding: '8px',
@ -52,32 +91,96 @@ const SourceViewContainer = styled('div')<{
height: '100%',
border: '1px solid #EAEEF2',
borderRadius: theme.affine.shape.borderRadius,
userSelect: 'none',
},
};
});
const LazyIframe = ({
src,
delay = 3000,
fallback,
}: {
src: string;
delay?: number;
fallback?: ReactNode;
}) => {
const [show, setShow] = useState(false);
const timer = useRef<number>();
useEffect(() => {
// Hide iframe when the src changed
setShow(false);
}, [src]);
const onLoad = () => {
clearTimeout(timer.current);
timer.current = window.setTimeout(() => {
// Prevent iframe scrolling parent container
// Remove the delay after the issue is resolved
// See W3C https://github.com/w3c/csswg-drafts/issues/7134
// See https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6
setShow(true);
}, delay);
};
return (
<>
<div
onMouseDown={e => {
e.preventDefault();
e.stopPropagation();
}}
style={{ display: show ? 'block' : 'none', height: '100%' }}
>
<iframe src={src} onLoad={onLoad} />
</div>
{!show && fallback}
</>
);
};
const Loading = styled('div')(() => {
return {
width: '100%',
height: '100%',
display: 'flex',
lineHeight: '100%',
alignItems: 'center',
justifyContent: 'center',
border: '1px solid #EAEEF2',
};
});
const LoadingContiner = () => {
return <Loading>loading...</Loading>;
};
export const SourceView: FC<Props> = props => {
const { link, isSelected, block, editorElement } = props;
const src = formatUrl(link);
const openTabOnBrowser = () => {
window.open(link, '_blank');
};
// let iframeShow = useLazyIframe(src, 3000, iframeContainer);
const [currentView] = useCurrentView();
const { type } = currentView;
if (src?.startsWith('http')) {
return (
<LinkContainer
isSelected={isSelected}
onMouseDown={e => e.preventDefault()}
onClick={openTabOnBrowser}
>
<p>{getHost(src)}</p>
<p>{src}</p>
</LinkContainer>
<div style={{ display: 'flex' }}>
<SourceViewContainer isSelected={isSelected} scene={type}>
<MouseMaskContainer />
<LazyIframe
src={src}
fallback={LoadingContiner()}
></LazyIframe>
</SourceViewContainer>
</div>
);
} else if (src?.startsWith('affine')) {
return (
<SourceViewContainer
isSelected={isSelected}
style={{ padding: '0' }}
scene={type}
>
<BlockPreview
block={block}

View File

@ -3,7 +3,7 @@ import {
RenderBlock,
useCurrentView,
useOnSelect,
WrapperWithPendantAndDragDrop,
BlockPendantProvider,
} from '@toeverything/components/editor-core';
import { styled } from '@toeverything/components/ui';
import type {
@ -13,7 +13,6 @@ import type {
ReactElement,
} from 'react';
import { forwardRef, useState } from 'react';
import style9 from 'style9';
import { SCENE_CONFIG } from '../blocks/group/config';
import { BlockContainer } from '../components/BlockContainer';
@ -30,29 +29,15 @@ const TreeView = forwardRef<
{ lastItem?: boolean } & ComponentPropsWithRef<'div'>
>(({ lastItem, children, onClick, ...restProps }, ref) => {
return (
<div ref={ref} className={treeStyles('treeWrapper')} {...restProps}>
<div className={treeStyles('treeView')}>
<div
className={treeStyles({
line: true,
verticalLine: true,
lastItemVerticalLine: lastItem,
})}
onClick={onClick}
/>
<div
className={treeStyles({
line: true,
horizontalLine: true,
lastItemHorizontalLine: lastItem,
})}
onClick={onClick}
/>
{lastItem && <div className={treeStyles('lastItemRadius')} />}
</div>
<TreeWrapper ref={ref} {...restProps}>
<StyledTreeView>
<VerticalLine last={lastItem} onClick={onClick} />
<HorizontalLine last={lastItem} onClick={onClick} />
{lastItem && <LastItemRadius />}
</StyledTreeView>
{/* maybe need a child wrapper */}
{children}
</div>
</TreeWrapper>
);
});
@ -71,10 +56,7 @@ const ChildrenView = ({
const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
return (
<div
className={styles('children')}
style={{ ...(!isKanbanScene && { marginLeft: indent }) }}
>
<Children style={{ ...(!isKanbanScene && { marginLeft: indent }) }}>
{childrenIds.map((childId, idx) => {
if (isKanbanScene) {
return (
@ -94,7 +76,7 @@ const ChildrenView = ({
</TreeView>
);
})}
</div>
</Children>
);
};
@ -104,9 +86,7 @@ const CollapsedNode = forwardRef<
>((props, ref) => {
return (
<TreeView ref={ref} lastItem={true} {...props}>
<div className={treeStyles('collapsed')} onClick={props.onClick}>
···
</div>
<Collapsed onClick={props.onClick}>···</Collapsed>
</TreeView>
);
});
@ -146,11 +126,11 @@ export const withTreeViewChildren = (
editor={props.editor}
block={block}
selected={isSelect}
className={styles('wrapper')}
className={Wrapper.toString()}
>
<WrapperWithPendantAndDragDrop editor={editor} block={block}>
<div className={styles('node')}>{creator(props)}</div>
</WrapperWithPendantAndDragDrop>
<BlockPendantProvider block={block}>
<div>{creator(props)}</div>
</BlockPendantProvider>
{collapsed && (
<CollapsedNode
@ -170,93 +150,79 @@ export const withTreeViewChildren = (
};
};
const styles = style9.create({
wrapper: {
display: 'flex',
flexDirection: 'column',
},
node: {},
const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
children: {
display: 'flex',
flexDirection: 'column',
},
const Children = Wrapper;
const TREE_COLOR = '#D5DFE6';
// TODO determine the position of the horizontal line by the type of the item
const ITEM_POINT_HEIGHT = '12.5px'; // '50%'
const TreeWrapper = styled('div')({
position: 'relative',
});
const treeColor = '#D5DFE6';
// TODO determine the position of the horizontal line by the type of the item
const itemPointHeight = '12.5px'; // '50%'
const StyledTreeView = styled('div')({
position: 'absolute',
left: '-21px',
height: '100%',
});
const treeStyles = style9.create({
treeWrapper: {
position: 'relative',
},
const Line = styled('div')({
position: 'absolute',
cursor: 'pointer',
backgroundColor: TREE_COLOR,
// somehow tldraw would override this
boxSizing: 'content-box!important' as any,
// See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
backgroundClip: 'content-box',
backgroundOrigin: 'content-box',
// Increase click hot spot
padding: '10px',
});
treeView: {
position: 'absolute',
left: '-21px',
height: '100%',
},
line: {
position: 'absolute',
cursor: 'pointer',
backgroundColor: treeColor,
boxSizing: 'content-box',
// See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
backgroundClip: 'content-box',
backgroundOrigin: 'content-box',
// Increase click hot spot
padding: '10px',
},
verticalLine: {
width: '1px',
height: '100%',
paddingTop: 0,
paddingBottom: 0,
transform: 'translate(-50%, 0)',
},
horizontalLine: {
width: '16px',
height: '1px',
paddingLeft: 0,
paddingRight: 0,
top: itemPointHeight,
transform: 'translate(0, -50%)',
},
noItemHorizontalLine: {
display: 'none',
},
const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '1px',
height: last ? ITEM_POINT_HEIGHT : '100%',
paddingTop: 0,
paddingBottom: 0,
transform: 'translate(-50%, 0)',
lastItemHorizontalLine: {
opacity: 0,
},
lastItemVerticalLine: {
height: itemPointHeight,
opacity: 0,
},
lastItemRadius: {
boxSizing: 'content-box',
position: 'absolute',
left: '-0.5px',
top: 0,
height: itemPointHeight,
bottom: '50%',
width: '16px',
borderWidth: '1px',
borderStyle: 'solid',
borderLeftColor: treeColor,
borderBottomColor: treeColor,
borderTop: 'none',
borderRight: 'none',
borderRadius: '0 0 0 3px',
pointerEvents: 'none',
},
opacity: last ? 0 : 'unset',
}));
collapsed: {
cursor: 'pointer',
display: 'inline-block',
color: '#B9CAD5',
},
const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
width: '16px',
height: '1px',
paddingLeft: 0,
paddingRight: 0,
top: ITEM_POINT_HEIGHT,
transform: 'translate(0, -50%)',
opacity: last ? 0 : 'unset',
}));
const Collapsed = styled('div')({
cursor: 'pointer',
display: 'inline-block',
color: '#B9CAD5',
});
const LastItemRadius = styled('div')({
boxSizing: 'content-box',
position: 'absolute',
left: '-0.5px',
top: 0,
height: ITEM_POINT_HEIGHT,
bottom: '50%',
width: '16px',
borderWidth: '1px',
borderStyle: 'solid',
borderLeftColor: TREE_COLOR,
borderBottomColor: TREE_COLOR,
borderTop: 'none',
borderRight: 'none',
borderRadius: '0 0 0 3px',
pointerEvents: 'none',
});
const StyledBorder = styled('div')({

View File

@ -1,9 +1,8 @@
import { createContext, useContext } from 'react';
import type { BlockEditor, AsyncBlock } from './editor';
import type { Column } from '@toeverything/datasource/db-service';
import { genErrorObj } from '@toeverything/utils';
export const RootContext = createContext<{
const RootContext = createContext<{
editor: BlockEditor;
// TODO: Temporary fix, dependencies in the new architecture are bottom-up, editors do not need to be passed down from the top
editorElement: () => JSX.Element;
@ -14,6 +13,8 @@ export const RootContext = createContext<{
) as any
);
export const EditorProvider = RootContext.Provider;
export const useEditor = () => {
return useContext(RootContext);
};
@ -22,16 +23,3 @@ export const useEditor = () => {
* @deprecated
*/
export const BlockContext = createContext<AsyncBlock>(null as any);
/**
* Context of column information
*
* @deprecated
*/
export const ColumnsContext = createContext<{
fromId: string;
columns: Column[];
}>({
fromId: '',
columns: [],
});

View File

@ -2,14 +2,14 @@ import type { BlockEditor } from './editor';
import { styled, usePatchNodes } from '@toeverything/components/ui';
import type { FC, PropsWithChildren } from 'react';
import React, { useEffect, useRef, useState, useCallback } from 'react';
import { RootContext } from './contexts';
import { EditorProvider } from './Contexts';
import { SelectionRect, SelectionRef } from './Selection';
import {
Protocol,
services,
type ReturnUnobserve,
} from '@toeverything/datasource/db-service';
import { addNewGroup } from './recast-block';
import { addNewGroup, appendNewGroup } from './recast-block';
import { useIsOnDrag } from './hooks';
interface RenderRootProps {
@ -151,7 +151,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
};
return (
<RootContext.Provider value={{ editor, editorElement }}>
<EditorProvider value={{ editor, editorElement }}>
<Container
isWhiteboard={editor.isWhiteboard}
ref={ref => {
@ -183,7 +183,7 @@ export const RenderRoot: FC<PropsWithChildren<RenderRootProps>> = ({
{editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
{patchedNodes}
</Container>
</RootContext.Provider>
</EditorProvider>
);
};
@ -199,24 +199,32 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
mouseMoved.current = false;
return;
}
const lastBlock = await editor.getRootLastChildrenBlock();
const rootBlock = await editor.getBlockById(
editor.getRootBlockId()
);
if (!rootBlock) {
throw new Error('root block is not found');
}
const lastGroupBlock = await editor.getRootLastChildrenBlock();
const lastRootChildren = await rootBlock.lastChild();
// If last block is not a group
// create a group with a empty text
if (lastGroupBlock.type !== 'group') {
addNewGroup(editor, lastBlock, true);
if (lastRootChildren == null) {
appendNewGroup(editor, rootBlock, true);
return;
}
if (lastGroupBlock.childrenIds.length > 1) {
addNewGroup(editor, lastBlock, true);
if (
lastRootChildren.type !== Protocol.Block.Type.group ||
lastRootChildren.childrenIds.length > 1
) {
addNewGroup(editor, lastRootChildren, true);
return;
}
// If the **only** block in the group is text and is empty
// active the text block
const theGroupChildBlock = await lastGroupBlock.firstChild();
const theGroupChildBlock = await lastRootChildren.firstChild();
if (
theGroupChildBlock &&
@ -229,7 +237,7 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
return;
}
// else create a new group
addNewGroup(editor, lastBlock, true);
addNewGroup(editor, lastRootChildren, true);
},
[editor]
);

View File

@ -1,21 +0,0 @@
import { AsyncBlock, BlockEditor } from '../editor';
import type { FC, ReactElement } from 'react';
import { BlockPendantProvider } from '../block-pendant';
import { DragDropWrapper } from '../drag-drop-wrapper';
type BlockContentWrapperProps = {
block: AsyncBlock;
editor: BlockEditor;
children: ReactElement | null;
};
export const WrapperWithPendantAndDragDrop: FC<BlockContentWrapperProps> =
function ({ block, children, editor }) {
return (
<DragDropWrapper block={block} editor={editor}>
<BlockPendantProvider block={block}>
{children}
</BlockPendantProvider>
</DragDropWrapper>
);
};

View File

@ -1 +0,0 @@
export * from './BlockContentWrapper';

View File

@ -1,5 +1,4 @@
import type { FC, PropsWithChildren } from 'react';
import React, { useState } from 'react';
import { styled } from '@toeverything/components/ui';
import type { AsyncBlock } from '../editor';
import { PendantPopover } from './pendant-popover';
@ -11,74 +10,68 @@ interface BlockTagProps {
block: AsyncBlock;
}
/**
* @deprecated Need to be refactored
*/
export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
block,
children,
}) => {
const [container, setContainer] = useState<HTMLElement>(null);
const [isHover, setIsHover] = useState(false);
return (
<Container ref={(dom: HTMLElement) => setContainer(dom)}>
<Container>
{children}
{container && (
<PendantPopover
block={block}
container={container}
onVisibleChange={visible => {
setIsHover(visible);
}}
>
<StyledTriggerLine
className="triggerLine"
isHover={isHover}
/>
</PendantPopover>
)}
<PendantPopover block={block}>
<StyledTriggerLine />
</PendantPopover>
<PendantRender block={block} />
</Container>
);
};
const Container = styled('div')({
export const LINE_GAP = 16;
const TAG_GAP = 4;
const StyledTriggerLine = styled('div')({
padding: `${TAG_GAP}px 0`,
width: '100px',
cursor: 'default',
display: 'flex',
alignItems: 'flex-end',
position: 'relative',
padding: '4px',
'&:hover .triggerLine::before': {
display: 'flex',
'::before': {
content: "''",
width: '100%',
height: '2px',
background: '#dadada',
display: 'none',
position: 'absolute',
left: '0',
top: '4px',
},
'::after': {
content: "''",
width: '0',
height: '2px',
background: '#aac4d5',
display: 'block',
position: 'absolute',
left: '0',
top: '4px',
transition: 'width .3s',
},
});
const StyledTriggerLine = styled('div')<{ isHover: boolean }>(({ isHover }) => {
return {
padding: '4px 0',
width: '100px',
cursor: 'default',
display: 'flex',
alignItems: 'flex-end',
position: 'relative',
'::before': {
content: "''",
width: '100%',
height: '2px',
background: '#dadada',
display: 'none',
position: 'absolute',
left: '0',
top: '4px',
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
'&:hover': {
[StyledTriggerLine.toString()]: {
'&::before': {
display: 'flex',
},
'&::after': {
width: '100%',
},
},
'::after': {
content: "''",
width: isHover ? '100%' : '0',
height: '2px',
background: '#aac4d5',
display: 'block',
position: 'absolute',
left: '0',
top: '4px',
transition: 'width .3s',
},
};
},
});

View File

@ -1,5 +1,4 @@
import React, { ReactNode, useRef, useEffect, useState } from 'react';
import { getPendantHistory } from '../utils';
import {
getRecastItemValue,
RecastMetaProperty,
@ -30,22 +29,22 @@ export const PendantHistoryPanel = ({
const [history, setHistory] = useState<RecastBlockValue[]>([]);
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const { getValueHistory } = getRecastItemValue(block);
useEffect(() => {
const init = async () => {
const currentBlockValues = getRecastItemValue(block).getAllValue();
const allProperties = getProperties();
const missProperties = allProperties.filter(
const missValues = getProperties().filter(
property => !currentBlockValues.find(v => v.id === property.id)
);
const pendantHistory = getPendantHistory({
const valueHistory = getValueHistory({
recastBlockId: recastBlock.id,
});
const historyMap = missProperties.reduce<{
[key: RecastPropertyId]: string;
const historyMap = missValues.reduce<{
[key: RecastPropertyId]: string[];
}>((history, property) => {
if (pendantHistory[property.id]) {
history[property.id] = pendantHistory[property.id];
if (valueHistory[property.id]) {
history[property.id] = valueHistory[property.id];
}
return history;
@ -54,18 +53,30 @@ export const PendantHistoryPanel = ({
const blockHistory = (
await Promise.all(
Object.entries(historyMap).map(
async ([propertyId, blockId]) => {
const latestValueBlock = (
await groupBlock.children()
).find((block: AsyncBlock) => block.id === blockId);
async ([propertyId, blockIds]) => {
const blocks = await groupBlock.children();
const latestChangeBlock = blockIds
.reverse()
.reduce<AsyncBlock>((block, id) => {
if (!block) {
return blocks.find(
block => block.id === id
);
}
return block;
}, null);
return getRecastItemValue(
latestValueBlock
).getValue(propertyId as RecastPropertyId);
if (latestChangeBlock) {
return getRecastItemValue(
latestChangeBlock
).getValue(propertyId as RecastPropertyId);
}
return null;
}
)
)
).filter(v => v);
setHistory(blockHistory);
};

View File

@ -4,7 +4,7 @@ import { ModifyPanelContentProps } from './types';
import { StyledDivider, StyledPopoverSubTitle } from '../StyledComponent';
import { BasicSelect } from './Select';
import { InformationProperty, InformationValue } from '../../recast-block';
import { genInitialOptions, getPendantIconsConfigByName } from '../utils';
import { generateInitialOptions, getPendantIconsConfigByName } from '../utils';
export default (props: ModifyPanelContentProps) => {
const { onPropertyChange, onValueChange, initialValue, property } = props;
@ -38,7 +38,7 @@ export default (props: ModifyPanelContentProps) => {
}}
initialOptions={
propProperty?.emailOptions ||
genInitialOptions(
generateInitialOptions(
property?.type,
getPendantIconsConfigByName('Email')
)
@ -66,7 +66,7 @@ export default (props: ModifyPanelContentProps) => {
}}
initialOptions={
propProperty?.phoneOptions ||
genInitialOptions(
generateInitialOptions(
property?.type,
getPendantIconsConfigByName('Phone')
)
@ -94,7 +94,7 @@ export default (props: ModifyPanelContentProps) => {
}}
initialOptions={
propProperty?.locationOptions ||
genInitialOptions(
generateInitialOptions(
property?.type,
getPendantIconsConfigByName('Location')
)

View File

@ -18,7 +18,9 @@ export default ({
user: { username, nickname, photo },
} = useUserAndSpaces();
const [selectedValue, setSelectedValue] = useState(initialValue?.value);
const [selectedValue, setSelectedValue] = useState(
initialValue?.value || ''
);
const [focus, setFocus] = useState(false);
const theme = useTheme();
return (

View File

@ -21,7 +21,7 @@ import {
} from '@toeverything/components/ui';
import { HighLightIconInput } from './IconInput';
import { PendantConfig, IconNames, OptionIdType, OptionType } from '../types';
import { genBasicOption } from '../utils';
import { generateBasicOption } from '../utils';
type OptionItemType = {
option: OptionType;
@ -66,7 +66,7 @@ export const BasicSelect = ({
const [selectIds, setSelectIds] = useState<OptionIdType[]>(initialValue);
const insertOption = (insertId: OptionIdType) => {
const newOption = genBasicOption({
const newOption = generateBasicOption({
index: options.length + 1,
iconConfig,
});

View File

@ -1,5 +1,4 @@
import React, { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';
import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { AsyncBlock } from '../../editor';
@ -15,13 +14,13 @@ import {
StyledPopoverSubTitle,
StyledPopoverWrapper,
} from '../StyledComponent';
import { genInitialOptions, getPendantConfigByType } from '../utils';
import {
generateRandomFieldName,
generateInitialOptions,
getPendantConfigByType,
} from '../utils';
import { useOnCreateSure } from './hooks';
const upperFirst = (str: string) => {
return `${str[0].toUpperCase()}${str.slice(1)}`;
};
export const CreatePendantPanel = ({
block,
onSure,
@ -35,7 +34,7 @@ export const CreatePendantPanel = ({
useEffect(() => {
selectedOption &&
setFieldName(upperFirst(`${selectedOption.type}#${nanoid(4)}`));
setFieldName(generateRandomFieldName(selectedOption.type));
}, [selectedOption]);
return (
@ -45,7 +44,7 @@ export const CreatePendantPanel = ({
<Select
width={284}
placeholder="Search for a field type"
value={selectedOption}
value={selectedOption ?? null}
onChange={(selectedValue: PendantOptions) => {
setSelectedOption(selectedValue);
}}
@ -93,7 +92,7 @@ export const CreatePendantPanel = ({
<PendantModifyPanel
type={selectedOption.type}
// Select, MultiSelect, Status use this props as initial property
initialOptions={genInitialOptions(
initialOptions={generateInitialOptions(
selectedOption.type,
getPendantConfigByType(selectedOption.type)
)}

View File

@ -4,11 +4,11 @@ import { HelpCenterIcon } from '@toeverything/components/icons';
import { PendantModifyPanel } from '../pendant-modify-panel';
import type { AsyncBlock } from '../../editor';
import {
getRecastItemValue,
type RecastBlockValue,
type RecastMetaProperty,
} from '../../recast-block';
import { getPendantConfigByType } from '../utils';
import { usePendant } from '../use-pendant';
import {
StyledPopoverWrapper,
StyledOperationLabel,
@ -42,7 +42,8 @@ export const UpdatePendantPanel = ({
}: Props) => {
const pendantOption = pendantOptions.find(v => v.type === property.type);
const iconConfig = getPendantConfigByType(property.type);
const { removePendant } = usePendant(block);
const { removeValue } = getRecastItemValue(block);
const Icon = IconMap[iconConfig.iconName];
const [fieldName, setFieldName] = useState(property.name);
const onUpdateSure = useOnUpdateSure({ block, property });
@ -108,7 +109,7 @@ export const UpdatePendantPanel = ({
onDelete={
hasDelete
? async () => {
await removePendant(property);
await removeValue(property.id);
}
: null
}

View File

@ -1,16 +1,23 @@
import type { CSSProperties } from 'react';
import {
genSelectOptionId,
getRecastItemValue,
type InformationProperty,
type MultiSelectProperty,
type RecastMetaProperty,
type SelectOption,
type SelectProperty,
useRecastBlock,
useRecastBlockMeta,
useSelectProperty,
SelectValue,
MultiSelectValue,
StatusValue,
InformationValue,
TextValue,
DateValue,
} from '../../recast-block';
import { type AsyncBlock } from '../../editor';
import { usePendant } from '../use-pendant';
import {
type OptionType,
PendantTypes,
@ -41,8 +48,8 @@ const genOptionWithId = (options: OptionType[] = []) => {
export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
const { addProperty } = useRecastBlockMeta();
const { createSelect } = useSelectProperty();
const { setPendant } = usePendant(block);
const recastBlock = useRecastBlock();
const { setValue } = getRecastItemValue(block);
return async ({
type,
fieldName,
@ -79,7 +86,14 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
tempSelectedId: newValue,
});
await setPendant(newProperty, selectedId);
await setValue(
{
id: newProperty.id,
type: newProperty.type,
value: selectedId,
} as SelectValue | MultiSelectValue | StatusValue,
recastBlock.id
);
} else if (type === PendantTypes.Information) {
const emailOptions = genOptionWithId(newPropertyItem.emailOptions);
@ -97,26 +111,33 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
locationOptions,
} as Omit<InformationProperty, 'id'>);
await setPendant(newProperty, {
email: getOfficialSelected({
isMulti: true,
options: emailOptions,
tempOptions: newPropertyItem.emailOptions,
tempSelectedId: newValue.email,
}),
phone: getOfficialSelected({
isMulti: true,
options: phoneOptions,
tempOptions: newPropertyItem.phoneOptions,
tempSelectedId: newValue.phone,
}),
location: getOfficialSelected({
isMulti: true,
options: locationOptions,
tempOptions: newPropertyItem.locationOptions,
tempSelectedId: newValue.location,
}),
});
await setValue(
{
id: newProperty.id,
type: newProperty.type,
value: {
email: getOfficialSelected({
isMulti: true,
options: emailOptions,
tempOptions: newPropertyItem.emailOptions,
tempSelectedId: newValue.email,
}),
phone: getOfficialSelected({
isMulti: true,
options: phoneOptions,
tempOptions: newPropertyItem.phoneOptions,
tempSelectedId: newValue.phone,
}),
location: getOfficialSelected({
isMulti: true,
options: locationOptions,
tempOptions: newPropertyItem.locationOptions,
tempSelectedId: newValue.location,
}),
},
} as InformationValue,
recastBlock.id
);
} else {
// TODO: Color and background should use pendant config, but ui is not design now
const iconConfig = getPendantConfigByType(type);
@ -129,8 +150,14 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
color: iconConfig.color as CSSProperties['color'],
iconName: iconConfig.iconName,
});
await setPendant(newProperty, newValue);
await setValue(
{
id: newProperty.id,
type: newProperty.type,
value: newValue,
} as TextValue | DateValue,
recastBlock.id
);
}
};
};
@ -144,8 +171,9 @@ export const useOnUpdateSure = ({
property: RecastMetaProperty;
}) => {
const { updateSelect } = useSelectProperty();
const { setPendant } = usePendant(block);
const { updateProperty } = useRecastBlockMeta();
const { setValue } = getRecastItemValue(block);
const recastBlock = useRecastBlock();
return async ({
type,
@ -199,7 +227,14 @@ export const useOnUpdateSure = ({
tempSelectedId: newValue,
});
await setPendant(selectProperty, selectedId);
await setValue(
{
id: selectProperty.id,
type: selectProperty.type,
value: selectedId,
} as SelectValue | MultiSelectValue | StatusValue,
recastBlock.id
);
} else if (type === PendantTypes.Information) {
// const { emailOptions, phoneOptions, locationOptions } =
// property as InformationProperty;
@ -231,28 +266,42 @@ export const useOnUpdateSure = ({
locationOptions,
} as InformationProperty);
await setPendant(newProperty, {
email: getOfficialSelected({
isMulti: true,
options: emailOptions as SelectOption[],
tempOptions: newPropertyItem.emailOptions,
tempSelectedId: newValue.email,
}),
phone: getOfficialSelected({
isMulti: true,
options: phoneOptions as SelectOption[],
tempOptions: newPropertyItem.phoneOptions,
tempSelectedId: newValue.phone,
}),
location: getOfficialSelected({
isMulti: true,
options: locationOptions as SelectOption[],
tempOptions: newPropertyItem.locationOptions,
tempSelectedId: newValue.location,
}),
});
await setValue(
{
id: newProperty.id,
type: newProperty.type,
value: {
email: getOfficialSelected({
isMulti: true,
options: emailOptions as SelectOption[],
tempOptions: newPropertyItem.emailOptions,
tempSelectedId: newValue.email,
}),
phone: getOfficialSelected({
isMulti: true,
options: phoneOptions as SelectOption[],
tempOptions: newPropertyItem.phoneOptions,
tempSelectedId: newValue.phone,
}),
location: getOfficialSelected({
isMulti: true,
options: locationOptions as SelectOption[],
tempOptions: newPropertyItem.locationOptions,
tempSelectedId: newValue.location,
}),
},
} as InformationValue,
recastBlock.id
);
} else {
await setPendant(property, newValue);
await setValue(
{
id: property.id,
type: property.type,
value: newValue,
} as TextValue | DateValue,
recastBlock.id
);
}
if (fieldName !== property.name) {

View File

@ -1,4 +1,4 @@
import React, { FC, useRef } from 'react';
import { FC, useRef } from 'react';
import { AsyncBlock } from '../../editor';
import { PendantHistoryPanel } from '../pendant-history-panel';
import {
@ -21,8 +21,6 @@ export const PendantPopover: FC<
pointerEnterDelay={300}
pointerLeaveDelay={200}
placement="bottom-start"
// visible={true}
// trigger="click"
content={
<PendantHistoryPanel
block={block}

View File

@ -1,5 +1,5 @@
import {
MuiZoom,
MuiFade,
Popover,
PopperHandler,
styled,
@ -100,16 +100,15 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
);
})}
{hasAddBtn ? (
<MuiZoom in={showAddBtn}>
<MuiFade in={showAddBtn}>
<div>
<AddPendantPopover
block={block}
iconStyle={{ marginTop: 4 }}
container={blockRenderContainerRef.current}
trigger="click"
/>
</div>
</MuiZoom>
</MuiFade>
) : null}
</BlockPendantContainer>
);

View File

@ -1,41 +0,0 @@
import { removePropertyValueRecord, setPendantHistory } from './utils';
import { AsyncBlock } from '../editor';
import {
getRecastItemValue,
RecastMetaProperty,
useRecastBlock,
} from '../recast-block';
export const usePendant = (block: AsyncBlock) => {
// const { getProperties, removeProperty } = useRecastBlockMeta();
const recastBlock = useRecastBlock();
const { getValue, setValue, removeValue } = getRecastItemValue(block);
// const { updateSelect } = useSelectProperty();
const setPendant = async (property: RecastMetaProperty, newValue: any) => {
const nv = {
id: property.id,
type: property.type,
value: newValue,
};
await setValue(nv);
setPendantHistory({
recastBlockId: recastBlock.id,
blockId: block.id,
propertyId: property.id,
});
};
const removePendant = async (property: RecastMetaProperty) => {
await removeValue(property.id);
removePropertyValueRecord({
recastBlockId: block.id,
propertyId: property.id,
});
};
return {
setPendant,
removePendant,
};
};

View File

@ -1,84 +1,7 @@
import {
PropertyType,
RecastBlockValue,
RecastPropertyId,
SelectOption,
} from '../recast-block';
import { OptionIdType, OptionType } from './types';
import { PropertyType, SelectOption } from '../recast-block';
import { OptionIdType, OptionType, PendantConfig, PendantTypes } from './types';
import { pendantConfig } from './config';
import { PendantConfig, PendantTypes } from './types';
type Props = {
recastBlockId: string;
blockId: string;
propertyId: RecastPropertyId;
};
type StorageMap = {
[recastBlockId: string]: {
[propertyId: RecastPropertyId]: string;
};
};
const LOCAL_STORAGE_NAME = 'TEMPORARY_PENDANT_DATA';
const ensureLocalStorage = () => {
const data = localStorage.getItem(LOCAL_STORAGE_NAME);
if (!data) {
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify({}));
}
};
export const setPendantHistory = ({
recastBlockId,
blockId,
propertyId,
}: Props) => {
ensureLocalStorage();
const data: StorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
if (!data[recastBlockId]) {
data[recastBlockId] = {};
}
const propertyValueRecord = data[recastBlockId];
propertyValueRecord[propertyId] = blockId;
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
};
export const getPendantHistory = ({
recastBlockId,
}: {
recastBlockId: string;
}) => {
ensureLocalStorage();
const data: StorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
return data[recastBlockId] ?? {};
};
export const removePropertyValueRecord = ({
recastBlockId,
propertyId,
}: {
recastBlockId: string;
propertyId: RecastPropertyId;
}) => {
ensureLocalStorage();
const data: StorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
if (!data[recastBlockId]) {
return;
}
delete data[recastBlockId][propertyId];
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
};
import { nanoid } from 'nanoid';
/**
* In select pendant panel, use mock options instead of use `createSelect` when add or delete option
@ -107,7 +30,7 @@ export const getOfficialSelected = ({
.map(id => {
return tempOptions.findIndex((o: OptionType) => o.id === id);
})
.filter(index => index != -1);
.filter(index => index !== -1);
selectedId = selectedIndex.map((index: number) => {
return options[index].id;
});
@ -130,7 +53,7 @@ export const getPendantIconsConfigByName = (
return pendantConfig[pendantName];
};
export const genBasicOption = ({
export const generateBasicOption = ({
index,
iconConfig,
name = '',
@ -159,22 +82,22 @@ export const genBasicOption = ({
/**
* Status Pendant is a Select Pendant built-in some options
* **/
export const genInitialOptions = (
export const generateInitialOptions = (
type: PendantTypes,
iconConfig: PendantConfig
) => {
if (type === PendantTypes.Status) {
return [
genBasicOption({ index: 0, iconConfig, name: 'No Started' }),
genBasicOption({
generateBasicOption({ index: 0, iconConfig, name: 'No Started' }),
generateBasicOption({
index: 1,
iconConfig,
name: 'In Progress',
}),
genBasicOption({ index: 2, iconConfig, name: 'Complete' }),
generateBasicOption({ index: 2, iconConfig, name: 'Complete' }),
];
}
return [genBasicOption({ index: 0, iconConfig })];
return [generateBasicOption({ index: 0, iconConfig })];
};
export const checkPendantForm = (
@ -222,3 +145,10 @@ export const checkPendantForm = (
return { passed: true, message: 'Check passed !' };
};
const upperFirst = (str: string) => {
return `${str[0].toUpperCase()}${str.slice(1)}`;
};
export const generateRandomFieldName = (type: PendantTypes) =>
upperFirst(`${type}#${nanoid(4)}`);

View File

@ -1,28 +0,0 @@
import { AsyncBlock, BlockEditor } from '../editor';
import { ReactElement } from 'react';
interface DragDropWrapperProps {
editor: BlockEditor;
block: AsyncBlock;
children: ReactElement | null;
}
export function DragDropWrapper({
children,
editor,
block,
}: DragDropWrapperProps) {
const handlerDragOver: React.DragEventHandler<HTMLDivElement> = event => {
event.preventDefault();
if (block.dom) {
editor.getHooks().afterOnNodeDragOver(event, {
blockId: block.id,
dom: block.dom,
rect: block.dom?.getBoundingClientRect(),
type: block.type,
properties: block.getProperties(),
});
}
};
return <div onDragOver={handlerDragOver}>{children}</div>;
}

View File

@ -1 +0,0 @@
export * from './DragDropWrapper';

View File

@ -12,6 +12,7 @@ enum DragType {
}
const DRAG_STATE_CHANGE_EVENT_KEY = 'dragStateChange';
const MAX_GRID_BLOCK_FLOOR = 3;
export class DragDropManager {
private _editor: Editor;
private _enabled: boolean;
@ -231,6 +232,17 @@ export class DragDropManager {
if (!(await this._canBeDrop(event))) {
direction = BlockDropPlacement.none;
}
if (
direction === BlockDropPlacement.left ||
direction === BlockDropPlacement.right
) {
const path = await this._editor.getBlockPath(blockId);
const gridBlocks = path.filter(block => block.type === 'grid');
// limit grid block floor counts
if (gridBlocks.length >= MAX_GRID_BLOCK_FLOOR) {
direction = BlockDropPlacement.none;
}
}
this._setBlockDragDirection(direction);
return direction;
}

View File

@ -340,7 +340,20 @@ export class Editor implements Virgo {
const rootBlockId = this.getRootBlockId();
const rootBlock = await this.getBlockById(rootBlockId);
const blockList: Array<AsyncBlock> = rootBlock ? [rootBlock] : [];
const children = (await rootBlock?.children()) || [];
return [...blockList, ...(await this.getOffspring(rootBlockId))];
}
/**
*
* get all offspring of block
* @param {string} id
* @return {*}
* @memberof Editor
*/
async getOffspring(id: string) {
const block = await this.getBlockById(id);
const blockList: Array<AsyncBlock> = [];
const children = (await block?.children()) || [];
for (const block of children) {
if (!block) {
continue;
@ -354,15 +367,6 @@ export class Editor implements Virgo {
return blockList;
}
async getRootLastChildrenBlock(rootBlockId = this.getRootBlockId()) {
const rootBlock = await this.getBlockById(rootBlockId);
if (!rootBlock) {
throw new Error('root block is not found');
}
const lastChildren = await rootBlock.lastChild();
return lastChildren ?? rootBlock;
}
async getLastBlock(rootBlockId = this.getRootBlockId()) {
const rootBlock = await this.getBlockById(rootBlockId);
if (!rootBlock) {
@ -379,6 +383,20 @@ export class Editor implements Virgo {
return lastBlock;
}
async getBlockPath(id: string) {
const block = await this.getBlockById(id);
if (!block) {
return [];
}
const path = [block];
let parent = await block.parent();
while (parent) {
path.unshift(parent);
parent = await parent.parent();
}
return path;
}
async getBlockByPoint(point: Point) {
const blockList = await this.getBlockList();

View File

@ -35,20 +35,6 @@ export class KeyboardManager {
}
this.handler_map = {};
// WARNING: Remove the filter of hotkeys, the input event of input/select/textarea will be filtered out by default
// When there is a problem with the input of the text component, you need to pay attention to this
const old_filter = HotKeys.filter;
HotKeys.filter = event => {
let parent = (event.target as Element).parentElement;
while (parent) {
if (parent === editor.container) {
return old_filter(event);
}
parent = parent.parentElement;
}
return true;
};
HotKeys.setScope('editor');
// this.init_common_shortcut_cb();

View File

@ -113,13 +113,6 @@ export class Hooks implements HooksRunner, PluginHooks {
this._runHook(HookType.ON_ROOTNODE_DRAG_OVER_CAPTURE, e);
}
public afterOnNodeDragOver(
e: React.DragEvent<Element>,
node: BlockDomInfo
): void {
this._runHook(HookType.AFTER_ON_NODE_DRAG_OVER, e, node);
}
public onSearch(): void {
this._runHook(HookType.ON_SEARCH);
}

View File

@ -30,7 +30,6 @@ export class ScrollManager {
constructor(editor: BlockEditor) {
this._editor = editor;
(window as any).scrollManager = this;
}
private _updateScrollInfo(left: number, top: number) {
@ -111,6 +110,7 @@ export class ScrollManager {
}
public emitScrollEvent(event: UIEvent) {
this.scrollContainer = event.target as HTMLElement;
this._scrollDirection = this._getScrollDirection();
this._scrollMoveOffset = Math.abs(
this.scrollContainer.scrollTop - this._scrollRecord[0]

View File

@ -177,7 +177,6 @@ export enum HookType {
ON_ROOTNODE_DRAG_END = 'onRootNodeDragEnd',
ON_ROOTNODE_DRAG_OVER_CAPTURE = 'onRootNodeDragOverCapture',
ON_ROOTNODE_DROP = 'onRootNodeDrop',
AFTER_ON_NODE_DRAG_OVER = 'afterOnNodeDragOver',
BEFORE_COPY = 'beforeCopy',
BEFORE_CUT = 'beforeCut',
ON_ROOTNODE_SCROLL = 'onRootNodeScroll',
@ -219,10 +218,6 @@ export interface HooksRunner {
onRootNodeDragEnd: (e: React.DragEvent<Element>) => void;
onRootNodeDragLeave: (e: React.DragEvent<Element>) => void;
onRootNodeDrop: (e: React.DragEvent<Element>) => void;
afterOnNodeDragOver: (
e: React.DragEvent<Element>,
node: BlockDomInfo
) => void;
beforeCopy: (e: ClipboardEvent) => void;
beforeCut: (e: ClipboardEvent) => void;
onRootNodeScroll: (e: React.UIEvent) => void;

View File

@ -1,3 +1,6 @@
import { noop, Point } from '@toeverything/utils';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useEditor } from './Contexts';
import {
AsyncBlock,
BlockEditor,
@ -5,9 +8,6 @@ import {
SelectionInfo,
SelectionSettingsMap,
} from './editor';
import { noop, Point } from '@toeverything/utils';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { RootContext } from './contexts';
function useRequestReRender() {
const [, setUpdateCounter] = useState(0);
@ -56,7 +56,7 @@ function useRequestReRender() {
export const useBlock = (blockId: string) => {
const [block, setBlock] = useState<AsyncBlock>();
const requestReRender = useRequestReRender();
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
if (!blockId) {
return undefined;
@ -95,7 +95,7 @@ export const useOnSelect = (
blockId: string,
cb: (isSelect: boolean) => void
) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.selectionManager.observe(blockId, SelectEventTypes.onSelect, cb);
return () => {
@ -117,7 +117,7 @@ export const useOnSelectActive = (
blockId: string,
cb: (position: Point | undefined) => void
) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.selectionManager.observe(blockId, SelectEventTypes.active, cb);
return () => {
@ -139,7 +139,7 @@ export const useOnSelectSetSelection = <T extends keyof SelectionSettingsMap>(
blockId: string,
cb: (args: SelectionSettingsMap[T]) => void
) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.selectionManager.observe(
blockId,
@ -162,7 +162,7 @@ export const useOnSelectSetSelection = <T extends keyof SelectionSettingsMap>(
* @export
*/
export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.selectionManager.onSelectionChange(cb);
return () => {
@ -177,7 +177,7 @@ export const useOnSelectChange = (cb: (info: SelectionInfo) => void) => {
* @export
*/
export const useOnSelectEnd = (cb: (info: SelectionInfo) => void) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.selectionManager.onSelectEnd(cb);
return () => {
@ -195,7 +195,7 @@ export const useOnSelectStartWith = (
blockId: string,
cb: (args: MouseEvent) => void
) => {
const { editor } = useContext(RootContext);
const { editor } = useEditor();
useEffect(() => {
editor.mouseManager.onSelectStartWith(blockId, cb);
return () => {

View File

@ -1,4 +1,3 @@
export { ColumnsContext, RootContext } from './contexts';
export { RenderRoot, MIN_PAGE_WIDTH } from './RenderRoot';
export * from './render-block';
export * from './hooks';
@ -15,7 +14,6 @@ export * from './kanban/types';
export * from './utils';
export * from './drag-drop-wrapper';
export * from './block-content-wrapper';
export * from './editor';
export { RefPageProvider, useRefPage } from './ref-page';

View File

@ -6,10 +6,15 @@ import {
PropertyType,
RecastBlockValue,
RecastMetaProperty,
RecastPropertyId,
} from '../recast-block/types';
import type { DefaultGroup, KanbanGroup } from './types';
import { DEFAULT_GROUP_ID } from './types';
import {
generateInitialOptions,
generateRandomFieldName,
getPendantIconsConfigByName,
} from '../block-pendant/utils';
import { SelectOption } from '../recast-block';
/**
* - If the `groupBy` is `SelectProperty` or `MultiSelectProperty`, return `(Multi)SelectProperty.options`.
@ -23,6 +28,7 @@ export const getGroupOptions = async (
return [];
}
switch (groupBy.type) {
case PropertyType.Status:
case PropertyType.Select:
case PropertyType.MultiSelect: {
return groupBy.options.map(option => ({
@ -51,15 +57,13 @@ const isValueBelongOption = (
option: KanbanGroup
) => {
switch (propertyValue.type) {
case PropertyType.Select: {
case PropertyType.Select:
case PropertyType.Status: {
return propertyValue.value === option.id;
}
case PropertyType.MultiSelect: {
return propertyValue.value.some(i => i === option.id);
}
// case PropertyType.Text: {
// TOTODO:DO support this type
// }
default: {
console.error(propertyValue, option);
throw new Error('Not support group by type');
@ -96,40 +100,67 @@ export const calcCardGroup = (
/**
* Set group value for the card block
*/
export const moveCardToGroup = async (
groupById: RecastPropertyId,
cardBlock: RecastItem,
group: KanbanGroup
) => {
export const moveCardToGroup = async ({
groupBy,
cardBlock,
group,
recastBlock,
}: {
groupBy: RecastMetaProperty;
cardBlock: RecastItem;
group: KanbanGroup;
recastBlock: RecastBlock;
}) => {
const { setValue, removeValue } = getRecastItemValue(cardBlock);
let success = false;
if (group.id === DEFAULT_GROUP_ID) {
success = await removeValue(groupById);
success = await removeValue(groupBy.id);
return false;
}
switch (group.type) {
case PropertyType.Select: {
success = await setValue({
id: groupById,
type: group.type,
value: group.id,
});
success = await setValue(
{
id: groupBy.id,
type: group.type,
value: group.id,
},
recastBlock.id
);
break;
}
case PropertyType.Status: {
success = await setValue(
{
id: groupBy.id,
type: group.type,
value: group.id,
},
recastBlock.id
);
break;
}
case PropertyType.MultiSelect: {
success = await setValue({
id: groupById,
type: group.type,
value: [group.id],
});
success = await setValue(
{
id: groupBy.id,
type: group.type,
value: [group.id],
},
recastBlock.id
);
break;
}
case PropertyType.Text: {
success = await setValue({
id: groupById,
type: group.type,
value: group.id,
});
success = await setValue(
{
id: groupBy.id,
type: group.type,
value: group.id,
},
recastBlock.id
);
break;
}
default:
@ -194,14 +225,18 @@ export const genDefaultGroup = (groupBy: RecastMetaProperty): DefaultGroup => ({
items: [],
});
export const DEFAULT_GROUP_BY_PROPERTY = {
name: 'Status',
options: [
{ name: 'No Started', color: '#E53535', background: '#FFCECE' },
{ name: 'In Progress', color: '#A77F1A', background: '#FFF5AB' },
{ name: 'Complete', color: '#3C8867', background: '#C5FBE0' },
],
};
export const generateDefaultGroupByProperty = (): {
name: string;
options: Omit<SelectOption, 'id'>[];
type: PropertyType.Status;
} => ({
name: generateRandomFieldName(PropertyType.Status),
type: PropertyType.Status,
options: generateInitialOptions(
PropertyType.Status,
getPendantIconsConfigByName(PropertyType.Status)
),
});
/**
* Unwrap blocks from the grid recursively.

View File

@ -7,6 +7,7 @@ export const useKanbanGroup = (groupBy: RecastMetaProperty) => {
const { updateSelect } = useSelectProperty();
switch (groupBy.type) {
case PropertyType.Status:
case PropertyType.MultiSelect:
case PropertyType.Select: {
const {

View File

@ -1,6 +1,6 @@
import { Protocol } from '@toeverything/datasource/db-service';
import { useCallback, useContext, useEffect, useState } from 'react';
import { useEditor } from '../contexts';
import { useEditor } from '../Contexts';
import { AsyncBlock } from '../editor';
import { useRecastView } from '../recast-block';
import { useRecastBlock } from '../recast-block/Context';
@ -18,8 +18,8 @@ import {
import { supportChildren } from '../utils';
import {
calcCardGroup,
DEFAULT_GROUP_BY_PROPERTY,
genDefaultGroup,
generateDefaultGroupByProperty,
getCardGroup,
getGroupOptions,
moveCardToAfter,
@ -48,6 +48,7 @@ export const useRecastKanbanGroupBy = () => {
// Add other type groupBy support
const supportedGroupBy = getProperties().filter(
prop =>
prop.type === PropertyType.Status ||
prop.type === PropertyType.Select ||
prop.type === PropertyType.MultiSelect
);
@ -88,7 +89,8 @@ export const useRecastKanbanGroupBy = () => {
// TODO: support other property type
if (
groupByProperty.type !== PropertyType.Select &&
groupByProperty.type !== PropertyType.MultiSelect
groupByProperty.type !== PropertyType.MultiSelect &&
groupByProperty.type !== PropertyType.Status
) {
console.warn('Not support groupBy type', groupByProperty);
@ -134,7 +136,7 @@ export const useInitKanbanEffect = ():
}
// 3. no group by, no properties
// create a new property and set it as group by
const prop = await createSelect(DEFAULT_GROUP_BY_PROPERTY);
const prop = await createSelect(generateDefaultGroupByProperty());
await setGroupBy(prop.id);
};
@ -197,7 +199,12 @@ export const useRecastKanban = () => {
beforeBlock: string | null,
afterBlock: string | null
) => {
await moveCardToGroup(groupBy.id, child, kanbanMap[id]);
await moveCardToGroup({
groupBy,
cardBlock: child,
group: kanbanMap[id],
recastBlock,
});
if (beforeBlock) {
const block = await editor.getBlockById(
beforeBlock
@ -286,7 +293,12 @@ export const useKanban = () => {
);
if (isChangedGroup) {
// 1.2 Move to the target group
await moveCardToGroup(groupBy.id, targetCard, targetGroup);
await moveCardToGroup({
groupBy,
cardBlock: targetCard,
group: targetGroup,
recastBlock,
});
}
// 2. Reorder the card
@ -324,7 +336,12 @@ export const useKanban = () => {
}
recastBlock.append(newBlock);
const newCard = newBlock as unknown as RecastItem;
await moveCardToGroup(groupBy.id, newCard, group);
await moveCardToGroup({
groupBy,
cardBlock: newCard,
group,
recastBlock,
});
},
[editor, groupBy.id, recastBlock]
);

View File

@ -46,7 +46,10 @@ export type DefaultGroup = KanbanGroupBase & {
type SelectGroup = KanbanGroupBase &
SelectOption & {
type: PropertyType.Select | PropertyType.MultiSelect;
type:
| PropertyType.Select
| PropertyType.MultiSelect
| PropertyType.Status;
};
type TextGroup = KanbanGroupBase & {

View File

@ -2,6 +2,7 @@ import { Protocol } from '@toeverything/datasource/db-service';
import { AsyncBlock } from '../editor';
import { ComponentType, createContext, ReactNode, useContext } from 'react';
import { RecastBlock } from './types';
import { RefPageProvider } from '../ref-page';
/**
* Determine whether the block supports RecastBlock
@ -47,7 +48,7 @@ export const RecastBlockProvider = ({
return (
<RecastBlockContext.Provider value={block}>
{children}
<RefPageProvider>{children}</RefPageProvider>
</RecastBlockContext.Provider>
);
};
@ -60,7 +61,7 @@ export const useRecastBlock = () => {
const recastBlock = useContext(RecastBlockContext);
if (!recastBlock) {
throw new Error(
'Failed to find recastBlock! Please use the hook under `RecastTableProvider`.'
'Failed to find recastBlock! Please use the hook under `RecastBlockProvider`.'
);
}
return recastBlock;

View File

@ -49,22 +49,3 @@ const SomeBlock = () => {
return <div>...</div>;
};
```
## Scene
**Notice: The scene API will refactor at next version.**
```tsx
const SomeBlock = () => {
const { scene, setScene, setPage, setTable, setKanban } =
useRecastBlockScene();
return (
<>
<div>Scene: {scene}</div>
<button onClick={setPage}>list</button>
<button onClick={setKanban}>kanban</button>
</>
);
};
```

View File

@ -32,7 +32,7 @@ export const mergeGroup = async (...groups: AsyncBlock[]) => {
);
}
await mergeGroupProperties(...(groups as RecastBlock[]));
await mergeGroupProperties(...(groups as unknown as RecastBlock[]));
const [headGroup, ...restGroups] = groups;
// Add all children to the head group
@ -174,7 +174,7 @@ export const splitGroup = async (
}
splitGroupProperties(
group as RecastBlock,
group as unknown as RecastBlock,
newGroupBlock as unknown as RecastBlock
);
await group.after(newGroupBlock);
@ -185,6 +185,22 @@ export const splitGroup = async (
return newGroupBlock;
};
export const appendNewGroup = async (
editor: BlockEditor,
parentBlock: AsyncBlock,
active = false
) => {
const newGroupBlock = await createGroupWithEmptyText(editor);
await parentBlock.append(newGroupBlock);
if (active) {
// Active text block
await editor.selectionManager.activeNodeByNodeId(
newGroupBlock.childrenIds[0]
);
}
return newGroupBlock;
};
export const addNewGroup = async (
editor: BlockEditor,
previousBlock: AsyncBlock,

View File

@ -0,0 +1,84 @@
import { RecastPropertyId } from './types';
// TODO: The logic for keeping history should be supported by the network layer
type Props = {
recastBlockId: string;
blockId: string;
propertyId: RecastPropertyId;
};
type HistoryStorageMap = {
[recastBlockId: string]: {
[propertyId: RecastPropertyId]: string[];
};
};
const LOCAL_STORAGE_NAME = 'TEMPORARY_HISTORY_DATA';
const ensureLocalStorage = () => {
const data = localStorage.getItem(LOCAL_STORAGE_NAME);
if (!data) {
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify({}));
}
};
const ensureHistoryAtom = (
data: HistoryStorageMap,
recastBlockId: string,
propertyId: RecastPropertyId
): HistoryStorageMap => {
if (!data[recastBlockId]) {
data[recastBlockId] = {};
}
if (!data[recastBlockId][propertyId]) {
data[recastBlockId][propertyId] = [];
}
return data;
};
export const setHistory = ({ recastBlockId, blockId, propertyId }: Props) => {
ensureLocalStorage();
const data: HistoryStorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
ensureHistoryAtom(data, recastBlockId, propertyId);
const propertyHistory = data[recastBlockId][propertyId];
if (propertyHistory.includes(blockId)) {
const idIndex = propertyHistory.findIndex(id => id === blockId);
propertyHistory.splice(idIndex, 1);
}
propertyHistory.push(blockId);
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
};
export const getHistory = ({ recastBlockId }: { recastBlockId: string }) => {
ensureLocalStorage();
const data: HistoryStorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
return data[recastBlockId] ?? {};
};
export const removeHistory = ({
recastBlockId,
blockId,
propertyId,
}: Props) => {
ensureLocalStorage();
const data: HistoryStorageMap = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_NAME) as string
);
ensureHistoryAtom(data, recastBlockId, propertyId);
const propertyHistory = data[recastBlockId][propertyId];
if (propertyHistory.includes(blockId)) {
const idIndex = propertyHistory.findIndex(id => id === blockId);
propertyHistory.splice(idIndex, 1);
}
localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(data));
};

View File

@ -15,6 +15,7 @@ import {
SelectProperty,
TABLE_VALUES_KEY,
} from './types';
import { getHistory, removeHistory, setHistory } from './history';
/**
* Generate a unique id for a property
@ -240,7 +241,13 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
return props[id];
};
const setValue = (newValue: RecastBlockValue) => {
const setValue = (newValue: RecastBlockValue, recastBlockId: string) => {
setHistory({
recastBlockId: recastBlockId,
blockId: block.id,
propertyId: newValue.id,
});
return recastItem.setProperty(TABLE_VALUES_KEY, {
...props,
[newValue.id]: newValue,
@ -249,22 +256,30 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => {
const removeValue = (propertyId: RecastPropertyId) => {
const { [propertyId]: omitted, ...restProps } = props;
removeHistory({
recastBlockId: block.id,
propertyId: propertyId,
blockId: block.id,
});
return recastItem.setProperty(TABLE_VALUES_KEY, restProps);
};
return { getAllValue, getValue, setValue, removeValue };
const getValueHistory = getHistory;
return { getAllValue, getValue, setValue, removeValue, getValueHistory };
};
const isSelectLikeProperty = (
metaProperty?: RecastMetaProperty
): metaProperty is SelectProperty | MultiSelectProperty => {
if (
!metaProperty ||
(metaProperty.type !== PropertyType.Select &&
metaProperty.type !== PropertyType.MultiSelect)
) {
return false;
}
return true;
): metaProperty is SelectProperty | MultiSelectProperty | StatusProperty => {
return (
metaProperty &&
(metaProperty.type === PropertyType.Status ||
metaProperty.type === PropertyType.Select ||
metaProperty.type === PropertyType.MultiSelect)
);
};
/**
@ -312,7 +327,7 @@ export const useSelectProperty = () => {
};
const updateSelect = (
selectProperty: SelectProperty | MultiSelectProperty
selectProperty: StatusProperty | SelectProperty | MultiSelectProperty
) => {
// if (typeof selectProperty === 'string') {
// const maybeSelectProperty = getProperty(selectProperty);

View File

@ -1,5 +1,5 @@
import { nanoid } from 'nanoid';
import { useCallback } from 'react';
import { MutableRefObject, useCallback, useEffect, useState } from 'react';
import { useRecastBlock } from './Context';
import {
KanbanView,
@ -50,7 +50,33 @@ export const useCurrentView = () => {
);
return [currentView, setCurrentView] as const;
};
export const useLazyIframe = (
link: string,
timers: number,
container: MutableRefObject<HTMLElement>
) => {
const [iframeShow, setIframeShow] = useState(false);
useEffect(() => {
const iframe = document.createElement('iframe');
iframe.src = link;
iframe.onload = () => {
setTimeout(() => {
// Prevent iframe from scrolling parent container
// TODO W3C https://github.com/w3c/csswg-drafts/issues/7134
// https://forum.figma.com/t/prevent-figmas-embed-code-from-automatically-scrolling-to-it-on-page-load/26029/6
setIframeShow(true);
}, timers);
};
if (container?.current) {
container.current.appendChild(iframe);
}
return () => {
iframe.remove();
};
}, [link, container]);
return iframeShow;
};
export const useRecastView = () => {
const recastBlock = useRecastBlock();
const recastViews =

Some files were not shown because too many files have changed in this diff Show More