Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add STICKY_NOTE_CONSTRAINTS with config values
Browse files Browse the repository at this point in the history
philemone committed Nov 20, 2024

Verified

This commit was signed with the committer’s verified signature.
jevank Ivan Kardykov
1 parent b3c74ed commit 894ecb3
Showing 6 changed files with 53 additions and 27 deletions.
7 changes: 4 additions & 3 deletions designer/client/src/components/StickyNotePreview.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import { BORDER_RADIUS, CONTENT_PADDING, iconBackgroundSize, iconSize } from "./
import { PreloadedIcon, stickyNoteIconSrc } from "./toolbars/creator/ComponentIcon";
import { alpha, useTheme } from "@mui/material";
import { getBorderColor, getStickyNoteBackgroundColor } from "../containers/theme/helpers";
import { STICKY_NOTE_DEFAULT_COLOR, STICKY_NOTE_HEIGHT, STICKY_NOTE_WIDTH } from "./graph/EspNode/stickyNote";
import { STICKY_NOTE_CONSTRAINTS, STICKY_NOTE_DEFAULT_COLOR } from "./graph/EspNode/stickyNote";

export function StickyNotePreview({ isActive, isOver }: { isActive?: boolean; isOver?: boolean }): JSX.Element {
const theme = useTheme();
@@ -18,8 +18,8 @@ export function StickyNotePreview({ isActive, isOver }: { isActive?: boolean; is

const nodeStyles = css({
position: "relative",
width: STICKY_NOTE_WIDTH,
height: STICKY_NOTE_HEIGHT,
width: STICKY_NOTE_CONSTRAINTS.DEFAULT_WIDTH,
height: STICKY_NOTE_CONSTRAINTS.DEFAULT_HEIGHT,
borderRadius: BORDER_RADIUS,
boxSizing: "content-box",
display: "inline-flex",
@@ -45,6 +45,7 @@ export function StickyNotePreview({ isActive, isOver }: { isActive?: boolean; is
borderRadius: BORDER_RADIUS,
width: iconBackgroundSize / 2,
height: iconBackgroundSize / 2,
color: theme.palette.common.black,
"> svg": {
height: iconSize,
width: iconSize,
25 changes: 16 additions & 9 deletions designer/client/src/components/graph/EspNode/stickyNote.ts
Original file line number Diff line number Diff line change
@@ -7,21 +7,28 @@ import { StickyNoteElement } from "../StickyNoteElement";
import MarkupNodeJSON = dia.MarkupNodeJSON;
import DOMPurify from "dompurify";

export const STICKY_NOTE_WIDTH = 300;
export const STICKY_NOTE_HEIGHT = 250;
export const STICKY_NOTE_CONSTRAINTS = {
MIN_WIDTH: 100,
MAX_WIDTH: 3000,
DEFAULT_WIDTH: 300,
MIN_HEIGHT: 100,
MAX_HEIGHT: 3000,
DEFAULT_HEIGHT: 250,
} as const;

export const BORDER_RADIUS = 3;
export const CONTENT_PADDING = 5;
export const ICON_SIZE = 20;
export const STICKY_NOTE_DEFAULT_COLOR = "#eae672";
export const STICKY_NOTE_DEFAULT_COLOR = "#13130d";
export const MARKDOWN_EDITOR_NAME = "markdown-editor";

const border: dia.MarkupNodeJSON = {
selector: "border",
tagName: "path",
className: "body",
attributes: {
width: STICKY_NOTE_WIDTH,
height: STICKY_NOTE_HEIGHT,
width: STICKY_NOTE_CONSTRAINTS.DEFAULT_WIDTH,
height: STICKY_NOTE_CONSTRAINTS.DEFAULT_HEIGHT,
strokeWidth: 1,
fill: "none",
rx: BORDER_RADIUS,
@@ -79,8 +86,8 @@ const defaults = (theme: Theme) =>
util.defaultsDeep(
{
size: {
width: STICKY_NOTE_WIDTH,
height: STICKY_NOTE_HEIGHT,
width: STICKY_NOTE_CONSTRAINTS.DEFAULT_WIDTH,
height: STICKY_NOTE_CONSTRAINTS.DEFAULT_HEIGHT,
},
attrs: {
body: {
@@ -98,8 +105,8 @@ const defaults = (theme: Theme) =>
},
},
foreignObject: {
width: STICKY_NOTE_WIDTH,
height: STICKY_NOTE_HEIGHT - ICON_SIZE - CONTENT_PADDING * 4,
width: STICKY_NOTE_CONSTRAINTS.DEFAULT_WIDTH,
height: STICKY_NOTE_CONSTRAINTS.DEFAULT_HEIGHT - ICON_SIZE - CONTENT_PADDING * 4,
y: CONTENT_PADDING * 4 + ICON_SIZE,
fill: getBorderColor(theme),
},
19 changes: 13 additions & 6 deletions designer/client/src/components/graph/EspNode/stickyNoteElements.ts
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import { dia, elementTools, shapes } from "jointjs";
import { stickyNoteIcon } from "../../toolbars/creator/ComponentIcon";
import { createStickyNoteId } from "../../../types/stickyNote";
import { getStickyNoteBackgroundColor } from "../../../containers/theme/helpers";
import { CONTENT_PADDING, ICON_SIZE, MARKDOWN_EDITOR_NAME, StickyNoteShape } from "./stickyNote";
import { CONTENT_PADDING, ICON_SIZE, MARKDOWN_EDITOR_NAME, STICKY_NOTE_CONSTRAINTS, StickyNoteShape } from "./stickyNote";
import { Events } from "../types";

export type ModelWithTool = {
@@ -50,8 +50,6 @@ export function makeStickyNoteElement(

const ThemedStickyNoteShape = StickyNoteShape(theme, stickyNote);
const stickyNoteModel = new ThemedStickyNoteShape(attributes);
const MIN_STICKY_NOTE_WIDTH = 100;
const MIN_STICKY_NOTE_HEIGHT = 100;

const removeButtonTool = new elementTools.Remove({
focusOpacity: 0.5,
@@ -102,7 +100,16 @@ export function makeStickyNoteElement(
},
setPosition: function (view, coordinates) {
const model = view.model;
model.resize(Math.max(coordinates.x - 10, 100), Math.max(coordinates.y - 10, 100));
model.resize(
Math.max(
Math.min(STICKY_NOTE_CONSTRAINTS.MAX_WIDTH, Math.round(coordinates.x - 10)),
STICKY_NOTE_CONSTRAINTS.MIN_WIDTH,
),
Math.max(
Math.min(STICKY_NOTE_CONSTRAINTS.MAX_HEIGHT, Math.round(coordinates.y - 10)),
STICKY_NOTE_CONSTRAINTS.MIN_HEIGHT,
),
);
},
onPointerUpCustom: function (evt: dia.Event) {
this.onPointerUp(evt);
@@ -120,8 +127,8 @@ export function makeStickyNoteElement(
],
});
stickyNoteModel.resize(
Math.max(stickyNote.dimensions.width, MIN_STICKY_NOTE_WIDTH),
Math.max(stickyNote.dimensions.height, MIN_STICKY_NOTE_HEIGHT),
Math.max(stickyNote.dimensions.width, STICKY_NOTE_CONSTRAINTS.MIN_WIDTH),
Math.max(stickyNote.dimensions.height, STICKY_NOTE_CONSTRAINTS.MIN_HEIGHT),
);
stickyNoteModel.attr(`${MARKDOWN_EDITOR_NAME}/props/value`, stickyNote.content);
return { model: stickyNoteModel, tools };
14 changes: 10 additions & 4 deletions designer/client/src/components/graph/Graph.tsx
Original file line number Diff line number Diff line change
@@ -47,8 +47,8 @@ import { filterDragHovered, getLinkNodes, setLinksHovered } from "./utils/dragHe
import * as GraphUtils from "./utils/graphUtils";
import { handleGraphEvent } from "./utils/graphUtils";
import { StickyNote } from "../../common/StickyNote";
import { STICKY_NOTE_HEIGHT, STICKY_NOTE_WIDTH } from "./EspNode/stickyNote";
import { StickyNoteElement, StickyNoteElementView } from "./StickyNoteElement";
import { STICKY_NOTE_CONSTRAINTS } from "./EspNode/stickyNote";

function clamp(number: number, max: number) {
return Math.round(Math.min(max, Math.max(-max, number)));
@@ -474,8 +474,14 @@ export class Graph extends React.Component<Props> {
const position = cell.get("position");
const size = cell.get("size");
// TODO move max width and height to some config?
const width = Math.max(100, Math.min(3000, Math.round(size.width)));
const height = Math.max(100, Math.min(3000, Math.round(size.height)));
const width = Math.max(
STICKY_NOTE_CONSTRAINTS.MIN_WIDTH,
Math.min(STICKY_NOTE_CONSTRAINTS.MAX_WIDTH, Math.round(size.width)),
);
const height = Math.max(
STICKY_NOTE_CONSTRAINTS.MIN_HEIGHT,
Math.min(STICKY_NOTE_CONSTRAINTS.MAX_HEIGHT, Math.round(size.height)),
);
updatedStickyNote.layoutData = { x: position.x, y: position.y };
updatedStickyNote.dimensions = { width, height };
this.updateStickyNote(this.props.scenario.name, this.props.scenario.processVersionId, updatedStickyNote);
@@ -525,7 +531,7 @@ export class Graph extends React.Component<Props> {
if (this.props.isFragment === true) return;
const canAddStickyNote = this.props.capabilities.editFrontend;
if (canAddStickyNote) {
const dimensions = { width: STICKY_NOTE_WIDTH, height: STICKY_NOTE_HEIGHT };
const dimensions = { width: STICKY_NOTE_CONSTRAINTS.DEFAULT_WIDTH, height: STICKY_NOTE_CONSTRAINTS.MIN_HEIGHT };
this.props.stickyNoteAdded(scenarioName, scenarioVersionId, position, dimensions);
}
}
13 changes: 9 additions & 4 deletions designer/client/src/components/graph/graphStyledWrapper.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { CSSProperties } from "react";
import { css, styled, Theme } from "@mui/material";
import { alpha, css, styled, Theme } from "@mui/material";
import { blend } from "@mui/system";
import { blendLighten } from "../../containers/theme/helpers";
import { stickyNotePath } from "./EspNode/stickyNote";

const nodeHighlight = (strokeColor: CSSProperties["color"], backgroundFill: CSSProperties["color"]) =>
css({
@@ -183,16 +184,20 @@ export const GraphStyledWrapper = styled("div")(({ theme }) =>
paddingRight: "10px",
},
".sticky-note-markdown-editor": {
paddingLeft: "10px",
paddingRight: "10px",
backgroundColor: "rgba(0,0,0,0.1)",
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
backgroundColor: alpha(theme.palette.common.white, 0.3),
color: theme.palette.common.black,
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.body1.fontSize,
resize: "none",
width: "100%",
height: "100%",
borderStyle: "none",
borderColor: "Transparent",
whiteSpace: "pre-line",
overflow: "hidden",
clipPath: "xywh(0 0px 100% 100% round 0 0 16% 0)",
},
".sticky-note-markdown-editor:focus": {
outline: "none",
Original file line number Diff line number Diff line change
@@ -84,7 +84,7 @@ object Dtos {

sealed trait StickyNotesError

implicit lazy val cellErrorSchema: Schema[LayoutData] = Schema.derived
implicit lazy val layoutDataSchema: Schema[LayoutData] = Schema.derived

object StickyNotesError {

0 comments on commit 894ecb3

Please sign in to comment.