Remove console spam (#1400)

* Remove console spam

* CSS Style

* Slight cleanup

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube 2023-08-28 00:12:32 +01:00 committed by GitHub
parent 226b96260c
commit e77782aadb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 61 additions and 77 deletions

View File

@ -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 => {

View File

@ -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));

View File

@ -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 {

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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 {

View File

@ -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;

View File

@ -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}

View File

@ -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);
} }

View File

@ -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);
} }

View File

@ -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);

View File

@ -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}

View File

@ -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}

View File

@ -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}
> >

View File

@ -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,