if shape.shape=='circle' then h=w end -- circles are always round. ellipse can stretch
local div=mw.html.create ('div')
if tshape then -- Add tooltip if needed
div:attr('title',row.title)
end
div:css('position', "absolute")
if shape.outlineWidth ~= "" then
div:css('outline', shape.outlineWidth.." "..shape.outlineStyle.." "..getColor(shape.outlineColor))
end
if shape.shapeAngle ~= "0deg" then
div:css('transform',"rotate("..shape.shapeAngle..")")
end
div
:css('top', tostring(row.gridy-h/2).."px")
:css('', tostring(row.gridx-w/2).."px")
:css('width', tostring(w).."px")
:css('height', tostring(h).."px")
:css('-radius', "50%")
:css('background-color', getColor(shape.shapeColor) )
:css('color', 'inherit')
table.insert(result,tostring(div))
end  
local function makeRuleA(result,row,shape)
local w,h,r=getsize(shape.shapeSize) -- = width,height,rounding
local oWid=tonumber(string.match(shape.outlineWidth,"[%.%d]+"))
local lineV=0
if shape.shape=='rulea' then lineV=oWid*3+16 end
table.insert(result,"<div style=\"display:inline-block; position: absolute") -- create a square transparent container, which will rotate line and arrow together
table.insert(result,"; top:"..tostring(row.gridy - w/2).."px")
table.insert(result,"; :"..tostring(row.gridx - w/2).."px")
table.insert(result,"; width:"..tostring(w).."px")
table.insert(result,"; height:"..tostring(w).."px; background:transparent; color:inherit;")
table.insert(result,"; transform: rotate( "..tostring(tonumber(string.match(shape.shapeAngle,"[%.%-?%d]+")) - 90).."deg);\">" )
table.insert(result,"<div style=\"display:inline-block; position: absolute") -- put the line (as a -) across the container
table.insert(result,"; top:"..tostring(lineV).."px")
table.insert(result,"; :"..tostring((w - oWid )/2).."px; width: ")
table.insert(result,"; height: "..tostring(w -lineV).."px")
table.insert(result,"; -: "..shape.outlineWidth.." "..shape.outlineStyle.." "..getColor(shape.outlineColor))
table.insert(result,"; background:transparent; color:inherit;\"></div>")
if shape.shape=='rulea' then
table.insert(result,"<div style=\"display:inline-block; position: absolute; top: ") --and add arrow head
table.insert(result,"; :"..tostring(w/2-( oWid/2)-oWid*0.55-2).."px; width: 0; height: 0; outline-width: ")
table.insert(result,"; -: "..tostring(oWid*1.1+2).."px solid transparent")
table.insert(result,"; -: "..tostring(oWid*1.1+2).."px solid transparent")
table.insert(result,"; -bottom: "..tostring(oWid*3+16).."px solid "..getColor(shape.outlineColor).."\"></div>")
end
table.insert(result,"</div>")
end  
local function makeCurveA(result,row,shape) -- draw a curve with Arrow -----
local w,h=getsize(shape.shapeSize) -- = width,height
local oWid=tonumber(string.match(shape.outlineWidth,"[%.%d]+"))
local Angle=tonumber(string.match(shape.shapeAngle,"[%.%d]+"))
table.insert(result,'<div>')
else table.insert(result,'transform: rotate( '..tostring(Angle -62)..'deg);">')
end
table.insert(result,'<div></div><div></div></div>')
end  
local function makeLineTo (result,x1,y1,x2,y2,oWid, oStyle, oCol,double)
table.insert(result,"<div style=\"display:inline-block; position: absolute;")
-- draw a line between x1,y1 and x2,y2, px-coords where 0,0 is centre of
-- Maths calculations thanks to ES
table.insert(result,": "..tostring(x1+( (x2-x1)/2) - (math.sqrt( ( x2-x1)^2 + (y2-y1)^2 )/2)-1).."px;")
table.insert(result,"top: "..tostring(y1+( ( y2-y1 )/2) ).."px;")
table.insert(result,"width: "..tostring(math.sqrt( (x2-x1 )^2 + ( y2-y1 )^2) ).."px;")
table.insert(result,"height: "..tostring(double).."px; background-color:transparent; color:inherit; ")
table.insert(result,"outline-width: 0; -bottom: "..oWid.." "..oStyle.." "..getColor(oCol)..";" )
if double>1 then table.insert(result,"-top: "..oWid.." "..oStyle.." "..getColor(oCol)..";" ) end
if x1==x2 then table.insert(result,"transform: rotate(90deg);")
else table.insert(result,"transform: rotate("..tostring(math.atan(( y2-y1)/( x2-x1 ) )*180/math.pi).."deg);\"></div>")
end
end  
local function makeClipPath(result,row,shape,outline,tshape) --tshape is a flag to show if the tooltip (title=) is wanted
-- return the text css div code to position and draw a shape occupying a specified clippath
if not pathshape[shape.shape] then
debugmsg(mw.addWarning('shape'..row.code..' = '..shape.shape..'. The shape name is not defined'))
return
end
local w,h,r=getsize(shape.shapeSize)
if string.match(shape.shape,"circle") or string.match(shape.shape,"square") then h=w end -- use ellipse and box for stretched shapes
local shifth,shiftv = 0,0
if string.match(shape.shape,"triangle") then
shiftv,shifth =tshift(shape.shapeAngle)
end
if outline then
local p=tonumber(string.match(shape.outlineWidth,"[%.%d]+")) or 0
w=w+p*2
h=h+p*2
end
table.insert(result,"<div ")
if tshape then -- Add tooltip if needed
table.insert(result," title=\""..row.title.."\" ")
end
table.insert(result,"style=\"display:inline-block; position: absolute; background-color:")
if outline then
table.insert(result,getColor(shape.outlineColor)) -- fill with outline colour, to make a 'base layer'
else
table.insert(result,getColor(shape.shapeColor))
end
table.insert(result,"; color:inherit; clip-path:path(nonzero, &#39;"..pathshape[shape.shape].."&#39;) ")
-- adds the required clippath data from the table of pathshape string literals
table.insert(result,"; top:"..tostring(row.gridy - 10 + h*shiftv).."px")
table.insert(result,"; :"..tostring(row.gridx - 10 + w*shifth).."px")
table.insert(result,"; width:") -- needs to be a path within a 20px20px box, and then rescales using size values to match other shape sizes
table.insert(result,"; height:; transform:scale("..tostring(w/16)..", "..tostring(h/16)..")")
if shape.shapeAngle ~= "0deg" then
table.insert(result," rotate("..shape.shapeAngle..")")
end
table.insert(result,"\"></div>")
end  
local function makeImage(result,row,shape)
local w,h,r=getsize(shape.shapeSize)
local image=shape.shapeFile
if not image or image=='' then image='Red pog.svg' end
local imagediv=mw.html.create ('div')
imagediv:css('position', "absolute")
if shape.shapeAngle ~= "0deg" then
imagediv:css('transform',"rotate("..shape.shapeAngle..")")
end
imagediv
:css('top', (row.gridy-1 + math.min(h/2-12,0) - h/2).."px") --File seems to adjust pos for small images
:css('', (row.gridx-1-w/2).."px")
:css('background-color', "transparent" )
:css('color','inherit')
:wikitext('')
table.insert(result,tostring(imagediv))
end  
local function makePhotoPanel(result,row,shape)
local h=row.ppheight
table.insert(result, '<div></div>')
if row.photoImage and row.photowidth >0 then
table.insert(result, '<div>')
table.insert(result,'</div>')
row.labelPos=''
end
end  
local function makePanelText(result, row, shape)
local w,h,r=getsize(shape.shapeSize)
local ty=tonumber(string.match(shape.textSZ or '11',"%d+") )
table.insert(result,'<div
", ""))+1)*1.1
table.insert(result,'top: '..tostring(row.gridy+w-(ty*bry))..'px;')
table.insert(result,': '..tostring(row.gridx+(w/2))..'px; text-align: ; width:max-content; transform: translateX(-50%);')
else -- or centre
local bry=(select(2, string.gsub(row.labelText,"
", ""))+1)*0.6
table.insert(result,'top: '..tostring(row.gridy+(h/2)-(ty*bry))..'px;')
table.insert(result,': '..tostring(row.gridx+(w/2))..'px; text-align: ; width:max-content; transform: translateX(-50%);')
end
if shape.textSP and shape.textSP ~='' then table.insert(result,"letter-spacing: "..shape.textSP..';') end
if shape.textLH and shape.textLH ~='120%' then table.insert(result,"line-height: "..shape.textLH..';') end
table.insert(result,"vertical-align: middle;\">"..row.labelText.."</div>")
end  
local function makeTextItem(result, row, shape, align, tlink, textItem, dotItem)
local w,h,r=getsize(shape.shapeSize)
table.insert(result,"<div ")
if row.title ~= "" then table.insert(result," title=\""..row.title.."\" ") end
local ty,bry,linkoffset = 0,0,0
local compy=0
local lh=tonumber(string.match(shape.textLH or '120',"%d+"))/100