Hi,
We've developed a HTML panel extension for AE.
This is a React application hosted inside an iFrame in the extension's index.html docuemnt.
Since upgrading to CEP 11 ( > 18.2.1, >= 22.0.0) we encounter a problem with pointer events and scrolling.
Things work well for Windows, but on a MacOS machine, scrolling stopped working, mouse curser doesn't change according to css rules (doesn't change to pointer for example).
Very frustrating and seems like a CEP bug - If I console.log wheel events details, they exist and handled in the react app, but the extension browser doesn't respond to them.
One possible hint for the problem might be found in this issue https://github.com/adobe/react-spectrum/issues/854, which sounds similar in a few aspects.
However, this issue was closed with a workaround that unfortunaetly doesn't work for us.
Attached below are 2 video recordings -
One that works as expected in AE v18.2.1
and another that doesn't work in AE v22.0.1
Also added the devtools in the recordings where I show the scroll events being printed to the console.
In addition, see our bundle files below: index.html, index.js and manifest.xml
I need help!
Thanks a lot, Ishay
index.js
======
const csInterface = new CSInterface();
const iframeElem = document.getElementsByTagName('iframe')[0];
const hostEventHandlers = {};
function evalScript(e) {
csInterface.evalScript(e.data.script, function (response) {
iframeElem.contentWindow.postMessage(
{
type: e.data.type,
payload:
response === ''
? ''
: response === 'undefined'
? undefined
: JSON.parse(response),
id: e.data.id,
},
'*'
);
});
}
function runCSInterfaceCommand(e) {
const response = csInterface[e.data.csInterfaceCommand](e.data.args);
iframeElem.contentWindow.postMessage(
{
type: e.data.type,
payload: response,
id: e.data.id,
},
'*'
);
}
function addHostEventListener(e) {
const handler = (payload) => {
iframeElem.contentWindow.postMessage(
{
type: e.data.type,
id: e.data.id,
payload,
},
'*'
);
};
hostEventHandlers[e.data.id] = { event: e.data.event, handler };
csInterface.addEventListener(e.data.event, handler);
}
function removeHostEventListener(e) {
const { event, handler } = hostEventHandlers[e.data.id];
csInterface.removeEventListener(event, handler);
}
(function () {
window.addEventListener('message', (e) => {
switch (e.data.type) {
case 'hostScript':
evalScript(e);
break;
case 'addHostEventListener':
addHostEventListener(e);
break;
case 'removeHostEventListener':
removeHostEventListener(e);
break;
case 'runCSInterfaceCommand':
runCSInterfaceCommand(e);
break;
default:
break;
}
});
})();
--------------------------------------------------
index.html
========
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Clinch After Effects Extension</title>
</head>
<body style="margin: 0; overflow: hidden; padding: 0">
<iframe
id="iframe"
frameborder="0"
style="
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
"
height="100%"
width="100%"
></iframe>
<script>
var iframe = document.getElementById('iframe');
</script>
<script type="text/javascript" src="CSInterface.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
----------------------------------------------------------------------------------
manifest.xml
=========
<?xml version='1.0' encoding='UTF-8'?>
<!-- 1) -->
<ExtensionManifest ExtensionBundleId="local.merlin.clinch.co" ExtensionBundleVersion="1.0.0" Version="10.0"
<ExtensionList>
<Extension Id="local.com.jet.panel" Version="1.0.0" />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<Host Version="15.0" Name="AEFT" />
</HostList>
<LocaleList>
<Locale Code="All" />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="10.0" />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="local.com.jet.panel">
<DispatchInfo>
<Resources>
<MainPath>./client/index.html</MainPath>
<ScriptPath />
<CEFCommandLine />
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>[LOCAL] Jet</Menu>
<Geometry>
<Size>
<Height>600</Height>
<Width>800</Width>
</Size>
</Geometry>
<Icons />
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
AdChoices