greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: color input color not updating

pull/5899/head
Peng Xiao 2022-06-30 00:31:27 +08:00
parent a79a7c8899
commit 42f33d56f9
4 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx
View File

@ -4,19 +4,17 @@ interface ColorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label: string
}
export function ColorInput({ label, value, ...rest }: ColorInputProps) {
export function ColorInput({ label, value, onChange, ...rest }: ColorInputProps) {
const ref = React.useRef<HTMLDivElement>(null)
const [computedValue, setComputedValue] = React.useState(value)
// TODO: listen to theme change?
React.useEffect(() => {
if (value?.toString().startsWith('var') && ref.current) {
const varName = /var\((.*)\)/.exec(value.toString())?.[1]
if (varName) {
setComputedValue(getComputedStyle(ref.current).getPropertyValue(varName).trim())
}
if (value?.toString().startsWith('var') && ref.current) {
const varName = /var\((.*)\)/.exec(value.toString())?.[1]
if (varName) {
setComputedValue(getComputedStyle(ref.current).getPropertyValue(varName).trim())
}
}, [value])
}
return (
<div className="input" ref={ref}>
@ -27,6 +25,10 @@ export function ColorInput({ label, value, ...rest }: ColorInputProps) {
name={`color-${label}`}
type="color"
value={computedValue}
onChange={(e) => {
setComputedValue(e.target.value)
onChange?.(e)
}}
{...rest}
/>
</div>

1
tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
View File

@ -144,6 +144,7 @@ export function usePaste() {
id: uniqueId(),
type: 'image',
parentId: app.currentPageId,
// TODO: Should be place near the last edited shape
point: [point[0] - asset.size[0] / 2 + i * 16, point[1] - asset.size[1] / 2 + i * 16],
size: asset.size,
assetId: asset.id,

4
tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
View File

@ -116,7 +116,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
canChangeAspectRatio = true
canFlip = true
canActivate = true
canEdit = true
canEdit = false
constructor(props = {} as Partial<LogseqPortalShapeProps>) {
super(props)
@ -208,7 +208,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
return () => {
// no-ops
}
}, [isActivated])
}, [isActivated, this.props.collapsed])
const onPageNameChanged = React.useCallback((id: string) => {
app.wrapUpdate(() => {

1
tldraw/demo/index.html
View File

@ -2,7 +2,6 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>