ponder.ooo
馃悕馃悕馃悕
1<script lang="ts">
2 import MessageDisplay from "../message_display.svelte";
3 import ScriptDisplay from "./script_display.svelte";
4 import Toggle from "../../general/toggle.svelte";
5 import TextDisplay from "./text_display.svelte";
6
7 export let message: ImageReference;
8
9 let title: PlainText;
10
11 let variableNames: {name: string, class: string}[] = [];
12
13 let specialNames = ["default", "increment", "decrement", "add", "subtract", "inspect", "dump"]
14
15 let props = {
16 context: "scope",
17 padding: 0.5
18 }
19
20 let src = "";
21 let alt = "";
22 let width = 0;
23 let height = 0;
24
25 $: {
26 if (message) {
27 src = "http://localhost:8000/png/" + message.source;
28 alt = message.alt;
29 width = message.width;
30 height = message.height;
31 }
32 }
33</script>
34
35<div class=container>
36 <img {src} {alt} style="width: {width}; height: {height};" />
37</div>
38
39<style>
40 .container {
41 position: relative;
42 line-height: 1.5;
43 }
44
45 .animate-open {
46 animation: open 0.5s ease-in-out;
47 width: calc(100% - 1px);
48 height: calc(100% - 1px);
49 border-top: 1px solid var(--pane-divider);
50 border-left: 1px solid var(--pane-divider);
51 top: 0;
52 margin: 0;
53 padding: 0;
54 line-height: 0;
55 }
56
57 .special {
58 color: var(--ficscript-method);
59 }
60
61 @keyframes open {
62 0% {
63 max-height: 0;
64 max-width: 0;
65 }
66 100% {
67 max-height: 500em;
68 max-width: 500em;
69 }
70 }
71
72 .scope-content-container {
73 display: inline-block;
74 position: relative;
75 margin: 0;
76 padding: 0;
77 border: 0;
78 width: 100%;
79 background-color: var(--code-editor-background);
80 }
81
82 .scope-content {
83 position: relative;
84 padding: 0;
85 margin: 0;
86 left: 0.5em;
87 width: calc(100% - 2px);
88 word-wrap: break-word;
89 overflow: auto;
90 white-space: pre-wrap;
91
92 color: var(--ficscript-variable);
93 }
94
95 /* Identical to scrollbar styling of script_input.svelte. consider extracting to site.css */
96 ::-webkit-scrollbar {
97 width: 0.5em;
98 position: absolute;
99 right: 0.5em;
100 }
101
102 ::-webkit-scrollbar-track {
103 background: #344;
104 cursor: pointer !important;
105 }
106
107 ::-webkit-scrollbar-thumb {
108 background: #788;
109 cursor: pointer !important;
110 }
111
112 ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-thumb:hover {
113 cursor: pointer !important;
114 user-select: none;
115 }
116</style>