diff --git a/src/plugins/remix/editor/components/SettingColorComponent.tsx b/src/plugins/remix/editor/components/SettingColorComponent.tsx index 4c364edfa..fbda3e41b 100644 --- a/src/plugins/remix/editor/components/SettingColorComponent.tsx +++ b/src/plugins/remix/editor/components/SettingColorComponent.tsx @@ -18,6 +18,7 @@ interface ColorPickerProps { showEyeDropper?: boolean; onChange(value: number | null): void; } + const ColorPicker = findComponentByCodeLazy(".BACKGROUND_PRIMARY).hex"); const cl = classNameFactory("vc-remix-settings-color-"); diff --git a/src/plugins/remix/editor/tools/brush.ts b/src/plugins/remix/editor/tools/brush.ts index 213476655..7c9e49b46 100644 --- a/src/plugins/remix/editor/tools/brush.ts +++ b/src/plugins/remix/editor/tools/brush.ts @@ -4,14 +4,17 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { brushCanvas, render } from "../components/Canvas"; +import { brushCanvas, ctx, render } from "../components/Canvas"; import { currentSize, ToolDefinition } from "../components/Toolbar"; import { Mouse } from "../input"; import { line } from "../utils/canvas"; export const BrushTool: ToolDefinition = { onMouseMove() { - if (!Mouse.down) return; + if (!Mouse.down || !ctx) return; + + ctx.lineCap = "round"; + ctx.lineJoin = "round"; brushCanvas.lineWidth = currentSize; diff --git a/src/plugins/remix/editor/tools/crop.ts b/src/plugins/remix/editor/tools/crop.ts index 37f2b70be..a20bb7e20 100644 --- a/src/plugins/remix/editor/tools/crop.ts +++ b/src/plugins/remix/editor/tools/crop.ts @@ -109,10 +109,10 @@ export const CropTool: ToolDefinition = { cropCanvas.strokeRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top); - fillCircle(bounds.left, bounds.top, 15, cropCanvas); - fillCircle(bounds.right, bounds.top, 15, cropCanvas); - fillCircle(bounds.left, bounds.bottom, 15, cropCanvas); - fillCircle(bounds.right, bounds.bottom, 15, cropCanvas); + fillCircle(bounds.left, bounds.top, 10, cropCanvas); + fillCircle(bounds.right, bounds.top, 10, cropCanvas); + fillCircle(bounds.left, bounds.bottom, 10, cropCanvas); + fillCircle(bounds.right, bounds.bottom, 10, cropCanvas); render(); }, diff --git a/src/plugins/remix/editor/tools/shape.ts b/src/plugins/remix/editor/tools/shape.ts index 2f0a05f34..9a15c3ab6 100644 --- a/src/plugins/remix/editor/tools/shape.ts +++ b/src/plugins/remix/editor/tools/shape.ts @@ -90,9 +90,6 @@ export const ShapeTool: ToolDefinition = { break; } - canvas.lineCap = "butt"; - canvas.lineJoin = "miter"; - render(); }, diff --git a/src/plugins/remix/index.tsx b/src/plugins/remix/index.tsx index cc9bade81..c99ca9661 100644 --- a/src/plugins/remix/index.tsx +++ b/src/plugins/remix/index.tsx @@ -4,7 +4,7 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu"; +import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu"; import { definePluginSettings } from "@api/Settings"; import { disableStyle, enableStyle } from "@api/Styles"; import { Devs } from "@utils/constants"; @@ -19,10 +19,15 @@ import css from "./styles.css?managed"; // so FileUpload is loaded export const requireCreateStickerModal = extractAndLoadChunksLazy(["stickerInspected]:"]); +// so ColorPicker is loaded +export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}el\("(.+?)"\).{0,50}"UserSettings"/); const CloudUtils = findByPropsLazy("CloudUpload"); const PendingReplyStore = findStoreLazy("PendingReplyStore"); + +const validMediaTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"]; + const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) => { if (children.find(c => c?.props?.id === "vc-remix")) return; @@ -37,15 +42,23 @@ const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) => />); }; -const ImageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => { - if (!props.attachment || children.find(c => c?.props?.id === "vc-remix")) return; +const MessageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => { + const url = props.itemHref ?? props.itemSrc; + if (!url) return; + if (props.attachment && !validMediaTypes.includes(props.attachment.content_type)) return; - children.push( c?.props?.id === "vc-remix")) return; + + const index = group.findIndex(c => c?.props?.id === "copy-text"); + + group.splice(index + 1, 0, { const key = openModal(modalProps => - closeModal(key)} url={props.attachment.url} /> + closeModal(key)} url={url} /> ); }} />); @@ -103,16 +116,17 @@ export default definePlugin({ async start() { addContextMenuPatch("channel-attach", UploadContextMenuPatch); - addContextMenuPatch("message", ImageContextMenuPatch); + addContextMenuPatch("message", MessageContextMenuPatch); await requireCreateStickerModal(); + await requireSettingsMenu(); enableStyle(css); }, stop() { removeContextMenuPatch("channel-attach", UploadContextMenuPatch); - removeContextMenuPatch("message", ImageContextMenuPatch); + removeContextMenuPatch("message", MessageContextMenuPatch); disableStyle(css); }, diff --git a/src/plugins/remix/styles.css b/src/plugins/remix/styles.css index f0d186f7c..6f81aa989 100644 --- a/src/plugins/remix/styles.css +++ b/src/plugins/remix/styles.css @@ -42,6 +42,8 @@ .vc-remix-canvas { max-width: 100%; max-height: 100%; + min-width: 50%; + min-height: 50%; } .vc-remix-editor {