fix: Handle Joyce Geometry Applet color specifications #33

Merged
glen merged 2 commits from color_spec into main 2023-09-25 22:44:45 +00:00
Showing only changes of commit 5ee77a1e3c - Show all commits

View File

@ -51,8 +51,9 @@ jQuery.getScript 'https://www.geogebra.org/apps/deployggb.js', =>
jApp.height, jApp.height,
appletOnLoad: (api: AppletObject) => appletOnLoad: (api: AppletObject) =>
elements: JoyceElements := {} elements: JoyceElements := {}
backgroundRGB := [255, 255, 255] as RGB
for child of jApp.children for child of jApp.children
dispatchJcommand api, child, elements dispatchJcommand api, child, elements, backgroundRGB
api.setCoordSystem -10, 10 + jApp.width, -10, 10 + jApp.height api.setCoordSystem -10, 10 + jApp.width, -10, 10 + jApp.height
api.setAxesVisible false, false api.setAxesVisible false, false
api.setGridVisible false api.setGridVisible false
@ -90,21 +91,26 @@ type XYZ = RGB
// api, consulting and extending by side effect the elements that are // api, consulting and extending by side effect the elements that are
// present in that applet // present in that applet
function dispatchJcommand( function dispatchJcommand(
api: AppletObject, param: Element, elements: JoyceElements): void api: AppletObject,
param: Element,
elements: JoyceElements
backgroundRGB: RGB): void
val := param.getAttribute 'value' val := param.getAttribute 'value'
unless val return unless val return
attr := param.getAttribute 'name' attr := param.getAttribute 'name'
backgroundHex .= '#FFFFFF'
switch attr switch attr
'background' 'background'
backgroundHex = `#${val}` backgroundHex := `#${val}`
api.setGraphicsOptions 1, bgColor: backgroundHex api.setGraphicsOptions 1, bgColor: backgroundHex
newback := colorsea(backgroundHex).rgb()
for i of [0..2]
backgroundRGB[i] = newback[i]
'title' 'title'
api.evalCommand `TitlePoint = Corner(1,1) api.evalCommand `TitlePoint = Corner(1,1)
Text("${val}", TitlePoint + (2,5))` Text("${val}", TitlePoint + (2,5))`
/e\[\d+\]/ /e\[\d+\]/
num := parseInt(attr.slice(2)) num := parseInt(attr.slice(2))
{commands, callbacks, parts} := jToG val, elements, num, backgroundHex {commands, callbacks, parts} := jToG val, elements, num, backgroundRGB
if commands.length if commands.length
lastTried .= 0 lastTried .= 0
if commands.filter((&)).every (cmd) => if commands.filter((&)).every (cmd) =>
@ -129,7 +135,7 @@ function jToG(
jCom: string, jCom: string,
elements: JoyceElements, elements: JoyceElements,
index: number, index: number,
backgroundHex: string): Commander backgroundRGB: RGB): Commander
[jname, klass, method, data, ...colors] := jCom.split ';' [jname, klass, method, data, ...colors] := jCom.split ';'
cmdr .= freshCommander() cmdr .= freshCommander()
unless klass in classHandler unless klass in classHandler
@ -169,7 +175,7 @@ function jToG(
else // we have to decorate else // we have to decorate
dimension .= cmdr.parts.findLastIndex .includes name dimension .= cmdr.parts.findLastIndex .includes name
cmdr.callbacks.push (api: AppletObject, parts: DimParts) => cmdr.callbacks.push (api: AppletObject, parts: DimParts) =>
trace := klass is 'polygon' trace := false // e.g., klass is 'polygon'
// Operate in order faces, lines, point, caption so that // Operate in order faces, lines, point, caption so that
// we can adjust components after setting overall color, etc. // we can adjust components after setting overall color, etc.
@ -184,11 +190,13 @@ function jToG(
console.log 'Hiding face', face if trace console.log 'Hiding face', face if trace
api.setVisible face, false api.setVisible face, false
else else
faceRGB := joyce2rgb(colors[3] or 'brighter', backgroundHex) faceRGB := joyce2rgb(colors[3] or 'brighter', backgroundRGB)
deep := ['circle', 'polygon', 'sector']
filling := deep.includes(klass) ? 0.7 : 0.2
for each face of parts[2] for each face of parts[2]
console.log 'Coloring face', face, 'to', colors[3] if trace console.log 'Coloring face', face, 'to', colors[3] if trace
api.setVisible face, true api.setVisible face, true
api.setFilling face, 0.3 api.setFilling face, filling
api.setColor face, ...faceRGB api.setColor face, ...faceRGB
// Lines default to black: // Lines default to black:
@ -198,8 +206,7 @@ function jToG(
console.log 'Hiding line', line if trace console.log 'Hiding line', line if trace
api.setVisible line, false api.setVisible line, false
else else
black: RGB := [0, 0, 0] lineRGB := joyce2rgb(colors[2] or 'black', backgroundRGB)
lineRGB := colors[2] ? joyce2rgb colors[2], backgroundHex : black
for each line of parts[1] for each line of parts[1]
console.log 'Coloring line', line, 'to', colors[2] if trace console.log 'Coloring line', line, 'to', colors[2] if trace
api.setVisible line, true api.setVisible line, true
@ -214,7 +221,7 @@ function jToG(
console.log 'Hiding point', point if trace console.log 'Hiding point', point if trace
api.setVisible point, false api.setVisible point, false
else if dimension is 0 or colors[1] // Need to color the points else if dimension is 0 or colors[1] // Need to color the points
ptRGB := colors[1] ? joyce2rgb colors[1], backgroundHex ptRGB := colors[1] ? joyce2rgb colors[1], backgroundRGB
: pointDefaultRGB name, method : pointDefaultRGB name, method
for each point of parts[0] for each point of parts[0]
console.log 'Coloring point', point, 'to', colors[1] if trace console.log 'Coloring point', point, 'to', colors[1] if trace
@ -251,7 +258,7 @@ function jToG(
unless parts[0].includes ex2 then ex2 = `Centroid(${ex2})` unless parts[0].includes ex2 then ex2 = `Centroid(${ex2})`
`(4*${ex1}+${ex2})/5` `(4*${ex1}+${ex2})/5`
api.evalCommand `${textName} = Text("${jname}", ${locationExpr})` api.evalCommand `${textName} = Text("${jname}", ${locationExpr})`
api.setColor textName, ...joyce2rgb colors[0], backgroundHex api.setColor textName, ...joyce2rgb colors[0], backgroundRGB
// and hide the underlying GeoGebra label // and hide the underlying GeoGebra label
api.setLabelVisible name, false api.setLabelVisible name, false
else if colors[0] else if colors[0]
@ -267,7 +274,6 @@ function jToG(
api.setLabelVisible name, show api.setLabelVisible name, show
// window[hideListener] = (arg) => // window[hideListener] = (arg) =>
// console.log('Hello', arg, 'disappearing', name)
// api.setVisible name, false // api.setVisible name, false
// api.registerObjectUpdateListener name, hideListener // api.registerObjectUpdateListener name, hideListener
if cmdr.ends // line or sector if cmdr.ends // line or sector
@ -283,22 +289,51 @@ function jToG(
function invisible(cname: string): boolean function invisible(cname: string): boolean
cname is '0' or cname is 'none' cname is '0' or cname is 'none'
function joyce2rgb(cname: string, backgroundHex: string): RGB function joyce2rgb(cname: string, backgroundRGB?: RGB): RGB
whiteRGB: RGB := [255, 255, 255]
bg: RGB := backgroundRGB or whiteRGB
switch cname switch cname
// RGB values from Duck Duck Go search on "[COLOR] rgb"
/black/i /black/i
[0,0,0] [0,0,0]
/blue/i
[0,0,255]
/cyan/i /cyan/i
[0,255,255] [0,255,255]
/darkgray/i
[128,128,128]
/^gray/i
[169,169,169]
/green/i
[0,255,0]
/lightgray/i /lightgray/i
[211,211,211] [211,211,211]
/magenta/i
[255,0,255]
/orange/i
[255,165,0]
/pink/i /pink/i
[255,192,203] [255,192,203]
/red/i /red/i
[255,0,0] [255,0,0]
/white/i
[255,255,255]
/yellow/i
[255,255,0]
/random/i
colorsea.random().lighten(40).rgb()
/background/i
bg
/brighter/i /brighter/i
colorsea(backgroundHex).lighten(20).rgb() colorsea(bg).lighten(30).rgb()
/darker/i /darker/i
colorsea(backgroundHex).darken(20).rgb() colorsea(bg).darken(20).rgb()
/^[0-9A-F]{6}$/i
colorsea(`#${cname}`).rgb()
/^\d+,\d+,\d+$/
// HSB specification
[H,S,B] := cname.split(',').map (s) => parseInt s
colorsea.hsv(H, S, B).rgb()
else else
console.log 'Could not parse color:', cname console.log 'Could not parse color:', cname
[128, 128, 128] [128, 128, 128]
@ -307,10 +342,10 @@ function pointDefaultRGB(name: string, method: string): RGB
// Need to short-circuit with green for pivot point, once that is implemented // Need to short-circuit with green for pivot point, once that is implemented
switch method switch method
'free' 'free'
[255, 0, 0] joyce2rgb 'red'
/.*[Ss]lider$/ /.*[Ss]lider$/
[255, 165, 0] joyce2rgb 'orange'
else [0,0,0] else joyce2rgb 'black'
function geoname(jname: JoyceName, elements: JoyceElements): GeoName function geoname(jname: JoyceName, elements: JoyceElements): GeoName
numCode .= 0n numCode .= 0n