Remove console spam (#1400)
* Remove console spam * CSS Style * Slight cleanup --------- Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
parent
226b96260c
commit
e77782aadb
|
|
@ -275,7 +275,6 @@ impl MessageHandler<PortfolioMessage, (&InputPreprocessorMessageHandler, &Prefer
|
||||||
}
|
}
|
||||||
PortfolioMessage::ImaginatePreferences => self.executor.update_imaginate_preferences(preferences.get_imaginate_preferences()),
|
PortfolioMessage::ImaginatePreferences => self.executor.update_imaginate_preferences(preferences.get_imaginate_preferences()),
|
||||||
PortfolioMessage::ImaginateServerHostname => {
|
PortfolioMessage::ImaginateServerHostname => {
|
||||||
debug!("setting imaginate persistent data");
|
|
||||||
self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
|
self.persistent_data.imaginate.set_host_name(&preferences.imaginate_server_hostname);
|
||||||
}
|
}
|
||||||
PortfolioMessage::Import => {
|
PortfolioMessage::Import => {
|
||||||
|
|
|
||||||
|
|
@ -222,7 +222,6 @@ impl NodeRuntime {
|
||||||
graphic_group.render_svg(&mut render, &render_params);
|
graphic_group.render_svg(&mut render, &render_params);
|
||||||
let [min, max] = bounds.unwrap_or_default();
|
let [min, max] = bounds.unwrap_or_default();
|
||||||
render.format_svg(min, max);
|
render.format_svg(min, max);
|
||||||
debug!("SVG {}", render.svg);
|
|
||||||
|
|
||||||
if let Some(node_id) = node_path.get(node_path.len() - 2).copied() {
|
if let Some(node_id) = node_path.get(node_path.len() - 2).copied() {
|
||||||
let graph_identifier = GraphIdentifier::new(layer_path.last().copied());
|
let graph_identifier = GraphIdentifier::new(layer_path.last().copied());
|
||||||
|
|
@ -498,11 +497,10 @@ impl NodeGraphExecutor {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
TaggedValue::Artboard(artboard) => {
|
TaggedValue::Artboard(artboard) => {
|
||||||
debug!("{artboard:#?}");
|
warn!("Rendered graph produced artboard (which is not currently rendered): {artboard:#?}");
|
||||||
return Err("Artboard (see console)".to_string());
|
return Err("Artboard (see console)".to_string());
|
||||||
}
|
}
|
||||||
TaggedValue::GraphicGroup(graphic_group) => {
|
TaggedValue::GraphicGroup(graphic_group) => {
|
||||||
debug!("{graphic_group:#?}");
|
|
||||||
use graphene_core::renderer::{GraphicElementRendered, RenderParams, SvgRender};
|
use graphene_core::renderer::{GraphicElementRendered, RenderParams, SvgRender};
|
||||||
|
|
||||||
// Setup rendering
|
// Setup rendering
|
||||||
|
|
@ -521,8 +519,6 @@ impl NodeGraphExecutor {
|
||||||
|
|
||||||
// Send to frontend
|
// Send to frontend
|
||||||
responses.add(FrontendMessage::UpdateDocumentNodeRender { svg });
|
responses.add(FrontendMessage::UpdateDocumentNodeRender { svg });
|
||||||
|
|
||||||
//return Err("Graphic group (see console)".to_string());
|
|
||||||
}
|
}
|
||||||
_ => {
|
_ => {
|
||||||
return Err(format!("Invalid node graph output type: {:#?}", node_graph_output));
|
return Err(format!("Invalid node graph output type: {:#?}", node_graph_output));
|
||||||
|
|
|
||||||
|
|
@ -206,10 +206,10 @@
|
||||||
box-shadow: inset 0 0 0 1px var(--color-5-dullgray);
|
box-shadow: inset 0 0 0 1px var(--color-5-dullgray);
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover::-webkit-scrollbar-track {
|
||||||
box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
|
box-shadow: inset 0 0 0 1px var(--color-6-lowergray);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
|
|
@ -218,10 +218,10 @@
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--color-6-lowergray);
|
background-color: var(--color-6-lowergray);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar-corner {
|
&::-webkit-scrollbar-corner {
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
|
||||||
<div
|
<div
|
||||||
class={`layout-col ${className} ${extraClasses}`.trim()}
|
class={`layout-col ${className} ${extraClasses}`.trim()}
|
||||||
class:scrollable-x={scrollableX}
|
class:scrollable-x={scrollableX}
|
||||||
|
|
@ -53,7 +54,6 @@
|
||||||
on:mouseout
|
on:mouseout
|
||||||
on:mouseup
|
on:mouseup
|
||||||
on:select
|
on:select
|
||||||
on:wheel
|
|
||||||
on:drag
|
on:drag
|
||||||
on:dragend
|
on:dragend
|
||||||
on:dragenter
|
on:dragenter
|
||||||
|
|
@ -63,8 +63,6 @@
|
||||||
on:drop
|
on:drop
|
||||||
on:touchcancel
|
on:touchcancel
|
||||||
on:touchend
|
on:touchend
|
||||||
on:touchmove
|
|
||||||
on:touchstart
|
|
||||||
on:pointerover
|
on:pointerover
|
||||||
on:pointerenter
|
on:pointerenter
|
||||||
on:pointerdown
|
on:pointerdown
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
|
||||||
<div
|
<div
|
||||||
class={`layout-row ${className} ${extraClasses}`.trim()}
|
class={`layout-row ${className} ${extraClasses}`.trim()}
|
||||||
class:scrollable-x={scrollableX}
|
class:scrollable-x={scrollableX}
|
||||||
|
|
@ -53,7 +54,6 @@
|
||||||
on:mouseout
|
on:mouseout
|
||||||
on:mouseup
|
on:mouseup
|
||||||
on:select
|
on:select
|
||||||
on:wheel
|
|
||||||
on:drag
|
on:drag
|
||||||
on:dragend
|
on:dragend
|
||||||
on:dragenter
|
on:dragenter
|
||||||
|
|
@ -63,8 +63,6 @@
|
||||||
on:drop
|
on:drop
|
||||||
on:touchcancel
|
on:touchcancel
|
||||||
on:touchend
|
on:touchend
|
||||||
on:touchmove
|
|
||||||
on:touchstart
|
|
||||||
on:pointerover
|
on:pointerover
|
||||||
on:pointerenter
|
on:pointerenter
|
||||||
on:pointerdown
|
on:pointerdown
|
||||||
|
|
|
||||||
|
|
@ -40,9 +40,6 @@
|
||||||
const editor = getContext<Editor>("editor");
|
const editor = getContext<Editor>("editor");
|
||||||
const document = getContext<DocumentState>("document");
|
const document = getContext<DocumentState>("document");
|
||||||
|
|
||||||
// Graph view overlay
|
|
||||||
let graphViewOverlayOpen = false;
|
|
||||||
|
|
||||||
// Interactive text editing
|
// Interactive text editing
|
||||||
let textInput: undefined | HTMLDivElement = undefined;
|
let textInput: undefined | HTMLDivElement = undefined;
|
||||||
let showTextInput: boolean;
|
let showTextInput: boolean;
|
||||||
|
|
@ -68,7 +65,6 @@
|
||||||
let nodeRenderSvg = "";
|
let nodeRenderSvg = "";
|
||||||
let artboardSvg = "";
|
let artboardSvg = "";
|
||||||
let overlaysSvg = "";
|
let overlaysSvg = "";
|
||||||
let artworkTransform = "";
|
|
||||||
|
|
||||||
// Rasterized SVG viewport data, or none if it's not up-to-date
|
// Rasterized SVG viewport data, or none if it's not up-to-date
|
||||||
let rasterizedCanvas: HTMLCanvasElement | undefined = undefined;
|
let rasterizedCanvas: HTMLCanvasElement | undefined = undefined;
|
||||||
|
|
@ -338,11 +334,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
// Show or hide the graph view overlay
|
|
||||||
editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
|
|
||||||
graphViewOverlayOpen = triggerGraphViewOverlay.open;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update rendered SVGs
|
// Update rendered SVGs
|
||||||
editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, async (data) => {
|
editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, async (data) => {
|
||||||
await tick();
|
await tick();
|
||||||
|
|
@ -364,11 +355,6 @@
|
||||||
|
|
||||||
updateDocumentNodeRender(data.svg);
|
updateDocumentNodeRender(data.svg);
|
||||||
});
|
});
|
||||||
editor.subscriptions.subscribeJsMessage(UpdateDocumentTransform, async (data) => {
|
|
||||||
await tick();
|
|
||||||
|
|
||||||
updateDocumentTransform(data.transform);
|
|
||||||
});
|
|
||||||
editor.subscriptions.subscribeJsMessage(UpdateEyedropperSamplingState, async (data) => {
|
editor.subscriptions.subscribeJsMessage(UpdateEyedropperSamplingState, async (data) => {
|
||||||
await tick();
|
await tick();
|
||||||
|
|
||||||
|
|
@ -436,8 +422,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LayoutCol class="document">
|
<LayoutCol class="document">
|
||||||
<LayoutRow class="options-bar" classes={{ "for-graph": graphViewOverlayOpen }} scrollableX={true}>
|
<LayoutRow class="options-bar" classes={{ "for-graph": $document.graphViewOverlayOpen }} scrollableX={true}>
|
||||||
{#if !graphViewOverlayOpen}
|
{#if !$document.graphViewOverlayOpen}
|
||||||
<WidgetLayout layout={$document.documentModeLayout} />
|
<WidgetLayout layout={$document.documentModeLayout} />
|
||||||
<WidgetLayout layout={$document.toolOptionsLayout} />
|
<WidgetLayout layout={$document.toolOptionsLayout} />
|
||||||
<LayoutRow class="spacer" />
|
<LayoutRow class="spacer" />
|
||||||
|
|
@ -448,7 +434,7 @@
|
||||||
</LayoutRow>
|
</LayoutRow>
|
||||||
<LayoutRow class="shelf-and-table">
|
<LayoutRow class="shelf-and-table">
|
||||||
<LayoutCol class="shelf">
|
<LayoutCol class="shelf">
|
||||||
{#if !graphViewOverlayOpen}
|
{#if !$document.graphViewOverlayOpen}
|
||||||
<LayoutCol class="tools" scrollableY={true}>
|
<LayoutCol class="tools" scrollableY={true}>
|
||||||
<WidgetLayout layout={$document.toolShelfLayout} />
|
<WidgetLayout layout={$document.toolShelfLayout} />
|
||||||
</LayoutCol>
|
</LayoutCol>
|
||||||
|
|
@ -483,7 +469,7 @@
|
||||||
{@html artboardSvg}
|
{@html artboardSvg}
|
||||||
</svg>
|
</svg>
|
||||||
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
|
<svg class="artboards" style:width={canvasWidthCSS} style:height={canvasHeightCSS}>
|
||||||
<g id="transform-group" transform={artworkTransform}>
|
<g id="transform-group" transform={$document.artworkTransform}>
|
||||||
{@html nodeRenderSvg}
|
{@html nodeRenderSvg}
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -499,7 +485,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="graph-view" class:open={graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
|
<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork="80%" data-graph>
|
||||||
<Graph />
|
<Graph />
|
||||||
</div>
|
</div>
|
||||||
</LayoutCol>
|
</LayoutCol>
|
||||||
|
|
|
||||||
|
|
@ -450,7 +450,7 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--color-6-lowergray);
|
background: var(--color-5-dullgray);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -461,19 +461,11 @@
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 3px 0 3px 6px;
|
border-width: 3px 0 3px 6px;
|
||||||
border-color: transparent transparent transparent var(--color-e-nearwhite);
|
border-color: transparent transparent transparent var(--color-e-nearwhite);
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-f-white);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.expanded::after {
|
&.expanded::after {
|
||||||
border-width: 6px 3px 0 3px;
|
border-width: 6px 3px 0 3px;
|
||||||
border-color: var(--color-e-nearwhite) transparent transparent transparent;
|
border-color: var(--color-e-nearwhite) transparent transparent transparent;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-f-white);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -488,7 +480,6 @@
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
background: var(--color-5-dullgray);
|
background: var(--color-5-dullgray);
|
||||||
color: var(--color-f-white);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-type-icon {
|
.layer-type-icon {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
import { UpdateNodeGraphSelection } from "@graphite/wasm-communication/messages";
|
import { UpdateNodeGraphSelection } from "@graphite/wasm-communication/messages";
|
||||||
import type { FrontendNodeLink, FrontendNodeType, FrontendNode } from "@graphite/wasm-communication/messages";
|
import type { FrontendNodeLink, FrontendNodeType, FrontendNode } from "@graphite/wasm-communication/messages";
|
||||||
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
||||||
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
|
|
||||||
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
|
import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
|
||||||
import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
|
import TextInput from "@graphite/components/widgets/inputs/TextInput.svelte";
|
||||||
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";
|
||||||
|
|
@ -24,7 +23,7 @@
|
||||||
|
|
||||||
type LinkPath = { pathString: string; dataType: string; thick: boolean };
|
type LinkPath = { pathString: string; dataType: string; thick: boolean };
|
||||||
|
|
||||||
let graph: LayoutRow | undefined;
|
let graph: HTMLDivElement | undefined;
|
||||||
let nodesContainer: HTMLDivElement | undefined;
|
let nodesContainer: HTMLDivElement | undefined;
|
||||||
let nodeSearchInput: TextInput | undefined;
|
let nodeSearchInput: TextInput | undefined;
|
||||||
|
|
||||||
|
|
@ -52,7 +51,7 @@
|
||||||
let appearRightOfMouse = false;
|
let appearRightOfMouse = false;
|
||||||
|
|
||||||
$: (() => {
|
$: (() => {
|
||||||
const bounds = graph?.div()?.getBoundingClientRect();
|
const bounds = graph?.getBoundingClientRect();
|
||||||
if (!bounds) return;
|
if (!bounds) return;
|
||||||
const { width, height } = bounds;
|
const { width, height } = bounds;
|
||||||
|
|
||||||
|
|
@ -239,7 +238,7 @@
|
||||||
let zoomFactor = 1 + Math.abs(scrollY) * WHEEL_RATE;
|
let zoomFactor = 1 + Math.abs(scrollY) * WHEEL_RATE;
|
||||||
if (scrollY > 0) zoomFactor = 1 / zoomFactor;
|
if (scrollY > 0) zoomFactor = 1 / zoomFactor;
|
||||||
|
|
||||||
const bounds = graph?.div()?.getBoundingClientRect();
|
const bounds = graph?.getBoundingClientRect();
|
||||||
if (!bounds) return;
|
if (!bounds) return;
|
||||||
const { x, y, width, height } = bounds;
|
const { x, y, width, height } = bounds;
|
||||||
|
|
||||||
|
|
@ -286,7 +285,7 @@
|
||||||
|
|
||||||
// Create the add node popup on right click, then exit
|
// Create the add node popup on right click, then exit
|
||||||
if (rmb) {
|
if (rmb) {
|
||||||
const graphBounds = graph?.div()?.getBoundingClientRect();
|
const graphBounds = graph?.getBoundingClientRect();
|
||||||
if (!graphBounds) return;
|
if (!graphBounds) return;
|
||||||
nodeListLocation = {
|
nodeListLocation = {
|
||||||
x: Math.round(((e.clientX - graphBounds.x) / transform.scale - transform.x) / GRID_SIZE),
|
x: Math.round(((e.clientX - graphBounds.x) / transform.scale - transform.x) / GRID_SIZE),
|
||||||
|
|
@ -567,20 +566,18 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LayoutRow
|
<div
|
||||||
class="graph"
|
class="graph"
|
||||||
bind:this={graph}
|
bind:this={graph}
|
||||||
on:wheel={scroll}
|
on:wheel|nonpassive={scroll}
|
||||||
on:pointerdown={pointerDown}
|
on:pointerdown={pointerDown}
|
||||||
on:pointermove={pointerMove}
|
on:pointermove={pointerMove}
|
||||||
on:pointerup={pointerUp}
|
on:pointerup={pointerUp}
|
||||||
on:dblclick={doubleClick}
|
on:dblclick={doubleClick}
|
||||||
styles={{
|
style:--grid-spacing={`${gridSpacing}px`}
|
||||||
"--grid-spacing": `${gridSpacing}px`,
|
style:--grid-offset-x={`${transform.x * transform.scale}px`}
|
||||||
"--grid-offset-x": `${transform.x * transform.scale}px`,
|
style:--grid-offset-y={`${transform.y * transform.scale}px`}
|
||||||
"--grid-offset-y": `${transform.y * transform.scale}px`,
|
style:--dot-radius={`${dotRadius}px`}
|
||||||
"--dot-radius": `${dotRadius}px`,
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<!-- Right click menu for adding nodes -->
|
<!-- Right click menu for adding nodes -->
|
||||||
{#if nodeListLocation}
|
{#if nodeListLocation}
|
||||||
|
|
@ -595,7 +592,7 @@
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
|
<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
|
||||||
<div class="list-nodes" style={`height: ${ADD_NODE_MENU_HEIGHT}px;`} on:wheel|stopPropagation>
|
<div class="list-nodes" style={`height: ${ADD_NODE_MENU_HEIGHT}px;`} on:wheel|passive|stopPropagation>
|
||||||
{#each nodeCategories as nodeCategory}
|
{#each nodeCategories as nodeCategory}
|
||||||
<details style="display: flex; flex-direction: column;" open={nodeCategory[1].open}>
|
<details style="display: flex; flex-direction: column;" open={nodeCategory[1].open}>
|
||||||
<summary>
|
<summary>
|
||||||
|
|
@ -802,12 +799,15 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</LayoutRow>
|
</div>
|
||||||
|
|
||||||
<style lang="scss" global>
|
<style lang="scss" global>
|
||||||
.graph {
|
.graph {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
> img {
|
> img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
class:emphasized
|
class:emphasized
|
||||||
class:disabled
|
class:disabled
|
||||||
class:sharp-right-corners={sharpRightCorners}
|
class:sharp-right-corners={sharpRightCorners}
|
||||||
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
|
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
|
||||||
title={tooltip}
|
title={tooltip}
|
||||||
data-emphasized={emphasized || undefined}
|
data-emphasized={emphasized || undefined}
|
||||||
data-disabled={disabled || undefined}
|
data-disabled={disabled || undefined}
|
||||||
|
|
|
||||||
|
|
@ -93,10 +93,6 @@
|
||||||
background: var(--icon-expand-collapse-arrow-hover);
|
background: var(--icon-expand-collapse-arrow-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-label {
|
|
||||||
color: var(--color-f-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .body {
|
+ .body {
|
||||||
border: 1px solid var(--color-4-dimgray);
|
border: 1px solid var(--color-4-dimgray);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,12 +75,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered
|
// Hovered while unchecked
|
||||||
&:hover .checkbox-box {
|
&:hover .checkbox-box {
|
||||||
background: var(--color-6-lowergray);
|
background: var(--color-6-lowergray);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Disabled
|
// Disabled while unchecked
|
||||||
&.disabled .checkbox-box {
|
&.disabled .checkbox-box {
|
||||||
background: var(--color-4-dimgray);
|
background: var(--color-4-dimgray);
|
||||||
}
|
}
|
||||||
|
|
@ -96,12 +96,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered
|
// Hovered while checked
|
||||||
&:hover .checkbox-box {
|
&:hover .checkbox-box {
|
||||||
background: var(--color-f-white);
|
background: var(--color-f-white);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered
|
// Disabled while checked
|
||||||
&.disabled .checkbox-box {
|
&.disabled .checkbox-box {
|
||||||
background: var(--color-8-uppergray);
|
background: var(--color-8-uppergray);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -200,11 +200,11 @@
|
||||||
{@const group = groups[selectedNodeIndex]}
|
{@const group = groups[selectedNodeIndex]}
|
||||||
{#each [0, 1] as i}
|
{#each [0, 1] as i}
|
||||||
<path d={`M ${group.anchor[0]} ${1 - group.anchor[1]} L ${group.handles[i][0]} ${1 - group.handles[i][1]}`} class="handle-line" />
|
<path d={`M ${group.anchor[0]} ${1 - group.anchor[1]} L ${group.handles[i][0]} ${1 - group.handles[i][1]}`} class="handle-line" />
|
||||||
<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
|
<circle cx={group.handles[i][0]} cy={1 - group.handles[i][1]} class="manipulator handle" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, -i - 1)} />
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
{#each groups as group, i}
|
{#each groups as group, i}
|
||||||
<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
|
<circle cx={group.anchor[0]} cy={1 - group.anchor[1]} class="manipulator" r="0.02" on:pointerdown={(e) => handleManipulatorPointerDown(e, i)} />
|
||||||
{/each}
|
{/each}
|
||||||
</svg>
|
</svg>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
@ -234,7 +234,6 @@
|
||||||
fill: var(--color-1-nearblack);
|
fill: var(--color-1-nearblack);
|
||||||
stroke: var(--color-e-nearwhite);
|
stroke: var(--color-e-nearwhite);
|
||||||
stroke-width: 0.01;
|
stroke-width: 0.01;
|
||||||
r: 0.02;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
fill: var(--color-f-white);
|
fill: var(--color-f-white);
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
<LayoutRow
|
<LayoutRow
|
||||||
class="dropdown-box"
|
class="dropdown-box"
|
||||||
classes={{ disabled, open, "sharp-right-corners": sharpRightCorners }}
|
classes={{ disabled, open, "sharp-right-corners": sharpRightCorners }}
|
||||||
styles={{ minWidth: `${minWidth}px` }}
|
styles={{ "min-width": `${minWidth}px` }}
|
||||||
{tooltip}
|
{tooltip}
|
||||||
on:click={() => !disabled && (open = true)}
|
on:click={() => !disabled && (open = true)}
|
||||||
on:blur={unFocusDropdownBox}
|
on:blur={unFocusDropdownBox}
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@
|
||||||
<LayoutRow
|
<LayoutRow
|
||||||
class="dropdown-box"
|
class="dropdown-box"
|
||||||
classes={{ disabled, "sharp-right-corners": sharpRightCorners }}
|
classes={{ disabled, "sharp-right-corners": sharpRightCorners }}
|
||||||
styles={{ minWidth: `${minWidth}px` }}
|
styles={{ "min-width": `${minWidth}px` }}
|
||||||
{tooltip}
|
{tooltip}
|
||||||
tabindex={disabled ? -1 : 0}
|
tabindex={disabled ? -1 : 0}
|
||||||
on:click={toggleOpen}
|
on:click={toggleOpen}
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
class:italic
|
class:italic
|
||||||
class:multiline
|
class:multiline
|
||||||
class:table-align={tableAlign}
|
class:table-align={tableAlign}
|
||||||
style:min-width={minWidth > 0 ? `${minWidth}px` : undefined}
|
style:min-width={minWidth > 0 ? `${minWidth}px` : ""}
|
||||||
style={`${styleName} ${extraStyles}`.trim() || undefined}
|
style={`${styleName} ${extraStyles}`.trim() || undefined}
|
||||||
title={tooltip}
|
title={tooltip}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@ import {
|
||||||
UpdateWorkingColorsLayout,
|
UpdateWorkingColorsLayout,
|
||||||
UpdateGraphViewOverlayButtonLayout,
|
UpdateGraphViewOverlayButtonLayout,
|
||||||
UpdateNodeGraphBarLayout,
|
UpdateNodeGraphBarLayout,
|
||||||
|
UpdateDocumentTransform,
|
||||||
|
TriggerGraphViewOverlay,
|
||||||
} from "@graphite/wasm-communication/messages";
|
} from "@graphite/wasm-communication/messages";
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||||
|
|
@ -26,6 +28,10 @@ export function createDocumentState(editor: Editor) {
|
||||||
graphViewOverlayButtonLayout: defaultWidgetLayout(),
|
graphViewOverlayButtonLayout: defaultWidgetLayout(),
|
||||||
workingColorsLayout: defaultWidgetLayout(),
|
workingColorsLayout: defaultWidgetLayout(),
|
||||||
nodeGraphBarLayout: defaultWidgetLayout(),
|
nodeGraphBarLayout: defaultWidgetLayout(),
|
||||||
|
// Graph view overlay
|
||||||
|
graphViewOverlayOpen: false,
|
||||||
|
// CSS transform property to be applied to artwork
|
||||||
|
artworkTransform: "",
|
||||||
});
|
});
|
||||||
const { subscribe, update } = state;
|
const { subscribe, update } = state;
|
||||||
|
|
||||||
|
|
@ -100,6 +106,21 @@ export function createDocumentState(editor: Editor) {
|
||||||
// Request a resize event so the viewport gets measured now that the canvas is populated and positioned correctly
|
// Request a resize event so the viewport gets measured now that the canvas is populated and positioned correctly
|
||||||
window.dispatchEvent(new CustomEvent("resize"));
|
window.dispatchEvent(new CustomEvent("resize"));
|
||||||
});
|
});
|
||||||
|
editor.subscriptions.subscribeJsMessage(UpdateDocumentTransform, async (data) => {
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
update((state) => {
|
||||||
|
state.artworkTransform = data.transform;
|
||||||
|
return state;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// Show or hide the graph view overlay
|
||||||
|
editor.subscriptions.subscribeJsMessage(TriggerGraphViewOverlay, (triggerGraphViewOverlay) => {
|
||||||
|
update((state) => {
|
||||||
|
state.graphViewOverlayOpen = triggerGraphViewOverlay.open;
|
||||||
|
return state;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
subscribe,
|
subscribe,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue