Shapora
ドキュメント
日本語English

Properties Panel

The Properties panel lets you edit the selected node’s box position/size and style. Click the slider icon button at the right end of the toolbar to show it. The panel is hidden when no node is selected.

Number inputs can temporarily keep invalid text while editing (for example, an empty field). Valid numbers are applied immediately while typing, and invalid text is reverted to the last valid value on Enter or blur.

For shadow-related "Opacity" and "Blur", values use 0.1 steps and are always displayed with one decimal place.

When a Text Node Is Selected

  • Text Language: Switch default / Japanese (ja) / English (en) at the top of the panel. The initial selection is default. Configured languages show a leading check mark (✓). Use the trash button to delete the currently selected language settings. The current selection is persisted in document data
  • Text Appearance: font family, font size, and text fill (None / Solid / Linear gradient / Radial gradient / Checker / Dots). The font dropdown is ordered as Favorites / In Document / All Fonts, and the gallery card's top-right ☆ toggles favorites (favorites are stored in localStorage)
  • Fill colors: primary color and secondary color are preserved when switching fill types
  • Text Outline: toggle ON/OFF with the switch at the right side of the section header (default is OFF). When OFF, all outline inputs are disabled and no outline is rendered (persisted in snapshot). Default width is 5
  • Text Shadow: text shadow (color/opacity/blur/X-Y offset. Opacity is 0.0-8.0, and values above 1.0 are rendered as stacked shadows). Toggle ON/OFF from the section header switch (default is OFF); OFF disables inputs and suppresses rendering (persisted in snapshot). Default opacity is 1.0 and default blur is 5.0
  • Font Style: bold, italic, and strikethrough controls
  • Layout: horizontal alignment (left/center/right/justify), vertical alignment (top/middle/bottom), writing mode (horizontal/vertical), line height, and padding (new text defaults to 0)
  • Box Appearance: shape (rect/bubble), bubble tail direction, fill (None / Solid / Linear gradient / Radial gradient / Checker / Dots), and corner radius. Gradients can also be adjusted with handles on the canvas, and their coordinates are stored as local relative positions in the box. Linear and radial handle positions are preserved when switching fill types
  • Box Outline: toggle ON/OFF with the section header switch (default is OFF). When OFF, outline inputs are disabled and no box outline is rendered (persisted in snapshot). You can set stroke color, width, and style, and the default width is 5
  • Box Shadow: box shadow for the text box itself (color/opacity/blur/X-Y offset. Opacity is 0.0-8.0, and values above 1.0 are rendered as stacked shadows). Toggle ON/OFF from the section header switch (default is OFF); OFF disables inputs and suppresses rendering (persisted in snapshot). Default opacity is 1.0, default blur is 5.0, and default X/Y offsets are 0
  • Box Position & Size: directly edit X / Y / W / H and rotation angle in degrees for the selected text node. Use the rotation reset button to return the angle to 0 degrees

When a Rect Node Is Selected

  • Box Appearance: fill (None / Solid / Linear gradient / Radial gradient / Checker / Dots) and corner radius. Gradients can also be adjusted with handles on the canvas, and their coordinates are stored as local relative positions in the rectangle. Linear and radial handle positions are preserved when switching fill types
  • Box Outline: toggle ON/OFF with the switch in the section header. The initial state is OFF, and when OFF, stroke color/width/style inputs are disabled and no outline is rendered. Turning it off and on again preserves the previous width, color, and stroke style
  • Box Shadow: toggle ON/OFF with the switch in the section header. The initial state is OFF, and when OFF, shadow inputs are disabled and no shadow is rendered. Blur and X/Y are also disabled when opacity is 0
  • When turned ON, rect node defaults are aligned with text node box defaults: stroke width 5, shadow opacity 1.0, blur 5.0, and X/Y 0
  • Box Position & Size: directly edit X / Y / W / H and rotation angle in degrees for the selected rect node. Use the rotation reset button to return the angle to 0 degrees

When an SVG / Image / builtin Node Is Selected

  • When an SVG, image, or builtin node is selected, a preview of the selected node is shown directly below the “Properties” heading
  • Image node: the preview always shows the original (pre-processed) image
  • SVG and image nodes: use the pencil button at the top-right of the preview to open a file dialog and replace the image/SVG while keeping node properties such as position and size
  • SVG and image nodes: you can also replace the source by dragging and dropping a file onto the preview area
  • SVG and image nodes: preserveAspectRatio controls (mode, X align, Y align) let you choose how content is drawn inside the box
  • SVG and image nodes: click "Crop" to open a large dialog and set a rectangular or circular crop by dragging the crop frame and its corner handles. The original data remains available, so the crop can be edited or cleared later
  • Image node: the crop dialog shows the image currently displayed on the canvas, so background-removal and magic-eraser results can be cropped directly
  • Image node: Image Background controls use the same fill types as rect nodes (None / Solid / Linear gradient / Radial gradient / Checker / Dots). Linear and radial gradients can also be adjusted with handles on the canvas. For cropped images, the fill is drawn only inside the crop clip boundary
  • Image node: Image Outline controls toggle the outline and set color, width, and stroke style. Turning the outline off and on again preserves the previous width, color, and stroke style. For cropped images, the outline follows the rectangular or circular crop clip boundary
  • Image node: click “Remove background” to run client-side background removal. If the model is not cached, the first run downloads it from Hugging Face, and processing buttons show loading spinners
  • Image node: even after background removal, click “Restore image” to return to the pre-removal image
  • Image node: background removal always runs on the image currently shown on the canvas (it reprocesses the latest processed image when present)
  • Image node: the document stores only the original image and the latest processed image, and restore/rerun remains available after reload
  • Image node: click “Magic eraser” to enter lasso mode and remove the area where the lasso overlaps the image on the canvas; click “Magic eraser” again while in lasso mode to finalize and start processing
  • Image node: while in lasso mode, the target image cannot be moved or resized. Corner handles are hidden, and only the dashed selection outline remains visible
  • Image node: once the lasso range is finalized and processing starts, the active tool automatically returns to Select
  • Image node: if you press another toolbar tool button while in lasso mode, the current lasso selection is canceled
  • Image node: the “Remove background” button is disabled while selecting a lasso region and while magic eraser is processing
  • Image node: while magic eraser is running on any image, the "Magic eraser" and "Remove background" buttons are disabled even if you select another image
  • Image node: while in lasso mode, the “Magic eraser” button is highlighted and its label changes to “Finalize range”
  • Image node: while magic eraser is processing, the label changes to “Running magic eraser”, and only that button shows a spinner
  • Image node: on large images, processing prioritizes the selected region and avoids shrinking the entire image whenever possible
  • Image node: the “Remove background” spinner appears only during background removal, and the “Restore image” button never shows a spinner
  • Image node: magic eraser always runs against the image currently displayed at execution time (not only the very first original image)
  • Image node: clicking “Restore image” during magic eraser processing cancels the run and restores the first original image
  • Image node: after running magic eraser, “Restore image” always returns to the first original image
  • Image node: both pre- and post-magic-eraser sources are saved in document data, so you can restore and run again repeatedly
  • Shared (top section): configure shared builtin icon size (width/height), label visibility, label font size, label font family, label text style (bold/italic/strikethrough), label color, label text outline, and label text shadow (opacity: 0.0-8.0). The label font dropdown also uses the order Favorites / In Document / All Fonts
  • Changing the shared size updates builtin icons whose “Individual icon settings” switch is OFF
  • “Individual icon settings” is OFF by default. Individual width/height inputs are shown under the switch, and they keep displaying the current icon size but are read-only while OFF
  • When individual settings are ON, you can also toggle “Show individual label”. Its default is ON, and turning it OFF hides only that icon's label
  • ON: This icon uses an individual size. Resizing it does not change the shared width/height. OFF: This icon follows shared sizing. Resizing it updates the shared width/height and applies to icons with this switch OFF
  • Only builtin nodes with a color property show the icon Color picker (hidden for SVG nodes and builtin nodes without color)
  • Box Position & Size: directly edit X / Y / W / H and rotation angle in degrees for selected SVG, image, and builtin nodes. Use the rotation reset button to return the angle to 0 degrees

When a Connection Node Is Selected

Edit line color, width, style, endpoint marker shapes, marker size, margin, and shadow for connection lines. Shadow opacity is 0.0-8.0, and values above 1.0 are rendered as stacked shadows.